diff --git a/app/src/main/java/com/example/shoesapptest/MainActivity.kt b/app/src/main/java/com/example/shoesapptest/MainActivity.kt index ab2fa0a..53c2e0f 100644 --- a/app/src/main/java/com/example/shoesapptest/MainActivity.kt +++ b/app/src/main/java/com/example/shoesapptest/MainActivity.kt @@ -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() } } } diff --git a/app/src/main/java/com/example/shoesapptest/screen/RegistrationScreen.kt b/app/src/main/java/com/example/shoesapptest/screen/RegistrationScreen.kt new file mode 100644 index 0000000..7bed55f --- /dev/null +++ b/app/src/main/java/com/example/shoesapptest/screen/RegistrationScreen.kt @@ -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 = {}) + } + + } +} + + + + + + + + + + + + + + + diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 38ce91c..0365c77 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -12,4 +12,10 @@ Введите Свою Учётную Запись Для Сброса xyz@gmail.com Отправить + Есть аккаунт? Войти + Регистрация + XXXXXXXX + Зарегистрироваться + Имя + Даю согласие на обработку персональных данных \ No newline at end of file diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml index c2a3878..b45f38f 100644 --- a/gradle/libs.versions.toml +++ b/gradle/libs.versions.toml @@ -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" }