Theme both the sign-in and sign-up pages

src/layouts/SignInUp.astro

@@ -0,0 +1,155 @@
+---
+// Properties
+const {Title, Type} = Astro.props
+
+// Check if user is already logged in, redirect if so
+const { user } = Astro.locals;
+if (user) {
+  return Astro.redirect("/account");
+}
+---
+
+<img id="bg" src="/login-dark-mode.png"/>
+<div class="login-dialog">
+    <div>
+        <img src="/login-dark-mode.png"/>
+    </div>
+    <div class="ld-main">
+        <h2>{Title}</h2>
+        <form method="POST">
+            { 
+                ()=> {
+                  if (Type === "SignUp") {
+                    return <input id="name" name="name" placeholder="Your name" autocomplete="off" type="text"/>
+                  } else {
+                    return null
+                  }
+                }
+            }
+            <input id="email" name="email" type="email" placeholder="Email" autocomplete="off"/>
+            <input id="password" name="password" type="password" placeholder="Password" minlength="8" maxlength="512"/>
+            <div style="display: flex; align-items: center; justify-content: space-between;">
+                { 
+                    ()=> {
+                      if (Type === "SignIn") {
+                        return  <p>Don't have an account? <a href="/signup/">Sign Up</a></p>
+                                <button style="height: max-content;" type="submit">Login</button>
+                      } else if (Type === "SignUp") {
+                        return  <p>Already have an account? <a href="/signin/">Sign In</a></p>
+                                <button style="height: max-content;" type="submit">Sign Up</button>
+                      }
+                    }
+                }
+            </div>
+            <!-- <center><p>or</p></center> -->
+        </form>
+        <!-- <form method="POST" action="/api/discord">
+        <center><button style="background: #5865F2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><path fill="#fff" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></svg> Login with Discord</button></center>
+        </form> -->
+    </div>
+</div>
+
+<style lang="scss">
+body {
+  color: white;
+  background: black;
+  font-family: arial;
+  overflow: hidden;
+  *:focus {
+    outline: none;
+  }
+  a {
+    color: #fb4e72;
+  }
+}
+
+body::before {
+  content: "";
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 0;
+  backdrop-filter: blur(24px) contrast(0.8) brightness(0.4);
+}
+#bg {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: -1;
+}
+
+.login-dialog {
+  position: fixed;
+  top: 6%;
+  left: 50%;
+  transform: translate(-50%);
+  max-width: 800px;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 50% 50%;
+  background: #070707;
+  border: 2px #262626 solid;
+  transition: 0.3s border-color;
+  border-radius: 12px;
+  font-size: 14px;
+  &:hover {
+    border-color: #fb4e72;
+    transition: 1s border-color;
+  }
+  img {
+    border-radius: 10px 0px 0px 10px;
+    width: 100%;
+    margin-bottom: -3px;
+  }
+  .ld-main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0px 48px;
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      input {
+        background: transparent;
+        color: white;
+        border: none;
+        border-bottom: 2px #371f25 solid;
+        padding: 6px 12px;
+        &:hover {
+          border-color: #551c28;
+        }
+        &:focus {
+          border-color: #fb4e72;
+        }
+      }
+      button {
+        background: #fb4e72;
+        color: white;
+        border: none;
+        padding: 6px 12px;
+        border-radius: 3rem;
+        display: flex;
+        max-width: max-content;
+        cursor: pointer;
+        svg {
+          width: 15px;
+          margin-right: 8px;
+        }
+        &:hover {
+          filter: brightness(0.7)
+        }
+        &:focus {
+          filter: brightness(1.1)
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/signin.astro

@@ -1,11 +1,8 @@
 ---
-import Layout from "../layouts/Layout.astro";
-import { SESSION_COOKIE, createAdminClient } from "../server/appwrite";
+import SignInUp from "../layouts/SignInUp.astro";
 
-const { user } = Astro.locals;
-if (user) {
-  return Astro.redirect("/account");
-}
+import { ID } from "node-appwrite";
+import { SESSION_COOKIE, createAdminClient } from "../server/appwrite";
 
 if (Astro.request.method === "POST") {
   const data = await Astro.request.formData();
@@ -17,89 +14,15 @@ if (Astro.request.method === "POST") {
   const session = await account.createEmailPasswordSession(email, password);
 
   Astro.cookies.set(SESSION_COOKIE, session.secret, {
-    path: "/",
-    expires: new Date(session.expire),
-    sameSite: "strict",
-    secure: true,
-    httpOnly: true,
+      path: "/",
+      expires: new Date(session.expire),
+      sameSite: "strict",
+      secure: true,
+      httpOnly: true,
   });
 
   return Astro.redirect("/account");
 }
 ---
 
-<Layout title="Sign in | Server side rendering with Appwrite and Astro">
-  <div class="u-max-width-500 u-width-full-line">
-    <h1 class="heading-level-2 u-margin-block-start-auto">Demo sign in</h1>
-    <div class="u-margin-block-start-24">
-      <form class="form common-section" method="POST">
-        <ul class="form-list" style="--form-list-gap: 1.5rem;">
-          <li class="form-item">
-            <p>
-              This is a demo project for <a href="https://appwrite.io"
-                >Appwrite</a
-              > server side rendering. View the source code on the
-              <a
-                class="link"
-                href="https://github.com/appwrite/demos-for-svelte"
-                >GitHub repository</a
-              >.
-            </p>
-          </li>
-          <li class="form-item">
-            <label class="label is-required" for="email">Email</label>
-            <div class="input-text-wrapper">
-              <input
-                id="email"
-                name="email"
-                placeholder="Email"
-                type="email"
-                class="input-text"
-                autocomplete="off"
-              />
-            </div>
-          </li>
-          <li class="form-item">
-            <label class="label is-required" for="password">Password</label>
-            <div class="input-text-wrapper" style="--amount-of-buttons: 1">
-              <input
-                id="password"
-                name="password"
-                placeholder="Password"
-                minlength="8"
-                type="password"
-                class="input-text"
-                autocomplete="off"
-              />
-              <button
-                type="button"
-                class="show-password-button"
-                aria-label="show password"
-                ><span aria-hidden="true" class="icon-eye"></span></button
-              >
-            </div>
-          </li>
-          <li class="form-item">
-            <button class="button is-full-width" type="submit"> Sign in</button>
-          </li>
-          <span class="with-separators eyebrow-heading-3">or</span>
-          <li class="form-item"></li>
-        </ul>
-      </form>
-      <form method="POST" action="/api/oauth/discord">
-        <button class="button is-discord is-full-width" type="submit">
-          <span class="icon-discord" aria-hidden="true"></span>
-          <span class="text">Sign in with discord</span></button
-        >
-      </form>
-    </div>
-    <ul class="inline-links is-center is-with-sep u-margin-block-start-32">
-      <li class="inline-links-item">
-        <span class="text"
-          >Don't have an account? <a class="link" href="/signup">Sign up</a
-          ></span
-        >
-      </li>
-    </ul>
-  </div>
-</Layout>
+<SignInUp Title="Demo Login" Type="SignIn"/>

src/pages/signup.astro

@@ -1,88 +1,43 @@
 ---
+import SignInUp from "../layouts/SignInUp.astro";
+
 import { ID } from "node-appwrite";
 import { SESSION_COOKIE, createAdminClient } from "../server/appwrite";
 
-const { user } = Astro.locals;
-if (user) {
-  return Astro.redirect("/account");
-}
+
 
 if (Astro.request.method === "POST") {
-  const data = await Astro.request.formData();
+        const data = await Astro.request.formData();
 
-  const email = data.get("email") as string;
-  const password = data.get("password") as string;
-  const name = data.get("name") as string;
+        const email = data.get("email") as string;
+        const password = data.get("password") as string;
+        const name = data.get("name") as string;
 
-  const { account } = createAdminClient();
+        const { account } = createAdminClient();
 
-  await account.create(ID.unique(), email, password, name);
-  const session = await account.createEmailPasswordSession(email, password);
-  const promise = account.createVerification("http://localhost:4321/verify");
+        await account.create(ID.unique(), email, password, name);
+        const session = await account.createEmailPasswordSession(email, password);
+        const promise = account.createVerification("http://localhost:4321/verify");
 
-  promise.then(
-    function (response) {
-      console.log('VERI:' + response);
-    },
-    function (error) {
-      console.log(error);
-    },
-  );
+        promise.then(
+            function (response) {
+            console.log('VERI:' + response);
+            },
+            function (error) {
+            console.log(error);
+            },
+        );
 
-  Astro.cookies.set(SESSION_COOKIE, session.secret, {
-    path: "/",
-    expires: new Date(session.expire),
-    sameSite: "strict",
-    secure: true,
-    httpOnly: true,
-  });
+        Astro.cookies.set(SESSION_COOKIE, session.secret, {
+            path: "/",
+            expires: new Date(session.expire),
+            sameSite: "strict",
+            secure: true,
+            httpOnly: true,
+        });
 
-  return Astro.redirect("/account");
-}
+        return Astro.redirect("/account");
+    }
 ---
 
-<form method="POST">
-  <label for="name">Name</label>
-  <input
-    id="name"
-    name="name"
-    placeholder="Your name"
-    autocomplete="off"
-    type="text"
-  />
-
-  <label class="label is-required" for="email">Email</label>
-  <input
-    id="email"
-    name="email"
-    placeholder="Your email"
-    type="email"
-    autocomplete="off"
-  />
-
-  <label for="password">Password</label>
-  <input
-    id="password"
-    name="password"
-    placeholder="Your password"
-    minlength="8"
-    type="password"
-    autocomplete="off"
-  />
-
-  <button type="submit">Create Account</button>
-
-  <hr/>
-
-
-  <form method="POST" action="/api/oauth">
-    <button class="button is-discord is-full-width" type="submit">
-      <span class="icon-discord" aria-hidden="true"></span>
-      <span class="text">Sign in with discord</span></button
-    >
-  </form>
-</form>
-
-<br/>
-
-<a href="/api/an">Create Anonymous Session</a>
+<SignInUp Title="Demo Registeration" Type="SignUp"/>