fix: add hanko ui

amjed-ali-k · Oct 10, 2023 · 1bc2974 · 1bc2974
1 parent 006b999
commit 1bc2974
Show file tree

Hide file tree

Showing 13 changed files with 145 additions and 151 deletions.
diff --git a/src/app/auth/LogIn.tsx b/src/app/auth/LogIn.tsx
diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx
@@ -0,0 +1,51 @@
+import SBTEToolsLogo from "@/components/Logo";
+import HankoAuth from "@/components/auth/HankoAuth";
+
+export default function LoginPage() {
+  return (
+    <>
+      <div className="container relative pt-20 lg:pt-0 h-[800px] flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
+        <div className="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
+          <div className="absolute inset-0 bg-zinc-900" />
+          <div className="relative z-20 flex items-center text-lg font-medium">
+            <div className="flex items-center space-x-2 focus:outline-none focus-visible:ring-2">
+              <SBTEToolsLogo className="h-8 w-8 rounded-md bg-[#3178C6] p-[2px]" />
+              <span className="font-bold leading-[14px]">
+                Poly
+                <br />
+                Tools
+              </span>
+            </div>
+          </div>
+          <div className="relative z-20 mt-auto">
+            <blockquote className="space-y-2">
+              <p className="text-lg">
+                &ldquo;This website has saved me countless hours of work and
+                helped me analyse faster than ever before.&rdquo;
+              </p>
+              <footer className="text-sm">Sheeba MH</footer>
+            </blockquote>
+          </div>
+        </div>
+        <style>
+          {`  .hankoComponent::part(headline1) {
+  display:none!important;
+  }`}
+        </style>
+        <div className="lg:p-8">
+          <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+            <div className="flex flex-col space-y-2 text-center">
+              <h1 className="text-2xl font-semibold tracking-tight">
+                Create or Sign In
+              </h1>
+              <p className="text-sm text-muted-foreground">
+                Enter your email below to proceed
+              </p>
+            </div>
+            <HankoAuth className="hankoComponent" />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
@@ -1,34 +1,11 @@
 "use client";
 import Navigation from "@/components/Navigation";
-import { useProfile } from "@/lib/swr";
-import { usePathname, useRouter } from "next/navigation";
-import { useEffect } from "react";
-import { useSession } from "next-auth/react";
 
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const profile = useProfile();
-
-  useSession({
-    required: true,
-    onUnauthenticated() {
-      replace(`/?redirect=${pathname}`);
-    },
-  });
-
-  const { replace } = useRouter();
-  const pathname = usePathname();
-
-  useEffect(() => {
-    if (!profile.isLoading && !profile.error && !profile.data?.phone) {
-      // Profile not completed
-      replace(`/dashboard/profile?redirect=${pathname}`);
-    }
-  }, [pathname, profile, replace]);
-
   return (
     <>
       <Navigation />

diff --git a/src/app/dashboard/profile/_components/form.tsx b/src/app/dashboard/profile/_components/form.tsx
@@ -41,24 +41,13 @@ import * as z from "zod";
 const formSchema = z.object({
   phone: z
     .string()
-    .nonempty()
+    .min(1)
     .regex(/^[0-9]{10}$/, "Enter a valid phone number."),
   bio: z.string().optional(),
-  name: z.string().min(5, "Minimum 5 characters required").nonempty("Required"),
-  college: z.string().nonempty(),
+  name: z.string().min(5, "Minimum 5 characters required").min(1),
+  college: z.string().min(1),
   image: z.string().url().optional(),
-  designation: z.string().nonempty(),
-  links: z
-    .object({
-      instagram: z.string().url(),
-      linkedin: z.string().url(),
-      github: z.string().url(),
-      facebook: z.string().url(),
-      twitter: z.string().url(),
-      threads: z.string().url(),
-      telegram: z.string().url(),
-    })
-    .optional(),
+  designation: z.string().min(1),
 });
 
 export function ProfileForm({

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -178,3 +178,60 @@ html {
     animation: none !important;
   }
 }
+
+hanko-auth,
+hanko-profile {
+  /* Color Scheme */
+  --color: 0 0% 98%;
+  --color-shade-1: #8f9095;
+  --color-shade-2: 240 3.7% 15.9%;
+
+  --brand-color: #506cf0;
+  --brand-color-shade-1: #6b84fb;
+  --brand-contrast-color: white;
+
+  --background-color: 240 10% 3.9%;
+  --error-color: #e82020;
+  --link-color: #506cf0;
+
+  /* Font Styles */
+  --font-weight: 400;
+  --font-size: 16px;
+  --font-family: sans-serif;
+
+  /* Border Styles */
+  --border-radius: 0.5rem;
+  --border-style: solid;
+  --border-width: 1px;
+
+  /* Item Styles */
+  --item-height: 34px;
+  --item-margin: 0.5rem 0;
+
+  /* Container Styles */
+  --container-padding: 30px;
+  --container-max-width: 410px;
+
+  /* Headline Styles */
+  --headline1-font-size: 24px;
+  --headline1-font-weight: 600;
+  --headline1-margin: 0 0 1rem;
+
+  --headline2-font-size: 16px;
+  --headline2-font-weight: 600;
+  --headline2-margin: 1rem 0 0.5rem;
+
+  /* Divider Styles */
+  --divider-padding: 0 42px;
+  --divider-visibility: visible;
+
+  /* Link Styles */
+  --link-text-decoration: none;
+  --link-text-decoration-hover: underline;
+
+  /* Input Styles */
+  --input-min-width: 14em;
+
+  /* Button Styles */
+  --button-min-width: max-content;
+}
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { SessionProvider } from "@/lib/auth";
 import React from "react";
 import { TooltipProvider } from "@/components/ui/tooltip";
 
@@ -9,9 +8,5 @@ interface Props {
 }
 
 export function Providers({ children }: Props) {
-  return (
-    <SessionProvider>
-      <TooltipProvider>{children}</TooltipProvider>
-    </SessionProvider>
-  );
+  return <TooltipProvider>{children}</TooltipProvider>;
 }
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
@@ -4,7 +4,6 @@ import Link from "next/link";
 import React from "react";
 import { usePathname, useRouter } from "next/navigation";
 import { Button } from "./ui/button";
-import { signOut } from "@/lib/auth";
 import SBTEToolsLogo from "./Logo";
 import { cn } from "@/lib/utils";
 import {
@@ -20,8 +19,6 @@ import { useLogout } from "./auth/LogOut";
 
 function Navigation() {
   const pathname = usePathname();
-  const router = useRouter();
-
   const logout = useLogout();
 
   return (

diff --git a/src/components/auth/HankoAuth.tsx b/src/components/auth/HankoAuth.tsx
@@ -6,9 +6,10 @@ import { register } from "@teamhanko/hanko-elements";
 
 import { Hanko } from "@teamhanko/hanko-frontend-sdk";
 
-const hankoApi = process.env.HANKO_API_URL!;
+const hankoApi = process.env.NEXT_PUBLIC_HANKO_API_URL!;
 
-export default function HankoAuth() {
+export default function HankoAuth({ className }: { className?: string }) {
+  console.log("API URL", hankoApi);
   const router = useRouter();
 
   const [hanko, setHanko] = useState<Hanko>();
@@ -38,5 +39,5 @@ export default function HankoAuth() {
     });
   }, []);
 
-  return <hanko-auth />;
+  return <hanko-auth class={className} />;
 }
diff --git a/src/components/auth/LogOut.tsx b/src/components/auth/LogOut.tsx
@@ -4,7 +4,7 @@ import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { Hanko } from "@teamhanko/hanko-elements";
 
-const hankoApi = process.env.NEXT_PUBLIC_HANKO_API_URL;
+const hankoApi = process.env.NEXT_PUBLIC_HANKO_API_URL!;
 
 export const useLogout = () => {
   const router = useRouter();

diff --git a/src/components/home/GoogleSigninButton.tsx b/src/components/home/GoogleSigninButton.tsx
diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx
@@ -5,7 +5,6 @@ import { HeroIllustration } from "./heroillistruation";
 import { Button } from "../ui/button";
 import SBTEToolsLogo from "../Logo";
 import SignInButton from "./SignInButton";
-import GoogleSignInButton from "./GoogleSigninButton";
 
 export async function Hero() {
   return (
@@ -30,7 +29,6 @@ export async function Hero() {
             </Balancer>
           </p>
           <div className="flex flex-col gap-3 md:flex-row">
-            <GoogleSignInButton />
             <SignInButton />
             <Button
               asChild

diff --git a/src/components/home/SignInButton.tsx b/src/components/home/SignInButton.tsx
@@ -5,53 +5,50 @@ import { Button } from "../ui/button";
 import Link from "next/link";
 import { Github, Loader2 } from "lucide-react";
 import { useState } from "react";
-import { useSession, signIn } from "@/lib/auth";
 
 function SignInButton() {
   const [loading, setLoading] = useState(false);
 
-  const { status, data: session } = useSession();
+  // // NOTE: 1. loading == true -> 2. signIn() -> 3. session status == 'loading' (loading == false)
+  // const handleSignIn = async () => {
+  //   try {
+  //     setLoading(true);
+  //     // page reloads after sign in, so no need to setLoading(false), othersiwe ugly visual glitch
+  //     await signIn("github", { callbackUrl: "/dashboard" });
+  //   } catch (error) {
+  //     // only set loading to false if there was an error and page didn't reload after sign in
+  //     setLoading(false);
+  //   }
+  // };
 
-  // NOTE: 1. loading == true -> 2. signIn() -> 3. session status == 'loading' (loading == false)
-  const handleSignIn = async () => {
-    try {
-      setLoading(true);
-      // page reloads after sign in, so no need to setLoading(false), othersiwe ugly visual glitch
-      await signIn("github", { callbackUrl: "/dashboard" });
-    } catch (error) {
-      // only set loading to false if there was an error and page didn't reload after sign in
-      setLoading(false);
-    }
-  };
-
-  if (session) {
-    return (
-      <Button
-        asChild
-        className="hero-join-button-dark group h-11 mt-0.5 relative mx-auto w-fit overflow-hidden rounded-sm p-[1px] font-bold transition-all duration-300 block dark:hover:shadow-[0_0_2rem_-0.5rem_#fff8] md:mr-0 lg:mr-auto"
-      >
-        <Link href="/dashboard">
-          <span className="inline-flex h-full w-fit items-center gap-1 rounded-sm px-4 py-2 transition-all duration-300 dark:bg-neutral-900 dark:text-white group-hover:dark:bg-black">
-            Dashboard
-          </span>
-        </Link>
-      </Button>
-    );
-  }
+  // if (session) {
+  //   return (
+  //     <Button
+  //       asChild
+  //       className="hero-join-button-dark group h-11 mt-0.5 relative mx-auto w-fit overflow-hidden rounded-sm p-[1px] font-bold transition-all duration-300 block dark:hover:shadow-[0_0_2rem_-0.5rem_#fff8] md:mr-0 lg:mr-auto"
+  //     >
+  //       <Link href="/dashboard">
+  //         <span className="inline-flex h-full w-fit items-center gap-1 rounded-sm px-4 py-2 transition-all duration-300 dark:bg-neutral-900 dark:text-white group-hover:dark:bg-black">
+  //           Dashboard
+  //         </span>
+  //       </Link>
+  //     </Button>
+  //   );
+  // }
 
   return (
     <Button
       asChild
       className="hero-join-button-dark group h-11 mt-0.5 relative mx-auto w-fit overflow-hidden rounded-sm p-[1px] font-bold transition-all duration-300 block dark:hover:shadow-[0_0_2rem_-0.5rem_#fff8] md:mr-0 lg:mr-auto"
     >
-      <Link href="" onClick={handleSignIn}>
+      <Link href="/auth">
         <span className="inline-flex h-full w-fit items-center gap-1 rounded-sm px-4 py-2 transition-all duration-300 dark:bg-neutral-900 dark:text-white group-hover:dark:bg-black">
           {loading || status === "loading" ? (
             <Loader2 className="h-5 w-5 animate-spin" />
           ) : (
             <Github className="mr-1 h-4 w-4 stroke-[3]" />
           )}
-          Sign in with Github
+          Login
         </span>
       </Link>
     </Button>