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

import 'dart:ui';
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,
        ),
      );
    }

    void navigateHomePostFrame() {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        final navCtx = constants.navigatorKey.currentContext;
        if (navCtx == null) {
          return;
        }
        Navigator.of(navCtx).pushNamedAndRemoveUntil('/', (r) => false);
      });
    }

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        scrolledUnderElevation: 0,
        backgroundColor: Theme.of(
          context,
        ).colorScheme.surface.withValues(alpha: 0.55),
        elevation: 0,
        flexibleSpace: ClipRRect(
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 14, sigmaY: 14),
            child: const SizedBox.expand(),
          ),
        ),
      ),
      body: SafeArea(
        child: CoolScaffoldBg(
          enableAurora: true,
          child: Consumer<Auth>(
            builder: (context, auth, _) {
              if (auth.authenticated) {
                navigateHomePostFrame();
                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: AutofillGroup(
                              child: Column(
                                mainAxisSize: MainAxisSize.min,
                                crossAxisAlignment: CrossAxisAlignment.stretch,
                                children: [
                                  Align(
                                    alignment: Alignment.center,
                                    child: CircleAvatar(
                                      radius: 28,
                                      backgroundColor: scheme.primary
                                          .withValues(alpha: 0.18),
                                      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
                                        ?.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,
                                    autofillHints: const [
                                      AutofillHints.username,
                                    ],
                                    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,
                                    autofillHints: const [
                                      AutofillHints.password,
                                    ],
                                    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,
                                              ),
                                            ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

class CoolScaffoldBg extends StatelessWidget {
  final Widget child;
  final bool enableAurora;
  const CoolScaffoldBg({
    super.key,
    required this.child,
    this.enableAurora = true,
  });

  @override
  Widget build(BuildContext context) {
    final scheme = Theme.of(context).colorScheme;

    return Stack(
      children: [
        Builder(
          builder: (context) {
            return Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    Theme.of(context).colorScheme.primary,
                    Theme.of(context).colorScheme.surface,
                  ],
                ),
              ),
            );
          },
        ),
        if (enableAurora) const AuroraSweep(),
        Align(
          alignment: const Alignment(0, 0.1),
          child: IgnorePointer(
            child: Container(
              width: 740,
              height: 740,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                gradient: RadialGradient(
                  colors: [
                    scheme.primary.withValues(alpha: 0.22),
                    Colors.transparent,
                  ],
                  stops: const [0.0, 1.0],
                ),
              ),
            ),
          ),
        ),
        child,
      ],
    );
  }
}

class AuroraSweep extends StatefulWidget {
  const AuroraSweep({super.key});

  @override
  State<AuroraSweep> createState() => _AuroraSweepState();
}

class _AuroraSweepState extends State<AuroraSweep>
    with SingleTickerProviderStateMixin {
  late final AnimationController _c = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 18),
  )..repeat();

  @override
  void dispose() {
    _c.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final scheme = Theme.of(context).colorScheme;

    return AnimatedBuilder(
      animation: _c,
      builder: (_, _) {
        final t = _c.value;
        return IgnorePointer(
          child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment(-1 + 2 * t, -0.6),
                end: Alignment(0.8 - 2 * t, 0.9),
                colors: [
                  scheme.primary.withValues(alpha: 0.06),
                  Colors.transparent,
                  scheme.primary.withValues(alpha: 0.04),
                ],
                stops: const [0.0, 0.5, 1.0],
              ),
            ),
          ),
        );
      },
    );
  }
}