diff --git a/app/src/main/java/com/android/periodpals/ui/authentication/SignIn.kt b/app/src/main/java/com/android/periodpals/ui/authentication/SignIn.kt index 6c548c6e1..c39764f58 100644 --- a/app/src/main/java/com/android/periodpals/ui/authentication/SignIn.kt +++ b/app/src/main/java/com/android/periodpals/ui/authentication/SignIn.kt @@ -17,7 +17,6 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.foundation.text.ClickableText import androidx.compose.material3.Button import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.MaterialTheme @@ -57,8 +56,8 @@ import com.android.periodpals.ui.theme.PurpleGrey80 @Composable fun SignInScreen( - authenticationViewModel: AuthenticationViewModel, - navigationActions: NavigationActions, + authenticationViewModel: AuthenticationViewModel, + navigationActions: NavigationActions, ) { val context = LocalContext.current val userState: UserAuthState by authenticationViewModel.userAuthState @@ -75,112 +74,111 @@ fun SignInScreen( // Screen Scaffold( - modifier = Modifier.fillMaxSize().testTag("signInScreen"), - content = { padding -> - // Purple-ish background - GradedBackground(Purple80, Pink40, PurpleGrey80, "signInBackground") - - Column( - modifier = Modifier.fillMaxSize().padding(padding).padding(60.dp), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.spacedBy(48.dp, Alignment.CenterVertically), + modifier = Modifier.fillMaxSize().testTag("signInScreen"), + content = { padding -> + // Purple-ish background + GradedBackground(Purple80, Pink40, PurpleGrey80, "signInBackground") + + Column( + modifier = Modifier.fillMaxSize().padding(padding).padding(60.dp), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.spacedBy(48.dp, Alignment.CenterVertically), + ) { + // Welcome text + AuthWelcomeText( + text = "Welcome to PeriodPals", + color = Color.Black, + testTag = "signInTitle", + ) + + // Rectangle with login fields and button + Box( + modifier = + Modifier.fillMaxWidth() + .border(1.dp, Color.Gray, RectangleShape) + .background(Color.White) + .padding(24.dp) ) { - // Welcome text - AuthWelcomeText( - text = "Welcome to PeriodPals", - color = Color.Black, - testTag = "signInTitle", - ) - - // Rectangle with login fields and button - Box( - modifier = - Modifier.fillMaxWidth() - .border(1.dp, Color.Gray, RectangleShape) - .background(Color.White) - .padding(24.dp)) { - Column( - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterVertically), - ) { - // Sign in instruction - AuthInstruction(text = "Sign in to your account", testTag = "signInInstruction") - - // Email input and error message - AuthEmailInput( - email = email, onEmailChange = { email = it }, testTag = "signInEmail") - if (emailErrorMessage.isNotEmpty()) { - ErrorText(emailErrorMessage, "signInEmailError") - } - - // Password input and error message - AuthPasswordInput( - password = password, - onPasswordChange = { password = it }, - passwordVisible = passwordVisible, - onPasswordVisibilityChange = { passwordVisible = !passwordVisible }, - testTag = "signInPassword", - visibilityTestTag = "signInPasswordVisibility", - ) - if (passwordErrorMessage.isNotEmpty()) { - ErrorText(passwordErrorMessage, "signInPasswordError") + Column( + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterVertically), + ) { + // Sign in instruction + AuthInstruction(text = "Sign in to your account", testTag = "signInInstruction") + + // Email input and error message + AuthEmailInput(email = email, onEmailChange = { email = it }, testTag = "signInEmail") + if (emailErrorMessage.isNotEmpty()) { + ErrorText(emailErrorMessage, "signInEmailError") + } + + // Password input and error message + AuthPasswordInput( + password = password, + onPasswordChange = { password = it }, + passwordVisible = passwordVisible, + onPasswordVisibilityChange = { passwordVisible = !passwordVisible }, + testTag = "signInPassword", + visibilityTestTag = "signInPasswordVisibility", + ) + if (passwordErrorMessage.isNotEmpty()) { + ErrorText(passwordErrorMessage, "signInPasswordError") + } + + // Sign in button + AuthButton( + text = "Sign in", + onClick = { + emailErrorMessage = validateEmail(email) + passwordErrorMessage = validatePassword(password) + + if (emailErrorMessage.isEmpty() && passwordErrorMessage.isEmpty()) { + authenticationViewModel.logInWithEmail(email, password) + authenticationViewModel.isUserLoggedIn() + val loginSuccess = userState is UserAuthState.Success + if (loginSuccess) { + // with supabase + Toast.makeText(context, "Login Successful", Toast.LENGTH_SHORT).show() + navigationActions.navigateTo(Screen.PROFILE) + } else { + Toast.makeText(context, "Login Failed", Toast.LENGTH_SHORT).show() } + } else { + Toast.makeText(context, "Invalid email or password.", Toast.LENGTH_SHORT).show() + } + }, + testTag = "signInButton", + ) - // Sign in button - AuthButton( - text = "Sign in", - onClick = { - emailErrorMessage = validateEmail(email) - passwordErrorMessage = validatePassword(password) - - if (emailErrorMessage.isEmpty() && passwordErrorMessage.isEmpty()) { - authenticationViewModel.logInWithEmail(context, email, password) - authenticationViewModel.isUserLoggedIn(context) - val loginSuccess = userState is UserAuthState.Success - if (loginSuccess) { - // with supabase - Toast.makeText(context, "Login Successful", Toast.LENGTH_SHORT).show() - navigationActions.navigateTo(Screen.PROFILE) - } else { - Toast.makeText(context, "Login Failed", Toast.LENGTH_SHORT).show() - } - } else { - Toast.makeText(context, "Invalid email or password.", Toast.LENGTH_SHORT) - .show() - } - }, - testTag = "signInButton", - ) + // Or continue with text + AuthSecondInstruction(text = "Or continue with", testTag = "signInOrText") - // Or continue with text - AuthSecondInstruction(text = "Or continue with", testTag = "signInOrText") - - // Google sign in button - GoogleButton( - onClick = { - Toast.makeText( - context, - "Use other login method for now, thanks!", - Toast.LENGTH_SHORT, - ) - .show() - }, - testTag = "signInGoogleButton", + // Google sign in button + GoogleButton( + onClick = { + Toast.makeText( + context, + "Use other login method for now, thanks!", + Toast.LENGTH_SHORT, ) - } - } - Row(modifier = Modifier) { - Text("Not registered yet? ") - Text( - text = "Sign up here!", - modifier = - Modifier.clickable { navigationActions.navigateTo(Screen.SIGN_UP) } - .testTag("signInNotRegistered"), - color = Color.Blue, + .show() + }, + testTag = "signInGoogleButton", ) } } - }, + Row(modifier = Modifier) { + Text("Not registered yet? ") + Text( + text = "Sign up here!", + modifier = + Modifier.clickable { navigationActions.navigateTo(Screen.SIGN_UP) } + .testTag("signInNotRegistered"), + color = Color.Blue, + ) + } + } + }, ) } @@ -211,27 +209,27 @@ private fun validatePassword(password: String): String { @Composable fun GoogleButton(onClick: () -> Unit, modifier: Modifier = Modifier, testTag: String) { Button( - modifier = modifier.wrapContentSize().testTag(testTag), - onClick = onClick, - colors = ButtonDefaults.buttonColors(containerColor = Color.White), - shape = RoundedCornerShape(50), - border = BorderStroke(1.dp, Color.LightGray), + modifier = modifier.wrapContentSize().testTag(testTag), + onClick = onClick, + colors = ButtonDefaults.buttonColors(containerColor = Color.White), + shape = RoundedCornerShape(50), + border = BorderStroke(1.dp, Color.LightGray), ) { Row( - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.Center, + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.Center, ) { Image( - painter = painterResource(id = R.drawable.google_logo), - contentDescription = "Google Logo", - modifier = Modifier.size(24.dp), + painter = painterResource(id = R.drawable.google_logo), + contentDescription = "Google Logo", + modifier = Modifier.size(24.dp), ) Spacer(modifier = Modifier.size(8.dp)) Text( - text = "Sign in with Google", - color = Color.Black, - fontWeight = FontWeight.Medium, - style = MaterialTheme.typography.bodyMedium, + text = "Sign in with Google", + color = Color.Black, + fontWeight = FontWeight.Medium, + style = MaterialTheme.typography.bodyMedium, ) } }