|
@@ -1,4 +1,291 @@
|
|
|
package com.example.neurea.views.screens
|
|
|
|
|
|
-class RegistrationScreen {
|
|
|
+import androidx.compose.foundation.background
|
|
|
+import androidx.compose.foundation.border
|
|
|
+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.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.Button
|
|
|
+import androidx.compose.material3.ButtonDefaults
|
|
|
+import androidx.compose.material3.ExperimentalMaterial3Api
|
|
|
+import androidx.compose.material3.HorizontalDivider
|
|
|
+import androidx.compose.material3.Icon
|
|
|
+import androidx.compose.material3.IconButton
|
|
|
+import androidx.compose.material3.MaterialTheme
|
|
|
+import androidx.compose.material3.Text
|
|
|
+import androidx.compose.material3.TextButton
|
|
|
+import androidx.compose.material3.TextField
|
|
|
+import androidx.compose.material3.TextFieldDefaults
|
|
|
+import androidx.compose.runtime.Composable
|
|
|
+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.Modifier
|
|
|
+import androidx.compose.ui.draw.clip
|
|
|
+import androidx.compose.ui.graphics.Color
|
|
|
+import androidx.compose.ui.res.painterResource
|
|
|
+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.text.style.TextAlign
|
|
|
+import androidx.compose.ui.tooling.preview.Preview
|
|
|
+import androidx.compose.ui.unit.dp
|
|
|
+import androidx.compose.ui.unit.sp
|
|
|
+import com.example.neurea.R
|
|
|
+import com.example.neurea.views.ui.theme.NeureaTheme
|
|
|
+
|
|
|
+@Preview()
|
|
|
+@OptIn(ExperimentalMaterial3Api::class)
|
|
|
+@Composable
|
|
|
+fun RegistrationScreen() { // navController: NavController
|
|
|
+ var email = remember { mutableStateOf("") }
|
|
|
+ var name = remember { mutableStateOf("") }
|
|
|
+ var password = remember { mutableStateOf("") }
|
|
|
+ var password1 = remember { mutableStateOf("") }
|
|
|
+ val maxLength = 20
|
|
|
+ val emailPattern = Regex("[^@ \\t\\r\\n]+@[^@ \\t\\r\\n]+\\.[^@ \\t\\r\\n]+")
|
|
|
+ var passwordVisibility: Boolean by remember { mutableStateOf(false) }
|
|
|
+ var password1Visibility: Boolean by remember { mutableStateOf(false) }
|
|
|
+
|
|
|
+ NeureaTheme {
|
|
|
+ Column(
|
|
|
+ modifier = Modifier
|
|
|
+ .fillMaxSize()
|
|
|
+ .background(color = MaterialTheme.colorScheme.secondary)
|
|
|
+ ) {
|
|
|
+ Text(
|
|
|
+ text = "Регистрация!",
|
|
|
+ color = MaterialTheme.colorScheme.primary,
|
|
|
+ modifier = Modifier
|
|
|
+ .padding(top = 70.dp, bottom = 8.dp, start = 24.dp)
|
|
|
+ .align(Alignment.Start),
|
|
|
+ fontSize = 24.sp,
|
|
|
+ fontWeight = FontWeight.ExtraBold
|
|
|
+ )
|
|
|
+ Text("Создайте аккаунт для использования приложения", fontSize = 12.sp,
|
|
|
+ color = MaterialTheme.colorScheme.onSecondary, modifier = Modifier.padding(start = 20.dp, bottom = 20.dp))
|
|
|
+ Text("Имя", fontWeight = FontWeight.Bold, color = MaterialTheme.colorScheme.onPrimary, fontSize = 12.sp, modifier = Modifier.padding(start = 20.dp))
|
|
|
+ TextField(
|
|
|
+ modifier = Modifier
|
|
|
+ .fillMaxWidth()
|
|
|
+ .padding(horizontal = 20.dp, vertical = 8.dp)
|
|
|
+ .clip(shape = RoundedCornerShape(8.dp))
|
|
|
+ .border(
|
|
|
+ width = 1.dp,
|
|
|
+ color = MaterialTheme.colorScheme.onSecondary,
|
|
|
+ shape = RoundedCornerShape(12.dp)
|
|
|
+ ),
|
|
|
+ textStyle = TextStyle(fontSize = 14.sp),
|
|
|
+ value = name.value,
|
|
|
+ keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text),
|
|
|
+ colors = TextFieldDefaults.textFieldColors(
|
|
|
+ containerColor = MaterialTheme.colorScheme.secondary,
|
|
|
+ focusedIndicatorColor = MaterialTheme.colorScheme.secondary,
|
|
|
+ focusedTextColor = MaterialTheme.colorScheme.onPrimary,
|
|
|
+ unfocusedTextColor = MaterialTheme.colorScheme.secondary,
|
|
|
+ disabledIndicatorColor = Color.Transparent,
|
|
|
+ unfocusedIndicatorColor = Color.Transparent,
|
|
|
+ cursorColor = MaterialTheme.colorScheme.primary,
|
|
|
+ disabledPlaceholderColor = MaterialTheme.colorScheme.onSecondary,
|
|
|
+ focusedPlaceholderColor = MaterialTheme.colorScheme.onSecondary,
|
|
|
+ unfocusedPlaceholderColor = MaterialTheme.colorScheme.onSecondary
|
|
|
+ ),
|
|
|
+
|
|
|
+ onValueChange = {
|
|
|
+ if (it.length <= maxLength) name.value = it
|
|
|
+ /*if (email.value.isNotEmpty() and emailPattern.matches(email.value)) {
|
|
|
+ colorOfButton = lavender.value
|
|
|
+ } else {
|
|
|
+ colorOfButton = gainsboro.value
|
|
|
+ }*/
|
|
|
+ },
|
|
|
+ placeholder = { Text("Ваше имя", fontSize = 14.sp) },
|
|
|
+ singleLine = true
|
|
|
+ )
|
|
|
+ Text("Email", fontWeight = FontWeight.Bold, color = MaterialTheme.colorScheme.onPrimary, fontSize = 12.sp, modifier = Modifier.padding(start = 20.dp))
|
|
|
+ TextField(
|
|
|
+ modifier = Modifier
|
|
|
+ .fillMaxWidth()
|
|
|
+ .padding(horizontal = 20.dp, vertical = 8.dp)
|
|
|
+ .clip(shape = RoundedCornerShape(8.dp))
|
|
|
+ .border(
|
|
|
+ width = 1.dp,
|
|
|
+ color = MaterialTheme.colorScheme.onSecondary,
|
|
|
+ shape = RoundedCornerShape(12.dp)
|
|
|
+ ),
|
|
|
+ textStyle = TextStyle(fontSize = 14.sp),
|
|
|
+ value = email.value,
|
|
|
+ keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email),
|
|
|
+ colors = TextFieldDefaults.textFieldColors(
|
|
|
+ containerColor = MaterialTheme.colorScheme.secondary,
|
|
|
+ focusedIndicatorColor = MaterialTheme.colorScheme.secondary,
|
|
|
+ focusedTextColor = MaterialTheme.colorScheme.onPrimary,
|
|
|
+ unfocusedTextColor = MaterialTheme.colorScheme.secondary,
|
|
|
+ disabledIndicatorColor = Color.Transparent,
|
|
|
+ unfocusedIndicatorColor = Color.Transparent,
|
|
|
+ cursorColor = MaterialTheme.colorScheme.primary,
|
|
|
+ disabledPlaceholderColor = MaterialTheme.colorScheme.onSecondary,
|
|
|
+ focusedPlaceholderColor = MaterialTheme.colorScheme.onSecondary,
|
|
|
+ unfocusedPlaceholderColor = MaterialTheme.colorScheme.onSecondary
|
|
|
+ ),
|
|
|
+
|
|
|
+ onValueChange = {
|
|
|
+ if (it.length <= maxLength) email.value = it
|
|
|
+ /*if (email.value.isNotEmpty() and emailPattern.matches(email.value)) {
|
|
|
+ colorOfButton = lavender.value
|
|
|
+ } else {
|
|
|
+ colorOfButton = gainsboro.value
|
|
|
+ }*/
|
|
|
+ },
|
|
|
+ placeholder = { Text("Email") },
|
|
|
+ singleLine = true
|
|
|
+ )
|
|
|
+ Text("Пароль", fontWeight = FontWeight.Bold, color = MaterialTheme.colorScheme.onPrimary, fontSize = 12.sp, modifier = Modifier.padding(start = 20.dp))
|
|
|
+
|
|
|
+ TextField(
|
|
|
+ modifier = Modifier
|
|
|
+ .fillMaxWidth()
|
|
|
+ .padding(horizontal = 20.dp, vertical = 10.dp)
|
|
|
+ .clip(shape = RoundedCornerShape(8.dp))
|
|
|
+ .border(
|
|
|
+ width = 1.dp,
|
|
|
+ color = MaterialTheme.colorScheme.onSecondary,
|
|
|
+ shape = RoundedCornerShape(12.dp)
|
|
|
+ ),
|
|
|
+ value = password.value,
|
|
|
+ colors = TextFieldDefaults.textFieldColors(
|
|
|
+ containerColor = MaterialTheme.colorScheme.secondary,
|
|
|
+ focusedIndicatorColor = MaterialTheme.colorScheme.secondary,
|
|
|
+ focusedTextColor = MaterialTheme.colorScheme.onPrimary,
|
|
|
+ unfocusedTextColor = MaterialTheme.colorScheme.secondary,
|
|
|
+ disabledIndicatorColor = Color.Transparent,
|
|
|
+ unfocusedIndicatorColor = Color.Transparent,
|
|
|
+ cursorColor = MaterialTheme.colorScheme.primary,
|
|
|
+ disabledPlaceholderColor = MaterialTheme.colorScheme.onSecondary,
|
|
|
+ focusedPlaceholderColor = MaterialTheme.colorScheme.onSecondary,
|
|
|
+ unfocusedPlaceholderColor = MaterialTheme.colorScheme.onSecondary
|
|
|
+ ),
|
|
|
+ visualTransformation = if (passwordVisibility) VisualTransformation.None else PasswordVisualTransformation(),
|
|
|
+ trailingIcon = {
|
|
|
+ IconButton(onClick = {
|
|
|
+ passwordVisibility = !passwordVisibility
|
|
|
+ }) {
|
|
|
+ if (passwordVisibility) {
|
|
|
+ Icon(
|
|
|
+ painter = painterResource(id = R.drawable.baseline_visibility_24),
|
|
|
+ contentDescription = ""
|
|
|
+ )
|
|
|
+ } else {
|
|
|
+ Icon(
|
|
|
+ painter = painterResource(id = R.drawable.baseline_visibility_off_24),
|
|
|
+ contentDescription = ""
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onValueChange = {
|
|
|
+ if (it.length <= maxLength) password.value = it
|
|
|
+ },
|
|
|
+ placeholder = { Text("Придумайте пароль") },
|
|
|
+ singleLine = true
|
|
|
+ )
|
|
|
+
|
|
|
+ TextField(
|
|
|
+ modifier = Modifier
|
|
|
+ .fillMaxWidth()
|
|
|
+ .padding(horizontal = 20.dp, vertical = 10.dp)
|
|
|
+ .clip(shape = RoundedCornerShape(8.dp))
|
|
|
+ .border(
|
|
|
+ width = 1.dp,
|
|
|
+ color = MaterialTheme.colorScheme.onSecondary,
|
|
|
+ shape = RoundedCornerShape(12.dp)
|
|
|
+ ),
|
|
|
+ value = password1.value,
|
|
|
+ colors = TextFieldDefaults.textFieldColors(
|
|
|
+ containerColor = MaterialTheme.colorScheme.secondary,
|
|
|
+ focusedIndicatorColor = MaterialTheme.colorScheme.secondary,
|
|
|
+ focusedTextColor = MaterialTheme.colorScheme.onPrimary,
|
|
|
+ unfocusedTextColor = MaterialTheme.colorScheme.secondary,
|
|
|
+ disabledIndicatorColor = Color.Transparent,
|
|
|
+ unfocusedIndicatorColor = Color.Transparent,
|
|
|
+ cursorColor = MaterialTheme.colorScheme.primary,
|
|
|
+ disabledPlaceholderColor = MaterialTheme.colorScheme.onSecondary,
|
|
|
+ focusedPlaceholderColor = MaterialTheme.colorScheme.onSecondary,
|
|
|
+ unfocusedPlaceholderColor = MaterialTheme.colorScheme.onSecondary
|
|
|
+ ),
|
|
|
+ visualTransformation = if (password1Visibility) VisualTransformation.None else PasswordVisualTransformation(),
|
|
|
+ trailingIcon = {
|
|
|
+ IconButton(onClick = {
|
|
|
+ password1Visibility = !password1Visibility
|
|
|
+ }) {
|
|
|
+ if (password1Visibility) {
|
|
|
+ Icon(
|
|
|
+ painter = painterResource(id = R.drawable.baseline_visibility_24),
|
|
|
+ contentDescription = ""
|
|
|
+ )
|
|
|
+ } else {
|
|
|
+ Icon(
|
|
|
+ painter = painterResource(id = R.drawable.baseline_visibility_off_24),
|
|
|
+ contentDescription = ""
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onValueChange = {
|
|
|
+ if (it.length <= maxLength) password1.value = it
|
|
|
+ },
|
|
|
+ placeholder = { Text("Повторите пароль") },
|
|
|
+ singleLine = true
|
|
|
+ )
|
|
|
+
|
|
|
+ Button(
|
|
|
+ onClick = {
|
|
|
+ },
|
|
|
+ modifier = Modifier
|
|
|
+ .fillMaxWidth()
|
|
|
+ .height(48.dp)
|
|
|
+ .padding(top = 10.dp, start = 20.dp, end = 30.dp)
|
|
|
+ .height(50.dp)
|
|
|
+
|
|
|
+ ,
|
|
|
+ shape = RoundedCornerShape(8.dp),
|
|
|
+ colors = ButtonDefaults.buttonColors(
|
|
|
+ containerColor = MaterialTheme.colorScheme.primary
|
|
|
+ ),
|
|
|
+
|
|
|
+ ) {
|
|
|
+
|
|
|
+ Text("Войти", fontSize = 15.sp, color = MaterialTheme.colorScheme.secondary)
|
|
|
+
|
|
|
+ }
|
|
|
+ Row(modifier= Modifier
|
|
|
+ .fillMaxWidth()
|
|
|
+ .padding(horizontal = 30.dp),
|
|
|
+ verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.Center){
|
|
|
+ Text("Уже с нами? ", color = MaterialTheme.colorScheme.onSecondary, fontSize = 12.sp, textAlign = TextAlign.Center)
|
|
|
+ TextButton(onClick = {
|
|
|
+ }, colors = ButtonDefaults.textButtonColors(contentColor = Color.White, containerColor = Color.Transparent),
|
|
|
+ modifier = Modifier.padding(0.dp))
|
|
|
+ {
|
|
|
+ Text("Авторизация", fontSize = 12.sp, style = TextStyle(
|
|
|
+ fontWeight = FontWeight.SemiBold), textAlign = TextAlign.Center, color = MaterialTheme.colorScheme.primary) }
|
|
|
+ }
|
|
|
+
|
|
|
+ HorizontalDivider(color= MaterialTheme.colorScheme.onSecondary, thickness = 0.5.dp, modifier = Modifier.padding(horizontal = 24.dp))
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|