feat: add auth layout

jesulim · Sep 17, 2023 · 225c510 · 225c510
1 parent d830411
commit 225c510
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 7 deletions.
diff --git a/src/layouts/auth-layout.astro b/src/layouts/auth-layout.astro
@@ -0,0 +1,56 @@
+---
+import { siteConfig } from "@/config/site";
+import Icon from "astro-icon";
+import BaseLayout from "./base-layout.astro";
+import { ThemeToggle } from "@/components/theme-toggle";
+
+type Props = {
+  title: string;
+  description: string;
+};
+
+const { title, description } = Astro.props;
+---
+
+<BaseLayout title={title} description={description}>
+  <div
+    class="container relative flex min-h-screen flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0"
+  >
+    <div class="absolute right-4 top-4 md:right-8 md:top-8">
+      <slot name="right-corner" />
+    </div>
+
+    <div class="absolute right-8 bottom-4 md:right-12 md:bottom-8">
+      <ThemeToggle client:idle />
+    </div>
+
+    <div
+      class="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex"
+    >
+      <div class="absolute inset-0 bg-foreground dark:bg-background/50"></div>
+      <div class="relative z-20 flex items-center text-lg font-medium">
+        <a href="/" class="hidden items-center space-x-2 md:flex">
+          <Icon name="stars-outline" class="h-8 w-8" />
+          <span class="hidden font-bold sm:inline-block">
+            {siteConfig.name}
+          </span>
+        </a>
+      </div>
+
+      <div class="relative z-20 mt-auto">
+        <blockquote class="space-y-2">
+          <p class="text-lg">
+            &ldquo;This library has saved me countless hours of work and helped
+            me deliver stunning designs to my clients faster than ever
+            before.&rdquo;
+          </p>
+          <footer class="text-sm">Sofia Davis</footer>
+        </blockquote>
+      </div>
+    </div>
+
+    <div class="md:p-8">
+      <slot />
+    </div>
+  </div>
+</BaseLayout>
diff --git a/src/pages/login.astro b/src/pages/login.astro
@@ -1,10 +1,41 @@
 ---
-import MainLayout from "@/layouts/main-layout.astro";
+import { buttonVariants } from "@/components/ui/button";
+import AuthLayout from "@/layouts/auth-layout.astro";
+import { cn } from "@/lib/utils";
 ---
 
-<MainLayout
-  title="Login"
-  description="Lorem ipsum dolor sit amet consectetur adipisicing elit."
->
-  <div class="container py-10">Login</div>
-</MainLayout>
+<AuthLayout title="Login" description="Login">
+  <a
+    href="/register"
+    slot="right-corner"
+    class={cn(buttonVariants({ variant: "ghost" }))}
+  >
+    Sign up
+  </a>
+
+
+  <div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-96">
+    <div class="flex flex-col space-y-2 text-center">
+      <h1 class="text-2xl font-semibold tracking-tight">Welcome back !</h1>
+      <p class="text-sm text-muted-foreground">
+        Enter your email below to create your account
+      </p>
+    </div>
+    <!-- <UserAuthForm /> -->
+     <span>Form</span>
+    <p class="px-8 text-center text-sm text-muted-foreground">
+      By clicking continue, you agree to our{" "}
+      <a href="/terms" class="underline underline-offset-4 hover:text-primary">
+        Terms of Service
+      </a>{" "}
+       and{" "}
+      <a
+        href="/privacy"
+        class="underline underline-offset-4 hover:text-primary"
+      >
+        Privacy Policy
+      </a>
+       .
+    </p>
+  </div>
+</AuthLayout>
diff --git a/src/pages/register.astro b/src/pages/register.astro
@@ -0,0 +1,41 @@
+---
+import { buttonVariants } from "@/components/ui/button";
+import AuthLayout from "@/layouts/auth-layout.astro";
+import { cn } from "@/lib/utils";
+---
+
+<AuthLayout title="Register" description="Register">
+  <a
+    href="/login"
+    slot="right-corner"
+    class={cn(buttonVariants({ variant: "ghost" }))}
+  >
+    Login
+  </a>
+
+
+  <div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-96">
+    <div class="flex flex-col space-y-2 text-center">
+      <h1 class="text-2xl font-semibold tracking-tight">Create an account</h1>
+      <p class="text-sm text-muted-foreground">
+        Enter your email below to create your account
+      </p>
+    </div>
+    <!-- <UserAuthForm /> -->
+     Form
+    <p class="px-8 text-center text-sm text-muted-foreground">
+      By clicking continue, you agree to our{" "}
+      <a href="/terms" class="underline underline-offset-4 hover:text-primary">
+        Terms of Service
+      </a>{" "}
+       and{" "}
+      <a
+        href="/privacy"
+        class="underline underline-offset-4 hover:text-primary"
+      >
+        Privacy Policy
+      </a>
+       .
+    </p>
+  </div>
+</AuthLayout>