Skip to content

Commit d0298ae

Browse files
richard457richard457
committed
login as per requirements
1 parent e2bf26b commit d0298ae

File tree

3 files changed

+169
-49
lines changed

3 files changed

+169
-49
lines changed

‎assets/microsoft.png‎

11.7 KB
Loading

‎lib/auth/presentation/screens/login_screen.dart‎

Lines changed: 167 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
import 'package:flutter/material.dart';
32
import 'package:flutter_riverpod/flutter_riverpod.dart';
43
import 'package:umusada/auth/domain/providers/auth_provider.dart';
@@ -25,57 +24,179 @@ class _LoginScreenState extends ConsumerState<LoginScreen> {
2524
Widget build(BuildContext context) {
2625
final authState = ref.watch(authStateProvider);
2726

28-
ref.listen(
29-
authStateProvider,
30-
(previous, next) {
31-
next.whenOrNull(
32-
error: (error, stackTrace) {
33-
ScaffoldMessenger.of(context).showSnackBar(
34-
SnackBar(
35-
content: Text(error.toString()),
36-
),
37-
);
38-
},
39-
);
40-
},
41-
);
27+
// Listen for authentication errors
28+
ref.listen(authStateProvider, (_, next) {
29+
next.whenOrNull(
30+
error: (error, _) {
31+
ScaffoldMessenger.of(
32+
context,
33+
).showSnackBar(SnackBar(content: Text(error.toString())));
34+
},
35+
);
36+
});
4237

4338
return Scaffold(
39+
backgroundColor: Colors.white,
4440
appBar: AppBar(
45-
title: const Text('Login'),
41+
backgroundColor: Colors.transparent,
42+
elevation: 0,
43+
centerTitle: true,
44+
title: const Text(
45+
'Sign in',
46+
style: TextStyle(color: Colors.black87, fontWeight: FontWeight.w500),
47+
),
4648
),
47-
body: Padding(
48-
padding: const EdgeInsets.all(16.0),
49-
child: Column(
50-
children: [
51-
TextField(
52-
controller: _usernameController,
53-
decoration: const InputDecoration(
54-
labelText: 'Username',
49+
body: SingleChildScrollView(
50+
child: Padding(
51+
padding: const EdgeInsets.symmetric(horizontal: 24.0),
52+
child: Column(
53+
crossAxisAlignment: CrossAxisAlignment.start,
54+
children: [
55+
const SizedBox(height: 40),
56+
57+
// Logo/Brand Section
58+
Center(
59+
child: Image.asset(
60+
'assets/microsoft.png', // Replace with actual asset path
61+
height: 60,
62+
fit: BoxFit.contain,
63+
),
64+
),
65+
const SizedBox(height: 48),
66+
67+
// Form Section
68+
Center(
69+
child: const Text(
70+
'Sign in to continue',
71+
style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
72+
),
5573
),
56-
),
57-
TextField(
58-
controller: _passwordController,
59-
decoration: const InputDecoration(
60-
labelText: 'Password',
74+
const SizedBox(height: 32),
75+
76+
// Username Field
77+
TextFormField(
78+
controller: _usernameController,
79+
keyboardType: TextInputType.emailAddress,
80+
decoration: InputDecoration(
81+
labelText: 'Email or phone',
82+
labelStyle: const TextStyle(color: Color(0xFF666666)),
83+
prefixIcon: const Icon(
84+
Icons.person_outline,
85+
color: Color(0xFF666666),
86+
),
87+
filled: true,
88+
fillColor: const Color(0xFFF8F9FA),
89+
enabledBorder: OutlineInputBorder(
90+
borderRadius: BorderRadius.circular(12),
91+
borderSide: BorderSide(color: Colors.grey.shade200),
92+
),
93+
focusedBorder: OutlineInputBorder(
94+
borderRadius: BorderRadius.circular(12),
95+
borderSide: const BorderSide(
96+
color: Color(0xFF0078D4),
97+
width: 2,
98+
),
99+
),
100+
contentPadding: const EdgeInsets.symmetric(
101+
vertical: 16,
102+
horizontal: 20,
103+
),
104+
),
105+
),
106+
const SizedBox(height: 20),
107+
108+
// Password Field
109+
TextFormField(
110+
controller: _passwordController,
111+
obscureText: true,
112+
decoration: InputDecoration(
113+
labelText: 'Password',
114+
labelStyle: const TextStyle(color: Color(0xFF666666)),
115+
prefixIcon: const Icon(
116+
Icons.lock_outline,
117+
color: Color(0xFF666666),
118+
),
119+
suffixIcon: const Icon(
120+
Icons.visibility_off_outlined,
121+
color: Color(0xFF666666),
122+
),
123+
filled: true,
124+
fillColor: const Color(0xFFF8F9FA),
125+
enabledBorder: OutlineInputBorder(
126+
borderRadius: BorderRadius.circular(12),
127+
borderSide: BorderSide(color: Colors.grey.shade200),
128+
),
129+
focusedBorder: OutlineInputBorder(
130+
borderRadius: BorderRadius.circular(12),
131+
borderSide: const BorderSide(
132+
color: Color(0xFF0078D4),
133+
width: 2,
134+
),
135+
),
136+
contentPadding: const EdgeInsets.symmetric(
137+
vertical: 16,
138+
horizontal: 20,
139+
),
140+
),
141+
),
142+
const SizedBox(height: 10),
143+
144+
// Forgot Password Link
145+
Align(
146+
alignment: Alignment.centerRight,
147+
child: TextButton(
148+
onPressed: () {},
149+
child: const Text(
150+
'Forgot password?',
151+
style: TextStyle(color: Color(0xFF0078D4)),
152+
),
153+
),
154+
),
155+
const SizedBox(height: 30),
156+
157+
// Sign In Button
158+
SizedBox(
159+
width: double.infinity,
160+
child: ElevatedButton(
161+
onPressed: authState.isLoading
162+
? null
163+
: () {
164+
ref
165+
.read(authStateProvider.notifier)
166+
.login(
167+
_usernameController.text,
168+
_passwordController.text,
169+
);
170+
},
171+
style: ElevatedButton.styleFrom(
172+
backgroundColor: const Color(0xFF0078D4),
173+
foregroundColor: Colors.white,
174+
padding: const EdgeInsets.symmetric(vertical: 16),
175+
shape: RoundedRectangleBorder(
176+
borderRadius: BorderRadius.circular(12),
177+
),
178+
elevation: 0,
179+
),
180+
child: authState.isLoading
181+
? const SizedBox(
182+
height: 20,
183+
width: 20,
184+
child: CircularProgressIndicator(strokeWidth: 2),
185+
)
186+
: const Text(
187+
'Sign in',
188+
style: TextStyle(
189+
fontSize: 16,
190+
fontWeight: FontWeight.w600,
191+
),
192+
),
193+
),
61194
),
62-
obscureText: true,
63-
),
64-
const SizedBox(height: 16),
65-
ElevatedButton(
66-
onPressed: authState.isLoading
67-
? null
68-
: () {
69-
ref.read(authStateProvider.notifier).login(
70-
_usernameController.text,
71-
_passwordController.text,
72-
);
73-
},
74-
child: authState.isLoading
75-
? const CircularProgressIndicator()
76-
: const Text('Login'),
77-
),
78-
],
195+
const SizedBox(
196+
height: 40,
197+
), // Increased spacing for better balance
198+
],
199+
),
79200
),
80201
),
81202
);

‎pubspec.yaml‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,8 @@ flutter:
7272
uses-material-design: true
7373

7474
# To add assets to your application, add an assets section, like this:
75-
# assets:
76-
# - images/a_dot_burr.jpeg
77-
# - images/a_dot_ham.jpeg
75+
assets:
76+
- assets/microsoft.png
7877

7978
# An image asset can refer to one or more resolution-specific "variants", see
8079
# https://flutter.dev/to/resolution-aware-images

0 commit comments

Comments
 (0)