Skip to content
This repository was archived by the owner on Jul 20, 2026. It is now read-only.

Commit 8e90d31

Browse files
williLGwilliLG
committed
login ui done
1 parent 7c1b2ed commit 8e90d31

1 file changed

Lines changed: 152 additions & 0 deletions

File tree

‎app/src/main/java/com/example/senpos/ui/screens/LoginScreen.kt‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
package com.example.senpos.ui.screens
2+
3+
import androidx.compose.foundation.BorderStroke
4+
import androidx.compose.foundation.background
5+
import androidx.compose.foundation.border
6+
import androidx.compose.foundation.layout.Arrangement
7+
import androidx.compose.foundation.layout.Box
8+
import androidx.compose.foundation.layout.Column
9+
import androidx.compose.foundation.layout.Spacer
10+
import androidx.compose.foundation.layout.fillMaxSize
11+
import androidx.compose.foundation.layout.fillMaxWidth
12+
import androidx.compose.foundation.layout.height
13+
import androidx.compose.foundation.layout.padding
14+
import androidx.compose.foundation.shape.RoundedCornerShape
15+
import androidx.compose.material3.Button
16+
import androidx.compose.material3.ButtonDefaults
17+
import androidx.compose.material3.OutlinedButton
18+
import androidx.compose.material3.OutlinedTextField
19+
import androidx.compose.material3.OutlinedTextFieldDefaults
20+
import androidx.compose.material3.Text
21+
import androidx.compose.material3.TextButton
22+
import androidx.compose.material3.TextFieldDefaults
23+
import androidx.compose.runtime.Composable
24+
import androidx.compose.runtime.getValue
25+
import androidx.compose.runtime.mutableStateOf
26+
import androidx.compose.runtime.remember
27+
import androidx.compose.runtime.setValue
28+
import androidx.compose.ui.Alignment
29+
import androidx.compose.ui.Modifier
30+
import androidx.compose.ui.graphics.Color
31+
import androidx.compose.ui.text.font.FontWeight
32+
import androidx.compose.ui.text.input.PasswordVisualTransformation
33+
import androidx.compose.ui.tooling.preview.Preview
34+
import androidx.compose.ui.unit.dp
35+
import androidx.compose.ui.unit.sp
36+
import androidx.navigation.NavHostController
37+
import androidx.navigation.compose.rememberNavController
38+
import com.example.senpos.ui.components.NavBarComponent
39+
import com.example.senpos.ui.theme.SenPosTheme
40+
41+
@Composable
42+
fun LoginScreen(navController: NavHostController) {
43+
44+
var email by remember {mutableStateOf("")}
45+
var password by remember {mutableStateOf("")}
46+
47+
Column(
48+
verticalArrangement = androidx.compose.foundation.layout.Arrangement.Center,
49+
horizontalAlignment = Alignment.CenterHorizontally,
50+
modifier = Modifier
51+
.fillMaxSize()
52+
.padding(horizontal = 48.dp)
53+
) {
54+
Box(
55+
modifier = Modifier
56+
.background(Color(0xFF228B22), shape = RoundedCornerShape(8.dp))
57+
.padding(16.dp)
58+
){
59+
Column(
60+
verticalArrangement = Arrangement.Center,
61+
horizontalAlignment = Alignment.CenterHorizontally,
62+
modifier = Modifier
63+
.padding(horizontal = 32.dp)
64+
){
65+
Text(
66+
text = "Login",
67+
fontSize = 18.sp,
68+
color = Color.White,
69+
fontWeight = FontWeight.Bold
70+
)
71+
72+
Spacer(modifier = Modifier.height(8.dp))
73+
74+
OutlinedTextField(
75+
value = email,
76+
onValueChange = { email = it },
77+
placeholder = { Text("johndoe@email.com") },
78+
singleLine = true,
79+
modifier = Modifier.fillMaxWidth(),
80+
colors = OutlinedTextFieldDefaults.colors(
81+
unfocusedContainerColor = Color.White,
82+
focusedContainerColor = Color.White,
83+
unfocusedBorderColor = Color.Gray,
84+
focusedBorderColor = Color.Black,
85+
)
86+
)
87+
88+
Spacer(modifier = Modifier.height(12.dp))
89+
90+
Text(
91+
text = "Password",
92+
fontSize = 18.sp,
93+
color = Color.White,
94+
fontWeight = FontWeight.Bold
95+
)
96+
97+
Spacer(modifier = Modifier.height(8.dp))
98+
99+
OutlinedTextField(
100+
value = password,
101+
onValueChange = { password = it },
102+
placeholder = { Text("Password") },
103+
singleLine = true,
104+
visualTransformation = PasswordVisualTransformation(),
105+
modifier = Modifier.fillMaxWidth(),
106+
colors = OutlinedTextFieldDefaults.colors(
107+
unfocusedContainerColor = Color.White,
108+
focusedContainerColor = Color.White,
109+
unfocusedBorderColor = Color.Gray,
110+
focusedBorderColor = Color.Black,
111+
)
112+
)
113+
114+
Spacer(modifier = Modifier.height(12.dp))
115+
116+
OutlinedButton(
117+
onClick = {},
118+
colors = ButtonDefaults.outlinedButtonColors(
119+
containerColor = Color.LightGray,
120+
),
121+
border = BorderStroke(1.dp, Color.Gray)
122+
) {
123+
Text(
124+
text = "Sign in",
125+
color = Color.DarkGray,
126+
)
127+
}
128+
129+
Spacer(modifier = Modifier.height(12.dp))
130+
}
131+
}
132+
133+
TextButton(
134+
onClick = {},
135+
) {
136+
Text(
137+
text = "Don't have an account? Click here",
138+
fontSize = 18.sp,
139+
color = Color(0xFFFF6C00),
140+
)
141+
}
142+
}
143+
}
144+
145+
@Composable
146+
@Preview
147+
fun LoginPreview(){
148+
val navController = rememberNavController()
149+
SenPosTheme {
150+
LoginScreen(navController)
151+
}
152+
}

0 commit comments

Comments
 (0)