chore: App-router-migration /auth/error, /auth/platform, /auth/oauth2 (#16445)
* preparePageMetadata: improve logic for title * add missing pages: oauth2 / platform * auth/error: add to app router and extract to /modules
This commit is contained in:
Benny Joo
@@ -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";
|
||||
@@ -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,
|
||||
});
|
||||
@@ -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,
|
||||
});
|
||||
@@ -67,10 +67,11 @@ export const prepareRootMetadata = (recipe: RootMetadataRecipe): Metadata => ({
|
||||
});
|
||||
|
||||
export const preparePageMetadata = (recipe: PageMetadataRecipe): Metadata => {
|
||||
const { title, description } = recipe;
|
||||
const titleSuffix = `| ${APP_NAME}`;
|
||||
const { description } = recipe;
|
||||
|
||||
return {
|
||||
title: recipe.title.includes(titleSuffix) ? recipe.title : `${recipe.title} ${titleSuffix}`,
|
||||
title: title.length === 0 ? APP_NAME : title.includes(titleSuffix) ? title : `${title} ${titleSuffix}`,
|
||||
description,
|
||||
alternates: {
|
||||
canonical: recipe.canonical,
|
||||
@@ -80,7 +81,7 @@ export const preparePageMetadata = (recipe: PageMetadataRecipe): Metadata => {
|
||||
url: recipe.canonical,
|
||||
type: "website",
|
||||
siteName: recipe.siteName,
|
||||
title: recipe.title,
|
||||
title,
|
||||
images: [recipe.image],
|
||||
},
|
||||
metadataBase: recipe.metadataBase,
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
import { APP_NAME } from "@calcom/lib/constants";
|
||||
import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { PERMISSIONS_GROUPED_MAP } from "@calcom/platform-constants/permissions";
|
||||
import { Avatar, Button, Icon } from "@calcom/ui";
|
||||
|
||||
import { hasPermission } from "../../../../../packages/platform/utils/permissions";
|
||||
|
||||
export default function Authorize() {
|
||||
const { t } = useLocale();
|
||||
const router = useRouter();
|
||||
|
||||
const searchParams = useCompatSearchParams();
|
||||
const queryString = searchParams?.toString();
|
||||
|
||||
// const { isLoading, error, data: client } = useOAuthClient(queryString);
|
||||
|
||||
const client: {
|
||||
name: string;
|
||||
logo?: string;
|
||||
redirect_uris: string[];
|
||||
permissions: number;
|
||||
} = {
|
||||
name: "Acme.com",
|
||||
redirect_uris: ["", ""],
|
||||
permissions: 7,
|
||||
};
|
||||
|
||||
console.log("These are the search params:", queryString);
|
||||
|
||||
const permissions = Object.values(PERMISSIONS_GROUPED_MAP).map((value) => {
|
||||
let permissionsMessage = "";
|
||||
const hasReadPermission = hasPermission(client.permissions, value.read);
|
||||
const hasWritePermission = hasPermission(client.permissions, value.write);
|
||||
|
||||
if (hasReadPermission || hasWritePermission) {
|
||||
permissionsMessage = hasReadPermission ? "Read" : "Write";
|
||||
}
|
||||
|
||||
if (hasReadPermission && hasWritePermission) {
|
||||
permissionsMessage = "Read, write";
|
||||
}
|
||||
|
||||
return (
|
||||
!!permissionsMessage && (
|
||||
<li key={value.read} className="relative pl-5 text-sm">
|
||||
<span className="absolute left-0">✓</span>
|
||||
{permissionsMessage} your {`${value.label}s`.toLocaleLowerCase()}
|
||||
</li>
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center">
|
||||
<div className="mt-2 max-w-xl rounded-md bg-white px-9 pb-3 pt-2">
|
||||
<div className="flex items-center justify-center">
|
||||
{/*
|
||||
below is where the client logo will be displayed
|
||||
first we check if the client has a logo property and display logo if present
|
||||
else we take logo from user profile pic
|
||||
*/}
|
||||
{client.logo ? (
|
||||
<Avatar
|
||||
alt=""
|
||||
fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
|
||||
className="items-center"
|
||||
imageSrc={client.logo}
|
||||
size="lg"
|
||||
/>
|
||||
) : (
|
||||
<Avatar
|
||||
alt=""
|
||||
fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
|
||||
className="items-center"
|
||||
imageSrc="/cal-com-icon.svg"
|
||||
size="lg"
|
||||
/>
|
||||
)}
|
||||
<div className="relative -ml-6 h-24 w-24">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="flex h-[70px] w-[70px] items-center justify-center rounded-full bg-white">
|
||||
<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 text-black">
|
||||
{t("access_cal_account", { clientName: client.name, appName: APP_NAME })}
|
||||
</h1>
|
||||
<div className="mb-4 mt-5 font-medium text-black">
|
||||
{t("allow_client_to", { clientName: client.name })}
|
||||
</div>
|
||||
<ul className="space-y-4 text-sm text-black">{permissions}</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="bg-primary mr-2 text-black"
|
||||
onClick={() => {
|
||||
router.back();
|
||||
}}>
|
||||
{t("go_back")}
|
||||
</Button>
|
||||
<Button data-testid="allow-button" className="bg-black text-white">
|
||||
{t("allow")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,54 +1,11 @@
|
||||
import type { GetStaticPropsContext } from "next";
|
||||
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 PageWrapper from "@components/PageWrapper";
|
||||
import AuthContainer from "@components/ui/AuthContainer";
|
||||
|
||||
import { getTranslations } from "@server/lib/getTranslations";
|
||||
import type { PageProps } from "@server/lib/auth/error/getStaticProps";
|
||||
import { getStaticProps } from "@server/lib/auth/error/getStaticProps";
|
||||
|
||||
const querySchema = z.object({
|
||||
error: z.string().optional(),
|
||||
});
|
||||
import Error from "~/auth/error/error-view";
|
||||
|
||||
export default function Error() {
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
Error.PageWrapper = PageWrapper;
|
||||
|
||||
export const getStaticProps = async (context: GetStaticPropsContext) => {
|
||||
const i18n = await getTranslations(context);
|
||||
|
||||
return {
|
||||
props: {
|
||||
i18n,
|
||||
},
|
||||
};
|
||||
};
|
||||
const Page = (props: PageProps) => <Error {...props} />;
|
||||
Page.PageWrapper = PageWrapper;
|
||||
export default Page;
|
||||
export { getStaticProps };
|
||||
|
||||
@@ -1,179 +1,7 @@
|
||||
/* 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";
|
||||
|
||||
import PageWrapper from "@components/PageWrapper";
|
||||
|
||||
export default function Authorize() {
|
||||
const { t } = useLocale();
|
||||
const { status } = useSession();
|
||||
import Authorize from "~/auth/oauth2/authorize-view";
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
Authorize.PageWrapper = PageWrapper;
|
||||
const Page = () => <Authorize />;
|
||||
Page.PageWrapper = PageWrapper;
|
||||
export default Page;
|
||||
|
||||
@@ -1,128 +1,7 @@
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
import { APP_NAME } from "@calcom/lib/constants";
|
||||
import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { Avatar, Button, Icon } from "@calcom/ui";
|
||||
|
||||
import PageWrapper from "@components/PageWrapper";
|
||||
|
||||
import { PERMISSIONS_GROUPED_MAP } from "../../../../../packages/platform/constants/permissions";
|
||||
import { hasPermission } from "../../../../../packages/platform/utils/permissions";
|
||||
import Authorize from "~/auth/platform/authorize-view";
|
||||
|
||||
export default function Authorize() {
|
||||
const { t } = useLocale();
|
||||
const router = useRouter();
|
||||
|
||||
const searchParams = useCompatSearchParams();
|
||||
const queryString = searchParams?.toString();
|
||||
|
||||
// const { isLoading, error, data: client } = useOAuthClient(queryString);
|
||||
|
||||
const client: {
|
||||
name: string;
|
||||
logo?: string;
|
||||
redirect_uris: string[];
|
||||
permissions: number;
|
||||
} = {
|
||||
name: "Acme.com",
|
||||
redirect_uris: ["", ""],
|
||||
permissions: 7,
|
||||
};
|
||||
|
||||
console.log("These are the search params:", queryString);
|
||||
|
||||
const permissions = Object.values(PERMISSIONS_GROUPED_MAP).map((value) => {
|
||||
let permissionsMessage = "";
|
||||
const hasReadPermission = hasPermission(client.permissions, value.read);
|
||||
const hasWritePermission = hasPermission(client.permissions, value.write);
|
||||
|
||||
if (hasReadPermission || hasWritePermission) {
|
||||
permissionsMessage = hasReadPermission ? "Read" : "Write";
|
||||
}
|
||||
|
||||
if (hasReadPermission && hasWritePermission) {
|
||||
permissionsMessage = "Read, write";
|
||||
}
|
||||
|
||||
return (
|
||||
!!permissionsMessage && (
|
||||
<li key={value.read} className="relative pl-5 text-sm">
|
||||
<span className="absolute left-0">✓</span>
|
||||
{permissionsMessage} your {`${value.label}s`.toLocaleLowerCase()}
|
||||
</li>
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center">
|
||||
<div className="mt-2 max-w-xl rounded-md bg-white px-9 pb-3 pt-2">
|
||||
<div className="flex items-center justify-center">
|
||||
{/*
|
||||
below is where the client logo will be displayed
|
||||
first we check if the client has a logo property and display logo if present
|
||||
else we take logo from user profile pic
|
||||
*/}
|
||||
{client.logo ? (
|
||||
<Avatar
|
||||
alt=""
|
||||
fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
|
||||
className="items-center"
|
||||
imageSrc={client.logo}
|
||||
size="lg"
|
||||
/>
|
||||
) : (
|
||||
<Avatar
|
||||
alt=""
|
||||
fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
|
||||
className="items-center"
|
||||
imageSrc="/cal-com-icon.svg"
|
||||
size="lg"
|
||||
/>
|
||||
)}
|
||||
<div className="relative -ml-6 h-24 w-24">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="flex h-[70px] w-[70px] items-center justify-center rounded-full bg-white">
|
||||
<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 text-black">
|
||||
{t("access_cal_account", { clientName: client.name, appName: APP_NAME })}
|
||||
</h1>
|
||||
<div className="mb-4 mt-5 font-medium text-black">
|
||||
{t("allow_client_to", { clientName: client.name })}
|
||||
</div>
|
||||
<ul className="space-y-4 text-sm text-black">{permissions}</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="bg-primary mr-2 text-black"
|
||||
onClick={() => {
|
||||
router.back();
|
||||
}}>
|
||||
{t("go_back")}
|
||||
</Button>
|
||||
<Button data-testid="allow-button" className="bg-black text-white">
|
||||
{t("allow")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Authorize.PageWrapper = PageWrapper;
|
||||
const Page = () => <Authorize />;
|
||||
Page.PageWrapper = PageWrapper;
|
||||
export default Page;
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
import type { GetStaticPropsContext, InferGetStaticPropsType } from "next";
|
||||
|
||||
import { getTranslations } from "@server/lib/getTranslations";
|
||||
|
||||
export type PageProps = InferGetStaticPropsType<typeof getStaticProps>;
|
||||
export const getStaticProps = async (context: GetStaticPropsContext) => {
|
||||
const i18n = await getTranslations(context);
|
||||
|
||||
return {
|
||||
props: {
|
||||
i18n,
|
||||
},
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user