Add Sign in page

2024-08-07 19:09:34 -04:00
parent 7d234c5aad
commit 2d53824194
5 changed files with 104 additions and 18 deletions
--- a/templates/signin.gohtml
+++ b/templates/signin.gohtml
@@ -0,0 +1,64 @@
+<!doctype html>
+<html>
+  {{template "head" .}}
+  <body class="min-h-screen bg-gray-100">
+    {{template "header".}}
+    <main class="py-12 flex justify-center">
+      <div class="px-8 py-8 bg-white rounded shadow">
+        <h1 class="pt-4 pb-8 text-center text-3xl font-bold text-gray-900">
+          Welcome back!
+        </h1>
+        <form action="/signin" method="post">
+          <div class="py-2">
+            <label for="email" class="text-sm font-semibold text-gray-800">
+              Email Address
+            </label>
+            <input
+              name="email"
+              id="email"
+              type="email"
+              placeholder="Email address"
+              required
+              autocomplete="email"
+              class="w-full px-3 py-2 border border-gray-300 placeholder-gray-500
+                text-gray-800 rounded"
+              value="{{.Email}}"
+              {{if not .Email}}autofocus{{end}}
+            />
+          </div>
+          <div class="py-2">
+            <label for="password" class="text-sm font-semibold text-gray-800">
+              Password
+            </label>
+            <input
+              name="password"
+              id="password"
+              type="password"
+              placeholder="Password"
+              required
+              class="w-full px-3 py-2 border border-gray-300 placeholder-gray-500
+                text-gray-800 rounded"
+              {{if .Email}}autofocus{{end}}
+            />
+          </div>
+          <div class="py-4">
+            <button class="w-full py-4 px-2 bg-indigo-600 hover:bg-indigo-700
+              text-white rounded font-bold text-lg">
+              Sign in
+            </button>
+          </div>
+          <div class="py-2 w-full flex justify-between">
+            <p class="text-xs text-gray-500">
+              Need an account?
+              <a href="/signup" class="underline">Sign up</a>
+            </p>
+            <p class="text-xs text-gray-500">
+              <a href="/reset-pw" class="underline">Forgot your password?</a>
+            </p>
+          </div>
+        </form>
+      </div>
+    </main>
+    {{template "footer" .}}
+  </body>
+</html>
--- a/templates/tailwind.gohtml
+++ b/templates/tailwind.gohtml
@@ -16,7 +16,7 @@
          <a class="text-base font-semibold hover:text-blue-100 pr-8" href="/faq">FAQ</a>
        </div>
        <div class="space-x-4">
-          <a href="#">Sign in</a>
+          <a href="/signin">Sign in</a>
          <a href="/signup" clss="px-4 py-2 bg-blue-700 hover:bg-blue-600 rounded">Sign up</a>
        </div>
      </nav>