feat(web): design the auth alert pages

apps/web/src/components/auth/auth-alert.tsx

@@ -0,0 +1,35 @@
+import Link from 'next/link';
+import React from 'react';
+
+type Props = {
+ ctaLabel: string;
+ descriptionElement: React.ReactNode;
+ redirectLink: string;
+ title: string;
+};
+
+const AuthAlert = ({ ctaLabel, descriptionElement, redirectLink, title }: Props) => {
+ return (
+ <div className="relative mx-auto max-w-7xl flex justify-center items-center auth-alert-container">
+ <div className="text-center">
+ <h1 className="mt-2 font-extrabold text-gray-900 tracking-tight sm:text-3xl">{title}</h1>
+ <p className="my-8 text-base text-gray-600">{descriptionElement}</p>
+ <div className="mt-6">
+ <div className="relative inline-flex mt-10 group">
+ <div className="absolute transitiona-all duration-1000 opacity-70 -inset-px bg-gradient-to-r from-[#44BCFF] via-[#FF44EC] to-[#FF675E] rounded-xl blur-lg filter group-hover:opacity-100 group-hover:-inset-1 group-hover:duration-200" />
+ <Link href={redirectLink}>
+ <a
+ className="relative inline-flex items-center justify-center px-8 py-4 text-lg font-bold text-white transition-all duration-200 bg-gray-900 font-pj rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
+ role="button"
+ >
+ {ctaLabel}
+ </a>
+ </Link>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default AuthAlert;

apps/web/src/components/layout/public/public-layout.tsx

@@ -9,7 +9,7 @@ type Props = {
 
 const PublicLayout = ({ children }: Props) => {
  return (
- <div className="overflow-x-hidden bg-gray-50">
+ <div className="overflow-x-hidden bg-gray-50 min-h-screen">
  <PublicHeader />
  {children}
  <PublicFooter />

apps/web/src/hooks/authentication/use-set-authenticated-user.ts

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 
 import { useAuth } from '@/hooks/authentication/use-auth';
 
-export const useSetAuthenticatedUser = () => {
+const useSetAuthenticatedUser = () => {
  const router = useRouter();
  const { saveToken } = useAuth();
 
@@ -17,3 +17,5 @@ export const useSetAuthenticatedUser = () => {
  void router.push('/board');
  }, [router.query]);
 };
+
+export default useSetAuthenticatedUser;

apps/web/src/pages/auth/fail.tsx

@@ -1,11 +1,29 @@
 import type { NextPage } from 'next';
+import { NextSeo } from 'next-seo';
 
+import AuthAlert from '@/components/auth/auth-alert';
 import PublicLayout from '@/components/layout/public/public-layout';
 
 const AuthErrorPage: NextPage = () => {
  return (
  <PublicLayout>
- <h1>Auth Error !</h1>
+ <NextSeo title="Sharingan - Authentication failed" noindex />
+ <AuthAlert
+ ctaLabel="Go to home"
+ descriptionElement={
+ <>
+ An error occurred while authenticating
+ <br />
+ Please contact the{' '}
+ <a className="text-blue-500" href="mailto:[email protected]">
+ support
+ </a>{' '}
+ if the error persist.
+ </>
+ }
+ redirectLink="/"
+ title="Authentication failed ❌"
+ />
  </PublicLayout>
  );
 };

apps/web/src/pages/auth/success.tsx

@@ -1,18 +1,28 @@
 import type { NextPage } from 'next';
-import Link from 'next/link';
+import { NextSeo } from 'next-seo';
 
+import AuthAlert from '@/components/auth/auth-alert';
 import PublicLayout from '@/components/layout/public/public-layout';
-import { useSetAuthenticatedUser } from '@/hooks/authentication/use-set-authenticated-user';
+import useSetAuthenticatedUser from '@/hooks/authentication/use-set-authenticated-user';
 
 const AuthSuccessPage: NextPage = () => {
  useSetAuthenticatedUser();
 
  return (
  <PublicLayout>
- <h1>Auth Success !</h1>
- <Link href="/board">
- <a className="py-4 px-4 block">Go to Dashboard</a>
- </Link>
+ <NextSeo title="Sharingan - Authentication succeed" noindex />
+ <AuthAlert
+ ctaLabel="Go to Dashboard"
+ descriptionElement={
+ <>
+ We are applying some latest configuration
+ <br />
+ You will be redirected in few seconds.
+ </>
+ }
+ redirectLink="/board"
+ title="Authenticated successfully 🎉"
+ />
  </PublicLayout>
  );
 };

apps/web/src/styles/base.css

@@ -14,3 +14,7 @@ a {
 * {
  box-sizing: border-box;
 }
+
+.auth-alert-container {
+ height: calc(100vh - (377px + 94px));
+}