Feature/auth flow setup

composeApp/src/androidMain/kotlin/friends/mobile/auth/LoginScreen.kt

@@ -1,24 +1,26 @@
 package friends.mobile.auth
 
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 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.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.AlertDialog
-import androidx.compose.material3.Button
 import androidx.compose.material3.CircularProgressIndicator
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.painterResource
+import friends.mobile.R
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -29,9 +31,13 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.input.KeyboardCapitalization
 import androidx.compose.ui.text.input.KeyboardType
-import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import friends.mobile.designkit.DesignTheme
+import friends.mobile.designkit.FormErrorMessage
+import friends.mobile.designkit.FormSecureField
+import friends.mobile.designkit.FormTextField
+import friends.mobile.designkit.PrimaryButton
 import friends.mobile.feature.auth.domain.model.AuthSession
 import friends.mobile.feature.auth.presentation.login.LoginAction
 import friends.mobile.feature.auth.presentation.login.LoginEvent
@@ -112,61 +118,95 @@ private fun LoginForm(
     onEvent: (LoginEvent) -> Unit,
     onRegisterClick: () -> Unit
 ) {
-    Column(
+    LazyColumn(
         modifier = Modifier
             .fillMaxSize()
-            .padding(24.dp),
-        verticalArrangement = Arrangement.Center,
-        horizontalAlignment = Alignment.CenterHorizontally
+            .padding(horizontal = DesignTheme.Spacing.xl),
+        verticalArrangement = Arrangement.spacedBy(DesignTheme.Spacing.xxxl),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        contentPadding = androidx.compose.foundation.layout.PaddingValues(
+            vertical = DesignTheme.Spacing.lg
+        )
     ) {
-        Text(text = "Welcome Back", style = MaterialTheme.typography.headlineLarge)
-        Spacer(modifier = Modifier.height(32.dp))
+        item {
+            Spacer(modifier = Modifier.height(DesignTheme.Spacing.md))
+        }
 
-        OutlinedTextField(
-            value = state.username,
-            onValueChange = { onEvent(LoginEvent.OnUsernameChanged(it)) },
-            label = { Text("Username") },
-            modifier = Modifier.fillMaxWidth(),
-            singleLine = true,
-            keyboardOptions = KeyboardOptions(
-                capitalization = KeyboardCapitalization.None,
-                autoCorrectEnabled = false
+        item {
+            Image(
+                painter = painterResource(id = R.drawable.onboarding_image),
+                contentDescription = null,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(200.dp)
+                    .padding(horizontal = DesignTheme.Spacing.sm)
             )
-        )
+        }
 
-        Spacer(modifier = Modifier.height(16.dp))
+        item {
+            Column(
+                modifier = Modifier.fillMaxWidth(),
+                verticalArrangement = Arrangement.spacedBy(DesignTheme.Spacing.lg),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                FormTextField(
+                    value = state.username,
+                    onValueChange = { onEvent(LoginEvent.OnUsernameChanged(it)) },
+                    placeholder = "Username",
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(54.dp),
+                    keyboardOptions = KeyboardOptions(
+                        capitalization = KeyboardCapitalization.None,
+                        autoCorrectEnabled = false
+                    )
+                )
 
-        OutlinedTextField(
-            value = state.password,
-            onValueChange = { onEvent(LoginEvent.OnPasswordChanged(it)) },
-            label = { Text("Password") },
-            modifier = Modifier.fillMaxWidth(),
-            singleLine = true,
-            visualTransformation = PasswordVisualTransformation(),
-            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
-        )
+                FormSecureField(
+                    value = state.password,
+                    onValueChange = { onEvent(LoginEvent.OnPasswordChanged(it)) },
+                    placeholder = "Password",
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(54.dp),
+                    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
+                )
+            }
+        }
 
-        Spacer(modifier = Modifier.height(24.dp))
+        item {
+            PrimaryButton(
+                text = if (state.isLoggingIn) "Logging in..." else "Login",
+                onClick = { onEvent(LoginEvent.OnLoginClick) },
+                modifier = Modifier.fillMaxWidth(),
+                isLoading = state.isLoggingIn,
+                isEnabled = state.username.isNotBlank() && state.password.isNotBlank()
+            )
+        }
 
-        Button(
-            onClick = { onEvent(LoginEvent.OnLoginClick) },
-            modifier = Modifier.fillMaxWidth().height(50.dp),
-            enabled = !state.isLoggingIn && state.username.isNotBlank() && state.password.isNotBlank()
-        ) {
-            if (state.isLoggingIn) {
-                CircularProgressIndicator(modifier = Modifier.size(24.dp), color = Color.White)
-            } else {
-                Text("Login")
+        item {
+            Row(
+                horizontalArrangement = Arrangement.Center,
+                verticalAlignment = Alignment.CenterVertically,
+                modifier = Modifier.fillMaxWidth()
+            ) {
+                Text(
+                    text = "Don't have an account?",
+                    style = DesignTheme.Typography.caption,
+                    color = Color.Gray
+                )
+                Spacer(modifier = Modifier.width(DesignTheme.Spacing.xs))
+                Text(
+                    text = "Sign up",
+                    modifier = Modifier.clickable { onRegisterClick() },
+                    style = DesignTheme.Typography.captionSemibold,
+                    color = DesignTheme.Colors.primaryHex
+                )
             }
         }
 
-        Spacer(modifier = Modifier.height(16.dp))
-
-        Text(
-            text = "Don't have an account? Register",
-            modifier = Modifier.clickable { onRegisterClick() },
-            style = MaterialTheme.typography.bodyMedium,
-            color = MaterialTheme.colorScheme.primary
-        )
+        item {
+            Spacer(modifier = Modifier.height(DesignTheme.Spacing.xl))
+        }
     }
 }