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

apps/web/app/future/auth/error/page.tsx

@@ -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";

apps/web/app/future/auth/oauth2/authorize/page.tsx

@@ -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,
+});

apps/web/app/future/auth/platform/authorize/page.tsx

@@ -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,
+});

apps/web/lib/metadata.ts

@@ -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,

apps/web/modules/auth/error/error-view.tsx

@@ -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>
+ );
+}

apps/web/modules/auth/oauth2/authorize-view.tsx

@@ -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">&#10003;</span>{" "}
+ {t("associate_with_cal_account", { clientName: client.name })}
+ </li>
+ <li className="relative pl-5">
+ <span className="absolute left-0">&#10003;</span> {t("see_personal_info")}
+ </li>
+ <li className="relative pl-5">
+ <span className="absolute left-0">&#10003;</span> {t("see_primary_email_address")}
+ </li>
+ <li className="relative pl-5">
+ <span className="absolute left-0">&#10003;</span> {t("connect_installed_apps")}
+ </li>
+ <li className="relative pl-5">
+ <span className="absolute left-0">&#10003;</span> {t("access_event_type")}
+ </li>
+ <li className="relative pl-5">
+ <span className="absolute left-0">&#10003;</span> {t("access_availability")}
+ </li>
+ <li className="relative pl-5">
+ <span className="absolute left-0">&#10003;</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>
+ );
+}