From 1024cb5a314a18b90fb70073737d0552c0142ef5 Mon Sep 17 00:00:00 2001 From: Satindar Dhillon Date: Fri, 9 Sep 2022 11:48:32 -0700 Subject: [PATCH] add name and username fields to email signup form --- .../omnivore/ui/auth/EmailSignUpView.kt | 83 +++++++++++++++++-- .../omnivore/ui/auth/LoginViewModel.kt | 9 ++ 2 files changed, 84 insertions(+), 8 deletions(-) diff --git a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/auth/EmailSignUpView.kt b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/auth/EmailSignUpView.kt index 30184e10f..e7bea14d2 100644 --- a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/auth/EmailSignUpView.kt +++ b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/auth/EmailSignUpView.kt @@ -6,6 +6,8 @@ import androidx.compose.foundation.layout.* import androidx.compose.foundation.text.ClickableText import androidx.compose.foundation.text.KeyboardActions import androidx.compose.foundation.text.KeyboardOptions +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.CheckCircle import androidx.compose.material3.* import androidx.compose.runtime.* import androidx.compose.runtime.saveable.rememberSaveable @@ -18,6 +20,7 @@ import androidx.compose.ui.text.AnnotatedString import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.input.ImeAction import androidx.compose.ui.text.input.PasswordVisualTransformation +import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextDecoration import androidx.compose.ui.unit.dp @@ -26,6 +29,8 @@ import androidx.compose.ui.unit.dp fun EmailSignUpView(viewModel: LoginViewModel) { var email by rememberSaveable { mutableStateOf("") } var password by rememberSaveable { mutableStateOf("") } + var name by rememberSaveable { mutableStateOf("") } + var username by rememberSaveable { mutableStateOf("") } Row( horizontalArrangement = Arrangement.Center @@ -36,11 +41,27 @@ fun EmailSignUpView(viewModel: LoginViewModel) { horizontalAlignment = Alignment.CenterHorizontally ) { EmailSignUpFields( - email, - password, + email = email, + password = password, + name = name, + username = username, + usernameValidationErrorMessage = viewModel.usernameValidationErrorMessage, + showUsernameAsAvailable = viewModel.hasValidUsername, onEmailChange = { email = it }, onPasswordChange = { password = it }, - onLoginClick = { viewModel.login(email, password) } + onNameChange = { name = it }, + onUsernameChange = { + username = it + viewModel.validateUsername(it) + }, + onSubmit = { + viewModel.submitEmailSignUp( + email = email, + password = password, + username = username, + name = name + ) + } ) // TODO: add a activity indicator (maybe after a delay?) @@ -71,9 +92,15 @@ fun EmailSignUpView(viewModel: LoginViewModel) { fun EmailSignUpFields( email: String, password: String, + name: String, + username: String, + usernameValidationErrorMessage: String?, + showUsernameAsAvailable: Boolean, onEmailChange: (String) -> Unit, onPasswordChange: (String) -> Unit, - onLoginClick: () -> Unit + onNameChange: (String) -> Unit, + onUsernameChange: (String) -> Unit, + onSubmit: () -> Unit, ) { val context = LocalContext.current val focusManager = LocalFocusManager.current @@ -104,14 +131,54 @@ fun EmailSignUpFields( keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }) ) + OutlinedTextField( + value = name, + placeholder = { Text(text = "Name") }, + label = { Text(text = "Name") }, + onValueChange = onNameChange, + keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done), + keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }) + ) + + Column( + verticalArrangement = Arrangement.spacedBy(5.dp), + horizontalAlignment = Alignment.CenterHorizontally + ) { + OutlinedTextField( + value = username, + placeholder = { Text(text = "Username") }, + label = { Text(text = "Username") }, + onValueChange = onUsernameChange, + keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done), + keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }), + trailingIcon = { + if (showUsernameAsAvailable) { + Icon( + imageVector = Icons.Filled.CheckCircle, + contentDescription = null + ) + } + } + ) + + if (usernameValidationErrorMessage != null) { + Text( + text = usernameValidationErrorMessage!!, + style = MaterialTheme.typography.bodyLarge, + color = MaterialTheme.colorScheme.error, + textAlign = TextAlign.Center + ) + } + } + Button(onClick = { - if (email.isNotBlank() && password.isNotBlank()) { - onLoginClick() + if (email.isNotBlank() && password.isNotBlank() && username.isNotBlank() && name.isNotBlank()) { + onSubmit() focusManager.clearFocus() } else { Toast.makeText( context, - "Please enter an email address and password.", + "Please complete all fields.", Toast.LENGTH_SHORT ).show() } @@ -121,7 +188,7 @@ fun EmailSignUpFields( ) ) { Text( - text = "Login", + text = "Sign Up", modifier = Modifier.padding(horizontal = 100.dp) ) } diff --git a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/auth/LoginViewModel.kt b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/auth/LoginViewModel.kt index 187b8d280..117d06432 100644 --- a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/auth/LoginViewModel.kt +++ b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/auth/LoginViewModel.kt @@ -155,6 +155,15 @@ class LoginViewModel @Inject constructor( } } + fun submitEmailSignUp( + email: String, + password: String, + username: String, + name: String, + ) { + // TODO: make network call + } + private fun getPendingAuthToken(): String? = runBlocking { datastoreRepo.getString(DatastoreKeys.omnivorePendingUserToken) }