[ui] UI theme should match repertory blue #61

web/repertory/.cspell/words.txt

@@ -1,4 +1,5 @@
 autofocus
+autovalidatemode
 canvaskit
 cupertino
 cupertinoicons

web/repertory/lib/screens/auth_screen.dart

@@ -12,10 +12,20 @@ class AuthScreen extends StatefulWidget {
 }
 
 class _AuthScreenState extends State<AuthScreen> {
-  bool _enabled = true;
+  final _formKey = GlobalKey<FormState>();
   final _passwordController = TextEditingController();
   final _userController = TextEditingController();
 
+  bool _enabled = true;
+  bool _obscure = true;
+
+  @override
+  void dispose() {
+    _passwordController.dispose();
+    _userController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(context) {
     final scheme = Theme.of(context).colorScheme;
@@ -36,38 +46,63 @@ class _AuthScreenState extends State<AuthScreen> {
       contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 14),
     );
 
-    VoidCallback? createLoginHandler(Auth auth) {
+    Future<void> doLogin(Auth auth) async {
-      if (!_enabled) return null;
+      if (!_enabled) {
-      return () async {
+        return;
+      }
+
+      if (!_formKey.currentState!.validate()) {
+        return;
+      }
+
       setState(() => _enabled = false);
-        await auth.authenticate(_userController.text, _passwordController.text);
+      await auth.authenticate(
+        _userController.text.trim(),
+        _passwordController.text,
+      );
       setState(() => _enabled = true);
-      };
+
+      // if (!context.mounted) return;
+      //
+      // // Only show the error if login failed
+      // if (!ok && !auth.authenticated) {
+      //   ScaffoldMessenger.of(context).showSnackBar(
+      //     const SnackBar(
+      //       content: Text('Invalid username or password'),
+      //       behavior: SnackBarBehavior.floating,
+      //     ),
+      //   );
+      // }
     }
 
     return Scaffold(
       appBar: AppBar(title: Text(widget.title), scrolledUnderElevation: 0),
-      body: Container(
+      body: SafeArea(
+        child: Container(
           width: double.infinity,
           height: double.infinity,
-        decoration: const BoxDecoration(
+          decoration: BoxDecoration(
             gradient: LinearGradient(
               begin: Alignment.topLeft,
               end: Alignment.bottomRight,
-            colors: [Color(0xFF1050A0), Color(0xFF202124)],
+              colors: [
+                Theme.of(context).colorScheme.primary,
+                Theme.of(context).colorScheme.surface,
+              ],
+              stops: const [0.0, 1.0],
             ),
           ),
           child: Consumer<Auth>(
             builder: (context, auth, _) {
               if (auth.authenticated) {
-              Future.delayed(Duration(milliseconds: 1), () {
+                Future.delayed(const Duration(milliseconds: 1), () {
                   if (constants.navigatorKey.currentContext == null) {
                     return;
                   }
 
                   Navigator.of(
                     constants.navigatorKey.currentContext!,
-                ).pushNamedAndRemoveUntil('/', (Route<dynamic> route) => false);
+                  ).pushNamedAndRemoveUntil('/', (r) => false);
                 });
 
                 return const SizedBox.shrink();
@@ -94,6 +129,10 @@ class _AuthScreenState extends State<AuthScreen> {
                         ),
                         child: Padding(
                           padding: const EdgeInsets.all(constants.padding),
+                          child: Form(
+                            key: _formKey,
+                            autovalidateMode:
+                                AutovalidateMode.onUserInteraction,
                             child: Column(
                               mainAxisSize: MainAxisSize.min,
                               crossAxisAlignment: CrossAxisAlignment.stretch,
@@ -105,18 +144,29 @@ class _AuthScreenState extends State<AuthScreen> {
                                     backgroundColor: scheme.primary.withValues(
                                       alpha: 0.18,
                                     ),
-                                child: Icon(
+                                    child: ClipRRect(
+                                      borderRadius: BorderRadius.circular(28),
+                                      child: Image.asset(
+                                        'assets/images/repertory.png',
+                                        width: 28,
+                                        height: 28,
+                                        fit: BoxFit.contain,
+                                        errorBuilder: (_, _, _) => Icon(
                                           Icons.folder,
                                           color: scheme.primary,
                                           size: 28,
                                         ),
                                       ),
                                     ),
+                                  ),
+                                ),
                                 const SizedBox(height: 14),
                                 Text(
                                   constants.appLogonTitle,
                                   textAlign: TextAlign.center,
-                              style: Theme.of(context).textTheme.headlineSmall
+                                  style: Theme.of(context)
+                                      .textTheme
+                                      .headlineSmall
                                       ?.copyWith(fontWeight: FontWeight.w600),
                                 ),
                                 const SizedBox(height: 6),
@@ -131,28 +181,57 @@ class _AuthScreenState extends State<AuthScreen> {
                                       ),
                                 ),
                                 const SizedBox(height: 20),
-                            TextField(
+
+                                TextFormField(
                                   autofocus: true,
                                   controller: _userController,
                                   textInputAction: TextInputAction.next,
-                              decoration: decoration('Username', Icons.person),
+                                  decoration: decoration(
+                                    'Username',
+                                    Icons.person,
+                                  ),
+                                  validator: (v) =>
+                                      (v == null || v.trim().isEmpty)
+                                      ? 'Enter your username'
+                                      : null,
+                                  onFieldSubmitted: (_) =>
+                                      FocusScope.of(context).nextFocus(),
                                 ),
                                 const SizedBox(height: constants.padding),
-                            TextField(
+
+                                TextFormField(
                                   controller: _passwordController,
-                              obscureText: true,
+                                  obscureText: _obscure,
                                   textInputAction: TextInputAction.go,
-                              onSubmitted: (_) {
+                                  decoration: decoration('Password', Icons.lock)
-                                final handler = createLoginHandler(auth);
+                                      .copyWith(
-                                handler?.call();
+                                        suffixIcon: IconButton(
-                              },
+                                          tooltip: _obscure
-                              decoration: decoration('Password', Icons.lock),
+                                              ? 'Show password'
+                                              : 'Hide password',
+                                          icon: Icon(
+                                            _obscure
+                                                ? Icons.visibility
+                                                : Icons.visibility_off,
+                                          ),
+                                          onPressed: () => setState(
+                                            () => _obscure = !_obscure,
+                                          ),
+                                        ),
+                                      ),
+                                  validator: (v) => (v == null || v.isEmpty)
+                                      ? 'Enter your password'
+                                      : null,
+                                  onFieldSubmitted: (_) => doLogin(auth),
                                 ),
                                 const SizedBox(height: constants.padding),
+
                                 SizedBox(
                                   height: 44,
                                   child: ElevatedButton(
-                                onPressed: createLoginHandler(auth),
+                                    onPressed: _enabled
+                                        ? () => doLogin(auth)
+                                        : null,
                                     style: ElevatedButton.styleFrom(
                                       shape: RoundedRectangleBorder(
                                         borderRadius: BorderRadius.circular(12),
@@ -176,16 +255,12 @@ class _AuthScreenState extends State<AuthScreen> {
                       ),
                     ),
                   ),
+                ),
               );
             },
           ),
         ),
+      ),
     );
   }
-
-  @override
-  void setState(VoidCallback fn) {
-    if (!mounted) return;
-    super.setState(fn);
-  }
 }

web/repertory/pubspec.yaml

@@ -64,9 +64,8 @@ flutter:
   uses-material-design: true
 
   # To add assets to your application, add an assets section, like this:
-  # assets:
+  assets:
-  #   - images/a_dot_burr.jpeg
+    - assets/images/repertory.png
-  #   - images/a_dot_ham.jpeg
 
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/to/resolution-aware-images