fix: cập nhật giao diện các màn hình authentication

pass-with-high-score · Dec 29, 2024 · fa7982a · fa7982a
1 parent a7cf925
commit fa7982a
Show file tree

Hide file tree

Showing 22 changed files with 256 additions and 265 deletions.
diff --git a/app/release/app-release.apk b/app/release/app-release.apk
diff --git a/app/release/baselineProfiles/0/app-release.dm b/app/release/baselineProfiles/0/app-release.dm
diff --git a/app/release/baselineProfiles/1/app-release.dm b/app/release/baselineProfiles/1/app-release.dm
diff --git a/app/src/main/java/com/pwhs/quickmem/App.kt b/app/src/main/java/com/pwhs/quickmem/App.kt
@@ -19,7 +19,6 @@ class App : Application() {
             val policy = StrictMode.ThreadPolicy.Builder()
                 .detectAll()
                 .penaltyLog()
-                .penaltyDialog()
                 .build()
             StrictMode.setThreadPolicy(policy)
         }

diff --git a/app/src/main/java/com/pwhs/quickmem/presentation/auth/component/AuthTextField.kt b/app/src/main/java/com/pwhs/quickmem/presentation/auth/component/AuthTextField.kt
@@ -2,7 +2,10 @@ package com.pwhs.quickmem.presentation.auth.component
 
 import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -21,8 +24,13 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.painterResource
@@ -53,7 +61,7 @@ fun AuthTextField(
     onClick: (() -> Unit)? = null,
     @StringRes error: Int? = null,
     imeAction: ImeAction = ImeAction.Next,
-    onDone: () -> Unit = {}
+    onDone: () -> Unit = {},
 ) {
     var showPassword by rememberSaveable { mutableStateOf(false) }
     val keyboardController = LocalSoftwareKeyboardController.current
@@ -93,12 +101,25 @@ fun AuthTextField(
             ),
             leadingIcon = {
                 iconId?.let {
-                    Icon(
-                        painter = painterResource(id = iconId),
-                        contentDescription = contentDescription,
-                        modifier = Modifier.size(24.dp),
-                        tint = colorScheme.onSurface
-                    )
+                    Box(
+                        contentAlignment = Alignment.Center,
+                        modifier = Modifier
+                            .size(30.dp)
+                            .clip(shapes.extraLarge)
+                            .shadow(
+                                elevation = 2.dp,
+                                shape = shapes.extraLarge
+                            )
+                            .background(colorScheme.surface, shapes.extraLarge)
+                    ) {
+                        Image(
+                            painter = painterResource(id = iconId),
+                            contentDescription = contentDescription,
+                            modifier = Modifier.size(24.dp),
+                            colorFilter = ColorFilter.tint(colorScheme.onSurface),
+                            contentScale = ContentScale.Crop
+                        )
+                    }
                 }
             },
             trailingIcon = {

diff --git a/app/src/main/java/com/pwhs/quickmem/presentation/auth/component/AuthTopAppBar.kt b/app/src/main/java/com/pwhs/quickmem/presentation/auth/component/AuthTopAppBar.kt
@@ -2,11 +2,11 @@ package com.pwhs.quickmem.presentation.auth.component
 
 import androidx.compose.material.icons.Icons.AutoMirrored.Filled
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material3.CenterAlignedTopAppBar
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.IconButtonDefaults.iconButtonColors
-import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults.topAppBarColors
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
@@ -19,8 +19,9 @@ import com.pwhs.quickmem.ui.theme.QuickMemTheme
 @Composable
 fun AuthTopAppBar(
     onClick: () -> Unit = {},
+    title: @Composable () -> Unit = {},
 ) {
-    TopAppBar(
+    CenterAlignedTopAppBar(
         colors = topAppBarColors(
             containerColor = Color.Transparent,
         ),
@@ -29,20 +30,19 @@ fun AuthTopAppBar(
                 onClick = onClick,
                 colors = iconButtonColors(
                     contentColor = Color.White
-                )
+                ),
             ) {
                 Icon(
                     imageVector = Filled.ArrowBack,
                     contentDescription = stringResource(R.string.txt_back),
                 )
             }
         },
-        title = {
-        },
+        title = title,
     )
 }
 
-@Preview(showBackground = true)
+@Preview(showSystemUi = true)
 @Composable
 private fun AuthTopAppBarPreview() {
     QuickMemTheme {

diff --git a/...a/com/pwhs/quickmem/presentation/auth/forgot_password/send_email/SendVerifyEmailScreen.kt b/...a/com/pwhs/quickmem/presentation/auth/forgot_password/send_email/SendVerifyEmailScreen.kt
@@ -6,9 +6,7 @@ import androidx.compose.animation.core.tween
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
@@ -28,6 +26,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -115,7 +114,19 @@ private fun SendVerifyEmail(
         modifier = modifier.gradientBackground(),
         containerColor = Color.Transparent,
         topBar = {
-            AuthTopAppBar(onClick = onNavigationIconClick)
+            AuthTopAppBar(
+                onClick = onNavigationIconClick,
+                title = {
+                    Text(
+                        text = stringResource(id = R.string.txt_forgot_your_password),
+                        fontWeight = FontWeight.Bold,
+                        color = Color.White,
+                        textAlign = TextAlign.Center,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                    )
+                },
+            )
         }
     ) { innerPadding ->
         Box {
@@ -125,27 +136,14 @@ private fun SendVerifyEmail(
                     .fillMaxSize()
                     .padding(16.dp)
                     .verticalScroll(scrollState)
-                    .padding(top = 40.dp)
                     .imePadding(),
                 verticalArrangement = Arrangement.Top,
                 horizontalAlignment = Alignment.CenterHorizontally
             ) {
-                Spacer(modifier = Modifier.height(26.dp))
-                Text(
-                    text = stringResource(id = R.string.txt_forgot_your_password),
-                    style = typography.headlineLarge.copy(
-                        fontWeight = FontWeight.Bold,
-                        fontSize = 22.sp,
-                        color = colorScheme.primary
-                    ),
-                    textAlign = TextAlign.Center,
-                    modifier = Modifier.padding(horizontal = 16.dp)
-                )
-
                 AuthTextField(
                     value = email,
                     onValueChange = onEmailChanged,
-                    label = stringResource(id = R.string.txt_email_address),
+                    label = stringResource(id = R.string.txt_enter_your_email),
                     iconId = R.drawable.ic_email,
                     contentDescription = stringResource(id = R.string.txt_email),
                     type = TextFieldType.EMAIL,
@@ -154,6 +152,16 @@ private fun SendVerifyEmail(
                     onDone = onResetClick
                 )
 
+                Text(
+                    text = stringResource(id = R.string.txt_reset_password_description),
+                    style = typography.bodyMedium.copy(
+                        fontSize = 16.sp,
+                        color = colorScheme.onSurface,
+                        textAlign = TextAlign.Start
+                    ),
+                    modifier = Modifier.padding(top = 16.dp, bottom = 10.dp)
+                )
+
                 AuthButton(
                     text = stringResource(id = R.string.txt_reset_password),
                     onClick = onResetClick,
@@ -168,6 +176,7 @@ private fun SendVerifyEmail(
     }
 }
 
+@Preview(showSystemUi = true, locale = "vi")
 @Preview(showSystemUi = true)
 @Composable
 fun PreviewForgotPasswordVerifyEmailScreen() {

diff --git a/.../pwhs/quickmem/presentation/auth/forgot_password/set_new_password/SetNewPasswordScreen.kt b/.../pwhs/quickmem/presentation/auth/forgot_password/set_new_password/SetNewPasswordScreen.kt
@@ -6,15 +6,12 @@ import androidx.compose.animation.core.tween
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.MaterialTheme.colorScheme
-import androidx.compose.material3.MaterialTheme.typography
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -28,9 +25,9 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import androidx.hilt.navigation.compose.hiltViewModel
 import com.pwhs.quickmem.R
 import com.pwhs.quickmem.core.data.enums.TextFieldType
@@ -54,7 +51,7 @@ import com.ramcosta.composedestinations.navigation.DestinationsNavigator
 fun SetNewPasswordScreen(
     modifier: Modifier = Modifier,
     navigator: DestinationsNavigator,
-    viewModel: SetNewPasswordViewModel = hiltViewModel()
+    viewModel: SetNewPasswordViewModel = hiltViewModel(),
 ) {
     val uiState = viewModel.uiState.collectAsState()
     val context = LocalContext.current
@@ -115,11 +112,11 @@ private fun SetNewPassword(
     onNavigationIconClick: () -> Unit = {},
     password: String = "",
     confirmPassword: String = "",
-   @StringRes passwordError: Int? = null,
-   @StringRes confirmPasswordError: Int? = null,
+    @StringRes passwordError: Int? = null,
+    @StringRes confirmPasswordError: Int? = null,
     onPasswordChanged: (String) -> Unit = {},
     onConfirmPasswordChanged: (String) -> Unit = {},
-    onSubmitClick: () -> Unit = {}
+    onSubmitClick: () -> Unit = {},
 ) {
     val imeState = rememberImeState()
     val scrollState = rememberScrollState()
@@ -133,7 +130,19 @@ private fun SetNewPassword(
         modifier = modifier.gradientBackground(),
         containerColor = Color.Transparent,
         topBar = {
-            AuthTopAppBar(onClick = onNavigationIconClick)
+            AuthTopAppBar(
+                onClick = onNavigationIconClick,
+                title = {
+                    Text(
+                        text = stringResource(R.string.txt_enter_new_password),
+                        fontWeight = FontWeight.Bold,
+                        color = Color.White,
+                        textAlign = TextAlign.Center,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                    )
+                },
+            )
         }
     ) { innerPadding ->
         Box {
@@ -143,24 +152,10 @@ private fun SetNewPassword(
                     .fillMaxSize()
                     .padding(16.dp)
                     .verticalScroll(scrollState)
-                    .padding(top = 40.dp)
                     .imePadding(),
                 verticalArrangement = Arrangement.Top,
                 horizontalAlignment = Alignment.CenterHorizontally
             ) {
-                Text(
-                    text = stringResource(R.string.txt_please_enter_your_new_password),
-                    style = typography.headlineLarge.copy(
-                        fontWeight = FontWeight.Bold,
-                        fontSize = 22.sp,
-                        color = colorScheme.primary
-                    ),
-                    textAlign = TextAlign.Center,
-                    modifier = Modifier.padding(horizontal = 16.dp)
-                )
-
-                Spacer(modifier = Modifier.height(26.dp))
-
                 AuthTextField(
                     value = password,
                     onValueChange = onPasswordChanged,
@@ -198,6 +193,7 @@ private fun SetNewPassword(
     }
 }
 
+@Preview(showSystemUi = true, locale = "vi")
 @Preview(showSystemUi = true)
 @Composable
 fun PreviewForgotPasswordVerifyPasswordScreen() {