First draft at the login screen

app/app/build.gradle.kts

@@ -66,6 +66,7 @@ dependencies {
     implementation(libs.androidx.navigation.compose)
     implementation(libs.androidx.lifecycle.viewmodel.compose)
     implementation(libs.lifecycle.runtime.compose)
+    implementation(libs.androidx.material.icons.extended)
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)

app/app/src/main/java/software/makeshift/debtpirate/usecases/login/LoginScreen.kt

@@ -6,16 +6,22 @@ import android.annotation.SuppressLint
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.Lock
+import androidx.compose.material.icons.outlined.Person
 import androidx.compose.material3.Button
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SecondaryTabRow
@@ -26,10 +32,15 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.LinkAnnotation
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.TextLinkStyles
+import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.input.ImeAction
 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.text.withLink
 import androidx.compose.ui.unit.dp
 import software.makeshift.debtpirate.R
 
@@ -130,34 +141,67 @@ private fun LoginForm(
 ) {
     val (username, password) = state
 
-    Column(horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.fillMaxSize()) {
+    Column(
+        modifier = Modifier
+            .padding(16.dp)
+            .fillMaxSize()
+    ) {
         OutlinedTextField(
             value = username,
             label = { Text(stringResource(id = R.string.login_screen__username)) },
             placeholder = { Text(stringResource(id = R.string.login_screen__username)) },
+            leadingIcon = { Icon(Icons.Outlined.Person, "person") },
             singleLine = true,
             keyboardOptions = KeyboardOptions(
                 capitalization = KeyboardCapitalization.Unspecified,
                 keyboardType = KeyboardType.Email,
                 imeAction = ImeAction.Next
             ),
-            onValueChange = onUsernameUpdate
+            onValueChange = onUsernameUpdate,
+            modifier = Modifier.fillMaxWidth()
         )
 
         OutlinedTextField(
             value = password,
             label = { Text(stringResource(id = R.string.login_screen__password)) },
             placeholder = { Text(stringResource(id = R.string.login_screen__password)) },
+            leadingIcon = { Icon(Icons.Outlined.Lock, "password") },
+            singleLine = true,
             keyboardOptions = KeyboardOptions(
                 capitalization = KeyboardCapitalization.Unspecified,
                 keyboardType = KeyboardType.Password,
                 imeAction = ImeAction.Send
             ),
             visualTransformation = PasswordVisualTransformation(),
-            onValueChange = onPasswordUpdate
+            onValueChange = onPasswordUpdate,
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(PaddingValues(top = 8.dp))
         )
 
-        Button(onClick = { /*TODO*/ }) {
+        Text(
+            text = buildAnnotatedString {
+                withLink(
+                    LinkAnnotation.Url(
+                        "", TextLinkStyles(
+                            style = SpanStyle(
+                                color = Color.Blue
+                            )
+                        )
+                    )
+                ) {
+                    append(stringResource(id = R.string.login_screen__forgot_password))
+                }
+            },
+            modifier = Modifier.padding(PaddingValues(top = 16.dp))
+        )
+
+        Button(
+            onClick = { /*TODO*/ },
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(PaddingValues(top = 16.dp))
+        ) {
             Text(stringResource(id = R.string.login_screen__login))
         }
     }

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

@@ -6,5 +6,6 @@
     <string name="login_screen__signup">Sign Up</string>
     <string name="login_screen__username">Username</string>
     <string name="login_screen__password">Password</string>
+    <string name="login_screen__forgot_password">Forgot Password</string>
 
 </resources>

app/gradle/libs.versions.toml

@@ -15,6 +15,7 @@ lifecycleRuntimeKtx = "2.8.4"
 activityCompose = "1.9.1"
 composeBom = "2024.06.00"
 navigation = "2.8.0-beta01"
+iconsExtended = "1.7.0-beta07"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
@@ -38,6 +39,7 @@ androidx-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-man
 androidx-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
 androidx-navigation-compose = { group = "androidx.navigation", name = "navigation-compose", version.ref = "navigation" }
 androidx-navigation-testing = { group = "androidx.navigation", name = "navigation-testing", version.ref = "navigation" }
+androidx-material-icons-extended = { group = "androidx.compose.material", name = "material-icons-extended-android", version.ref = "iconsExtended" }
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }