Worked on Password form screen and completed form UI

app/src/main/java/com/fastest/pass/home/presentation/ui/components/AddNewItemsScreen.kt

@@ -78,7 +78,7 @@ fun AddNewItemsScreen(clickType: (ClickTypeAddNewItem) -> Unit) {
         }
         Spacer(modifier = Modifier.height(20.dp))
         GapLineANI()
-        Spacer(modifier = Modifier.height(0.dp))
+//        Spacer(modifier = Modifier.height(0.dp))
         AddNewItemList() { itemName ->
             clickType(itemName)
         }

app/src/main/java/com/fastest/pass/home/presentation/ui/components/AddPasswordFormScreen.kt

@@ -0,0 +1,561 @@
+package com.fastest.pass.home.presentation.ui.components
+
+import android.os.Handler
+import android.util.Log
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.defaultMinSize
+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.wrapContentHeight
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Switch
+import androidx.compose.material3.SwitchDefaults
+import androidx.compose.material3.Text
+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.scale
+import androidx.compose.ui.focus.FocusManager
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.platform.SoftwareKeyboardController
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.ImeAction
+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.unit.dp
+import androidx.compose.ui.unit.sp
+import com.fastest.pass.R
+import com.fastest.pass.login.presentation.ui.components.ClickType
+
+@Composable
+fun AddPasswordFormScreen() {
+    val keyboardController = LocalSoftwareKeyboardController.current
+    val focusManager = LocalFocusManager.current
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(horizontal = 30.dp)
+            .background(Color.Transparent)
+    ) {
+        Spacer(modifier = Modifier.height(20.dp))
+        TitleTextFieldAPS(keyboardController = keyboardController, focusManager = focusManager)
+        Spacer(modifier = Modifier.height(20.dp))
+        UrlTextFieldAPS(keyboardController = keyboardController, focusManager = focusManager)
+        Spacer(modifier = Modifier.height(20.dp))
+        UsernameTextFieldAPS(keyboardController = keyboardController, focusManager = focusManager)
+        Spacer(modifier = Modifier.height(20.dp))
+        PasswordTextFieldAPS(keyboardController = keyboardController, focusManager = focusManager)
+        Spacer(modifier = Modifier.height(20.dp))
+        NotesTextFieldAPS(keyboardController = keyboardController, focusManager = focusManager)
+        Spacer(modifier = Modifier.height(25.dp))
+        OptionsText()
+        Spacer(modifier = Modifier.height(25.dp))
+        AutoFillOption()
+        Spacer(modifier = Modifier.height(25.dp))
+        SaveButton(buttonText = R.string.save)
+    }
+}
+
+@Composable
+fun ColumnScope.TitleTextFieldAPS(
+    keyboardController: SoftwareKeyboardController?,
+    focusManager: FocusManager
+) {
+    var titleText by remember { mutableStateOf("") }
+
+    TextField(
+        value = titleText,
+        onValueChange = {
+            titleText = it
+        },
+        textStyle = MaterialTheme.typography.displayMedium,
+        modifier = Modifier
+            .align(Alignment.Start)
+            .fillMaxWidth()
+            .defaultMinSize(minHeight = 60.dp)
+            .wrapContentHeight()
+            .border(
+                1.dp,
+                color = colorResource(id = R.color.gray_border_textfield),
+                shape = RoundedCornerShape(16.dp)
+            )
+            .background(color = colorResource(id = R.color.transparent)),
+        shape = RoundedCornerShape(16.dp),
+//        placeholder = {
+//            Text(
+//                text = stringResource(id = R.string.enter_email_address),
+//                color = colorResource(id = R.color.gray_splash),
+//                style = MaterialTheme.typography.displayMedium
+//            )
+//        },
+        label = {
+            Text(text = stringResource(R.string.title),
+                style = MaterialTheme.typography.titleSmall.copy(
+                    color = colorResource(id = R.color.gray_text)
+                )
+            )
+        },
+//        leadingIcon = {
+//            Image(
+//                painter = painterResource(id = R.drawable.profile_circle),
+//                contentDescription = "Title Logo",
+//                modifier = Modifier
+//                    .size(24.dp, 24.dp)
+//            )
+//        },
+        colors = TextFieldDefaults.colors(
+            focusedLabelColor = colorResource(id = R.color.gray_splash),
+            unfocusedContainerColor = colorResource(id = R.color.transparent),
+            focusedContainerColor = colorResource(id = R.color.transparent),
+            focusedIndicatorColor = colorResource(id = R.color.transparent),
+            disabledIndicatorColor = colorResource(id = R.color.transparent),
+            unfocusedIndicatorColor = colorResource(id = R.color.transparent),
+            cursorColor = colorResource(id = R.color.gray_splash),
+        ),
+        keyboardOptions = KeyboardOptions(
+            keyboardType = KeyboardType.Text,
+            imeAction = ImeAction.Done
+        ),
+        keyboardActions = KeyboardActions(
+            onDone = {
+                focusManager.clearFocus()
+                keyboardController?.hide()
+            }
+        ),
+    )
+}
+
+@Composable
+fun ColumnScope.UrlTextFieldAPS(
+    keyboardController: SoftwareKeyboardController?,
+    focusManager: FocusManager
+) {
+    var urlText by remember { mutableStateOf("") }
+
+    TextField(
+        value = urlText,
+        onValueChange = {
+            urlText = it
+        },
+        textStyle = MaterialTheme.typography.displayMedium,
+        modifier = Modifier
+            .align(Alignment.Start)
+            .fillMaxWidth()
+            .defaultMinSize(minHeight = 60.dp)
+            .wrapContentHeight()
+            .border(
+                1.dp,
+                color = colorResource(id = R.color.gray_border_textfield),
+                shape = RoundedCornerShape(16.dp)
+            )
+            .background(color = colorResource(id = R.color.transparent)),
+        shape = RoundedCornerShape(16.dp),
+//        placeholder = {
+//            Text(
+//                text = stringResource(id = R.string.enter_email_address),
+//                color = colorResource(id = R.color.gray_splash),
+//                style = MaterialTheme.typography.displayMedium
+//            )
+//        },
+        label = {
+            Text(text = stringResource(R.string.url),
+                style = MaterialTheme.typography.titleSmall.copy(
+                    color = colorResource(id = R.color.gray_text)
+                )
+            )
+        },
+//        leadingIcon = {
+//            Image(
+//                painter = painterResource(id = R.drawable.profile_circle),
+//                contentDescription = "Title Logo",
+//                modifier = Modifier
+//                    .size(24.dp, 24.dp)
+//            )
+//        },
+        trailingIcon = {
+            IconButton(
+                onClick = {
+                    urlText = ""
+                },
+                ) {
+                if (urlText.isNotEmpty()) {
+                    Image(
+                        painter = painterResource(id = R.drawable.clear_button),
+                        contentDescription = "clear button",
+                        modifier = Modifier.size(24.dp)
+                    )
+                }
+            }
+        },
+        colors = TextFieldDefaults.colors(
+            focusedLabelColor = colorResource(id = R.color.gray_splash),
+            unfocusedContainerColor = colorResource(id = R.color.transparent),
+            focusedContainerColor = colorResource(id = R.color.transparent),
+            focusedIndicatorColor = colorResource(id = R.color.transparent),
+            disabledIndicatorColor = colorResource(id = R.color.transparent),
+            unfocusedIndicatorColor = colorResource(id = R.color.transparent),
+            cursorColor = colorResource(id = R.color.gray_splash),
+        ),
+        keyboardOptions = KeyboardOptions(
+            keyboardType = KeyboardType.Uri,
+            imeAction = ImeAction.Done
+        ),
+        keyboardActions = KeyboardActions(
+            onDone = {
+                focusManager.clearFocus()
+                keyboardController?.hide()
+            }
+        ),
+    )
+}
+
+@Composable
+fun ColumnScope.UsernameTextFieldAPS(
+    keyboardController: SoftwareKeyboardController?,
+    focusManager: FocusManager
+) {
+    var usernameText by remember { mutableStateOf("") }
+
+    TextField(
+        value = usernameText,
+        onValueChange = {
+            usernameText = it
+        },
+        textStyle = MaterialTheme.typography.displayMedium,
+        modifier = Modifier
+            .align(Alignment.Start)
+            .fillMaxWidth()
+            .defaultMinSize(minHeight = 60.dp)
+            .wrapContentHeight()
+            .border(
+                1.dp,
+                color = colorResource(id = R.color.gray_border_textfield),
+                shape = RoundedCornerShape(16.dp)
+            )
+            .background(color = colorResource(id = R.color.transparent)),
+        shape = RoundedCornerShape(16.dp),
+//        placeholder = {
+//            Text(
+//                text = stringResource(id = R.string.enter_email_address),
+//                color = colorResource(id = R.color.gray_splash),
+//                style = MaterialTheme.typography.displayMedium
+//            )
+//        },
+        label = {
+            Text(text = stringResource(R.string.username),
+                style = MaterialTheme.typography.titleSmall.copy(
+                    color = colorResource(id = R.color.gray_text)
+                )
+            )
+        },
+//        leadingIcon = {
+//            Image(
+//                painter = painterResource(id = R.drawable.profile_circle),
+//                contentDescription = "Title Logo",
+//                modifier = Modifier
+//                    .size(24.dp, 24.dp)
+//            )
+//        },
+        colors = TextFieldDefaults.colors(
+            focusedLabelColor = colorResource(id = R.color.gray_splash),
+            unfocusedContainerColor = colorResource(id = R.color.transparent),
+            focusedContainerColor = colorResource(id = R.color.transparent),
+            focusedIndicatorColor = colorResource(id = R.color.transparent),
+            disabledIndicatorColor = colorResource(id = R.color.transparent),
+            unfocusedIndicatorColor = colorResource(id = R.color.transparent),
+            cursorColor = colorResource(id = R.color.gray_splash),
+        ),
+        keyboardOptions = KeyboardOptions(
+            keyboardType = KeyboardType.Text,
+            imeAction = ImeAction.Done
+        ),
+        keyboardActions = KeyboardActions(
+            onDone = {
+                focusManager.clearFocus()
+                keyboardController?.hide()
+            }
+        ),
+    )
+}
+
+@Composable
+fun ColumnScope.PasswordTextFieldAPS(
+    keyboardController: SoftwareKeyboardController?,
+    focusManager: FocusManager
+) {
+    var passwordText by remember { mutableStateOf("") }
+    var passwordVisible by remember { mutableStateOf(false) }
+
+    TextField(
+        value = passwordText,
+        onValueChange = {
+            passwordText = it
+        },
+        textStyle = MaterialTheme.typography.displayMedium,
+        modifier = Modifier
+            .align(Alignment.Start)
+            .fillMaxWidth()
+            .defaultMinSize(minHeight = 60.dp)
+            .wrapContentHeight()
+            .border(
+                1.dp,
+                color = colorResource(id = R.color.gray_border_textfield),
+                shape = RoundedCornerShape(16.dp)
+            )
+            .background(color = colorResource(id = R.color.transparent)),
+        shape = RoundedCornerShape(16.dp),
+//        placeholder = {
+//            Text(
+//                text = stringResource(id = R.string.enter_password),
+//                color = colorResource(id = R.color.gray_splash),
+//                style = MaterialTheme.typography.displayMedium
+//            )
+//        },
+        label = {
+            Text(text = stringResource(R.string.password),
+                style = MaterialTheme.typography.titleSmall.copy(
+                    color = colorResource(id = R.color.gray_text)
+                )
+            )
+        },
+        colors = TextFieldDefaults.colors(
+            focusedLabelColor = colorResource(id = R.color.gray_splash),
+            unfocusedContainerColor = colorResource(id = R.color.transparent),
+            focusedContainerColor = colorResource(id = R.color.transparent),
+            focusedIndicatorColor = colorResource(id = R.color.transparent),
+            disabledIndicatorColor = colorResource(id = R.color.transparent),
+            unfocusedIndicatorColor = colorResource(id = R.color.transparent),
+            cursorColor = colorResource(id = R.color.gray_splash),
+        ),
+        keyboardOptions = KeyboardOptions(
+            keyboardType = KeyboardType.Password,
+            imeAction = ImeAction.Done
+        ),
+        keyboardActions = KeyboardActions(
+            onDone = {
+                focusManager.clearFocus()
+                keyboardController?.hide()
+            }
+        ),
+        visualTransformation =
+        if (passwordVisible) VisualTransformation.Companion.None
+        else PasswordVisualTransformation(),
+
+        trailingIcon = {
+            val description = if (passwordVisible) "Hide Password"
+            else "Show Password"
+
+            IconButton(onClick = {
+                passwordVisible = !passwordVisible
+            })
+            {
+                if (passwordVisible) {
+                    Image(
+                        painter = painterResource(id = R.drawable.eye_open),
+                        contentDescription = description,
+                        modifier = Modifier.size(24.dp)
+                    )
+                }
+                else {
+                    Image(
+                        painter = painterResource(id = R.drawable.eye_slash3x),
+                        contentDescription = description,
+                        modifier = Modifier
+                            .size(24.dp),
+                        colorFilter = ColorFilter.tint(
+                            colorResource(id = R.color.gray_splash)
+                        )
+                    )
+                }
+            }
+        }
+    )
+}
+
+@Composable
+fun ColumnScope.NotesTextFieldAPS(
+    keyboardController: SoftwareKeyboardController?,
+    focusManager: FocusManager
+) {
+    var notesText by remember { mutableStateOf("") }
+
+    TextField(
+        value = notesText,
+        onValueChange = {
+            notesText = it
+        },
+        textStyle = MaterialTheme.typography.displayMedium,
+        modifier = Modifier
+            .align(Alignment.Start)
+            .fillMaxWidth()
+            .defaultMinSize(minHeight = 60.dp)
+            .wrapContentHeight()
+            .border(
+                1.dp,
+                color = colorResource(id = R.color.gray_border_textfield),
+                shape = RoundedCornerShape(16.dp)
+            )
+            .background(color = colorResource(id = R.color.transparent))
+        ,
+        shape = RoundedCornerShape(16.dp),
+//        placeholder = {
+//            Text(
+//                text = stringResource(id = R.string.enter_email_address),
+//                color = colorResource(id = R.color.gray_splash),
+//                style = MaterialTheme.typography.displayMedium
+//            )
+//        },
+        label = {
+            Text(text = stringResource(R.string.notes),
+                style = MaterialTheme.typography.titleSmall.copy(
+                    color = colorResource(id = R.color.gray_text)
+                )
+            )
+        },
+//        leadingIcon = {
+//            Image(
+//                painter = painterResource(id = R.drawable.profile_circle),
+//                contentDescription = "Title Logo",
+//                modifier = Modifier
+//                    .size(24.dp, 24.dp)
+//            )
+//        },
+        colors = TextFieldDefaults.colors(
+            focusedLabelColor = colorResource(id = R.color.gray_splash),
+            unfocusedContainerColor = colorResource(id = R.color.transparent),
+            focusedContainerColor = colorResource(id = R.color.transparent),
+            focusedIndicatorColor = colorResource(id = R.color.transparent),
+            disabledIndicatorColor = colorResource(id = R.color.transparent),
+            unfocusedIndicatorColor = colorResource(id = R.color.transparent),
+            cursorColor = colorResource(id = R.color.gray_splash),
+        ),
+        keyboardOptions = KeyboardOptions(
+            keyboardType = KeyboardType.Text,
+            imeAction = ImeAction.Done
+        ),
+        keyboardActions = KeyboardActions(
+            onDone = {
+                focusManager.clearFocus()
+                keyboardController?.hide()
+            }
+        ),
+    )
+}
+
+@Composable
+fun ColumnScope.OptionsText() {
+    Text(
+        text = stringResource(id = R.string.options),
+        color = colorResource(id = R.color.gray_splash),
+        style = MaterialTheme.typography.titleMedium,
+        lineHeight = 20.sp,
+        modifier = Modifier
+            .align(Alignment.Start)
+    )
+}
+
+@Composable
+fun ColumnScope.AutoFillOption() {
+    var isSwitch by remember { mutableStateOf(false) }
+
+    Column {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(30.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Text(
+                text = stringResource(id = R.string.autofill),
+                color = colorResource(id = R.color.gray_splash),
+                style = MaterialTheme.typography.titleMedium,
+                lineHeight = 20.sp,
+                modifier = Modifier
+            )
+            Spacer(modifier = Modifier.weight(1F))
+            Switch(
+                checked = isSwitch,
+                onCheckedChange = {
+                    isSwitch = it
+                },
+                modifier = Modifier.scale(0.8F),
+                colors = SwitchDefaults.colors(
+                    checkedThumbColor = colorResource(id = R.color.white),
+                    checkedTrackColor = colorResource(id = R.color.sky_green),
+                    uncheckedThumbColor = colorResource(id = R.color.white),
+                    uncheckedTrackColor = colorResource(id = R.color.gray_text),
+                    uncheckedBorderColor = colorResource(id = R.color.gray_text),
+                ),
+                thumbContent = {}
+            )
+        }
+        Text(
+            text = stringResource(id = R.string.automatically_fill_credentials),
+            color = colorResource(id = R.color.gray_text),
+            style = MaterialTheme.typography.displayMedium,
+            lineHeight = 20.sp,
+            modifier = Modifier
+                .align(Alignment.Start)
+                .fillMaxWidth(fraction = 0.8f)
+        )
+    }
+}
+
+@Composable
+fun ColumnScope.SaveButton(buttonText: Int) {
+    Button(
+        modifier = Modifier
+            .background(colorResource(id = R.color.transparent))
+            .fillMaxWidth()
+            .height(60.dp)
+            .clickable() { },
+        onClick = {},
+        shape = RoundedCornerShape(15.dp),
+//            border = BorderStroke(25.dp, colorResource(id = R.color.black)),
+        colors = ButtonDefaults.buttonColors(
+            contentColor = colorResource(id = R.color.white),
+            containerColor = colorResource(id = R.color.red_login_button),
+        ),
+    )
+    {
+        Text(
+            text = stringResource(id = buttonText),
+            style = MaterialTheme.typography.bodyMedium.copy(
+                fontSize = 20.sp,
+                color = colorResource(id = R.color.white)
+            ),
+            textAlign = TextAlign.Center
+        )
+    }
+}

app/src/main/java/com/fastest/pass/home/presentation/ui/components/NewItemFormScreen.kt

@@ -53,9 +53,12 @@ fun NewItemFormScreen(screenName: String, screenNameType: ClickTypeAddNewItem, c
         ShowNewItemFormHeader(text = screenName) { clickTypeNewItemForm ->
             clickType(clickTypeNewItemForm)
         }
+        Spacer(modifier = Modifier.height(20.dp))
+        GapLineANI()
 
         when (screenNameType) {
             ClickTypeAddNewItem.Password -> {
+                AddPasswordFormScreen()
             }
             ClickTypeAddNewItem.Bank -> {
             }

app/src/main/java/com/fastest/pass/ui/theme/Type.kt

@@ -63,13 +63,13 @@ val Typography = Typography(
     ),
     titleSmall = TextStyle(
         fontFamily = outfitFontFamily,
-        fontWeight = FontWeight.Medium,
-        fontSize = 16.sp,
+        fontWeight = FontWeight.Normal,
+        fontSize = 15.sp,
     ),
     titleMedium = TextStyle(
         fontFamily = outfitFontFamily,
         fontWeight = FontWeight.Medium,
-        fontSize = 18.sp,
+        fontSize = 16.sp,
     ),
     titleLarge = TextStyle(
         fontFamily = outfitFontFamily,

app/src/main/res/drawable/clear_button.xml

@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="25dp"
+    android:height="25dp"
+    android:viewportWidth="25"
+    android:viewportHeight="25">
+  <path
+      android:pathData="M16.213,17.273L7.728,8.788C7.438,8.498 7.438,8.017 7.728,7.727C8.017,7.437 8.498,7.437 8.788,7.727L17.274,16.212C17.563,16.502 17.563,16.983 17.274,17.273C16.984,17.563 16.503,17.563 16.213,17.273Z"
+      android:fillColor="#404B69"/>
+  <path
+      android:pathData="M7.727,17.273C7.438,16.983 7.438,16.502 7.727,16.212L16.213,7.727C16.503,7.437 16.983,7.437 17.273,7.727C17.563,8.017 17.563,8.498 17.273,8.788L8.788,17.273C8.498,17.563 8.017,17.563 7.727,17.273Z"
+      android:fillColor="#404B69"/>
+</vector>

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

@@ -54,5 +54,14 @@
     <string name="security_dashboard">Security dashboard</string>
     <string name="keep_track_online">Keep track of your online security</string>
     <string name="add_password">Add Password</string>
+    <string name="title">Title</string>
+    <string name="url">URL</string>
+    <string name="username">Username</string>
+    <string name="password">Password</string>
+    <string name="notes">Notes</string>
+    <string name="options">Options</string>
+    <string name="automatically_fill_credentials">Automatically fill your username and password when using the extension.</string>
+    <string name="autofill">Autofill</string>
+    <string name="save">Save</string>
 
 </resources>