67 lines
2.5 KiB
TypeScript
67 lines
2.5 KiB
TypeScript
import { FC } from 'react';
|
|
import { Main } from '@/app/ui/Main';
|
|
import { myAuth } from "@/app/lib/auth";
|
|
import Image from 'next/image';
|
|
import { getTranslations, getLocale } from "next-intl/server";
|
|
import isWebview from "is-ua-webview";
|
|
import { headers } from 'next/headers';
|
|
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
|
|
import { paragraphFormatFactory } from '../lib/paragraphFormatFactory';
|
|
import { getAuthProviders } from '../lib/getProviders';
|
|
import { EnterOrSignInButton } from '../ui/EnterOrSignInButton';
|
|
import Link from 'next/link';
|
|
|
|
const h1ClassName = "text-3xl font-bold max-w-[38rem] mx-auto text-neutral-50";
|
|
const h2ClassName = h1ClassName + " mt-8";
|
|
|
|
const Page: FC = async () => {
|
|
|
|
const locale = await getLocale();
|
|
const paragraphFormat = paragraphFormatFactory(locale);
|
|
|
|
const t = await getTranslations("login-page");
|
|
const session = await myAuth();
|
|
const providers = getAuthProviders();
|
|
|
|
// get userAgent from NextJS
|
|
const headersList = headers();
|
|
const userAgent = headersList.get("user-agent") as string;
|
|
|
|
const insideWebeview = isWebview(userAgent);
|
|
|
|
return (
|
|
<Main>
|
|
<h1 className={h1ClassName}>
|
|
{t.rich("main-card.title", paragraphFormat)}
|
|
</h1>
|
|
<EnterOrSignInButton session={session} locale={locale} providers={providers} />
|
|
|
|
{t.rich("main-card.text", paragraphFormat)}
|
|
<Image src={t("main-card.image-url")} alt={t("main-card.image-alt")} className="m-auto mt-0" width={400} height={300} />
|
|
{
|
|
// Google will refuse OAuth signin if it's inside a webview (i.e. Facebook)
|
|
insideWebeview &&
|
|
<div className="card card-side bg-base-100 shadow-xl max-w-[30em] mx-auto mb-4">
|
|
<figure className='pl-4 pr-1 pt-[2rem] min-w-[100px] max-w-[100px] self-start'>
|
|
<ExclamationTriangleIcon className="text-red-600 self-start" />
|
|
</figure>
|
|
<div className="card-body pl-2">
|
|
{t.rich("main-card.in-app-browser-warning", paragraphFormat)}
|
|
</div>
|
|
</div>
|
|
}
|
|
<h2 className={`${h2ClassName} text-xl`}>{t.rich("card-1.title", paragraphFormat)}</h2>
|
|
{t.rich("card-1.text", paragraphFormat)}
|
|
<Image src={t("card-1.image-url")} alt={t("card-1.image-alt")} className="m-auto mt-4" width={400} height={300} />
|
|
|
|
<h2 className={`${h2ClassName} text-xl`}>{t.rich("card-2.title", paragraphFormat)}</h2>
|
|
{t.rich("card-2.text", paragraphFormat)}
|
|
|
|
<EnterOrSignInButton session={session} locale={locale} providers={providers} />
|
|
|
|
|
|
</Main>
|
|
);
|
|
}
|
|
|
|
export default Page; |