Skip to content

Commit

Permalink
More sign in options
Browse files Browse the repository at this point in the history
  • Loading branch information
pontusab committed Dec 3, 2023
1 parent 9bf916b commit 2b26084
Show file tree
Hide file tree
Showing 6 changed files with 155 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -14,37 +14,37 @@ export default function Closed() {
<div className="flex min-h-screen justify-center items-center">
<div className="pointer-events-none relative z-20 m-auto flex w-full max-w-[380px] flex-col">
<div className="flex w-full flex-col relative">
<div className="w-[2px] h-[2px] bg-white rounded-full absolute -top-[20px] -left-[100px] animate-[pulse_2s_ease-in-out_infinite]" />
<div className="w-[3px] h-[3px] bg-white rounded-full absolute -top-[70px] left-[5%] animate-[pulse_2s_ease-in-out_infinite]" />
<div className="w-[2px] h-[2px] bg-primary rounded-full absolute -top-[20px] -left-[100px] animate-[pulse_2s_ease-in-out_infinite]" />
<div className="w-[3px] h-[3px] bg-primary rounded-full absolute -top-[70px] left-[5%] animate-[pulse_2s_ease-in-out_infinite]" />
<div
className="w-[5px] h-[5px] bg-white rounded-full absolute -top-[120px] left-[80px] animate-[pulse_2s_ease-in-out_infinite]"
className="w-[5px] h-[5px] bg-primary rounded-full absolute -top-[120px] left-[80px] animate-[pulse_2s_ease-in-out_infinite]"
style={{ animationDelay: "500ms" }}
/>
<div
className="w-[5px] h-[5px] bg-white rounded-full absolute -top-[80px] left-[180px] animate-[pulse_2s_ease-in-out_infinite]"
className="w-[5px] h-[5px] bg-primary rounded-full absolute -top-[80px] left-[180px] animate-[pulse_2s_ease-in-out_infinite]"
style={{ animationDelay: "0ms" }}
/>
<div
className="w-[3px] h-[3px] bg-white rounded-full absolute -top-[20px] -right-[40px] animate-[pulse_2s_ease-in-out_infinite]"
className="w-[3px] h-[3px] bg-[#FFD02B] rounded-full absolute -top-[20px] -right-[40px] animate-[pulse_2s_ease-in-out_infinite]"
style={{ animationDelay: "200ms" }}
/>
<div
className="w-[2px] h-[2px] bg-white rounded-full absolute -top-[100px] -right-[100px] animate-[pulse_2s_ease-in-out_infinite]"
className="w-[2px] h-[2px] bg-primary rounded-full absolute -top-[100px] -right-[100px] animate-[pulse_2s_ease-in-out_infinite]"
style={{ animationDelay: "2s" }}
/>

<div
className="w-[5px] h-[5px] bg-white rounded-full absolute top-[80px] -right-[100px] animate-[pulse_2s_ease-in-out_infinite]"
className="w-[5px] h-[5px] bg-primary rounded-full absolute top-[80px] -right-[100px] animate-[pulse_2s_ease-in-out_infinite]"
style={{ animationDelay: "0ms" }}
/>

<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">
<h1 className="font-medium pb-1 text-3xl">
We will soon open up for beta.{" "}
</h1>
</div>

<p className="font-bold pb-1 text-2xl text-[#606060]">
<p className="font-medium pb-1 text-2xl text-[#606060]">
You can't login yet but keep a lookout in your email for when we
open up for beta testing.
</p>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function Vault({ params }) {
<Breadcrumbs folders={params?.folders} />

<div className="flex space-x-2">
<CreateFolderButton />
<CreateFolderButton disableActions={disableActions} />
<UploadButton disableActions={disableActions} />
</div>
</div>
Expand Down
42 changes: 39 additions & 3 deletions apps/dashboard/src/app/[locale]/@login/page.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { AppleSignIn } from "@/components/apple-sign-in";
import { FigmaSignIn } from "@/components/figma-sign-in";
import { GithubSignIn } from "@/components/github-sign-in";
import { GoogleSignIn } from "@/components/google-sign-in";
import { SlackSignIn } from "@/components/slack-sign-in";
import { Cookies } from "@/utils/constants";
Expand All @@ -21,6 +23,8 @@ export default async function Login() {
<>
<AppleSignIn />
<SlackSignIn />
<GithubSignIn />
<FigmaSignIn />
</>
);

Expand All @@ -31,6 +35,8 @@ export default async function Login() {
<>
<GoogleSignIn />
<SlackSignIn />
<GithubSignIn />
<FigmaSignIn />
</>
);
break;
Expand All @@ -41,9 +47,36 @@ export default async function Login() {
<>
<GoogleSignIn />
<AppleSignIn />
<GithubSignIn />
<FigmaSignIn />
</>
);
break;

case "github":
prefferedSignInOption = <GithubSignIn />;
moreSignInOptions = (
<>
<GoogleSignIn />
<AppleSignIn />
<SlackSignIn />
<FigmaSignIn />
</>
);
break;

case "figma":
prefferedSignInOption = <FigmaSignIn />;
moreSignInOptions = (
<>
<GoogleSignIn />
<AppleSignIn />
<GithubSignIn />
<SlackSignIn />
</>
);
break;

default:
break;
}
Expand Down Expand Up @@ -110,9 +143,12 @@ export default async function Login() {
</div>

<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>.
By clicking continue, you acknowledge that you have read and
understood, and agree to Midday's and{" "}
<a href="https://midday.ai/policy" className="underline">
Privacy Policy
</a>
.
</p>
</div>
</div>
Expand Down
28 changes: 28 additions & 0 deletions apps/dashboard/src/components/figma-sign-in.tsx
Original file line number Diff line number Diff line change
@@ -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 FigmaSignIn() {
const supabase = createClient();

const handleSignIn = async () => {
await supabase.auth.signInWithOAuth({
provider: "figma",
options: {
redirectTo: `${location.origin}/api/auth/callback?provider=figma`,
},
});
};

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.Figma />
<span>Continue with Figma</span>
</Button>
);
}
28 changes: 28 additions & 0 deletions apps/dashboard/src/components/github-sign-in.tsx
Original file line number Diff line number Diff line change
@@ -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 GithubSignIn() {
const supabase = createClient();

const handleSignIn = async () => {
await supabase.auth.signInWithOAuth({
provider: "github",
options: {
redirectTo: `${location.origin}/api/auth/callback?provider=github`,
},
});
};

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.Github />
<span>Continue with Github</span>
</Button>
);
}
54 changes: 50 additions & 4 deletions packages/ui/src/components/icons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -82,16 +82,28 @@ export const Icons = {
Transactions: MdOutlineListAlt,
Invoice: MdOutlineDescription,
Files: MdOutlineInventory2,
Apple: () => (
<svg xmlns="http://www.w3.org/2000/svg" width={19} height={23} fill="none">
Apple: (props: any) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={19}
height={23}
fill="none"
{...props}
>
<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">
Google: (props: any) => (
<svg
width="20"
height="20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#a)">
<path
d="M10 3.958c1.475 0 2.796.509 3.838 1.5l2.854-2.854C14.959.992 12.696 0 10 0a9.995 9.995 0 0 0-8.933 5.508l3.325 2.58c.787-2.371 3-4.13 5.608-4.13Z"
Expand Down Expand Up @@ -313,6 +325,40 @@ export const Icons = {
</defs>
</svg>
),
Github: (props: any) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={22}
height={22}
fill="none"
{...props}
>
<path
fill="#000"
fillRule="evenodd"
d="M11.21.22C5.412.22.71 5.038.71 10.984c0 4.757 3.009 8.792 7.18 10.216.525.1.718-.234.718-.518 0-.257-.01-1.105-.014-2.005-2.921.652-3.538-1.27-3.538-1.27-.477-1.244-1.165-1.575-1.165-1.575-.953-.668.071-.655.071-.655 1.055.076 1.61 1.11 1.61 1.11.936 1.646 2.456 1.17 3.056.895.094-.696.366-1.171.666-1.44-2.332-.272-4.784-1.195-4.784-5.32 0-1.176.41-2.136 1.082-2.89-.109-.271-.468-1.366.102-2.85 0 0 .882-.288 2.888 1.105a9.833 9.833 0 0 1 2.628-.363 9.857 9.857 0 0 1 2.63.363c2.005-1.393 2.885-1.104 2.885-1.104.572 1.483.212 2.578.103 2.849.674.754 1.08 1.714 1.08 2.89 0 4.135-2.455 5.045-4.794 5.312.377.334.712.989.712 1.993 0 1.44-.011 2.6-.011 2.955 0 .286.188.622.72.516 4.17-1.425 7.175-5.459 7.175-10.214 0-5.946-4.7-10.766-10.5-10.766Z"
clipRule="evenodd"
/>
<path
fill="#000"
d="M4.687 15.677c-.023.053-.105.07-.18.033-.076-.036-.119-.109-.094-.162.023-.055.105-.07.18-.034.077.035.12.109.094.163Zm.425.486c-.05.047-.148.025-.214-.05-.069-.075-.082-.176-.03-.224.05-.047.146-.025.214.05.07.076.083.176.03.224Zm.414.62c-.064.046-.17.003-.234-.093-.065-.096-.065-.21.001-.257.065-.046.17-.004.235.09.064.098.064.213-.002.26Zm.568.599c-.058.065-.18.047-.27-.041-.092-.087-.117-.21-.06-.275.058-.066.182-.047.272.04.091.087.119.211.058.276Zm.782.348c-.026.084-.143.122-.262.087-.12-.037-.197-.136-.173-.221.025-.085.143-.125.263-.087.119.037.197.135.172.22Zm.86.064c.002.09-.098.163-.223.164-.126.003-.228-.069-.229-.156 0-.09.099-.162.224-.165.125-.002.228.07.228.157Zm.799-.139c.015.086-.072.175-.196.199-.122.023-.235-.03-.25-.116-.015-.09.073-.178.195-.201.124-.022.235.03.25.118Z"
/>
</svg>
),
Figma: (props: any) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={17}
height={22}
fill="none"
{...props}
>
<path
fill="#000"
d="M.602 4.116A4.116 4.116 0 0 1 4.718 0h7.062a4.116 4.116 0 0 1 2.258 7.558 4.116 4.116 0 0 1-2.258 7.558h-.089a4.101 4.101 0 0 1-2.768-1.07v3.793C8.923 20.143 7.033 22 4.74 22 2.472 22 .602 20.163.602 17.884c0-1.44.738-2.706 1.857-3.442A4.112 4.112 0 0 1 .602 11c0-1.44.738-2.706 1.858-3.442A4.112 4.112 0 0 1 .602 4.116Zm6.973 4.116H4.718a2.768 2.768 0 0 0-.018 5.536h2.875V8.232ZM8.923 11a2.768 2.768 0 0 0 2.768 2.768h.09a2.768 2.768 0 0 0 0-5.536h-.09A2.768 2.768 0 0 0 8.923 11Zm-4.205 4.116H4.7a2.768 2.768 0 0 0-2.75 2.768c0 1.523 1.256 2.768 2.79 2.768 1.559 0 2.835-1.265 2.835-2.813v-2.723H4.718Zm0-13.768a2.768 2.768 0 1 0 0 5.536h2.857V1.348H4.718Zm4.205 5.536h2.857a2.768 2.768 0 0 0 0-5.536H8.923v5.536Z"
/>
</svg>
),
FlightTakeoff: MdFlightTakeoff,
Desk: MdDesk,
FastFood: MdFastfood,
Expand Down

0 comments on commit 2b26084

Please sign in to comment.