-
Notifications
You must be signed in to change notification settings - Fork 7.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: App-router-migration
/auth/error
, /auth/platform
, `/auth/o…
…auth2` (#16445) * preparePageMetadata: improve logic for title * add missing pages: oauth2 / platform * auth/error: add to app router and extract to /modules
- Loading branch information
Showing
11 changed files
with
429 additions
and
354 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import { withAppDirSsg } from "app/WithAppDirSsg"; | ||
import { _generateMetadata } from "app/_utils"; | ||
import { WithLayout } from "app/layoutHOC"; | ||
|
||
import { getStaticProps } from "@server/lib/auth/error/getStaticProps"; | ||
|
||
import Page from "~/auth/error/error-view"; | ||
|
||
export const generateMetadata = async () => { | ||
return await _generateMetadata( | ||
() => "Error", | ||
() => "" | ||
); | ||
}; | ||
|
||
const getData = withAppDirSsg(getStaticProps); | ||
|
||
export default WithLayout({ getData, Page, getLayout: null })<"P">; | ||
export const dynamic = "force-static"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import { _generateMetadata } from "app/_utils"; | ||
import { WithLayout } from "app/layoutHOC"; | ||
|
||
import Page from "~/auth/oauth2/authorize-view"; | ||
|
||
export const generateMetadata = async () => { | ||
return await _generateMetadata( | ||
() => "Authorize", | ||
() => "" | ||
); | ||
}; | ||
|
||
export default WithLayout({ | ||
getLayout: null, | ||
Page, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import { _generateMetadata } from "app/_utils"; | ||
import { WithLayout } from "app/layoutHOC"; | ||
|
||
import Page from "~/auth/platform/authorize-view"; | ||
|
||
export const generateMetadata = async () => { | ||
return await _generateMetadata( | ||
() => "Authorize", | ||
() => "" | ||
); | ||
}; | ||
|
||
export default WithLayout({ | ||
getLayout: null, | ||
Page, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
"use client"; | ||
|
||
import Link from "next/link"; | ||
import { useSearchParams } from "next/navigation"; | ||
import z from "zod"; | ||
|
||
import { useLocale } from "@calcom/lib/hooks/useLocale"; | ||
import { Button, Icon } from "@calcom/ui"; | ||
|
||
import AuthContainer from "@components/ui/AuthContainer"; | ||
|
||
import type { PageProps } from "@server/lib/auth/error/getStaticProps"; | ||
|
||
const querySchema = z.object({ | ||
error: z.string().optional(), | ||
}); | ||
|
||
export default function Error(props: PageProps) { | ||
const { t } = useLocale(); | ||
const searchParams = useSearchParams(); | ||
const { error } = querySchema.parse({ error: searchParams?.get("error") || undefined }); | ||
const errorMsg = error || t("error_during_login"); | ||
return ( | ||
<AuthContainer title="" description=""> | ||
<div> | ||
<div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full"> | ||
<Icon name="x" className="h-6 w-6 text-red-600" /> | ||
</div> | ||
<div className="mt-3 text-center sm:mt-5"> | ||
<h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title"> | ||
{errorMsg} | ||
</h3> | ||
</div> | ||
</div> | ||
<div className="mt-5 sm:mt-6"> | ||
<Link href="/auth/login" passHref legacyBehavior> | ||
<Button className="flex w-full justify-center">{t("go_back_login")}</Button> | ||
</Link> | ||
</div> | ||
</AuthContainer> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,177 @@ | ||
"use client"; | ||
|
||
/* eslint-disable react-hooks/exhaustive-deps */ | ||
import { useSession } from "next-auth/react"; | ||
import { useRouter } from "next/navigation"; | ||
import { useState, useEffect } from "react"; | ||
|
||
import { APP_NAME } from "@calcom/lib/constants"; | ||
import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams"; | ||
import { useLocale } from "@calcom/lib/hooks/useLocale"; | ||
import { trpc } from "@calcom/trpc/react"; | ||
import { Avatar, Button, Icon, Select } from "@calcom/ui"; | ||
|
||
export default function Authorize() { | ||
const { t } = useLocale(); | ||
const { status } = useSession(); | ||
|
||
const router = useRouter(); | ||
const searchParams = useCompatSearchParams(); | ||
|
||
const client_id = (searchParams?.get("client_id") as string) || ""; | ||
const state = searchParams?.get("state") as string; | ||
const scope = searchParams?.get("scope") as string; | ||
|
||
const queryString = searchParams?.toString(); | ||
|
||
const [selectedAccount, setSelectedAccount] = useState<{ value: string; label: string } | null>(); | ||
const scopes = scope ? scope.toString().split(",") : []; | ||
|
||
const { data: client, isPending: isPendingGetClient } = trpc.viewer.oAuth.getClient.useQuery( | ||
{ | ||
clientId: client_id as string, | ||
}, | ||
{ | ||
enabled: status !== "loading", | ||
} | ||
); | ||
|
||
const { data, isPending: isPendingProfiles } = trpc.viewer.teamsAndUserProfilesQuery.useQuery(); | ||
|
||
const generateAuthCodeMutation = trpc.viewer.oAuth.generateAuthCode.useMutation({ | ||
onSuccess: (data) => { | ||
window.location.href = `${client?.redirectUri}?code=${data.authorizationCode}&state=${state}`; | ||
}, | ||
}); | ||
|
||
const mappedProfiles = data | ||
? data | ||
.filter((profile) => !profile.readOnly) | ||
.map((profile) => ({ | ||
label: profile.name || profile.slug || "", | ||
value: profile.slug || "", | ||
})) | ||
: []; | ||
|
||
useEffect(() => { | ||
if (mappedProfiles.length > 0) { | ||
setSelectedAccount(mappedProfiles[0]); | ||
} | ||
}, [isPendingProfiles]); | ||
|
||
useEffect(() => { | ||
if (status === "unauthenticated") { | ||
const urlSearchParams = new URLSearchParams({ | ||
callbackUrl: `auth/oauth2/authorize?${queryString}`, | ||
}); | ||
router.replace(`/auth/login?${urlSearchParams.toString()}`); | ||
} | ||
}, [status]); | ||
|
||
const isPending = isPendingGetClient || isPendingProfiles || status !== "authenticated"; | ||
|
||
if (isPending) { | ||
return <></>; | ||
} | ||
|
||
if (!client) { | ||
return <div>{t("unauthorized")}</div>; | ||
} | ||
|
||
return ( | ||
<div className="flex min-h-screen items-center justify-center"> | ||
<div className="bg-default border-subtle mt-2 max-w-xl rounded-md border px-9 pb-3 pt-2"> | ||
<div className="flex items-center justify-center"> | ||
<Avatar | ||
alt="" | ||
fallback={<Icon name="plus" className="text-subtle h-6 w-6" />} | ||
className="items-center" | ||
imageSrc={client.logo} | ||
size="lg" | ||
/> | ||
<div className="relative -ml-6 h-24 w-24"> | ||
<div className="absolute inset-0 flex items-center justify-center"> | ||
<div className="bg-default flex h-[70px] w-[70px] items-center justify-center rounded-full"> | ||
<img src="/cal-com-icon.svg" alt="Logo" className="h-16 w-16 rounded-full" /> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<h1 className="px-5 pb-5 pt-3 text-center text-2xl font-bold tracking-tight"> | ||
{t("access_cal_account", { clientName: client.name, appName: APP_NAME })} | ||
</h1> | ||
<div className="mb-1 text-sm font-medium">{t("select_account_team")}</div> | ||
<Select | ||
isSearchable={true} | ||
id="account-select" | ||
onChange={(value) => { | ||
setSelectedAccount(value); | ||
}} | ||
className="w-52" | ||
defaultValue={selectedAccount || mappedProfiles[0]} | ||
options={mappedProfiles} | ||
/> | ||
<div className="mb-4 mt-5 font-medium">{t("allow_client_to", { clientName: client.name })}</div> | ||
<ul className="space-y-4 text-sm"> | ||
<li className="relative pl-5"> | ||
<span className="absolute left-0">✓</span>{" "} | ||
{t("associate_with_cal_account", { clientName: client.name })} | ||
</li> | ||
<li className="relative pl-5"> | ||
<span className="absolute left-0">✓</span> {t("see_personal_info")} | ||
</li> | ||
<li className="relative pl-5"> | ||
<span className="absolute left-0">✓</span> {t("see_primary_email_address")} | ||
</li> | ||
<li className="relative pl-5"> | ||
<span className="absolute left-0">✓</span> {t("connect_installed_apps")} | ||
</li> | ||
<li className="relative pl-5"> | ||
<span className="absolute left-0">✓</span> {t("access_event_type")} | ||
</li> | ||
<li className="relative pl-5"> | ||
<span className="absolute left-0">✓</span> {t("access_availability")} | ||
</li> | ||
<li className="relative pl-5"> | ||
<span className="absolute left-0">✓</span> {t("access_bookings")} | ||
</li> | ||
</ul> | ||
<div className="bg-subtle mb-8 mt-8 flex rounded-md p-3"> | ||
<div> | ||
<Icon name="info" className="mr-1 mt-0.5 h-4 w-4" /> | ||
</div> | ||
<div className="ml-1 "> | ||
<div className="mb-1 text-sm font-medium"> | ||
{t("allow_client_to_do", { clientName: client.name })} | ||
</div> | ||
<div className="text-sm">{t("oauth_access_information", { appName: APP_NAME })}</div>{" "} | ||
</div> | ||
</div> | ||
<div className="border-subtle border- -mx-9 mb-4 border-b" /> | ||
<div className="flex justify-end"> | ||
<Button | ||
className="mr-2" | ||
color="minimal" | ||
onClick={() => { | ||
window.location.href = `${client.redirectUri}`; | ||
}}> | ||
{t("go_back")} | ||
</Button> | ||
<Button | ||
onClick={() => { | ||
generateAuthCodeMutation.mutate({ | ||
clientId: client_id as string, | ||
scopes, | ||
teamSlug: selectedAccount?.value.startsWith("team/") | ||
? selectedAccount?.value.substring(5) | ||
: undefined, // team account starts with /team/<slug> | ||
}); | ||
}} | ||
data-testid="allow-button"> | ||
{t("allow")} | ||
</Button> | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
} |
Oops, something went wrong.