Add signin page

floriandejonckheere · Nov 21, 2023 · 0234d46 · 0234d46
1 parent dffe1bf
commit 0234d46
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="h-full">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wattson</title>
   </head>
-  <body>
+  <body class="dark:bg-slate-900 bg-gray-100 flex h-full items-center py-16">
     <div
       id="root"
       class="h-screen w-full flex justify-center items-center"

diff --git a/src/main.tsx b/src/main.tsx
@@ -14,11 +14,16 @@ import History from './pages/history'
 import Suggestions from './pages/suggestions'
 import Administration from './pages/administration'
 
+import Signin from './pages/auth/signin'
+
 createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Navigate to="/overview" />} />
+
+        <Route path="/signin" element={<Signin />} />
+
         <Route element={<Navigation />}>
           <Route element={<Dashboard />}>
             <Route path="/overview" element={<Overview />} />

diff --git a/src/pages/auth/signin.tsx b/src/pages/auth/signin.tsx
@@ -0,0 +1,112 @@
+import { ReactElement } from 'react'
+import { Link } from 'react-router-dom'
+import { BoltIcon } from '@heroicons/react/24/solid'
+
+function Signin(): ReactElement {
+  return (
+    <main className="w-full max-w-md mx-auto p-6">
+      <div className="mt-7 bg-white border border-gray-200 rounded-xl shadow-sm dark:bg-gray-800 dark:border-gray-700">
+        <div className="p-4 sm:p-7">
+          <div className="text-center">
+            <div className="inline-flex items-center gap-x-4 text-2xl font-bold dark:text-white">
+              <BoltIcon className="h-10 w-10 p-2.5 bg-sky-700 text-white rounded-full" />
+              Wattson
+            </div>
+          </div>
+
+          <div className="mt-5">
+            <form>
+              <div className="grid gap-y-4">
+                <div>
+                  <label
+                    htmlFor="username"
+                    className="block text-sm mb-2 dark:text-white"
+                  >
+                    Username
+                  </label>
+                  <div className="relative">
+                    <input
+                      type="text"
+                      id="username"
+                      name="username"
+                      className="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-sky-700 focus:ring-sky-700 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"
+                      required
+                      aria-describedby="email-error"
+                    />
+                    <div className="hidden absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
+                      <svg
+                        className="h-5 w-5 text-red-500"
+                        width="16"
+                        height="16"
+                        fill="currentColor"
+                        viewBox="0 0 16 16"
+                        aria-hidden="true"
+                      >
+                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
+                      </svg>
+                    </div>
+                  </div>
+                  <p
+                    className="hidden text-xs text-red-600 mt-2"
+                    id="email-error"
+                  >
+                    Please include a valid email address so we can get back to
+                    you
+                  </p>
+                </div>
+
+                <div>
+                  <div className="flex justify-between items-center">
+                    <label
+                      htmlFor="password"
+                      className="block text-sm mb-2 dark:text-white"
+                    >
+                      Password
+                    </label>
+                  </div>
+                  <div className="relative">
+                    <input
+                      type="password"
+                      id="password"
+                      name="password"
+                      className="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-sky-700 focus:ring-sky-700 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"
+                      required
+                      aria-describedby="password-error"
+                    />
+                    <div className="hidden absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
+                      <svg
+                        className="h-5 w-5 text-red-500"
+                        width="16"
+                        height="16"
+                        fill="currentColor"
+                        viewBox="0 0 16 16"
+                        aria-hidden="true"
+                      >
+                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
+                      </svg>
+                    </div>
+                  </div>
+                  <p
+                    className="hidden text-xs text-red-600 mt-2"
+                    id="password-error"
+                  >
+                    8+ characters required
+                  </p>
+                </div>
+
+                <button
+                  type="submit"
+                  className="w-full mt-4 py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-sky-700 text-white hover:bg-sky-900 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                >
+                  Sign in
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </main>
+  )
+}
+
+export default Signin