added authorization and registration windows

This commit is contained in:
Никита Онянов 2025-05-13 00:08:57 +03:00
parent fe1c24c664
commit 6e02c724a6
13 changed files with 301 additions and 49 deletions

View File

@ -0,0 +1,26 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="AppInsightsSettings">
<option name="tabSettings">
<map>
<entry key="Firebase Crashlytics">
<value>
<InsightsFilterSettings>
<option name="connection">
<ConnectionSetting>
<option name="appId" value="PLACEHOLDER" />
<option name="mobileSdkAppId" value="" />
<option name="projectId" value="" />
<option name="projectNumber" value="" />
</ConnectionSetting>
</option>
<option name="signal" value="SIGNAL_UNSPECIFIED" />
<option name="timeIntervalDays" value="THIRTY_DAYS" />
<option name="visibilityType" value="ALL" />
</InsightsFilterSettings>
</value>
</entry>
</map>
</option>
</component>
</project>

View File

@ -5,9 +5,6 @@
<SelectionState runConfigName="app"> <SelectionState runConfigName="app">
<option name="selectionMode" value="DROPDOWN" /> <option name="selectionMode" value="DROPDOWN" />
</SelectionState> </SelectionState>
<SelectionState runConfigName="AuthTextFiled">
<option name="selectionMode" value="DROPDOWN" />
</SelectionState>
</selectionStates> </selectionStates>
</component> </component>
</project> </project>

View File

@ -1,6 +1,7 @@
plugins { plugins {
alias(libs.plugins.android.application) alias(libs.plugins.android.application)
alias(libs.plugins.kotlin.android) alias(libs.plugins.kotlin.android)
kotlin("plugin.serialization") version "1.9.25"
} }
android { android {
@ -47,10 +48,15 @@ android {
excludes += "/META-INF/{AL2.0,LGPL2.1}" excludes += "/META-INF/{AL2.0,LGPL2.1}"
} }
} }
buildToolsVersion = "35.0.0"
} }
dependencies { dependencies {
implementation("androidx.navigation:navigation-compose:2.8.9")
implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.3")
implementation(libs.androidx.core.ktx) implementation(libs.androidx.core.ktx)
implementation(libs.androidx.lifecycle.runtime.ktx) implementation(libs.androidx.lifecycle.runtime.ktx)
implementation(libs.androidx.activity.compose) implementation(libs.androidx.activity.compose)
@ -59,6 +65,7 @@ dependencies {
implementation(libs.androidx.ui.graphics) implementation(libs.androidx.ui.graphics)
implementation(libs.androidx.ui.tooling.preview) implementation(libs.androidx.ui.tooling.preview)
implementation(libs.androidx.material3) implementation(libs.androidx.material3)
//implementation(libs.androidx.navigation.compose.jvmstubs)
testImplementation(libs.junit) testImplementation(libs.junit)
androidTestImplementation(libs.androidx.junit) androidTestImplementation(libs.androidx.junit)
androidTestImplementation(libs.androidx.espresso.core) androidTestImplementation(libs.androidx.espresso.core)

View File

@ -1,11 +1,16 @@
package com.example.appwithwin package com.example.appwithwin
import android.os.Bundle import android.os.Bundle
import androidx.activity.ComponentActivity import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge import androidx.activity.enableEdgeToEdge
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.example.appwithwin.ui.screen.signIn.RegisterAccount
import com.example.appwithwin.ui.screen.signIn.SignInScreen import com.example.appwithwin.ui.screen.signIn.SignInScreen
import com.example.appwithwin.ui.theme.MatuleTheme import com.example.appwithwin.ui.theme.MatuleTheme
import androidx.compose.runtime.Composable
class MainActivity : ComponentActivity() { class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) { override fun onCreate(savedInstanceState: Bundle?) {
@ -13,8 +18,38 @@ class MainActivity : ComponentActivity() {
enableEdgeToEdge() enableEdgeToEdge()
setContent { setContent {
MatuleTheme { MatuleTheme {
SignInScreen() AppNavigation()
} }
} }
} }
} }
@Composable
fun AppNavigation() {
val navController = rememberNavController()
NavHost(
navController = navController,
startDestination = Screen.SignIn.route
) {
composable(Screen.SignIn.route) {
SignInScreen(
onSignInClick = { },
onCreateAccountClick = {
navController.navigate(Screen.Register.route)
}
)
}
composable(Screen.Register.route) {
RegisterAccount(
onBackClick = {
navController.popBackStack()
}
)
}
}
}
sealed class Screen(val route: String) {
object SignIn : Screen("signIn")
object Register : Screen("register")
}

View File

@ -0,0 +1,129 @@
package com.example.appwithwin.ui.screen.signIn
import androidx.compose.foundation.clickable
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.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.example.appwithwin.R
import com.example.appwithwin.ui.theme.MatuleTheme
@Composable
fun RegisterAccount(onBackClick: () -> Unit) {
Scaffold(
topBar = {
Row(
modifier = Modifier
.padding(top = 35.dp)
.fillMaxWidth()
.height(40.dp)
) {
IconButton(onClick = onBackClick) {
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.do_you_have_an_account),
style = MatuleTheme.typography.bodyRegular16.copy(color = MatuleTheme.colors.text),
textAlign = TextAlign.Center,
)
Text(
text = stringResource(R.string.sign_in),
style = MatuleTheme.typography.bodyRegular16.copy(color = MatuleTheme.colors.text),
textAlign = TextAlign.Center,
modifier = Modifier.clickable(onClick = onBackClick)
)
}
}
) { paddingValues ->
RegisterInContent(paddingValues)
}
}
@Composable
fun RegisterInContent(paddingValues: PaddingValues) {
Column(
modifier = Modifier.padding(paddingValues = paddingValues)
) {
TitleWithSubtitleText(
title = stringResource(R.string.register),
subTitle = stringResource(R.string.sign_in_subtitle)
)
val email = remember { mutableStateOf("") }
val password = remember { mutableStateOf("") }
val confirmPassword = remember { mutableStateOf("") }
val isAgreementChecked = remember { mutableStateOf(false) }
Spacer(modifier = Modifier.height(35.dp))
AuthTextFiled(
labelText = stringResource(R.string.your_name),
placeHolderText = stringResource(R.string.template_name),
value = email.value,
onValueChange = {
email.value = it
}
)
Spacer(modifier = Modifier.height(16.dp))
AuthTextFiled(
labelText = stringResource(R.string.email),
placeHolderText = stringResource(R.string.template_email),
value = email.value,
onValueChange = { email.value = it }
)
Spacer(modifier = Modifier.height(16.dp))
AuthTextFiled(
labelText = stringResource(R.string.password),
placeHolderText = stringResource(R.string.template_password),
value = confirmPassword.value,
onValueChange = { confirmPassword.value = it },
isPassword = true
)
Spacer(modifier = Modifier.height(16.dp))
Spacer(modifier = Modifier.height(16.dp))
CommonButton(
modifier = Modifier.padding(top = 50.dp),
buttonLabel = stringResource(R.string.Register),
onClick = { },
)
}
}

View File

@ -1,52 +1,51 @@
package com.example.appwithwin.ui.screen.signIn package com.example.appwithwin.ui.screen.signIn
import android.icu.text.AlphabeticIndex.Bucket.LabelType
import androidx.annotation.StringRes
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material3.Button import androidx.compose.material3.Button
import androidx.compose.material3.ButtonColors import androidx.compose.material3.ButtonColors
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.TextFieldDefaults import androidx.compose.material3.TextFieldDefaults
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.text.style.TextAlign 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.dp
import com.example.appwithwin.R import com.example.appwithwin.R
import com.example.appwithwin.ui.theme.MatuleTheme import com.example.appwithwin.ui.theme.MatuleTheme
import org.w3c.dom.Text
@Composable @Composable
fun SignInScreen(){ fun SignInScreen(
onSignInClick: () -> Unit,
onCreateAccountClick: () -> Unit
) {
Scaffold( Scaffold(
topBar = { topBar = {
Row( Row(
@ -58,7 +57,8 @@ fun SignInScreen(){
IconButton(onClick = { }) { IconButton(onClick = { }) {
Icon( Icon(
painter = painterResource(R.drawable.back_arrow), painter = painterResource(R.drawable.back_arrow),
contentDescription = null) contentDescription = null
)
} }
} }
}, },
@ -72,20 +72,25 @@ fun SignInScreen(){
.height(40.dp) .height(40.dp)
) { ) {
Text( Text(
text = stringResource(R.string.sign_up), text = stringResource(R.string.is_this_your_first_time),
style = MatuleTheme.typography.bodyRegular16.copy(color = MatuleTheme.colors.text), style = MatuleTheme.typography.bodyRegular16.copy(color = MatuleTheme.colors.text),
textAlign = TextAlign.Center textAlign = TextAlign.Center,
)
Text(
text = stringResource(R.string.create_new_account),
style = MatuleTheme.typography.bodyRegular16.copy(color = MatuleTheme.colors.text),
textAlign = TextAlign.Center,
modifier = Modifier.clickable(onClick = onCreateAccountClick)
) )
} }
} }
) { paddingValues -> ) { paddingValues ->
SignInContent(paddingValues) SignInContent(paddingValues, onSignInClick)
} }
} }
@Composable @Composable
fun SignInContent(paddingValues: PaddingValues){ fun SignInContent(paddingValues: PaddingValues, onSignInClick: () -> Unit) {
Column( Column(
modifier = Modifier.padding(paddingValues = paddingValues) modifier = Modifier.padding(paddingValues = paddingValues)
) { ) {
@ -94,21 +99,32 @@ fun SignInContent(paddingValues: PaddingValues){
subTitle = stringResource(R.string.sign_in_subtitle) subTitle = stringResource(R.string.sign_in_subtitle)
) )
val email = remember { mutableStateOf("") } val email = remember { mutableStateOf("") }
val password = remember { mutableStateOf("") }
Spacer(modifier = Modifier.height(35.dp)) Spacer(modifier = Modifier.height(35.dp))
AuthTextFiled( AuthTextFiled(
labelText = stringResource(R.string.email), labelText = stringResource(R.string.email),
placeHolderText = stringResource(R.string.template_email), placeHolderText = stringResource(R.string.template_email),
value = email.value, value = email.value,
onValueChange = { onValueChange = { email.value = it }
email.value = it
}
) )
Spacer(modifier = Modifier.height(16.dp))
AuthTextFiled(
labelText = stringResource(R.string.password),
placeHolderText = stringResource(R.string.template_password),
value = password.value,
onValueChange = { password.value = it },
isPassword = true
)
CommonButton( CommonButton(
modifier = Modifier.padding(top = 50.dp), modifier = Modifier.padding(top = 50.dp),
buttonLabel = stringResource(R.string.sign_in) buttonLabel = stringResource(R.string.sign_in),
){ onClick = onSignInClick
)
}
} }
} }
@ -136,7 +152,12 @@ fun TitleWithSubtitleText(title: String, subTitle: String){
@OptIn(ExperimentalMaterial3Api::class) @OptIn(ExperimentalMaterial3Api::class)
@Composable @Composable
fun AuthTextFiled(value: String, onValueChange: (String) -> Unit, placeHolderText: String? = null, labelText: String? = null){ fun AuthTextFiled(value: String,
onValueChange: (String) -> Unit,
placeHolderText: String? = null,
labelText: String? = null,
isPassword: Boolean = false
){
Column ( Column (
modifier = Modifier modifier = Modifier
.padding(horizontal = 20.dp) .padding(horizontal = 20.dp)
@ -151,13 +172,16 @@ fun AuthTextFiled(value: String, onValueChange: (String) -> Unit, placeHolderTex
) )
} }
val interaction = remember { MutableInteractionSource() } val interaction = remember { MutableInteractionSource() }
var passwordVisible by remember { mutableStateOf(false) }
BasicTextField( BasicTextField(
value = value, value = value,
onValueChange = { onValueChange(it) }, onValueChange = { onValueChange(it) },
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.clip(RoundedCornerShape(14.dp)) .clip(RoundedCornerShape(14.dp))
.background(MatuleTheme.colors.background) .background(MatuleTheme.colors.background),
visualTransformation = if (isPassword && !passwordVisible) PasswordVisualTransformation() else VisualTransformation.None
){ ){
innerTextField -> innerTextField ->
TextFieldDefaults.DecorationBox( TextFieldDefaults.DecorationBox(
@ -165,8 +189,20 @@ fun AuthTextFiled(value: String, onValueChange: (String) -> Unit, placeHolderTex
singleLine = true, singleLine = true,
innerTextField = innerTextField, innerTextField = innerTextField,
enabled = true, enabled = true,
visualTransformation = VisualTransformation.None, visualTransformation = if (isPassword && !passwordVisible) PasswordVisualTransformation() else VisualTransformation.None,
interactionSource = interaction, interactionSource = interaction,
trailingIcon = {
if (isPassword) {
IconButton(onClick = { passwordVisible = !passwordVisible }) {
Icon(
painter = painterResource(
if (passwordVisible) R.drawable.ic_visibility else R.drawable.ic_visibility_off
),
contentDescription = if (passwordVisible) "Hide password" else "Show password"
)
}
}
},
colors = TextFieldDefaults.colors( colors = TextFieldDefaults.colors(
focusedContainerColor = MatuleTheme.colors.background, focusedContainerColor = MatuleTheme.colors.background,
disabledContainerColor = MatuleTheme.colors.background, disabledContainerColor = MatuleTheme.colors.background,
@ -191,26 +227,30 @@ fun AuthTextFiled(value: String, onValueChange: (String) -> Unit, placeHolderTex
} }
@Composable @Composable
fun CommonButton(modifier: Modifier, buttonLabel: String, onClick: ()-> Unit){ fun CommonButton(
modifier: Modifier,
buttonLabel: String,
onClick: () -> Unit,
enabled: Boolean = true
) {
Button( Button(
modifier = modifier modifier = modifier
.padding(horizontal = 20.dp) .padding(horizontal = 20.dp)
.fillMaxWidth() .fillMaxWidth()
.height(50.dp) .height(50.dp)
.clip(RoundedCornerShape(14.dp)) .clip(RoundedCornerShape(14.dp)),
.background(MatuleTheme.colors.accent)
,
colors = ButtonColors( colors = ButtonColors(
containerColor = MatuleTheme.colors.accent, containerColor = MatuleTheme.colors.accent,
disabledContentColor = Color.Transparent, disabledContainerColor = MatuleTheme.colors.subTextDark,
disabledContainerColor = MatuleTheme.colors.accent, contentColor = Color.White,
contentColor = Color.Transparent disabledContentColor = Color.White.copy(alpha = 0.5f)
), ),
onClick = onClick onClick = onClick,
enabled = enabled
) { ) {
Text( Text(
text = buttonLabel, text = buttonLabel,
style = MatuleTheme.typography.bodyRegular14.copy(color = MatuleTheme.colors.background), style = MatuleTheme.typography.bodyRegular14.copy(color = Color.White),
textAlign = TextAlign.Center textAlign = TextAlign.Center
) )
} }

View File

@ -0,0 +1,2 @@
package com.example.appwithwin.ui.screen.signIn

View File

@ -30,5 +30,4 @@ val Typography = Typography(
lineHeight = 16.sp, lineHeight = 16.sp,
letterSpacing = 0.5.sp letterSpacing = 0.5.sp
) )
*/ */)
)

Binary file not shown.

After

Width:  |  Height:  |  Size: 242 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 279 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 322 B

View File

@ -5,5 +5,20 @@
<string name="template_email">xyz@gmail.com</string> <string name="template_email">xyz@gmail.com</string>
<string name="email">Email</string> <string name="email">Email</string>
<string name="sign_in">Войти</string> <string name="sign_in">Войти</string>
<string name="sign_up">Вы впервые? Создать пользователя</string> <string name="password">Пароль</string>
<string name="enter_password">password</string>
<string name="create_account">Create Account</string>
<string name="register_subtitle">Fill in your details to create an account</string>
<string name="confirm_password">Confirm Password</string>
<string name="repeat_password">Repeat your password</string>
<string name="register">Регистрация</string>
<string name="create_new_account">Создать пользователя</string>
<string name="already_have_account">Already have an account? Sign in</string>
<string name="your_name">Ваше имя</string>
<string name="template_name">xxxxxxxx</string>
<string name="template_password">xxxxxxxx</string>
<string name="is_this_your_first_time">Вы впервые? </string>
<string name="do_you_have_an_account">Есть аккаунт? </string>
<string name="Register">Зарегистрироваться</string>
<string name="i_agree_to_terms">Даю согласие на обработку персональных данных</string>
</resources> </resources>

View File

@ -8,6 +8,7 @@ espressoCore = "3.6.1"
lifecycleRuntimeKtx = "2.8.7" lifecycleRuntimeKtx = "2.8.7"
activityCompose = "1.10.0" activityCompose = "1.10.0"
composeBom = "2024.04.01" composeBom = "2024.04.01"
navigationComposeJvmstubs = "2.9.0"
[libraries] [libraries]
androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" } androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
@ -24,6 +25,7 @@ androidx-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-toolin
androidx-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest" } androidx-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest" }
androidx-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" } androidx-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
androidx-material3 = { group = "androidx.compose.material3", name = "material3" } androidx-material3 = { group = "androidx.compose.material3", name = "material3" }
androidx-navigation-compose-jvmstubs = { group = "androidx.navigation", name = "navigation-compose-jvmstubs", version.ref = "navigationComposeJvmstubs" }
[plugins] [plugins]
android-application = { id = "com.android.application", version.ref = "agp" } android-application = { id = "com.android.application", version.ref = "agp" }