init

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()
             }
         }
     }

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 = {})
+        }
+
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

app/src/main/res/values/strings.xml

@@ -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>

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" }