Finished registration + working on own useAuth composable

assets/common.css

@@ -138,9 +138,6 @@ html.light-mode .light-block {
     display: block;
 }
 
-.flex {
-    display: flex;
-}
 .align-baseline {
     align-items: baseline;
 }
@@ -150,11 +147,26 @@ html.light-mode .light-block {
 .align-stretch {
     align-items: stretch;
 }
+.justify-center {
+    justify-content: center;
+}
+.justify-between {
+    justify-content: space-between;
+}
+.justify-evenly {
+    justify-content: space-evenly;
+}
+.justify-around {
+    justify-content: space-around;
+}
 
 @media screen and (max-width: 750px) {
     .mobile-bigger {
         flex: 3 1 0 !important;
     }
+    .mobile-smaller {
+        flex: 1 3 0 !important;
+    }
     .mobile-hidden {
         display: none !important;
     }
@@ -163,10 +175,82 @@ html.light-mode .light-block {
     }
 }
 @media screen and (min-width: 750px) {
+    .desktop-bigger {
+        flex: 3 1 0 !important;
+    }
+    .desktop-smaller {
+        flex: 1 3 0 !important;
+    }
     .desktop-hidden {
         display: none !important;
     }
     .desktop-block {
         display: inherit !important;
     }
+}
+
+
+.input-form.input-form-wide {
+    width: 600px;
+}
+
+.input-form {
+    width: 400px;
+    display: flex;
+    flex-direction: column;
+    padding: 0 2em 2em 2em;
+    border: 1px solid var(--background-modifier-border);
+}
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    padding: .5em;
+}
+
+.input-form h1 {
+    font-size: x-large;
+}
+
+.input-form button {
+    margin-top: 2em;
+}
+
+.input-group .input-label {
+    padding: 4px 1em;
+}
+
+.input-group .input-error {
+    padding: .5em 1em 4px;
+    color: var(--text-error);
+    user-select: text;
+}
+
+.input-group .input-input.input-has-error {
+    border-color: var(--text-error);
+}
+
+.password-validation-group {
+    display: flex;
+    flex-direction: column;
+    padding: .5em 2em;
+}
+
+.password-validation-title {
+    font-style: italic;
+    font-size: small;
+    padding-bottom: 4px;
+}
+
+.password-validation-item {
+    font-size: small;
+    padding-left: .5em;
+}
+
+.password-validation-item pre {
+    user-select: text;
+}
+
+.password-validation-item.validation-error {
+    color: var(--text-error);
 }

assets/global.css

@@ -2266,13 +2266,6 @@ button.mod-destructive {
     color: var(--text-on-accent);
 }
 
-.input-label {
-    display: inline-block;
-    width: 150px;
-    text-align: right;
-    margin-right: var(--size-4-2);
-}
-
 .input-button {
     padding: 6px 14px;
     margin-left: 14px;