Better form and remove squares

Signed-off-by: Nikolai Rodionov <allanger@posteo.de>

lib/features/authorization/application/authorization_application.dart

@@ -63,9 +63,13 @@ class AuthorizationController extends AsyncNotifier<AuthState> {
       final accountsGrpc = ref.read(publicAccountsGrpcProvider);
       final tokenCtrl = ref.read(tokensControllerProvider.notifier);
 
-      final response = await accountsGrpc.signIn(form.toProto());
-      await tokenCtrl.writeTokenPair(Tokens.fromProto(response.tokenPair));
-      return state.value!.copyWith(isAuthorized: true);
+      try {
+        final response = await accountsGrpc.signIn(form.toProto());
+        await tokenCtrl.writeTokenPair(Tokens.fromProto(response.tokenPair));
+        return state.value!.copyWith(isAuthorized: true);
+      } catch (e) {
+        rethrow;
+      }
     });
   }
 

lib/features/authorization/presentation/authorization_page.dart

@@ -12,17 +12,22 @@ class AuthorizationPage extends ConsumerStatefulWidget {
   ConsumerState<AuthorizationPage> createState() => _AuthorizationPage();
 }
 
+enum AuthMode { login, signup }
+
 class _AuthorizationPage extends ConsumerState<AuthorizationPage> {
+  bool showSignUp = false;
+
+  void toggleAuth() {
+    setState(() {
+      showSignUp = !showSignUp;
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
-    final state = ref.watch(authorizationControllerProvider);
-    final isLoading = state.isLoading;
-    final authState = state.value;
-
     return LayoutBuilder(
       builder: (context, constraints) {
         final showDecoration = constraints.maxWidth > 1000;
-
         return Scaffold(
           body: Row(
             children: [
@@ -37,10 +42,14 @@ class _AuthorizationPage extends ConsumerState<AuthorizationPage> {
                     child: Column(
                       mainAxisSize: MainAxisSize.min,
                       children: [
-                        if (authState!.mode == AuthMode.login)
-                          LoginForm()
-                        else
-                          RegisterForm(),
+                        Offstage(
+                          offstage: showSignUp == true,
+                          child: LoginForm(toggleAuth: toggleAuth),
+                        ),
+                        Offstage(
+                          offstage: showSignUp != true,
+                          child: RegisterForm(toggleAuth: toggleAuth),
+                        ),
                       ],
                     ),
                   ),
@@ -49,13 +58,6 @@ class _AuthorizationPage extends ConsumerState<AuthorizationPage> {
 
               // ✅ only show decoration if width > 400
               if (showDecoration) Expanded(flex: 3, child: AuthDecoration()),
-              if (isLoading)
-                Positioned.fill(
-                  child: Container(
-                    color: Colors.black.withValues(alpha: 0.2),
-                    child: const Center(child: CircularProgressIndicator()),
-                  ),
-                ),
             ],
           ),
         );

lib/features/authorization/presentation/decoration.dart

@@ -1,89 +1,91 @@
-import 'dart:math' as math;
 import 'package:flutter/material.dart';
 import 'package:softplayer_web/shared/ui/colors/light_mode.dart';
 
 class AuthDecoration extends StatelessWidget {
-  final double spacing;
-  final Color color;
-
-  const AuthDecoration({
-    super.key,
-    this.spacing = 24,
-    this.color = Colors.blue,
-  });
+  const AuthDecoration({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return LayoutBuilder(
-      builder: (context, constraints) {
-        return Container(
-          color: LightModeColors.backgroundElevated,
-          child: FractionallySizedBox(
-            widthFactor: 0.3,
-            alignment: Alignment.centerLeft,
-            child: CustomPaint(
-              painter: _GridPainter(spacing: spacing, color: color),
-              child: const SizedBox.expand(),
-            ),
-          ),
-        );
-      },
+    return Container(
+      color: LightModeColors.backgroundElevated,
+      child: FractionallySizedBox(
+        alignment: Alignment.centerLeft,
+        child: const CustomPaint(
+          painter: _GradientPainter(),
+          child: SizedBox.expand(),
+        ),
+      ),
     );
   }
 }
 
-// todo: Some AI generated shite, that doesn't work
-class _GridPainter extends CustomPainter {
-  final double spacing;
-  final Color color;
-
-  _GridPainter({required this.spacing, required this.color});
-
-  static const double maxSquare = 85;
-  static const double minSquare = 48; // 2x gap
+class _GradientPainter extends CustomPainter {
+  const _GradientPainter();
 
   @override
   void paint(Canvas canvas, Size size) {
-    final paint = Paint()..color = color;
+    // 🎨 Main smooth background gradient
+    final rect = Offset.zero & size;
 
-    // ✅ outer padding included in layout math
-    final innerWidth = size.width - spacing * 2;
-    final innerHeight = size.height - spacing * 2;
+    final backgroundGradient = const LinearGradient(
+      begin: Alignment.topLeft,
+      end: Alignment.bottomRight,
+      colors: [
+        Color(0xFF0F172A), // deep navy
+        Color(0xFF111827), // dark slate
+      ],
+    );
 
-    int columns = 10;
+    final paint = Paint()..shader = backgroundGradient.createShader(rect);
 
-    double calcSize(int cols) {
-      return (innerWidth - (cols - 1) * spacing) / cols;
-    }
+    canvas.drawRect(rect, paint);
 
-    // choose columns safely
-    while (columns > 1 && calcSize(columns) < minSquare) {
-      columns--;
-    }
+    // 🌈 soft glowing blobs (adds "cool gradient feel")
+    _drawGlow(
+      canvas,
+      size,
+      offset: const Offset(0.2, 0.3),
+      radius: size.width * 0.8,
+      colors: [Colors.cyan.withOpacity(0.25), Colors.transparent],
+    );
 
-    double square = calcSize(columns);
-    square = math.min(square, maxSquare);
+    _drawGlow(
+      canvas,
+      size,
+      offset: const Offset(0.8, 0.6),
+      radius: size.width * 0.9,
+      colors: [Colors.purple.withOpacity(0.20), Colors.transparent],
+    );
 
-    final rows = (innerHeight / (square + spacing)).ceil();
+    _drawGlow(
+      canvas,
+      size,
+      offset: const Offset(0.5, 0.9),
+      radius: size.width * 0.7,
+      colors: [Colors.blue.withOpacity(0.20), Colors.transparent],
+    );
+  }
 
-    for (int row = 0; row < rows; row++) {
-      final y = spacing + row * (square + spacing);
+  void _drawGlow(
+    Canvas canvas,
+    Size size, {
+    required Offset offset,
+    required double radius,
+    required List<Color> colors,
+  }) {
+    final center = Offset(size.width * offset.dx, size.height * offset.dy);
 
-      for (int col = 0; col < columns; col++) {
-        final x = spacing + col * (square + spacing);
+    final gradient = RadialGradient(colors: colors, radius: 1.0);
 
-        final rect = Rect.fromLTWH(x, y, square, square);
+    final paint = Paint()
+      ..shader = gradient.createShader(
+        Rect.fromCircle(center: center, radius: radius),
+      )
+      ..maskFilter = const MaskFilter.blur(BlurStyle.normal, 60);
 
-        canvas.drawRRect(
-          RRect.fromRectAndRadius(rect, const Radius.circular(6)),
-          paint,
-        );
-      }
-    }
+    canvas.drawCircle(center, radius, paint);
   }
 
   @override
-  bool shouldRepaint(covariant _GridPainter oldDelegate) {
-    return oldDelegate.spacing != spacing || oldDelegate.color != color;
-  }
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
 }

lib/features/authorization/presentation/login_form.dart

@@ -1,11 +1,15 @@
+import 'dart:developer';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:softplayer_web/features/authorization/application/authorization_application.dart';
 import 'package:softplayer_web/features/authorization/application/sign_in_data.dart';
+import 'package:toastification/toastification.dart';
 
 class LoginForm extends ConsumerStatefulWidget {
-  const LoginForm({super.key});
+  const LoginForm({super.key, required this.toggleAuth});
 
+  final VoidCallback toggleAuth;
   @override
   ConsumerState<LoginForm> createState() => _LoginForm();
 }
@@ -16,21 +20,36 @@ class _LoginForm extends ConsumerState<LoginForm> {
   final TextEditingController emailCtrl = TextEditingController();
   final TextEditingController passwordCtrl = TextEditingController();
 
-  void _submitForm() {
+  Future<void> _submitForm() async {
     if (_formKey.currentState!.validate()) {
       // If valid, you can use the values
       final email = emailCtrl.text;
       final password = passwordCtrl.text;
       final form = SignInData(email: email, password: password);
-      ref.read(authorizationControllerProvider.notifier).signin(form);
+      try {
+        await ref.read(authorizationControllerProvider.notifier).signin(form);
+      } catch (e) {
+        if (!mounted) {
+          return;
+        }
+        log(e.toString());
+        toastification.show(
+          context: context,
+          type: ToastificationType.error,
+          style: ToastificationStyle.flatColored,
+          alignment: Alignment.topRight,
+          autoCloseDuration: const Duration(seconds: 4),
+          title: const Text('Authentication failed'),
+          description: Text(e.toString()),
+          showProgressBar: false,
+        );
+      }
     }
   }
 
   @override
   Widget build(BuildContext context) {
-    final state = ref.watch(authorizationControllerProvider);
     final controller = ref.read(authorizationControllerProvider.notifier);
-    final isLoading = state.isLoading;
     return SizedBox(
       width: 400,
       child: Form(
@@ -54,7 +73,7 @@ class _LoginForm extends ConsumerState<LoginForm> {
                     style: Theme.of(context).textTheme.bodyMedium,
                   ),
                   TextButton(
-                    onPressed: controller.toggleAuthMode,
+                    onPressed: widget.toggleAuth,
                     style: TextButton.styleFrom(
                       padding: EdgeInsets.zero,
                       minimumSize: Size(0, 0),
@@ -72,48 +91,26 @@ class _LoginForm extends ConsumerState<LoginForm> {
             TextFormField(
               onFieldSubmitted: (_) => _submitForm(),
               controller: emailCtrl,
+              decoration: InputDecoration(hintText: "Email address"),
               validator: (value) {
-                if (value == null || value.trim().isEmpty) {
+                if (value == null || value.isEmpty) {
                   return 'Email is required';
                 }
-                final emailRegex = RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$');
-                if (!emailRegex.hasMatch(value.trim())) {
-                  return 'Enter a valid email address';
-                }
                 return null;
               },
-              decoration: InputDecoration(hintText: "Email address"),
             ),
             SizedBox(height: 16),
             TextFormField(
               onFieldSubmitted: (_) => _submitForm(),
               controller: passwordCtrl,
+              obscureText: true,
+              decoration: InputDecoration(hintText: "Password"),
               validator: (value) {
                 if (value == null || value.isEmpty) {
                   return 'Password is required';
                 }
-
-                if (value.length < 12) {
-                  return 'Password must be at least 12 characters long';
-                }
-
-                final hasNumber = RegExp(r'\d');
-                final hasSpecialChar = RegExp(
-                  r'[!@#$%^&*(),.?":{}|<>_\-\\[\]\\/+=~`]',
-                );
-
-                if (!hasNumber.hasMatch(value)) {
-                  return 'Password must contain at least one number';
-                }
-
-                if (!hasSpecialChar.hasMatch(value)) {
-                  return 'Password must contain at least one special character';
-                }
-
                 return null;
               },
-              obscureText: true,
-              decoration: InputDecoration(hintText: "Password"),
             ),
             SizedBox(height: 16),
             SizedBox(
@@ -121,13 +118,6 @@ class _LoginForm extends ConsumerState<LoginForm> {
               child: Text("Forgot password?", textAlign: TextAlign.left),
             ),
             ElevatedButton(onPressed: _submitForm, child: const Text('Log in')),
-            if (isLoading)
-              Positioned.fill(
-                child: Container(
-                  color: Colors.black.withValues(alpha: 0.2),
-                  child: const Center(child: CircularProgressIndicator()),
-                ),
-              ),
           ],
         ),
       ),

lib/features/authorization/presentation/register_form.dart

@@ -4,8 +4,9 @@ import 'package:softplayer_web/features/authorization/application/authorization_
 import 'package:softplayer_web/features/authorization/application/sign_up_data.dart';
 
 class RegisterForm extends ConsumerStatefulWidget {
-  const RegisterForm({super.key});
+  const RegisterForm({super.key, required this.toggleAuth});
 
+  final VoidCallback toggleAuth;
   @override
   ConsumerState<RegisterForm> createState() => _RegisterForm();
 }
@@ -61,7 +62,7 @@ class _RegisterForm extends ConsumerState<RegisterForm> {
                     style: Theme.of(context).textTheme.bodyMedium,
                   ),
                   TextButton(
-                    onPressed: controller.toggleAuthMode,
+                    onPressed: widget.toggleAuth,
                     style: TextButton.styleFrom(
                       padding: EdgeInsets.zero,
                       minimumSize: Size(0, 0),
@@ -80,18 +81,41 @@ class _RegisterForm extends ConsumerState<RegisterForm> {
               controller: nameCtrl,
               onFieldSubmitted: (_) => _submitForm(),
               decoration: InputDecoration(hintText: "Name"),
+              validator: (value) {
+                if (value == null || value.isEmpty) {
+                  return 'Password is required';
+                }
+                return null;
+              },
             ),
             SizedBox(height: 16),
             TextFormField(
               controller: surnameCtrl,
               onFieldSubmitted: (_) => _submitForm(),
               decoration: InputDecoration(hintText: "Surname"),
+              validator: (value) {
+                if (value == null || value.isEmpty) {
+                  return 'Password is required';
+                }
+
+                return null;
+              },
             ),
             SizedBox(height: 16),
             TextFormField(
               controller: emailCtrl,
               onFieldSubmitted: (_) => _submitForm(),
               decoration: InputDecoration(hintText: "Email address"),
+              validator: (value) {
+                if (value == null || value.trim().isEmpty) {
+                  return 'Email is required';
+                }
+                final emailRegex = RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$');
+                if (!emailRegex.hasMatch(value.trim())) {
+                  return 'Enter a valid email address';
+                }
+                return null;
+              },
             ),
             SizedBox(height: 16),
             TextFormField(
@@ -99,6 +123,30 @@ class _RegisterForm extends ConsumerState<RegisterForm> {
               onFieldSubmitted: (_) => _submitForm(),
               obscureText: true,
               decoration: InputDecoration(hintText: "Password"),
+              validator: (value) {
+                if (value == null || value.isEmpty) {
+                  return 'Password is required';
+                }
+
+                if (value.length < 12) {
+                  return 'Password must be at least 12 characters long';
+                }
+
+                final hasNumber = RegExp(r'\d');
+                final hasSpecialChar = RegExp(
+                  r'[!@#$%^&*(),.?":{}|<>_\-\\[\]\\/+=~`]',
+                );
+
+                if (!hasNumber.hasMatch(value)) {
+                  return 'Password must contain at least one number';
+                }
+
+                if (!hasSpecialChar.hasMatch(value)) {
+                  return 'Password must contain at least one special character';
+                }
+
+                return null;
+              },
             ),
             SizedBox(height: 16),
             TextFormField(
@@ -106,7 +154,19 @@ class _RegisterForm extends ConsumerState<RegisterForm> {
               onFieldSubmitted: (_) => _submitForm(),
               obscureText: true,
               decoration: InputDecoration(hintText: "Repeat the password"),
+              validator: (value) {
+                if (value == null || value.isEmpty) {
+                  return 'Password is required';
+                }
+
+                if (value != passwordCtrl.text) {
+                  return 'Passwords do not match';
+                }
+
+                return null;
+              },
             ),
+            SizedBox(height: 16),
             ElevatedButton(
               onPressed: _submitForm,
               child: const Text('Sign up'),