repertory/web/repertory/lib/screens/auth_screen.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:repertory/constants.dart' as constants;
import 'package:repertory/models/auth.dart';

class AuthScreen extends StatefulWidget {
  final String title;
  const AuthScreen({super.key, required this.title});

  @override
  State<AuthScreen> createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  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;

    InputDecoration decoration(String label, IconData icon) => InputDecoration(
      labelText: label,
      prefixIcon: Icon(icon),
      filled: true,
      fillColor: scheme.surfaceContainerLow.withValues(alpha: 0.65),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(12),
        borderSide: BorderSide.none,
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(12),
        borderSide: BorderSide(color: scheme.primary, width: 2),
      ),
      contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 14),
    );

    Future<void> doLogin(Auth auth) async {
      if (!_enabled) {
        return;
      }

      if (!_formKey.currentState!.validate()) {
        return;
      }

      setState(() => _enabled = false);
      var authenticated = await auth.authenticate(
        _userController.text.trim(),
        _passwordController.text,
      );
      setState(() => _enabled = true);

      if (authenticated) {
        return;
      }

      if (!context.mounted) {
        return;
      }

      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: SafeArea(
        child: Container(
          width: double.infinity,
          height: double.infinity,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Theme.of(context).colorScheme.surface,
                Theme.of(context).colorScheme.surface.withValues(alpha: 0.9),
              ],
              stops: const [0.0, 1.0],
            ),
          ),
          child: Consumer<Auth>(
            builder: (context, auth, _) {
              if (auth.authenticated) {
                Future.delayed(const Duration(milliseconds: 1), () {
                  if (constants.navigatorKey.currentContext == null) {
                    return;
                  }

                  Navigator.of(
                    constants.navigatorKey.currentContext!,
                  ).pushNamedAndRemoveUntil('/', (r) => false);
                });

                return const SizedBox.shrink();
              }

              return Center(
                child: AnimatedScale(
                  scale: 1.0,
                  duration: const Duration(milliseconds: 250),
                  curve: Curves.easeOutCubic,
                  child: AnimatedOpacity(
                    opacity: 1.0,
                    duration: const Duration(milliseconds: 250),
                    child: ConstrainedBox(
                      constraints: const BoxConstraints(
                        maxWidth: 420,
                        minWidth: 300,
                      ),
                      child: Card(
                        elevation: 12,
                        color: scheme.surface,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(18),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(constants.padding),
                          child: Form(
                            key: _formKey,
                            autovalidateMode:
                                AutovalidateMode.onUserInteraction,
                            child: Column(
                              mainAxisSize: MainAxisSize.min,
                              crossAxisAlignment: CrossAxisAlignment.stretch,
                              children: [
                                Align(
                                  alignment: Alignment.center,
                                  child: Container(
                                    width: 56,
                                    height: 56,
                                    decoration: BoxDecoration(
                                      color: scheme.primary.withValues(
                                        alpha: 0.18,
                                      ),
                                      borderRadius: BorderRadius.circular(8),
                                    ),
                                    padding: const EdgeInsets.all(8),
                                    child: Image.asset(
                                      'assets/images/repertory.png',
                                      fit: BoxFit.contain,
                                      errorBuilder: (_, _, _) {
                                        return Icon(
                                          Icons.folder,
                                          color: scheme.primary,
                                          size: 40,
                                        );
                                      },
                                    ),
                                  ),
                                ),
                                const SizedBox(height: 14),
                                Text(
                                  constants.appLogonTitle,
                                  textAlign: TextAlign.center,
                                  style: Theme.of(context)
                                      .textTheme
                                      .headlineSmall
                                      ?.copyWith(fontWeight: FontWeight.w600),
                                ),
                                const SizedBox(height: 6),
                                Text(
                                  "Secure access to your mounts",
                                  textAlign: TextAlign.center,
                                  style: Theme.of(context).textTheme.bodyMedium
                                      ?.copyWith(
                                        color: scheme.onSurface.withValues(
                                          alpha: 0.7,
                                        ),
                                      ),
                                ),
                                const SizedBox(height: 20),

                                TextFormField(
                                  autofocus: true,
                                  controller: _userController,
                                  textInputAction: TextInputAction.next,
                                  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),

                                TextFormField(
                                  controller: _passwordController,
                                  obscureText: _obscure,
                                  textInputAction: TextInputAction.go,
                                  decoration: decoration('Password', Icons.lock)
                                      .copyWith(
                                        suffixIcon: IconButton(
                                          tooltip: _obscure
                                              ? '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: _enabled
                                        ? () => doLogin(auth)
                                        : null,
                                    style: ElevatedButton.styleFrom(
                                      shape: RoundedRectangleBorder(
                                        borderRadius: BorderRadius.circular(12),
                                      ),
                                    ),
                                    child: _enabled
                                        ? const Text('Login')
                                        : const SizedBox(
                                            height: 20,
                                            width: 20,
                                            child: CircularProgressIndicator(
                                              strokeWidth: 2.4,
                                            ),
                                          ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}