sign in page changes

This commit is contained in:
Drake Marino 2024-06-26 20:22:32 -05:00
parent 02bce8318a
commit a97ec0411d
2 changed files with 114 additions and 62 deletions

View File

@ -86,6 +86,7 @@ class _MainAppState extends State<MainApp> {
filled: true, filled: true,
fillColor: Colors.grey.withOpacity(0.1), fillColor: Colors.grey.withOpacity(0.1),
labelStyle: const TextStyle(color: Colors.grey), labelStyle: const TextStyle(color: Colors.grey),
outlineBorder: BorderSide(color: Colors.grey.shade700),
floatingLabelStyle: WidgetStateTextStyle.resolveWith((states) { floatingLabelStyle: WidgetStateTextStyle.resolveWith((states) {
if (states.contains(WidgetState.focused) && if (states.contains(WidgetState.focused) &&
!states.contains(WidgetState.hovered)) { !states.contains(WidgetState.hovered)) {
@ -118,6 +119,8 @@ class _MainAppState extends State<MainApp> {
filled: true, filled: true,
fillColor: Colors.grey.withOpacity(0.25), fillColor: Colors.grey.withOpacity(0.25),
labelStyle: TextStyle(color: Colors.grey.shade700), labelStyle: TextStyle(color: Colors.grey.shade700),
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey.shade700)),
floatingLabelStyle: WidgetStateTextStyle.resolveWith((states) { floatingLabelStyle: WidgetStateTextStyle.resolveWith((states) {
if (states.contains(WidgetState.focused) && if (states.contains(WidgetState.focused) &&
!states.contains(WidgetState.hovered)) { !states.contains(WidgetState.hovered)) {

View File

@ -37,7 +37,7 @@ class _SignInPageState extends State<SignInPage> {
heightFactor: 1.0, heightFactor: 1.0,
child: Container( child: Container(
padding: const EdgeInsets.fromLTRB(12, 50, 12, 50), padding: const EdgeInsets.fromLTRB(12, 50, 12, 50),
height: 475, height: 450,
width: 500, width: 500,
child: Card( child: Card(
child: Padding( child: Padding(
@ -60,9 +60,12 @@ class _SignInPageState extends State<SignInPage> {
controller: _usernameController, controller: _usernameController,
autocorrect: false, autocorrect: false,
decoration: const InputDecoration( decoration: const InputDecoration(
prefixIcon: Icon(Icons.person_outline), prefixIcon: Padding(
labelText: 'Username', padding: EdgeInsets.all(16.0),
border: OutlineInputBorder()), child: Icon(Icons.person_outline),
),
labelText: 'Username',
),
), ),
), ),
Padding( Padding(
@ -107,11 +110,13 @@ class _SignInPageState extends State<SignInPage> {
autocorrect: false, autocorrect: false,
obscureText: obscurePassword, obscureText: obscurePassword,
decoration: InputDecoration( decoration: InputDecoration(
prefixIcon: const Icon(Icons.fingerprint), prefixIcon: const Padding(
padding: EdgeInsets.all(16.0),
child: Icon(Icons.fingerprint),
),
labelText: 'Password', labelText: 'Password',
border: const OutlineInputBorder(),
suffixIcon: Padding( suffixIcon: Padding(
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.only(right: 16.0),
child: IconButton( child: IconButton(
onPressed: () { onPressed: () {
setState(() { setState(() {
@ -131,63 +136,107 @@ class _SignInPageState extends State<SignInPage> {
errorMessage!, errorMessage!,
style: const TextStyle(color: Colors.red), style: const TextStyle(color: Colors.red),
), ),
CheckboxListTile( Padding(
value: rememberMe, padding: const EdgeInsets.only(top: 8.0),
onChanged: (value) async { child: FilledButton(
setState(() { style: FilledButton.styleFrom(
rememberMe = value!; shape: const RoundedRectangleBorder(
}); borderRadius:
}, BorderRadius.all(Radius.circular(6)))),
title: const Text('Remember me'), child: SizedBox(
), width: 374,
ElevatedButton.icon( height: 40,
style: ElevatedButton.styleFrom( child: Row(
backgroundColor: mainAxisSize: MainAxisSize.min,
Theme.of(context).colorScheme.primary, mainAxisAlignment: MainAxisAlignment.center,
// padding: const EdgeInsets.only(left: 20.0, right: 20.0, top: 12.0, bottom: 12.0), children: [
), _isloading
icon: _isloading ? const SizedBox(
? const SizedBox( width: 20,
width: 20, height: 20,
height: 20, child: CircularProgressIndicator(
child: CircularProgressIndicator( color: Colors.white,
color: Colors.white, strokeWidth: 3,
strokeWidth: 3, ))
)) : const Padding(
: const Icon(Icons.done, color: Colors.white), padding: EdgeInsets.only(right: 8.0),
label: const Text('Sign In', child: Icon(Icons.done,
style: TextStyle(color: Colors.white)), color: Colors.white),
onPressed: () async { ),
setState(() { const Text('Sign in',
errorMessage = null; style: TextStyle(
_isloading = true; color: Colors.white, fontSize: 18)),
}); ],
jwt = await signIn(username, password).timeout( ),
const Duration(seconds: 20), onTimeout: () { ),
_isloading = false; onPressed: () async {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
width: 300,
behavior: SnackBarBehavior.floating,
content:
Text('Could not Sign in (timeout)!')),
);
});
if (!jwt.contains('Error:')) {
final SharedPreferences prefs =
await SharedPreferences.getInstance();
await prefs.setString('username', username);
await prefs.setString('password', password);
await prefs.setBool('rememberMe', rememberMe);
widget.refreshAccount(true);
Navigator.of(context).pop();
} else {
setState(() { setState(() {
errorMessage = 'Invalid Username/Password'; _isloading = true;
_isloading = false;
}); });
} jwt = await signIn(username, password).timeout(
}, const Duration(seconds: 20), onTimeout: () {
_isloading = false;
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
width: 300,
behavior: SnackBarBehavior.floating,
content:
Text('Could not Sign in (timeout)!')),
);
});
if (!jwt.contains('Error:')) {
final SharedPreferences prefs =
await SharedPreferences.getInstance();
await prefs.setString('username', username);
await prefs.setString('password', password);
await prefs.setBool('rememberMe', rememberMe);
widget.refreshAccount(true);
Navigator.of(context).pop();
} else {
setState(() {
errorMessage = 'Invalid Username/Password';
_isloading = false;
});
}
},
),
),
Expanded(
child: Align(
alignment: Alignment.bottomLeft,
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
child: Row(
children: [
Checkbox(
value: rememberMe,
onChanged: (value) {
setState(() {
rememberMe = value!;
});
}),
const Padding(
padding: EdgeInsets.all(8.0),
child: Text('Remember me'),
)
],
),
onTap: () {
setState(() {
rememberMe = !rememberMe;
});
},
),
),
),
],
),
),
), ),
], ],
), ),