curiosite/Biblib
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add login screen.

Browse source
This commit is contained in:
Thomas Andres Gomez 2021-05-07 17:07:06 +02:00
parent e9f5c30e01
commit 080d2e2b49
8 changed files with 257 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

176
app/src/main/java/com/pixelized/biblib/ui/composable/screen/LoginScreenComposable.kt Normal file
View file

@ -0,0 +1,176 @@
package com.pixelized.biblib.ui.composable.screen
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.*
import androidx.compose.material.ButtonDefaults.textButtonColors
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.sharp.Visibility
import androidx.compose.material.icons.sharp.VisibilityOff
import androidx.compose.runtime.*
import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.pixelized.biblib.R
import com.pixelized.biblib.ui.theme.BibLibTheme
import com.pixelized.biblib.ui.viewmodel.AuthenticationViewModel
import com.pixelized.biblib.ui.viewmodel.NavigationViewModel
@Preview
@Composable
fun LoginScreenComposablePreview() {
BibLibTheme {
val navigationViewModel = NavigationViewModel()
val authenticationViewModel = AuthenticationViewModel()
LoginScreenComposable(navigationViewModel, authenticationViewModel)
}
}
@Composable
fun LoginScreenComposable(
navigationViewModel: NavigationViewModel,
authenticationViewModel: AuthenticationViewModel
) {
val typography = MaterialTheme.typography
Column(
modifier = Modifier
.fillMaxWidth()
.fillMaxHeight()
.verticalScroll(rememberScrollState())
.padding(16.dp)
) {
Spacer(modifier = Modifier.weight(1f))
Text(
modifier = Modifier
.padding(vertical = 16.dp)
.align(alignment = Alignment.CenterHorizontally),
style = typography.h4,
text = stringResource(id = R.string.welcome_sign_in)
)
Spacer(modifier = Modifier.weight(1f))
LoginField(
viewModel = authenticationViewModel,
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 16.dp)
)
PasswordField(
viewModel = authenticationViewModel,
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 16.dp)
)
CredentialRemember(
viewModel = authenticationViewModel,
modifier = Modifier
.height(48.dp)
.padding(bottom = 16.dp)
)
Row(
modifier = Modifier
.padding(bottom = 16.dp)
.align(Alignment.End)
) {
Button(
modifier = Modifier.padding(end = 8.dp),
colors = textButtonColors(),
onClick = {
// TODO:
navigationViewModel.navigateTo(NavigationViewModel.Screen.MainScreen)
}) {
Text(text = stringResource(id = R.string.action_register))
}
Button(onClick = {
// TODO:
navigationViewModel.navigateTo(NavigationViewModel.Screen.MainScreen)
}) {
Text(text = stringResource(id = R.string.action_login))
}
}
Spacer(modifier = Modifier.weight(2f))
Button(
modifier = Modifier.fillMaxWidth(),
colors = ButtonDefaults.outlinedButtonColors(),
onClick = {
// TODO:
navigationViewModel.navigateTo(NavigationViewModel.Screen.MainScreen)
}) {
Image(
modifier = Modifier.padding(end = 8.dp),
painter = painterResource(id = R.drawable.ic_google), contentDescription = ""
)
Text(text = stringResource(id = R.string.action_google_sign_in))
}
}
}
@Composable
private fun LoginField(viewModel: AuthenticationViewModel, modifier: Modifier = Modifier) {
val login: State<String?> = viewModel.login.observeAsState()
TextField(
modifier = modifier,
value = login.value ?: "",
label = { Text(text = stringResource(id = R.string.authentication_login)) },
maxLines = 1,
singleLine = true,
onValueChange = { viewModel.updateLogin(it) },
)
}
@Composable
private fun PasswordField(viewModel: AuthenticationViewModel, modifier: Modifier = Modifier) {
val password = viewModel.password.observeAsState()
var passwordVisibility by remember { mutableStateOf(false) }
TextField(
modifier = modifier,
value = password.value ?: "",
maxLines = 1,
singleLine = true,
visualTransformation = if (passwordVisibility) VisualTransformation.None else PasswordVisualTransformation(),
trailingIcon = {
IconButton(onClick = { passwordVisibility = passwordVisibility.not() }) {
Icon(
imageVector = if (passwordVisibility) Icons.Sharp.VisibilityOff else Icons.Sharp.Visibility,
contentDescription = "password visibility"
)
}
},
label = { Text(text = stringResource(id = R.string.authentication_password)) },
onValueChange = { viewModel.updatePassword(it) }
)
}
@Composable
private fun CredentialRemember(viewModel: AuthenticationViewModel, modifier: Modifier = Modifier) {
val credential = viewModel.rememberCredential.observeAsState()
Row(modifier = modifier.clickable {
viewModel.updateRememberCredential(credential = credential.value?.not() ?: false)
}) {
Checkbox(
modifier = Modifier.align(Alignment.CenterVertically),
checked = credential.value ?: false,
onCheckedChange = null
)
Text(
modifier = Modifier
.align(Alignment.CenterVertically)
.padding(start = 8.dp),
text = stringResource(id = R.string.authentication_credential_remember)
)
}
}

11
app/src/main/java/com/pixelized/biblib/ui/composable/screen/SplashScreenComposable.kt
View file

@ -6,11 +6,14 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.pixelized.biblib.ui.theme.BibLibTheme
import com.pixelized.biblib.ui.viewmodel.NavigationViewModel
import kotlinx.coroutines.*
@Preview
@ -36,4 +39,12 @@ fun SplashScreenComposable(navigationViewModel: NavigationViewModel) {
text = "Welcome to BibLib"
)
}
val coroutineScope = rememberCoroutineScope()
LaunchedEffect(key1 = "loading", block = {
coroutineScope.launch {
delay(1000)
navigationViewModel.navigateTo(NavigationViewModel.Screen.LoginScreen)
}
})
}