✨ Sign up & Sign in

2024-04-20 22:50:09 +08:00
parent 87cccefddb
commit e79441dbc5
26 changed files with 706 additions and 463 deletions
--- a/pkg/views/layouts/auth.gohtml
+++ b/pkg/views/layouts/auth.gohtml
@ -5,8 +5,16 @@

 <body>
 <div class="wrapper-container">
-    <div class="wrapper-card">
-        {{embed}}
+    <div class="wrapper-middleware">
+        {{if ne .info nil}}
+            <div class="animate__animated animate__fadeInDown alert">
+                <div class="content">{{.info}}</div>
+            </div>
+        {{end}}
+
+        <div class="wrapper-card">
+            {{embed}}
+        </div>
    </div>
 </div>
 </body>
@ -20,9 +28,19 @@
        align-items: center;
    }

-    .wrapper-card {
+    .wrapper-middleware {
        width: 100%;
-        max-width: 720px;
+        min-width: 0;
+        max-width: min(800px, 100dvw);
+
+        margin: 1rem;
+
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .wrapper-card {
        transition: all .3s;
        height: auto;
        overflow: auto;
@ -31,9 +49,25 @@
        justify-content: center;
        border-radius: 28px;
        padding: 56px;
-        margin: 2rem;
        gap: 0 2rem;
-        background-color: #ebf1fa;
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface)
+    }
+
+    .alert {
+        width: 100%;
+        max-width: 800px;
+        padding: 16px;
+        border-radius: 16px;
+        background-color: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+        display: flex;
+        gap: 8px;
+    }
+
+    .alert .content {
+        flex-grow: 1;
+        text-transform: capitalize;
    }

    .logo {