Sign in options

midday-ai · Dec 1, 2023 · 1bb2595 · 1bb2595
1 parent f1479a2
commit 1bb2595
Show file tree

Hide file tree

Showing 13 changed files with 136 additions and 18 deletions.
diff --git a/apps/dashboard/src/actions/change-chart-type-action.ts b/apps/dashboard/src/actions/change-chart-type-action.ts
@@ -1,5 +1,6 @@
 "use server";
 
+import { Cookies } from "@/utils/constants";
 import { getUser } from "@midday/supabase/cached-queries";
 import { revalidateTag } from "next/cache";
 import { cookies } from "next/headers";
@@ -12,12 +13,12 @@ export const changeChartTypeAction = action(
     const user = await getUser();
 
     cookies().set({
-      name: "chart-type",
+      name: Cookies.ChartType,
       value,
     });
 
     revalidateTag(`chart_${user.data.team_id}`);
 
     return value;
-  },
+  }
 );
diff --git a/apps/dashboard/src/actions/change-spending-period-action.ts b/apps/dashboard/src/actions/change-spending-period-action.ts
@@ -1,5 +1,6 @@
 "use server";
 
+import { Cookies } from "@/utils/constants";
 import { getUser } from "@midday/supabase/cached-queries";
 import { revalidateTag } from "next/cache";
 import { cookies } from "next/headers";
@@ -12,12 +13,12 @@ export const changeSpendingPeriodAction = action(
     const user = await getUser();
 
     cookies().set({
-      name: "spending-period",
+      name: Cookies.SpendingPeriod,
       value: JSON.stringify(params),
     });
 
     revalidateTag(`spending_${user.data.team_id}`);
 
     return params;
-  },
+  }
 );
diff --git a/apps/dashboard/src/actions/change-transactions-period-action.ts b/apps/dashboard/src/actions/change-transactions-period-action.ts
@@ -1,5 +1,6 @@
 "use server";
 
+import { Cookies } from "@/utils/constants";
 import { getUser } from "@midday/supabase/cached-queries";
 import { revalidateTag } from "next/cache";
 import { cookies } from "next/headers";
@@ -12,12 +13,12 @@ export const changeTransactionsPeriodAction = action(
     const user = await getUser();
 
     cookies().set({
-      name: "transactions-period",
+      name: Cookies.TransactionsPeriod,
       value,
     });
 
     revalidateTag(`transactions_${user.data.team_id}`);
 
     return value;
-  },
+  }
 );
diff --git a/apps/dashboard/src/app/[locale]/@login/page.tsx b/apps/dashboard/src/app/[locale]/@login/page.tsx
@@ -1,9 +1,53 @@
+import { AppleSignIn } from "@/components/apple-sign-in";
 import { GoogleSignIn } from "@/components/google-sign-in";
 import { SlackSignIn } from "@/components/slack-sign-in";
+import { Cookies } from "@/utils/constants";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@midday/ui/collapsible";
 import { Icons } from "@midday/ui/icons";
+import { c } from "next-usequerystate/dist/parsers-d2c58bed";
+import { cookies } from "next/headers";
 import Link from "next/link";
 
-export default function Login() {
+export default async function Login() {
+  const cookieStore = cookies();
+  const preffered = cookieStore.get(Cookies.PrefferedSignInProvider);
+
+  let prefferedSignInOption = <GoogleSignIn />;
+  let moreSignInOptions = (
+    <>
+      <AppleSignIn />
+      <SlackSignIn />
+    </>
+  );
+
+  switch (preffered?.value) {
+    case "apple":
+      prefferedSignInOption = <AppleSignIn />;
+      moreSignInOptions = (
+        <>
+          <GoogleSignIn />
+          <SlackSignIn />
+        </>
+      );
+      break;
+
+    case "slack":
+      prefferedSignInOption = <SlackSignIn />;
+      moreSignInOptions = (
+        <>
+          <GoogleSignIn />
+          <AppleSignIn />
+        </>
+      );
+      break;
+    default:
+      break;
+  }
+
   return (
     <div>
       <div className="absolute left-5 top-4 md:left-10 md:top-10">
@@ -40,22 +84,32 @@ export default function Login() {
             />
 
             <div className="pb-4 bg-gradient-to-r from-primary dark:via-primary dark:to-[#848484] to-[#000] inline-block text-transparent bg-clip-text">
-              <h1 className="font-bold pb-1 text-3xl">Login to midday.</h1>
+              <h1 className="font-medium pb-1 text-3xl">Login to midday.</h1>
             </div>
 
-            <p className="font-bold pb-1 text-2xl text-[#606060]">
+            <p className="font-medium pb-1 text-2xl text-[#878787]">
               Automate financial tasks, <br /> stay organized, and make
               <br />
               informed decisions
               <br /> effortlessly.
             </p>
 
-            <div className="pointer-events-auto mt-6 flex flex-col mb-4 space-y-4">
-              <GoogleSignIn />
-              <SlackSignIn />
+            <div className="pointer-events-auto mt-6 flex flex-col mb-6">
+              {prefferedSignInOption}
+
+              <Collapsible className="border-t-[1px] pt-4 mt-6">
+                <CollapsibleTrigger className="text-center w-full font-medium text-sm">
+                  More options
+                </CollapsibleTrigger>
+                <CollapsibleContent className="w-full mt-4">
+                  <div className="flex flex-col space-y-4">
+                    {moreSignInOptions}
+                  </div>
+                </CollapsibleContent>
+              </Collapsible>
             </div>
 
-            <p className="text-xs text-[#606060]">
+            <p className="text-xs text-[#878787]">
               By clicking Continue with Google, you acknowledge that you have
               read and understood, and agree to Midday's and{" "}
               <a href="https://midday.ai/policy">Privacy Policy</a>.

diff --git a/apps/dashboard/src/app/api/auth/callback/route.ts b/apps/dashboard/src/app/api/auth/callback/route.ts
@@ -1,3 +1,4 @@
+import { Cookies } from "@/utils/constants";
 import { createClient } from "@midday/supabase/server";
 import { cookies } from "next/headers";
 import { NextResponse } from "next/server";
@@ -7,11 +8,16 @@ export const runtime = "edge";
 export const preferredRegion = "fra1";
 
 export async function GET(req: NextRequest) {
+  const cookieStore = cookies();
   const requestUrl = new URL(req.url);
   const code = requestUrl.searchParams.get("code");
+  const provider = requestUrl.searchParams.get("provider");
+
+  if (provider) {
+    cookieStore.set(Cookies.PrefferedSignInProvider, provider);
+  }
 
   if (code) {
-    const cookieStore = cookies();
     const supabase = createClient(cookieStore);
     await supabase.auth.exchangeCodeForSession(code);
   }

diff --git a/apps/dashboard/src/components/apple-sign-in.tsx b/apps/dashboard/src/components/apple-sign-in.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { createClient } from "@midday/supabase/client";
+import { Button } from "@midday/ui/button";
+import { Icons } from "@midday/ui/icons";
+
+export function AppleSignIn() {
+  const supabase = createClient();
+
+  const handleSignIn = async () => {
+    await supabase.auth.signInWithOAuth({
+      provider: "apple",
+      options: {
+        redirectTo: `${location.origin}/api/auth/callback?provider=apple`,
+      },
+    });
+  };
+
+  return (
+    <Button
+      onClick={handleSignIn}
+      className="active:scale-[0.98] rounded-xl bg-primary px-6 py-4 text-secondary font-medium flex space-x-2 h-[40px] w-full"
+    >
+      <Icons.Apple />
+      <span>Continue with Apple</span>
+    </Button>
+  );
+}
diff --git a/apps/dashboard/src/components/google-sign-in.tsx b/apps/dashboard/src/components/google-sign-in.tsx
@@ -11,15 +11,15 @@ export function GoogleSignIn() {
     await supabase.auth.signInWithOAuth({
       provider: "google",
       options: {
-        redirectTo: `${location.origin}/api/auth/callback`,
+        redirectTo: `${location.origin}/api/auth/callback?provider=google`,
       },
     });
   };
 
   return (
     <Button
       onClick={handleSignIn}
-      className="active:scale-[0.98] rounded-xl bg-primary px-6 py-4 text-secondary font-medium flex space-x-2 h-[40px]"
+      className="active:scale-[0.98] rounded-xl bg-primary px-6 py-4 text-secondary font-medium flex space-x-2 h-[40px] w-full"
     >
       <Icons.Google />
       <span>Continue with Google</span>

diff --git a/apps/dashboard/src/components/slack-sign-in.tsx b/apps/dashboard/src/components/slack-sign-in.tsx
@@ -11,15 +11,15 @@ export function SlackSignIn() {
     await supabase.auth.signInWithOAuth({
       provider: "slack",
       options: {
-        redirectTo: `${location.origin}/api/auth/callback`,
+        redirectTo: `${location.origin}/api/auth/callback?provider=slack`,
       },
     });
   };
 
   return (
     <Button
       onClick={handleSignIn}
-      className="active:scale-[0.98] rounded-xl bg-primary px-6 py-4 text-secondary font-medium flex space-x-2 h-[40px]"
+      className="active:scale-[0.98] rounded-xl bg-primary px-6 py-4 text-secondary font-medium flex space-x-2 h-[40px] w-full"
     >
       <Icons.Slack />
       <span>Continue with Slack</span>

diff --git a/apps/dashboard/src/utils/constants.ts b/apps/dashboard/src/utils/constants.ts
@@ -0,0 +1,6 @@
+export const Cookies = {
+  PrefferedSignInProvider: "preferred_signin_provider",
+  SpendingPeriod: "spending-period",
+  ChartType: "chart-type",
+  TransactionsPeriod: "transactions-period",
+};
diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -23,6 +23,7 @@
     "./calendar": "./src/components/calendar.tsx",
     "./card": "./src/components/card.tsx",
     "./context-menu": "./src/components/context-menu.tsx",
+    "./collapsible": "./src/components/collapsible.tsx",
     "./alert": "./src/components/alert.tsx",
     "./alert-dialog": "./src/components/alert-dialog.tsx",
     "./avatar": "./src/components/avatar.tsx",
@@ -62,6 +63,7 @@
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",

diff --git a/packages/ui/src/components/collapsible.tsx b/packages/ui/src/components/collapsible.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/packages/ui/src/components/icons.tsx b/packages/ui/src/components/icons.tsx
@@ -82,6 +82,14 @@ export const Icons = {
   Transactions: MdOutlineListAlt,
   Invoice: MdOutlineDescription,
   Files: MdOutlineInventory2,
+  Apple: () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width={19} height={23} fill="none">
+      <path
+        fill="currentColor"
+        d="M18.143 17.645a11.967 11.967 0 0 1-1.183 2.126c-.622.887-1.131 1.5-1.524 1.842-.608.56-1.26.846-1.958.862-.501 0-1.105-.143-1.809-.432-.706-.288-1.354-.43-1.947-.43-.622 0-1.29.142-2.003.43-.714.29-1.29.44-1.73.455-.67.029-1.337-.266-2.002-.885-.426-.371-.957-1.007-1.594-1.907-.683-.961-1.245-2.076-1.685-3.347C.236 14.986 0 13.656 0 12.369c0-1.474.319-2.746.957-3.811A5.612 5.612 0 0 1 2.96 6.53a5.39 5.39 0 0 1 2.71-.765c.531 0 1.228.165 2.095.488.863.324 1.418.489 1.661.489.182 0 .799-.192 1.843-.576.988-.355 1.822-.503 2.505-.445 1.851.15 3.242.88 4.166 2.194-1.655 1.003-2.474 2.408-2.458 4.21.015 1.404.524 2.572 1.525 3.5.454.43.96.763 1.524.999a16.56 16.56 0 0 1-.388 1.02ZM13.898.94c0 1.1-.402 2.128-1.204 3.079-.967 1.13-2.136 1.783-3.404 1.68a3.425 3.425 0 0 1-.026-.417c0-1.056.46-2.186 1.277-3.11.407-.469.926-.858 1.555-1.168.627-.306 1.22-.475 1.778-.504.017.147.024.294.024.44Z"
+      />
+    </svg>
+  ),
   Google: () => (
     <svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g clipPath="url(#a)">