From 570277eb02b5774c423caf1f9c4469245d85285c Mon Sep 17 00:00:00 2001
From: miam-miam100 <49870539+miam-miam100@users.noreply.github.com>
Date: Sun, 3 Mar 2024 20:29:40 +0000
Subject: [PATCH] Redirect logged in users back to the page they were on (#9)

Signed-off-by: miam-miam100 <49870539+miam-miam100@users.noreply.github.com>
---
 .../(pages)/login/LoginForm/index.module.scss | 22 -----
 src/app/(pages)/login/LoginForm/index.tsx     | 87 -------------------
 src/app/(pages)/login/index.module.scss       |  9 --
 src/app/(pages)/login/page.tsx                | 22 -----
 src/app/(routes)/login-redirect/route.ts      | 14 +++
 src/app/(routes)/login/route.ts               | 11 +++
 src/payload/components/BeforeLogin/index.tsx  | 16 ++--
 src/payload/payload.config.ts                 | 10 +--
 8 files changed, 37 insertions(+), 154 deletions(-)
 delete mode 100644 src/app/(pages)/login/LoginForm/index.module.scss
 delete mode 100644 src/app/(pages)/login/LoginForm/index.tsx
 delete mode 100644 src/app/(pages)/login/index.module.scss
 delete mode 100644 src/app/(pages)/login/page.tsx
 create mode 100644 src/app/(routes)/login-redirect/route.ts
 create mode 100644 src/app/(routes)/login/route.ts

diff --git a/src/app/(pages)/login/LoginForm/index.module.scss b/src/app/(pages)/login/LoginForm/index.module.scss
deleted file mode 100644
index d2fcd65..0000000
--- a/src/app/(pages)/login/LoginForm/index.module.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@import "../../../_css/common";
-
-.form {
-  margin-bottom: var(--base);
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--base) / 2);
-  align-items: flex-start;
-  width: 66.66%;
-
-  @include mid-break {
-    width: 100%;
-  }
-}
-
-.submit {
-  margin-top: calc(var(--base) / 2);
-}
-
-.message {
-  margin-bottom: var(--base);
-}
diff --git a/src/app/(pages)/login/LoginForm/index.tsx b/src/app/(pages)/login/LoginForm/index.tsx
deleted file mode 100644
index 60c5419..0000000
--- a/src/app/(pages)/login/LoginForm/index.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-'use client'
-
-import React, { useCallback, useRef } from 'react'
-import { useForm } from 'react-hook-form'
-import Link from 'next/link'
-import { useRouter, useSearchParams } from 'next/navigation'
-
-import { Button } from '../../../_components/Button'
-import { Input } from '../../../_components/Input'
-import { Message } from '../../../_components/Message'
-import { useAuth } from '../../../_providers/Auth'
-
-import classes from './index.module.scss'
-
-type FormData = {
-  email: string
-  password: string
-}
-
-const LoginForm: React.FC = () => {
-  const searchParams = useSearchParams()
-  const allParams = searchParams.toString() ? `?${searchParams.toString()}` : ''
-  const redirect = useRef(searchParams.get('redirect'))
-  const { login } = useAuth()
-  const router = useRouter()
-  const [error, setError] = React.useState<string | null>(null)
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isLoading },
-  } = useForm<FormData>()
-
-  const onSubmit = useCallback(
-    async (data: FormData) => {
-      try {
-        await login(data)
-        if (redirect?.current) router.push(redirect.current as string)
-        else router.push('/account')
-      } catch (_) {
-        setError('There was an error with the credentials provided. Please try again.')
-      }
-    },
-    [login, router],
-  )
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)} className={classes.form}>
-      <p>
-        {`This is where your users will login to manage their account, view their comment history, and more. To manage all users, `}
-        <Link href="/admin/collections/users">login to the admin dashboard</Link>
-        {'.'}
-      </p>
-      <Message error={error} className={classes.message} />
-      <Input
-        name="email"
-        label="Email Address"
-        required
-        register={register}
-        error={errors.email}
-        type="email"
-      />
-      <Input
-        name="password"
-        type="password"
-        label="Password"
-        required
-        register={register}
-        error={errors.password}
-      />
-      <Button
-        type="submit"
-        appearance="primary"
-        label={isLoading ? 'Processing' : 'Login'}
-        disabled={isLoading}
-        className={classes.submit}
-      />
-      <div>
-        <Link href={`/create-account${allParams}`}>Create an account</Link>
-        <br />
-        <Link href={`/recover-password${allParams}`}>Recover your password</Link>
-      </div>
-    </form>
-  )
-}
-
-export default LoginForm
diff --git a/src/app/(pages)/login/index.module.scss b/src/app/(pages)/login/index.module.scss
deleted file mode 100644
index 1b51e4f..0000000
--- a/src/app/(pages)/login/index.module.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import "../../_css/common";
-
-.login {
-  margin-bottom: var(--block-padding);
-}
-
-.params {
-  margin-top: var(--base);
-}
diff --git a/src/app/(pages)/login/page.tsx b/src/app/(pages)/login/page.tsx
deleted file mode 100644
index cc33990..0000000
--- a/src/app/(pages)/login/page.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Metadata } from 'next'
-import { redirect } from 'next/navigation'
-
-import { getMeUser } from '../../_utilities/getMeUser'
-import { mergeOpenGraph } from '../../_utilities/mergeOpenGraph'
-
-export default async function Login() {
-  await getMeUser({
-    validUserRedirect: `/account?warning=${encodeURIComponent('You are already logged in.')}`,
-  })
-
-  redirect('/oauth2/authorize')
-}
-
-export const metadata: Metadata = {
-  title: 'Login',
-  description: 'Login or create an account to get started.',
-  openGraph: mergeOpenGraph({
-    title: 'Login',
-    url: '/login',
-  }),
-}
diff --git a/src/app/(routes)/login-redirect/route.ts b/src/app/(routes)/login-redirect/route.ts
new file mode 100644
index 0000000..9ddb2e4
--- /dev/null
+++ b/src/app/(routes)/login-redirect/route.ts
@@ -0,0 +1,14 @@
+import { cookies } from 'next/headers'
+
+export async function GET(): Promise<Response> {
+  const redirect = cookies().get('login-redirect')
+
+  let redirectUrl = process.env.NEXT_PUBLIC_SERVER_URL
+
+  if (redirect) {
+    redirectUrl = new URL(redirect.value, process.env.NEXT_PUBLIC_SERVER_URL).toString()
+    cookies().delete('login-redirect')
+  }
+
+  return Response.redirect(redirectUrl)
+}
diff --git a/src/app/(routes)/login/route.ts b/src/app/(routes)/login/route.ts
new file mode 100644
index 0000000..6c39128
--- /dev/null
+++ b/src/app/(routes)/login/route.ts
@@ -0,0 +1,11 @@
+import { cookies } from 'next/headers'
+
+export async function GET(req: Request): Promise<Response> {
+  const { searchParams } = new URL(req.url)
+  const redirect = searchParams.get('redirect')
+  if (redirect) {
+    cookies().set('login-redirect', redirect, { maxAge: 60 * 5, path: '/', httpOnly: true })
+  }
+
+  return Response.redirect(`${process.env.NEXT_PUBLIC_SERVER_URL}/oauth2/authorize`)
+}
diff --git a/src/payload/components/BeforeLogin/index.tsx b/src/payload/components/BeforeLogin/index.tsx
index 21b4060..befb4d1 100644
--- a/src/payload/components/BeforeLogin/index.tsx
+++ b/src/payload/components/BeforeLogin/index.tsx
@@ -1,16 +1,14 @@
 import React from 'react'
+import { Button } from 'payload/components'
 
-const BeforeLogin: React.FC = () => {
+const OAuthButton: React.FC = () => {
   return (
-    <div>
-      <p>
-        <b>Welcome to your dashboard!</b>
-        {' This is where site admins will log in to manage your website. Users will need to '}
-        <a href={`${process.env.PAYLOAD_PUBLIC_SERVER_URL}/login`}>log in to the site instead</a>
-        {' to access their user account, comment history, and more.'}
-      </p>
+    <div style={{ marginBottom: 20 }} className="custom">
+      <Button el="anchor" url="/login?redirect=/admin">
+        Sign in with oAuth
+      </Button>
     </div>
   )
 }
 
-export default BeforeLogin
+export default OAuthButton
diff --git a/src/payload/payload.config.ts b/src/payload/payload.config.ts
index 28e08c1..066b0e7 100644
--- a/src/payload/payload.config.ts
+++ b/src/payload/payload.config.ts
@@ -34,7 +34,7 @@ import Tickets from './collections/Tickets'
 import Users from './collections/Users'
 import Votes from './collections/Votes'
 import BeforeDashboard from './components/BeforeDashboard'
-import BeforeLogin from './components/BeforeLogin'
+import OAuthButton from './components/BeforeLogin'
 import { seed } from './endpoints/seed'
 import { Footer } from './globals/Footer'
 import { Header } from './globals/Header'
@@ -53,9 +53,6 @@ export default buildConfig({
     user: Users.slug,
     bundler: webpackBundler(), // bundler-config
     components: {
-      // The `BeforeLogin` component renders a message that you see while logging into your admin panel.
-      // Feel free to delete this at any time. Simply remove the line below and the import `BeforeLogin` statement on line 15.
-      beforeLogin: [BeforeLogin],
       // The `BeforeDashboard` component renders the 'welcome' block that you see after logging into your admin panel.
       // Feel free to delete this at any time. Simply remove the line below and the import `BeforeDashboard` statement on line 15.
       beforeDashboard: [BeforeDashboard],
@@ -175,9 +172,12 @@ export default buildConfig({
           email: sotonData.mail,
         }
       },
+      components: {
+        Button: OAuthButton,
+      },
       userCollection: Users,
       subField: { name: 'username' },
-      successRedirect: '/',
+      successRedirect: '/login-redirect',
       sessionOptions: {
         resave: false,
         saveUninitialized: false,