Add a bit more padding between form and login button
This commit is contained in:
parent
6c257f9e60
commit
66bdb88b05
3 changed files with 104 additions and 93 deletions
|
|
@ -0,0 +1,103 @@
|
|||
package software.makeshift.debtpirate.usecases.login
|
||||
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.PaddingValues
|
||||
import androidx.compose.foundation.layout.fillMaxSize
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.padding
|
||||
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.Icon
|
||||
import androidx.compose.material3.OutlinedTextField
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
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
|
||||
|
||||
@Composable
|
||||
fun LoginForm(
|
||||
state: LoginState,
|
||||
onUsernameUpdate: (String) -> Unit,
|
||||
onPasswordUpdate: (String) -> Unit
|
||||
) {
|
||||
val (username, password) = state
|
||||
|
||||
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,
|
||||
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,
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(PaddingValues(top = 8.dp))
|
||||
)
|
||||
|
||||
Text(
|
||||
text = buildAnnotatedString {
|
||||
withLink(
|
||||
LinkAnnotation.Url(
|
||||
"", TextLinkStyles(
|
||||
style = SpanStyle(
|
||||
color = Color.Gray
|
||||
)
|
||||
)
|
||||
)
|
||||
) {
|
||||
append(stringResource(id = R.string.login_screen__forgot_password))
|
||||
}
|
||||
},
|
||||
modifier = Modifier.padding(PaddingValues(top = 16.dp))
|
||||
)
|
||||
Button(
|
||||
onClick = { /*TODO*/ },
|
||||
modifier = Modifier
|
||||
.padding(PaddingValues(top = 32.dp))
|
||||
.fillMaxWidth()
|
||||
) {
|
||||
Text(stringResource(id = R.string.login_screen__login))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -6,23 +6,14 @@ 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
|
||||
import androidx.compose.material3.Tab
|
||||
|
|
@ -32,15 +23,6 @@ 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
|
||||
|
||||
|
|
@ -132,77 +114,3 @@ private fun LoginAndSignUpForms(
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun LoginForm(
|
||||
state: LoginState,
|
||||
onUsernameUpdate: (String) -> Unit,
|
||||
onPasswordUpdate: (String) -> Unit
|
||||
) {
|
||||
val (username, password) = state
|
||||
|
||||
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,
|
||||
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,
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(PaddingValues(top = 8.dp))
|
||||
)
|
||||
|
||||
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))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -6,6 +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>
|
||||
<string name="login_screen__forgot_password">Forgot Password?</string>
|
||||
|
||||
</resources>
|
||||
Loading…
Add table
Reference in a new issue