Improve auth pages

frontend/index.html

@@ -21,15 +21,28 @@
                     <div id="login-alerts"></div>
                     
                     <form id="login-form-element">
-                        <div class="form-group">
+                        <mdui-text-field 
-                            <label for="login-username">Имя пользователя</label>
+                            label="Имя пользователя" 
-                            <input type="text" class="form-control" id="login-username" name="username" required>
+                            id="login-username" 
-                        </div>
+                            name="username" 
-                        <div class="form-group">
+                            variant="outlined"
-                            <label for="login-password">Пароль</label>
+                            icon="person--filled"
-                            <input type="password" class="form-control" id="login-password" name="password" required>
+                            autocomplete="username"
-                        </div>
+                            required>
-                        <button type="submit" class="btn btn-block">Войти</button>
+                        </mdui-text-field>
+                        <mdui-text-field 
+                            label="Пароль" 
+                            id="login-password" 
+                            name="password" 
+                            variant="outlined" 
+                            type="password" 
+                            toggle-password
+                            icon="password--filled"
+                            autocomplete="current-password"
+                            required>
+                        </mdui-text-field>
+
+                        <mdui-button type="submit">Войти</mdui-button>
                     </form>
                     
                     <div class="text-center mt-3">
@@ -53,21 +66,41 @@
                     <div id="register-alerts"></div>
                     
                     <form id="register-form-element">
-                        <div class="form-group">
+                        <mdui-text-field 
-                            <label for="register-username">Имя пользователя</label>
+                            label="Имя пользователя" 
-                            <input type="text" class="form-control" id="register-username" name="username" required>
+                            id="register-username" 
-                            <small class="text-muted">От 3 до 20 символов, без пробелов</small>
+                            name="username" 
-                        </div>
+                            variant="outlined"
-                        <div class="form-group">
+                            icon="person--filled"
-                            <label for="register-password">Пароль</label>
+                            autocomplete="username"
-                            <input type="password" class="form-control" id="register-password" name="password" required>
+                            maxlength="20"
-                            <small class="text-muted">Минимум 5 символов, без пробелов</small>
+                            counter
-                        </div>
+                            required>
-                        <div class="form-group">
+                        </mdui-text-field>
-                            <label for="register-confirm-password">Подтвердите пароль</label>
+                        <mdui-text-field 
-                            <input type="password" class="form-control" id="register-confirm-password" name="confirm_password" required>
+                            label="Пароль" 
-                        </div>
+                            id="register-password" 
-                        <button type="submit" class="btn btn-block">Зарегистрироваться</button>
+                            name="password" 
+                            variant="outlined" 
+                            type="password" 
+                            toggle-password
+                            icon="password--filled"
+                            autocomplete="new-password"
+                            required>
+                        </mdui-text-field>
+                        <mdui-text-field 
+                            label="Подтвердите пароль" 
+                            id="register-confirm-password" 
+                            name="confirm_password" 
+                            variant="outlined" 
+                            type="password" 
+                            toggle-password
+                            icon="password--filled"
+                            autocomplete="new-password"
+                            required>
+                        </mdui-text-field>
+
+                        <mdui-button type="submit">Зарегистрироваться</mdui-button>
                     </form>
                     
                     <div class="text-center mt-3">

frontend/src/css/_auth.scss

@@ -1,4 +1,5 @@
 @use "common/colors" as *;
+@use "common/material" as *;
 
 .auth-container {
     display: flex;
@@ -6,30 +7,27 @@
     align-items: center;
     min-height: 100vh;
     padding: 2rem;
-    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    background-color: $color-dark-surface;
 
     .auth-card {
-        background: white;
+        background-color: $color-dark-surface-container;
+        color: $color-dark-on-surface;
         border-radius: 12px;
         box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
         width: 100%;
         max-width: 450px;
         overflow: hidden;
-        transition: all 0.3s ease;
-
-        &:hover {
-            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
-        }
     }
       
     .auth-header {
-        background: linear-gradient(135deg, $primary, $primary-dark);
+        margin: 0;
-        color: white;
+        padding: 16px;
-        padding: 1.5rem;
+        padding-bottom: 0;
         text-align: center;
 
         h2 {
             font-size: 1.8rem;
+            margin: 0;
             margin-bottom: 0.5rem;
             align-items: center;
             display: flex;
@@ -40,6 +38,13 @@
     }
       
     .auth-body {
-        padding: 2rem;
+        padding: 25px;
+        padding-bottom: 16px;
+
+        form {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
     }
 }

frontend/src/css/common/_components.scss

@@ -1,62 +1,4 @@
-@use "colors" as *;
+@use "material" as *;
-
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 15px;
-}
-
-.form-group {
-    margin-bottom: 1.5rem;
-
-    label {
-        display: block;
-        margin-bottom: 0.5rem;
-        font-weight: 500;
-        color: $dark;
-    }
-}
-
-.form-control {
-    width: 100%;
-    padding: 0.8rem 1rem;
-    border: 1px solid $gray;
-    border-radius: 6px;
-    font-size: 1rem;
-    transition: all 0.3s ease;
-
-    &:focus {
-        outline: none;
-        border-color: $primary;
-        box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2);
-    }
-}
-
-.btn {
-    display: inline-block;
-    background: linear-gradient(135deg, $primary, $primary-dark);
-    color: white;
-    border: none;
-    padding: 0.8rem 1.5rem;
-    font-size: 1rem;
-    font-weight: 600;
-    border-radius: 6px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    text-align: center;
-    text-decoration: none;
-
-    &:hover {
-        background: linear-gradient(135deg, $primary-dark, $primary);
-        transform: translateY(-2px);
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    }
-}
-
-.btn-block {
-    display: block;
-    width: 100%;
-}
 
 .text-center {
     text-align: center;
@@ -83,7 +25,7 @@
 }
 
 .link {
-    color: $primary; 
+    color: $color-dark-primary; 
     font-weight: 600;
 }
 

frontend/src/material.ts

@@ -8,6 +8,7 @@ import 'mdui/components/button-icon';
 import 'mdui/components/fab';
 import 'mdui/components/dialog';
 import 'mdui/components/button';
+import 'mdui/components/text-field';
 
 import { setColorScheme } from 'mdui/functions/setColorScheme.js';