init
This commit is contained in:
parent
4dd82d0143
commit
e047e2ca91
@ -15,6 +15,7 @@ import com.example.shoesapp.ui.screen.SignInContent
|
||||
import com.example.shoesapp.ui.screen.SigninScreen
|
||||
import com.example.shoesapp.ui.theme.MatuleTheme
|
||||
import com.example.shoesapptest.screen.ForgotPasswordScreen
|
||||
import com.example.shoesapptest.screen.RegistrtionScreen
|
||||
|
||||
class MainActivity : ComponentActivity() {
|
||||
override fun onCreate(savedInstanceState: Bundle?) {
|
||||
@ -22,7 +23,7 @@ class MainActivity : ComponentActivity() {
|
||||
enableEdgeToEdge()
|
||||
setContent {
|
||||
MatuleTheme {
|
||||
ForgotPasswordScreen()
|
||||
RegistrtionScreen()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,350 @@
|
||||
package com.example.shoesapptest.screen
|
||||
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.interaction.MutableInteractionSource
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.PaddingValues
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.safeGesturesPadding
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.foundation.layout.wrapContentSize
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.foundation.text.BasicTextField
|
||||
import androidx.compose.foundation.text.ClickableText
|
||||
import androidx.compose.foundation.text.KeyboardOptions
|
||||
import androidx.compose.material3.Button
|
||||
import androidx.compose.material3.ButtonColors
|
||||
import androidx.compose.material3.CenterAlignedTopAppBar
|
||||
import androidx.compose.material3.Checkbox
|
||||
import androidx.compose.material3.CheckboxColors
|
||||
import androidx.compose.material3.CheckboxDefaults
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material3.IconButton
|
||||
import androidx.compose.material3.Scaffold
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.res.painterResource
|
||||
import androidx.compose.ui.unit.dp
|
||||
import com.example.shoesapptest.R
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.material3.TextFieldColors
|
||||
import androidx.compose.material3.TextFieldDefaults
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.runtime.mutableStateOf
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.runtime.setValue
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.compose.ui.text.AnnotatedString
|
||||
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.text.style.TextAlign
|
||||
import com.example.shoesapp.ui.theme.MatuleTheme
|
||||
import com.example.shoesapp.ui.theme.matuleFontFamily
|
||||
import kotlin.math.sin
|
||||
|
||||
@Composable
|
||||
fun RegistrtionScreen(){
|
||||
Scaffold(
|
||||
topBar = {
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.padding(top = 35.dp)
|
||||
.fillMaxWidth()
|
||||
.height(40.dp)
|
||||
){
|
||||
IconButton(onClick={}) {
|
||||
Icon(painter = painterResource(R.drawable.back_arrow),
|
||||
contentDescription = null)
|
||||
}
|
||||
}
|
||||
},
|
||||
bottomBar = {
|
||||
Row(
|
||||
horizontalArrangement = Arrangement.Center,
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
modifier = Modifier
|
||||
.padding(bottom = 50.dp)
|
||||
.fillMaxWidth()
|
||||
.height(40.dp)
|
||||
) {
|
||||
Text(
|
||||
text= stringResource(R.string.sign_in_on_reg),
|
||||
style=MatuleTheme.typography.bodyRegular16.copy(MatuleTheme.colors.text),
|
||||
textAlign = TextAlign.Center
|
||||
)
|
||||
}
|
||||
}
|
||||
) { paddingValues ->
|
||||
RegistrationScreen(paddingValues)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun RegistrationScreen(paddingValues: PaddingValues){
|
||||
Column(
|
||||
modifier = Modifier.padding(paddingValues=paddingValues)
|
||||
) {
|
||||
val title= stringResource(R.string.sign_up_on_reg)
|
||||
val subtitle= stringResource(R.string.sign_in_subtitle)
|
||||
TitleWithSubtitleText(title, subtitle)
|
||||
val name = remember { mutableStateOf("") }
|
||||
val email = remember { mutableStateOf("") }
|
||||
val password = remember { mutableStateOf("") }
|
||||
RegistrationTextFields(
|
||||
labelNameText = stringResource(R.string.name),
|
||||
labelEmailText = stringResource(R.string.email),
|
||||
labelPasswordText = stringResource(R.string.password),
|
||||
nameValue = name.value,
|
||||
emailValue = email.value,
|
||||
passwordValue = password.value,
|
||||
onNameChange = {name.value=it},
|
||||
onEmailChange = {email.value=it},
|
||||
onPasswordChange = {password.value=it},
|
||||
placeholderTextName = stringResource(R.string.template_name),
|
||||
placeholderTextEmail = stringResource(R.string.template_email),
|
||||
placeholderTextPassword = stringResource(R.string.template_password)
|
||||
)
|
||||
RegButton(modifier = Modifier.padding(top = 50.dp),
|
||||
buttonLabel = stringResource(R.string.sign_up_btn)
|
||||
) { }
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun RegButton(modifier: Modifier, buttonLabel: String, onClick: () -> Unit){
|
||||
Button(
|
||||
modifier = modifier
|
||||
.padding(horizontal = 20.dp)
|
||||
.fillMaxWidth()
|
||||
.height(50.dp)
|
||||
.clip(RoundedCornerShape(14.dp))
|
||||
.background(MatuleTheme.colors.background)
|
||||
,
|
||||
colors=ButtonColors(
|
||||
containerColor = MatuleTheme.colors.accent,
|
||||
disabledContainerColor = MatuleTheme.colors.accent,
|
||||
contentColor = Color.Transparent,
|
||||
disabledContentColor = Color.Transparent
|
||||
),
|
||||
onClick=onClick
|
||||
){
|
||||
Text(
|
||||
text=buttonLabel,
|
||||
style = MatuleTheme.typography.bodyRegular14.copy(color=MatuleTheme.colors.background),
|
||||
textAlign = TextAlign.Center
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun RegistrationTextFields(nameValue: String,
|
||||
onNameChange: (String) -> Unit,
|
||||
placeholderTextName: String,
|
||||
labelNameText: String,
|
||||
emailValue: String,
|
||||
onEmailChange: (String) -> Unit,
|
||||
placeholderTextEmail: String,
|
||||
labelEmailText: String,
|
||||
passwordValue: String,
|
||||
onPasswordChange: (String) -> Unit,
|
||||
placeholderTextPassword: String,
|
||||
labelPasswordText: String){
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.padding(horizontal = 20.dp)
|
||||
.wrapContentSize(),
|
||||
verticalArrangement = Arrangement.spacedBy(8.dp)
|
||||
){
|
||||
if (labelNameText!=null){
|
||||
Text(
|
||||
text=labelNameText,
|
||||
style=MatuleTheme.typography.bodyRegular16.copy(MatuleTheme.colors.text),
|
||||
textAlign = TextAlign.Right
|
||||
)
|
||||
}
|
||||
val name = remember { MutableInteractionSource() }
|
||||
BasicTextField(
|
||||
value = nameValue,
|
||||
onValueChange = { onNameChange(it) },
|
||||
modifier = Modifier
|
||||
.padding(horizontal = 20.dp)
|
||||
.fillMaxWidth()
|
||||
.clip(RoundedCornerShape(14.dp))
|
||||
.background(MatuleTheme.colors.background)
|
||||
){
|
||||
innerTextField ->
|
||||
TextFieldDefaults.DecorationBox(
|
||||
value=nameValue,
|
||||
singleLine = true,
|
||||
innerTextField = innerTextField,
|
||||
enabled = true,
|
||||
colors= TextFieldDefaults.colors(
|
||||
focusedContainerColor = MatuleTheme.colors.background,
|
||||
disabledContainerColor = MatuleTheme.colors.background,
|
||||
unfocusedContainerColor = MatuleTheme.colors.background,
|
||||
errorContainerColor = MatuleTheme.colors.background,
|
||||
unfocusedIndicatorColor = Color.Transparent,
|
||||
focusedIndicatorColor = Color.Transparent,
|
||||
disabledIndicatorColor = Color.Transparent,
|
||||
errorIndicatorColor = Color.Transparent
|
||||
),
|
||||
visualTransformation = VisualTransformation.None,
|
||||
interactionSource = name,
|
||||
placeholder = {
|
||||
if (placeholderTextName!=null)
|
||||
Text(
|
||||
text=placeholderTextName,
|
||||
style = MatuleTheme.typography.bodyRegular14.copy(MatuleTheme.colors.hint)
|
||||
)
|
||||
}
|
||||
)
|
||||
}
|
||||
if(labelEmailText!=null){
|
||||
Text(
|
||||
text = labelEmailText,
|
||||
style = MatuleTheme.typography.bodyRegular16.copy(MatuleTheme.colors.text),
|
||||
textAlign = TextAlign.Right
|
||||
)
|
||||
}
|
||||
val email = remember { MutableInteractionSource() }
|
||||
BasicTextField(
|
||||
value=emailValue,
|
||||
onValueChange = {onEmailChange(it)},
|
||||
modifier = Modifier
|
||||
.padding(horizontal = 20.dp)
|
||||
.fillMaxWidth()
|
||||
.clip(RoundedCornerShape(14.dp))
|
||||
.background(MatuleTheme.colors.background)
|
||||
){
|
||||
innerTextField ->
|
||||
TextFieldDefaults.DecorationBox(
|
||||
value = emailValue,
|
||||
singleLine = true,
|
||||
innerTextField = innerTextField,
|
||||
enabled = true,
|
||||
colors = TextFieldDefaults.colors(
|
||||
focusedContainerColor = MatuleTheme.colors.background,
|
||||
disabledContainerColor = MatuleTheme.colors.background,
|
||||
unfocusedContainerColor = MatuleTheme.colors.background,
|
||||
errorContainerColor = MatuleTheme.colors.background,
|
||||
unfocusedIndicatorColor = Color.Transparent,
|
||||
disabledIndicatorColor = Color.Transparent,
|
||||
focusedIndicatorColor = Color.Transparent,
|
||||
errorIndicatorColor = Color.Transparent
|
||||
),
|
||||
visualTransformation = VisualTransformation.None,
|
||||
interactionSource = email,
|
||||
placeholder = {
|
||||
if(placeholderTextEmail!=null)
|
||||
Text(
|
||||
text = placeholderTextEmail,
|
||||
style = MatuleTheme.typography.bodyRegular14.copy(MatuleTheme.colors.hint)
|
||||
)
|
||||
}
|
||||
)
|
||||
}
|
||||
if (labelPasswordText!=null){
|
||||
Text(
|
||||
text = labelPasswordText,
|
||||
style = MatuleTheme.typography.bodyRegular16.copy(MatuleTheme.colors.text),
|
||||
textAlign = TextAlign.Center
|
||||
)
|
||||
}
|
||||
val password = remember { MutableInteractionSource() }
|
||||
var passwordVisible by remember { mutableStateOf(false) }
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.padding(horizontal = 20.dp)
|
||||
.fillMaxWidth(),
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
){
|
||||
BasicTextField(
|
||||
value=passwordValue,
|
||||
onValueChange = { onPasswordChange(it) },
|
||||
visualTransformation = if(passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
|
||||
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
|
||||
modifier = Modifier
|
||||
.weight(1f)
|
||||
.clip(RoundedCornerShape(14.dp))
|
||||
.background(MatuleTheme.colors.background)
|
||||
){ innerTextField ->
|
||||
TextFieldDefaults.DecorationBox(
|
||||
value = passwordValue,
|
||||
singleLine = true,
|
||||
innerTextField = innerTextField,
|
||||
enabled = true,
|
||||
colors = TextFieldDefaults.colors(
|
||||
focusedContainerColor = MatuleTheme.colors.background,
|
||||
disabledContainerColor = MatuleTheme.colors.background,
|
||||
unfocusedContainerColor = MatuleTheme.colors.background,
|
||||
errorContainerColor = MatuleTheme.colors.background,
|
||||
unfocusedIndicatorColor = Color.Transparent,
|
||||
disabledIndicatorColor = Color.Transparent,
|
||||
focusedIndicatorColor = Color.Transparent,
|
||||
errorIndicatorColor = Color.Transparent
|
||||
),
|
||||
visualTransformation = if(passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
|
||||
interactionSource = password,
|
||||
placeholder = {
|
||||
if (placeholderTextPassword!=null){
|
||||
Text(
|
||||
text = placeholderTextPassword,
|
||||
style = MatuleTheme.typography.bodyRegular14.copy(MatuleTheme.colors.hint)
|
||||
)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
}
|
||||
IconButton(
|
||||
onClick = {passwordVisible = !passwordVisible}
|
||||
){
|
||||
Icon(
|
||||
painter = painterResource(if(passwordVisible) R.drawable.eye_close else R.drawable.eye_open),
|
||||
contentDescription = null
|
||||
)
|
||||
}
|
||||
}
|
||||
val checkedState = remember { mutableStateOf(false) }
|
||||
Row {
|
||||
Checkbox(
|
||||
checked = checkedState.value,
|
||||
onCheckedChange = { checkedState.value = it }
|
||||
)
|
||||
|
||||
ClickableText(
|
||||
text = AnnotatedString(stringResource(R.string.personal_data)),
|
||||
style = MatuleTheme.typography.bodyRegular16.copy(MatuleTheme.colors.text),
|
||||
modifier = Modifier
|
||||
.padding(top=8.dp),
|
||||
onClick = {})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -12,4 +12,10 @@
|
||||
<string name="subtitle_forgot_password">Введите Свою Учётную Запись Для Сброса</string>
|
||||
<string name="placeholder_email">xyz@gmail.com</string>
|
||||
<string name="send_email_forgot">Отправить</string>
|
||||
<string name="sign_in_on_reg">Есть аккаунт? Войти</string>
|
||||
<string name="sign_up_on_reg">Регистрация</string>
|
||||
<string name="template_name">XXXXXXXX</string>
|
||||
<string name="sign_up_btn">Зарегистрироваться</string>
|
||||
<string name="name">Имя</string>
|
||||
<string name="personal_data">Даю согласие на обработку персональных данных</string>
|
||||
</resources>
|
||||
@ -27,6 +27,6 @@ androidx-material3 = { group = "androidx.compose.material3", name = "material3"
|
||||
|
||||
[plugins]
|
||||
android-application = { id = "com.android.application", version.ref = "agp" }
|
||||
kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
|
||||
kotlin-android = { id = "org.jetbrains.kotlin.android", version = "1.9.24" }
|
||||
kotlin-compose = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user