From e987e0c40bd2ec4d488de4178d43e30817502121 Mon Sep 17 00:00:00 2001 From: gibbyb Date: Wed, 7 Aug 2024 21:48:11 -0500 Subject: [PATCH] Make sign in with apple button look acceptable --- public/logos/Apple_logo_black.svg | 3 +++ public/logos/Apple_logo_grey.svg | 4 ++++ src/app/page.tsx | 22 +++++++++++++++++-- .../auth/client/SignInAppleButton.tsx | 15 +++++++++++++ src/components/auth/client/SignOutButton.tsx | 6 +++++ .../auth/server/SignInAppleButton.tsx | 21 ++++++++++++++++++ src/components/auth/server/SignOutButton.tsx | 14 ++++++++++++ src/components/home/Title.tsx | 8 +++++++ src/components/theme/theme_provider.tsx | 4 +--- src/styles/globals.css | 11 ++++++++++ 10 files changed, 103 insertions(+), 5 deletions(-) create mode 100644 public/logos/Apple_logo_black.svg create mode 100644 public/logos/Apple_logo_grey.svg create mode 100644 src/components/auth/client/SignInAppleButton.tsx create mode 100644 src/components/auth/client/SignOutButton.tsx create mode 100644 src/components/auth/server/SignInAppleButton.tsx create mode 100644 src/components/auth/server/SignOutButton.tsx create mode 100644 src/components/home/Title.tsx diff --git a/public/logos/Apple_logo_black.svg b/public/logos/Apple_logo_black.svg new file mode 100644 index 0000000..82b0cdd --- /dev/null +++ b/public/logos/Apple_logo_black.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/logos/Apple_logo_grey.svg b/public/logos/Apple_logo_grey.svg new file mode 100644 index 0000000..3f06156 --- /dev/null +++ b/public/logos/Apple_logo_grey.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index e970ad9..788c65a 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,10 +1,28 @@ +"use server" import Theme_Toggle from "~/components/theme/theme_toggle" -//import Link from "next/link"; +import { auth } from "~/auth" +import Sign_In_Apple_Button from "~/components/auth/server/SignInAppleButton" +import Title from "~/components/home/Title" -export default function HomePage() { +export default async function HomePage() { + const session = await auth(); + if (!session) { + return ( +
+
+ +
+
+ + <Sign_In_Apple_Button /> + </div> + </main> + ); + } return ( <main className="min-h-screen"> <Theme_Toggle /> + </main> ); } diff --git a/src/components/auth/client/SignInAppleButton.tsx b/src/components/auth/client/SignInAppleButton.tsx new file mode 100644 index 0000000..817f6f7 --- /dev/null +++ b/src/components/auth/client/SignInAppleButton.tsx @@ -0,0 +1,15 @@ +import { signIn } from "next-auth/react" +import { Button } from "~/components/ui/button" +import Image from "next/image" + +export default function Sign_In() { + return ( + <div className="flex flex-row bg-primary py-3 px-10 rounded-xl text-lg font-semibold + mt-10 text-background my-auto"> + <Image src="/logos/Apple_logo_black.svg" alt="Apple logo" width={20} height={20} + className="mr-4 my-auto" + /> + <Button onClick={() => signIn("apple")}>Sign in with Apple</Button> + </div> + ); +} diff --git a/src/components/auth/client/SignOutButton.tsx b/src/components/auth/client/SignOutButton.tsx new file mode 100644 index 0000000..ce3a8fc --- /dev/null +++ b/src/components/auth/client/SignOutButton.tsx @@ -0,0 +1,6 @@ +import { signOut } from "next-auth/react" +import { Button } from "~/components/ui/button" + +export default function Sign_Out() { + return <Button onClick={() => signOut()}>Sign Out</Button> +} diff --git a/src/components/auth/server/SignInAppleButton.tsx b/src/components/auth/server/SignInAppleButton.tsx new file mode 100644 index 0000000..955358f --- /dev/null +++ b/src/components/auth/server/SignInAppleButton.tsx @@ -0,0 +1,21 @@ +import { signIn } from "~/auth" + +export default function Sign_In_Apple() { + return ( + <form + action={async () => { + "use server" + await signIn("apple") + }} + > + <div className="flex flex-row bg-primary py-3 px-10 rounded-xl text-lg font-semibold + mt-10 text-background my-auto"> + <div + className="apple-logo my-auto" + style={{ backgroundImage: 'var(--apple-logo)' }} + /> + <button type="submit">Sign in with Apple</button> + </div> + </form> + ) +} diff --git a/src/components/auth/server/SignOutButton.tsx b/src/components/auth/server/SignOutButton.tsx new file mode 100644 index 0000000..296a6d8 --- /dev/null +++ b/src/components/auth/server/SignOutButton.tsx @@ -0,0 +1,14 @@ +import { signOut } from "~/auth" + +export default function Sign_Out() { + return ( + <form + action={async () => { + "use server" + await signOut() + }} + > + <button type="submit">Sign Out</button> + </form> + ) +} diff --git a/src/components/home/Title.tsx b/src/components/home/Title.tsx new file mode 100644 index 0000000..b4ad0a3 --- /dev/null +++ b/src/components/home/Title.tsx @@ -0,0 +1,8 @@ +export default function Title() { + return ( + <div className="py-2 px-3 + rounded-xl text-4xl font-semibold mt-10"> + <h1>Welcome to the Tenant Portal</h1> + </div> + ); +} diff --git a/src/components/theme/theme_provider.tsx b/src/components/theme/theme_provider.tsx index a363253..634d843 100644 --- a/src/components/theme/theme_provider.tsx +++ b/src/components/theme/theme_provider.tsx @@ -6,8 +6,6 @@ import { type ThemeProviderProps } from "next-themes/dist/types" export default function Theme_Provider({ children, ...props }: ThemeProviderProps) { return ( - <div className="w-full justify-end items-end p-3 flex flex-col"> - <NextThemesProvider {...props}>{children}</NextThemesProvider> - </div> + <NextThemesProvider {...props}>{children}</NextThemesProvider> ) } diff --git a/src/styles/globals.css b/src/styles/globals.css index d924e24..466d43f 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -29,6 +29,7 @@ --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; + --apple-logo: url("/logos/Apple_logo_grey.svg"); } .dark { @@ -56,6 +57,7 @@ --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; + --apple-logo: url("/logos/Apple_logo_black.svg"); } } @@ -67,3 +69,12 @@ @apply bg-background text-foreground; } } + +.apple-logo { + width: 20px; + height: 20px; + margin-right: 1rem; + background-size: contain; + background-repeat: no-repeat; + background-position: center; +}