Skip to content

Commit

Permalink
#3 upd ui components
Browse files Browse the repository at this point in the history
  • Loading branch information
nastix123 committed Jul 14, 2024
1 parent 2469af7 commit 2b6445c
Show file tree
Hide file tree
Showing 3 changed files with 171 additions and 110 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
package by.eapp.musicroom.screens.components

import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Visibility
import androidx.compose.material.icons.filled.VisibilityOff
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ElevatedButton
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun TextInputField(
modifier: Modifier = Modifier,
value: String,
onValueChange: (String) -> Unit,
placeholderText: String,
) {
OutlinedTextField(
value = value,
onValueChange = onValueChange,
modifier = modifier
.fillMaxWidth()
.defaultMinSize(minHeight = 56.dp)
.height(50.dp),
placeholder = {
Text(
text = placeholderText,
)
},
shape = RoundedCornerShape(percent = 20),
maxLines = 1,
visualTransformation = VisualTransformation.None,
keyboardOptions = KeyboardOptions.Default,
textStyle = TextStyle(color = Color.White)
)
}

@Composable
fun LogInButton(
modifier: Modifier = Modifier,
enabled: Boolean = false,
onClick:() -> Unit,
) {
ElevatedButton(
onClick = onClick,
enabled = enabled,
shape = RoundedCornerShape(20),
colors = ButtonDefaults.elevatedButtonColors(
containerColor = if (enabled) Color.White else Color.LightGray,
contentColor = Color.Black
),
modifier = modifier
.height(50.dp)
.fillMaxWidth()
.padding(horizontal = 16.dp)
) {
Text(
text = "Sign In",
fontSize = 18.sp,
fontWeight = FontWeight.Bold
)
}
}

@Composable
fun PasswordTextInputField(
password: String,
onPasswordChange: (String) -> Unit,
modifier: Modifier = Modifier,
label: String = "Password",
placeholder: String = "Type password here",
showPasswordIcon: ImageVector = Icons.Filled.Visibility,
hidePasswordIcon: ImageVector = Icons.Filled.VisibilityOff,
showPassword: Boolean,
onShowPasswordChange: (Boolean) -> Unit
) {
OutlinedTextField(
modifier = modifier.fillMaxWidth(),
value = password,
onValueChange = onPasswordChange,
label = { Text(text = label) },
placeholder = { Text(text = placeholder) },
shape = RoundedCornerShape(percent = 20),
visualTransformation = if (showPassword) {
VisualTransformation.None
} else {
PasswordVisualTransformation()
},
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
trailingIcon = {
IconButton(onClick = { onShowPasswordChange(!showPassword) }) {
Icon(
imageVector = if (showPassword) showPasswordIcon else hidePasswordIcon,
contentDescription = if (showPassword) "Hide password" else "Show password"
)
}
}
)
}

Original file line number Diff line number Diff line change
@@ -1,38 +1,40 @@
package by.eapp.musicroom.screens.login

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ElevatedButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
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.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
import by.eapp.musicroom.navigation.Screens
import by.eapp.musicroom.screens.components.LogInButton
import by.eapp.musicroom.screens.components.PasswordTextInputField
import by.eapp.musicroom.screens.components.TextInputField

@Composable
fun LogInScreen() {
fun LoginScreen(
navController: NavHostController,
) {
var email by rememberSaveable { mutableStateOf("") }
var password by rememberSaveable { mutableStateOf("") }
var showPassword by remember { mutableStateOf(false) }

Column(
modifier = Modifier
Expand Down Expand Up @@ -66,79 +68,36 @@ fun LogInScreen() {
modifier = Modifier.padding(bottom = 5.dp),
color = Color.White
)
TextInputField(
value = email,
onValueChange = { email = it },
placeholderText = "***********"
PasswordTextInputField(
password = password,
onPasswordChange = { password = it },
showPassword = showPassword,
onShowPasswordChange = { showPassword = it }
)
Spacer(modifier = Modifier.height(40.dp))
LogInButton(
enabled = true,
onClick = {}
)

}
}
Spacer(modifier = Modifier.height(40.dp))
Text(text = "Don't have an account?", color = Color.White)
Text(text = "Sign Up", color = Color.White,
modifier = Modifier.clickable {
navController.navigate(
Screens.RegistrationScreen.route
)
})

@Composable
fun LogInButton(
modifier: Modifier = Modifier,
enabled: Boolean = false,
onClick:() -> Unit,
) {
ElevatedButton(
onClick = onClick,
enabled = enabled,
shape = RoundedCornerShape(20),
colors = ButtonDefaults.elevatedButtonColors(
containerColor = if (enabled) Color.White else Color.LightGray,
contentColor = Color.Black
),
modifier = modifier
.height(50.dp)
.fillMaxWidth()
.padding(horizontal = 16.dp)
) {
Text(
text = "Register",
fontSize = 18.sp,
fontWeight = FontWeight.Bold
)
}
}

@Composable
fun TextInputField(
modifier: Modifier = Modifier,
value: String,
onValueChange: (String) -> Unit,
placeholderText: String,
) {
OutlinedTextField(
value = value,
onValueChange = onValueChange,
modifier = modifier
.fillMaxWidth()
.defaultMinSize(minHeight = 56.dp)
.height(50.dp),
placeholder = {
Text(
text = placeholderText,
)
},
shape = RoundedCornerShape(percent = 20),

maxLines = 1,
visualTransformation = VisualTransformation.None,
keyboardOptions = KeyboardOptions.Default
)
}


@Preview
@Composable
fun PreviewLogInScreen() {
LogInScreen()
LoginScreen(
navController = NavHostController(context = LocalContext.current)
)
}

@Preview(showBackground = true)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
Expand All @@ -24,6 +25,7 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
Expand All @@ -32,11 +34,16 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.Visibility
import by.eapp.musicroom.screens.login.LogInButton
import by.eapp.musicroom.screens.login.TextInputField
import androidx.navigation.NavHostController
import by.eapp.musicroom.screens.components.LogInButton
import by.eapp.musicroom.screens.components.PasswordTextInputField
import by.eapp.musicroom.screens.components.TextInputField


@Composable
fun RegistrationScreen() {
fun RegistrationScreen(
navController: NavHostController
) {
var nickname by rememberSaveable { mutableStateOf("") }
var email by rememberSaveable { mutableStateOf("") }

Expand Down Expand Up @@ -71,7 +78,7 @@ fun RegistrationScreen() {
onValueChange = { nickname = it },
placeholderText = "nastix123",
)
Spacer(modifier = Modifier.height(40.dp))
Spacer(modifier = Modifier.height(20.dp))
Text(
text = "Email",
modifier = Modifier.padding(bottom = 5.dp),
Expand All @@ -83,7 +90,7 @@ fun RegistrationScreen() {
placeholderText = "[email protected]"
)
//passwords
Spacer(modifier = Modifier.height(40.dp))
Spacer(modifier = Modifier.height(20.dp))
Text(
text = "Password",
modifier = Modifier.padding(bottom = 5.dp),
Expand Down Expand Up @@ -114,44 +121,20 @@ fun RegistrationScreen() {
enabled = true,
onClick = {}
)

Spacer(modifier = Modifier.height(40.dp))
Text(text = "Already have an account?", color = Color.White)
Text(
text = "Sign Up",
modifier = Modifier
.padding(5.dp)
.clickable { navController.navigate("login")
},
color = Color.White
)
}
}

@Composable
fun PasswordTextInputField(
password: String,
onPasswordChange: (String) -> Unit,
modifier: Modifier = Modifier,
label: String = "Password",
placeholder: String = "Type password here",
showPasswordIcon: ImageVector = Icons.Filled.Visibility,
hidePasswordIcon: ImageVector = Icons.Filled.VisibilityOff,
showPassword: Boolean,
onShowPasswordChange: (Boolean) -> Unit
) {
OutlinedTextField(
modifier = modifier.fillMaxWidth(),
value = password,
onValueChange = onPasswordChange,
label = { Text(text = label) },
placeholder = { Text(text = placeholder) },
shape = RoundedCornerShape(percent = 20),
visualTransformation = if (showPassword) {
VisualTransformation.None
} else {
PasswordVisualTransformation()
},
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
trailingIcon = {
IconButton(onClick = { onShowPasswordChange(!showPassword) }) {
Icon(
imageVector = if (showPassword) showPasswordIcon else hidePasswordIcon,
contentDescription = if (showPassword) "Hide password" else "Show password"
)
}
}
)
}

@Preview(showBackground = true)
@Composable
Expand All @@ -171,5 +154,5 @@ fun PasswordTextInputFieldPreview() {
@Preview
@Composable
fun RegistrationScreenPreview() {
RegistrationScreen()
RegistrationScreen(navController = NavHostController(context = LocalContext.current))
}

0 comments on commit 2b6445c

Please sign in to comment.