mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/header/MozillaAccountMenuButton.kt

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 package org.mozilla.fenix.components.menu.compose.header
   6
   7 import androidx.compose.foundation.background
   8 import androidx.compose.foundation.clickable
   9 import androidx.compose.foundation.layout.Arrangement
  10 import androidx.compose.foundation.layout.Column
  11 import androidx.compose.foundation.layout.Row
  12 import androidx.compose.foundation.layout.Spacer
  13 import androidx.compose.foundation.layout.defaultMinSize
  14 import androidx.compose.foundation.layout.padding
  15 import androidx.compose.foundation.layout.width
  16 import androidx.compose.foundation.shape.RoundedCornerShape
  17 import androidx.compose.material.Icon
  18 import androidx.compose.material.Text
  19 import androidx.compose.runtime.Composable
  20 import androidx.compose.ui.Alignment
  21 import androidx.compose.ui.Modifier
  22 import androidx.compose.ui.draw.clip
  23 import androidx.compose.ui.res.painterResource
  24 import androidx.compose.ui.res.stringResource
  25 import androidx.compose.ui.tooling.preview.Preview
  26 import androidx.compose.ui.unit.dp
  27 import mozilla.components.service.fxa.store.Account
  28 import org.mozilla.fenix.R
  29 import org.mozilla.fenix.components.accounts.AccountState
  30 import org.mozilla.fenix.components.accounts.AccountState.AUTHENTICATED
  31 import org.mozilla.fenix.components.accounts.AccountState.NEEDS_REAUTHENTICATION
  32 import org.mozilla.fenix.components.accounts.AccountState.NO_ACCOUNT
  33 import org.mozilla.fenix.compose.annotation.LightDarkPreview
  34 import org.mozilla.fenix.theme.FirefoxTheme
  35 import org.mozilla.fenix.theme.Theme
  36
  37 private val BUTTON_HEIGHT = 56.dp
  38 private val BUTTON_SHAPE = RoundedCornerShape(size = 8.dp)
  39
  40 @Composable
  41 internal fun MozillaAccountMenuButton(
  42     account: Account?,
  43     accountState: AccountState,
  44     onSignInButtonClick: () -> Unit,
  45     modifier: Modifier = Modifier,
  46 ) {
  47     Row(
  48         modifier = modifier
  49             .background(
  50                 color = FirefoxTheme.colors.layer3,
  51                 shape = BUTTON_SHAPE,
  52             )
  53             .clip(shape = BUTTON_SHAPE)
  54             .clickable { onSignInButtonClick() }
  55             .defaultMinSize(minHeight = BUTTON_HEIGHT),
  56         verticalAlignment = Alignment.CenterVertically,
  57     ) {
  58         Spacer(modifier = Modifier.width(4.dp))
  59
  60         AvatarIcon()
  61
  62         Column(
  63             modifier = Modifier
  64                 .padding(horizontal = 8.dp)
  65                 .weight(1f),
  66         ) {
  67             when (accountState) {
  68                 NO_ACCOUNT -> {
  69                     Text(
  70                         text = stringResource(id = R.string.browser_menu_sign_in),
  71                         color = FirefoxTheme.colors.textSecondary,
  72                         maxLines = 1,
  73                         style = FirefoxTheme.typography.headline7,
  74                     )
  75
  76                     Text(
  77                         text = stringResource(id = R.string.browser_menu_sign_in_caption),
  78                         color = FirefoxTheme.colors.textSecondary,
  79                         maxLines = 2,
  80                         style = FirefoxTheme.typography.caption,
  81                     )
  82                 }
  83
  84                 NEEDS_REAUTHENTICATION -> {
  85                     Text(
  86                         text = stringResource(id = R.string.browser_menu_sign_back_in_to_sync),
  87                         color = FirefoxTheme.colors.textSecondary,
  88                         maxLines = 1,
  89                         style = FirefoxTheme.typography.headline7,
  90                     )
  91
  92                     Text(
  93                         text = stringResource(id = R.string.browser_menu_syncing_paused_caption),
  94                         color = FirefoxTheme.colors.textWarning,
  95                         maxLines = 2,
  96                         style = FirefoxTheme.typography.caption,
  97                     )
  98                 }
  99
 100                 AUTHENTICATED -> {
 101                     Text(
 102                         text = account?.displayName ?: account?.email
 103                             ?: stringResource(id = R.string.browser_menu_account_settings),
 104                         color = FirefoxTheme.colors.textSecondary,
 105                         maxLines = 1,
 106                         style = FirefoxTheme.typography.headline7,
 107                     )
 108                 }
 109             }
 110         }
 111
 112         if (accountState == NEEDS_REAUTHENTICATION) {
 113             Icon(
 114                 painter = painterResource(R.drawable.mozac_ic_warning_fill_24),
 115                 contentDescription = null,
 116                 tint = FirefoxTheme.colors.iconWarning,
 117             )
 118
 119             Spacer(modifier = Modifier.width(8.dp))
 120         }
 121     }
 122 }
 123
 124 @Composable
 125 private fun AvatarIcon() {
 126     Icon(
 127         painter = painterResource(id = R.drawable.mozac_ic_avatar_circle_24),
 128         contentDescription = null,
 129         modifier = Modifier
 130             .background(
 131                 color = FirefoxTheme.colors.layer2,
 132                 shape = RoundedCornerShape(size = 24.dp),
 133             )
 134             .padding(all = 4.dp),
 135         tint = FirefoxTheme.colors.iconSecondary,
 136     )
 137 }
 138
 139 @Composable
 140 private fun MenuHeaderPreviewContent() {
 141     Column(
 142         modifier = Modifier
 143             .background(color = FirefoxTheme.colors.layer2)
 144             .padding(all = 16.dp),
 145         verticalArrangement = Arrangement.spacedBy(16.dp),
 146     ) {
 147         MozillaAccountMenuButton(
 148             account = null,
 149             accountState = NO_ACCOUNT,
 150             onSignInButtonClick = {},
 151         )
 152
 153         MozillaAccountMenuButton(
 154             account = null,
 155             accountState = NEEDS_REAUTHENTICATION,
 156             onSignInButtonClick = {},
 157         )
 158
 159         MozillaAccountMenuButton(
 160             account = Account(
 161                 uid = "testUID",
 162                 avatar = null,
 163                 email = "test@example.com",
 164                 displayName = "test profile",
 165                 currentDeviceId = null,
 166                 sessionToken = null,
 167             ),
 168             accountState = AUTHENTICATED,
 169             onSignInButtonClick = {},
 170         )
 171
 172         MozillaAccountMenuButton(
 173             account = Account(
 174                 uid = "testUID",
 175                 avatar = null,
 176                 email = "test@example.com",
 177                 displayName = null,
 178                 currentDeviceId = null,
 179                 sessionToken = null,
 180             ),
 181             accountState = AUTHENTICATED,
 182             onSignInButtonClick = {},
 183         )
 184
 185         MozillaAccountMenuButton(
 186             account = Account(
 187                 uid = "testUID",
 188                 avatar = null,
 189                 email = null,
 190                 displayName = null,
 191                 currentDeviceId = null,
 192                 sessionToken = null,
 193             ),
 194             accountState = AUTHENTICATED,
 195             onSignInButtonClick = {},
 196         )
 197     }
 198 }
 199
 200 @LightDarkPreview
 201 @Composable
 202 private fun MenuHeaderPreview() {
 203     FirefoxTheme {
 204         MenuHeaderPreviewContent()
 205     }
 206 }
 207
 208 @Preview
 209 @Composable
 210 private fun MenuHeaderPrivatePreview() {
 211     FirefoxTheme(theme = Theme.Private) {
 212         MenuHeaderPreviewContent()
 213     }
 214 }