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.background
|
||||||
import androidx.compose.foundation.layout.Box
|
import androidx.compose.foundation.layout.Box
|
||||||
import androidx.compose.foundation.layout.Column
|
import androidx.compose.foundation.layout.Column
|
||||||
import androidx.compose.foundation.layout.PaddingValues
|
|
||||||
import androidx.compose.foundation.layout.fillMaxHeight
|
import androidx.compose.foundation.layout.fillMaxHeight
|
||||||
import androidx.compose.foundation.layout.fillMaxSize
|
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.imePadding
|
import androidx.compose.foundation.layout.imePadding
|
||||||
import androidx.compose.foundation.layout.padding
|
|
||||||
import androidx.compose.foundation.pager.HorizontalPager
|
import androidx.compose.foundation.pager.HorizontalPager
|
||||||
import androidx.compose.foundation.pager.rememberPagerState
|
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.ExperimentalMaterial3Api
|
||||||
import androidx.compose.material3.Icon
|
|
||||||
import androidx.compose.material3.OutlinedTextField
|
|
||||||
import androidx.compose.material3.Scaffold
|
import androidx.compose.material3.Scaffold
|
||||||
import androidx.compose.material3.SecondaryTabRow
|
import androidx.compose.material3.SecondaryTabRow
|
||||||
import androidx.compose.material3.Tab
|
import androidx.compose.material3.Tab
|
||||||
|
|
@ -32,15 +23,6 @@ import androidx.compose.ui.Alignment
|
||||||
import androidx.compose.ui.Modifier
|
import androidx.compose.ui.Modifier
|
||||||
import androidx.compose.ui.graphics.Color
|
import androidx.compose.ui.graphics.Color
|
||||||
import androidx.compose.ui.res.stringResource
|
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 androidx.compose.ui.unit.dp
|
||||||
import software.makeshift.debtpirate.R
|
import software.makeshift.debtpirate.R
|
||||||
|
|
||||||
|
|
@ -131,78 +113,4 @@ 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__signup">Sign Up</string>
|
||||||
<string name="login_screen__username">Username</string>
|
<string name="login_screen__username">Username</string>
|
||||||
<string name="login_screen__password">Password</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>
|
</resources>
|
||||||
Loading…
Add table
Reference in a new issue