add login page to vc

3 weeks ago · 53e4f39547
parent 253dd87c0b
commit 53e4f39547
1 changed files with 127 additions and 0 deletions
--- a/pages/login_page.go
+++ b/pages/login_page.go
@ -0,0 +1,127 @@
+package pages
+
+import "fmt"
+
+func LoginPage(errorMsg string) string {
+	errorBlock := ""
+	if errorMsg != "" {
+		errorBlock = fmt.Sprintf(`
+            <div class="rvt-alert rvt-alert--danger rvt-m-bottom-lg" role="alert" aria-live="polite">
+                <div class="rvt-alert__message">%s</div>
+            </div>`, errorMsg)
+	}
+	return fmt.Sprintf(`<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Log In — Maurer School of Law</title>
+    <link rel="stylesheet" href="https://unpkg.com/rivet-core@2/css/rivet.min.css">
+    <style>
+        body {
+            background-color: #f0f0f0;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+            margin: 0;
+        }
+        .iu-login-header {
+            background-color: #7d110c;
+            padding: 1.25rem 2rem;
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+        .iu-login-header svg {
+            color: white;
+            flex-shrink: 0;
+        }
+        .iu-login-header__wordmark {
+            color: white;
+            font-size: 1.25rem;
+            font-weight: bold;
+            letter-spacing: 0.01em;
+        }
+        .iu-login-header__subtitle {
+            color: rgba(255,255,255,0.85);
+            font-size: 0.9rem;
+            display: block;
+        }
+        .iu-login-body {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 3rem 1rem;
+        }
+        .iu-login-card {
+            background: white;
+            border-radius: 4px;
+            box-shadow: 0 2px 12px rgba(0,0,0,0.12);
+            padding: 2.5rem;
+            width: 100%%;
+            max-width: 400px;
+        }
+        .iu-login-card h1 {
+            font-size: 1.5rem;
+            font-weight: bold;
+            margin: 0 0 1.75rem;
+            color: #333;
+        }
+        .iu-login-btn {
+            width: 100%%;
+            background-color: #7d110c;
+            border-color: #7d110c;
+            justify-content: center;
+        }
+        .iu-login-btn:hover {
+            background-color: #5c0c09;
+            border-color: #5c0c09;
+        }
+        .iu-login-footer {
+            text-align: center;
+            padding: 1.25rem;
+            font-size: 0.85rem;
+            color: #666;
+            border-top: 1px solid #ddd;
+            background: white;
+        }
+    </style>
+</head>
+<body>
+    <div class="iu-login-header">
+        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="44" viewBox="0 0 28 34" fill="currentColor" aria-hidden="true">
+            <path d="M-3.34344e-05 4.70897H8.83308V7.174H7.1897V21.1426H10.6134V2.72321H8.83308V0.121224H18.214V2.65476H16.2283V21.1426H19.7889V7.174H18.214V4.64047H27.0471V7.174H25.0614V23.6761L21.7746 26.8944H16.2967V30.455H18.214V33.8787H8.76463V30.592H10.6819V26.8259H5.20403L1.91726 23.6077V7.174H-3.34344e-05V4.70897Z"/>
+        </svg>
+        <div>
+            <span class="iu-login-header__wordmark">Indiana University</span>
+            <span class="iu-login-header__subtitle">Maurer School of Law</span>
+        </div>
+    </div>
+
+    <div class="iu-login-body">
+        <div class="iu-login-card">
+            <h1>Log in</h1>
+            %s
+            <form method="post" action="/faculty/activity/login">
+                <div class="rvt-m-bottom-md">
+                    <label class="rvt-label" for="username">Username</label>
+                    <input class="rvt-input" type="text" id="username" name="username"
+                           autocomplete="username" autofocus>
+                </div>
+                <div class="rvt-m-bottom-xl">
+                    <label class="rvt-label" for="password">Password</label>
+                    <input class="rvt-input" type="password" id="password" name="password"
+                           autocomplete="current-password">
+                </div>
+                <button class="rvt-button iu-login-btn" type="submit">Log In</button>
+            </form>
+        </div>
+    </div>
+
+    <footer class="iu-login-footer">
+        &copy; 2025 The Trustees of Indiana University
+    </footer>
+</body>
+</html>`, errorBlock)
+}