Factorization of input styling.

frontend/src/app/pages/login/login.component.html

@@ -1,6 +1,6 @@
 <form [formGroup]="loginForm" (submit)="performLogin()" ngNativeValidate>
     <h1 i18n>Login</h1>
-    <div>
+    <div class="form-field">
         <mat-icon>mail</mat-icon>
         <label for="email" i18n>
             Email address
@@ -8,7 +8,7 @@
         </label>
         <input type="email" id="email" formControlName="email" autocomplete="email" required />
     </div>
-    <div>
+    <div class="form-field">
         <mat-icon>lock</mat-icon>
         <label for="password" i18n>
             Password
@@ -16,7 +16,7 @@
         </label>
         <input type="password" id="password" formControlName="password" required />
     </div>
-    <div class="actions">
+    <div class="actions reversed">
         <button type="submit" i18n>Send</button>
         <a [routerLink]="['/signin']" class="button secondary" i18n>Create an account</a>
     </div>

frontend/src/app/pages/login/login.component.scss

@@ -16,53 +16,5 @@
         border-radius: .5em;
         padding: 1em 1.5em;
         background-color: #ffffff;
-
-        h1 {
-            margin: 0;
-        }
-
-        div {
-            display: flex;
-            flex-direction: column;
-            position: relative;
-            gap: .1em;
-
-            mat-icon {
-                position: absolute;
-                top: 1.3em;
-                left: .5em;
-                color: #777;
-            }
-
-            &.actions {
-                flex-direction: row-reverse;
-                justify-content: space-between;
-                align-items: center;
-
-                a {
-                    color: #3f51b5;
-                    text-decoration: none;
-                }
-            }
-
-            label {
-                flex: 1;
-                font-style: italic;
-                padding-left: 1em;
-                color: #777;
-
-                .required {
-                    color: red;
-                }
-            }
-
-            input {
-                flex: 1;
-                background-color: #eeeeee;
-                border: none;
-                border-radius: 10em;
-                padding: 1em 1em 1em 3em;
-            }
-        }
     }
 }

frontend/src/app/pages/signin/signin.component.html

@@ -1,6 +1,6 @@
 <form [formGroup]="signinForm" (submit)="performSignin()" ngNativeValidate>
     <h1 i18n>Signin</h1>
-    <div>
+    <div class="form-field">
         <mat-icon>person</mat-icon>
         <label for="pseudo" i18n>
             Pseudo
@@ -8,7 +8,7 @@
         </label>
         <input type="text" id="pseudo" formControlName="pseudo" autocomplete="pseudo" required />
     </div>
-    <div>
+    <div class="form-field">
         <mat-icon>mail</mat-icon>
         <label for="email" i18n>
             Email address
@@ -16,7 +16,7 @@
         </label>
         <input type="email" id="email" formControlName="email" autocomplete="email" required />
     </div>
-    <div>
+    <div class="form-field">
         <mat-icon>lock</mat-icon>
         <label for="password" i18n>
             Password
@@ -24,7 +24,7 @@
         </label>
         <input type="password" id="password" formControlName="password" required />
     </div>
-    <div>
+    <div class="form-field">
         <mat-icon>lock</mat-icon>
         <label for="confirm-password" i18n>
             Confirm password
@@ -32,8 +32,8 @@
         </label>
         <input type="password" id="confirm-password" formControlName="confirmPassword" required />
     </div>
-    <div class="actions">
+    <div class="actions reversed">
         <button type="submit" i18n>Send</button>
-        <a [routerLink]="['/login']" i18n>I already have an account</a>
+        <a [routerLink]="['/login']" class="button secondary" i18n>I already have an account</a>
     </div>
 </form>

frontend/src/app/pages/signin/signin.component.scss

@@ -16,67 +16,5 @@
         border-radius: .5em;
         padding: 1em 1.5em;
         background-color: #ffffff;
-
-        h1 {
-            margin: 0;
-        }
-
-        div {
-            display: flex;
-            flex-direction: column;
-            position: relative;
-            gap: .1em;
-
-            mat-icon {
-                position: absolute;
-                top: 1.3em;
-                left: .5em;
-                color: #777;
-            }
-
-            &.actions {
-                flex-direction: row-reverse;
-                justify-content: space-between;
-                align-items: center;
-
-                button {
-                    padding: .8em 1.2em;
-                    border-radius: 10em;
-                    border: none;
-                    background-color: #3f51b5;
-                    color: white;
-                    transition: background-color .2s ease-in-out;
-
-                    &:hover {
-                        background-color: #5b6ed8;
-                        cursor: pointer;
-                    }
-                }
-
-                a {
-                    color: #3f51b5;
-                    text-decoration: none;
-                }
-            }
-
-            label {
-                flex: 1;
-                font-style: italic;
-                padding-left: 1em;
-                color: #777;
-
-                .required {
-                    color: red;
-                }
-            }
-
-            input {
-                flex: 1;
-                background-color: #eeeeee;
-                border: none;
-                border-radius: 10em;
-                padding: 1em 1em 1em 3em;
-            }
-        }
     }
 }

frontend/src/design_system/button.scss

@@ -19,4 +19,8 @@ button, a.button {
             background-color: #f2f4ff;
         }
     }
+}
+
+a.button {
+    text-decoration: none;
 }

frontend/src/design_system/index.scss

@@ -1 +1,2 @@
-@use './button.scss';
+@use './button.scss';
+@use './input.scss';

frontend/src/design_system/input.scss

@@ -0,0 +1,51 @@
+form {
+    h1 {
+        margin: 0;
+    }
+
+    div {
+        &.actions {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+
+            &.reversed {
+                flex-direction: row-reverse;
+            }
+        }
+
+        &.form-field {
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            gap: .1em;
+    
+            mat-icon {
+                position: absolute;
+                top: 1.3em;
+                left: .5em;
+                color: #777;
+            }
+    
+            label {
+                flex: 1;
+                font-style: italic;
+                padding-left: 1em;
+                color: #777;
+    
+                .required {
+                    color: red;
+                }
+            }
+    
+            input {
+                flex: 1;
+                background-color: #eeeeee;
+                border: none;
+                border-radius: 10em;
+                padding: 1em 1em 1em 3em;
+            }
+        }
+    }
+}