pb-60: update login and callback pages

application/backend/app/api/slack.py

@@ -91,6 +91,9 @@ def post(self):
             'bot_user_id': response['bot_user_id'],
             'access_token': response['access_token']
         }
+
+        is_reinstalled = slack_organization_service.get_by_id(schema_data['team_id']) is not None
+
         slack_organization = schema.load(schema_data)
         slack_organization_service.upsert(slack_organization)
 
@@ -100,4 +103,13 @@ def post(self):
             'user_who_installed': response['authed_user']['id']
         }))
 
-        return Response(status=200)
+        if is_reinstalled:
+            logger.info(f"Bot reinstalled for team: {schema_data['team_id']}")
+            return jsonify({
+                        "message": f"Bot has been re-added to the workspace '{schema_data['team_name']}'."
+                    })
+
+
+        return jsonify({
+                        "message": f"Bot has been added to the workspace '{schema_data['team_name']}'."
+                    })

application/next-frontend/pages/login/index.tsx

@@ -1,11 +1,11 @@
-import { LoginButton } from '@/Shared/components/LoginButton'
+import { Header } from '@/Landing/scenarios/Header'
+import { LoginPage } from 'Landing/scenarios/LoginPage'
 
 const Login = () => {
     return (
-        <div className="flex w-full flex-col items-center justify-center gap-8">
-            <h1 className="text-center text-xl font-bold">Login Page </h1>
-
-            <LoginButton />
+        <div className="relative flex min-h-screen flex-col overflow-auto">
+            <Header />
+            <LoginPage />
         </div>
     )
 }

application/next-frontend/pages/slack/callback.tsx

@@ -1,6 +1,7 @@
 import { serversideApiUri } from '@/api/endpoints'
 import { GetServerSideProps } from 'next'
-import Link from 'next/link'
+import { SlackCallbackPageSuccess, SlackCallbackPageError } from 'Landing/scenarios/SlackCallbackPage'
+import { Header } from '@/Landing/scenarios/Header'
 
 export const getServerSideProps: GetServerSideProps = async ({ query }) => {
     const code = query.code
@@ -16,28 +17,26 @@ export const getServerSideProps: GetServerSideProps = async ({ query }) => {
         console.error(err)
     })
 
-    return { props: { success: res?.ok } }
-}
-
-const SlackInstallCallback = ({ success }: { success?: boolean }) => {
-    if (!success) {
-        return (
-            <div className="flex w-full flex-col justify-center gap-8">
-                <h1 className="text-center text-xl font-bold">Error adding to workspace </h1>
-                <Link className="m-auto w-fit border border-black px-8 py-2 hover:bg-slate-300" href={'/'}>
-                    Try again
-                </Link>
-            </div>
-        )
+    const success = res?.ok
+    let message: string | undefined
+    try {
+        message = (await res?.json()).message
+    } catch (err) {
+        console.error(err)
     }
 
+    return { props: { success, message: message ?? null } }
+}
+
+const SlackInstallCallback = ({ success, message }: { success?: boolean; message: string | null }) => {
     return (
-        <div className="flex w-full flex-col justify-center gap-8">
-            <h1 className="text-center text-xl font-bold">Bot added to workspace! </h1>
-            <h2 className="text-center font-bold">Login to administrate the bot </h2>
-            <Link href={'/login'} className="m-auto w-fit border border-black px-8 py-2 hover:bg-slate-300">
-                Go to login
-            </Link>
+        <div className="relative flex min-h-screen flex-col overflow-auto">
+            <Header />
+            {success ? (
+                <SlackCallbackPageSuccess message={message ?? undefined} />
+            ) : (
+                <SlackCallbackPageError message={message ?? undefined} />
+            )}
         </div>
     )
 }

application/next-frontend/src/Landing/scenarios/Header/index.tsx

@@ -1,15 +1,33 @@
 import Image from 'next/image'
 import PizzaBotLogo from '@/Landing/assets/illustrations/PizzaBotLogo.svg'
 import { LoginButton } from '@/Shared/components/LoginButton'
+import { useRouter } from 'next/router'
 
 const Header = () => {
+    const router = useRouter()
+
+    const routeToRoot = () => {
+        router.push('/')
+    }
+
     return (
-        <div className="sticky top-0 z-50 flex w-full items-center gap-4 overflow-hidden bg-green-light py-4 after:top-0">
-            <div className="ml-16 flex-1">
-                <Image priority src={PizzaBotLogo} width={150} alt="pizza bot logo" />
+        <>
+            <div className="fixed top-0 z-50 flex h-16 w-full items-center gap-4 overflow-hidden bg-green-light py-4 after:top-0">
+                <div className="ml-16 flex-1">
+                    <Image
+                        priority
+                        src={PizzaBotLogo}
+                        width={150}
+                        alt="pizza bot logo"
+                        onClick={routeToRoot}
+                        className="hover:cursor-pointer hover:outline-dashed hover:outline-green-secondary"
+                    />
+                </div>
+                <LoginButton />
             </div>
-            <LoginButton />
-        </div>
+            {/* This is a placeholder for the header so that the content doesn't get hidden behind the header */}
+            <div className="h-16 w-full bg-green-light"></div>
+        </>
     )
 }
 

application/next-frontend/src/Landing/scenarios/LoginPage/index.tsx

@@ -0,0 +1,18 @@
+import { LoginButton } from '@/Shared/components/LoginButton'
+import Image from 'next/image'
+import MascotWithFourArms from 'Landing/assets/illustrations/MascotWithFourArms.svg'
+
+const LoginPage = () => {
+    return (
+        <div className="flex w-full flex-1 flex-row bg-green-primary">
+            <div className="flex flex-1 flex-col items-center justify-center gap-8 p-8 font-queensRegular text-white">
+                <h1 className="text-5xl font-bold ">Welcome to Pizzabot!</h1>
+                <p className="text-3xl ">Please login to continue</p>
+                <LoginButton className="rounded-sm border border-green-secondary bg-green-800 px-8 py-2 font-semibold text-white hover:bg-green-700" />
+                <Image src={MascotWithFourArms} alt="Pizzabot logo" width={400} height={400} />
+            </div>
+        </div>
+    )
+}
+
+export { LoginPage }

application/next-frontend/src/Landing/scenarios/SlackCallbackPage/index.tsx

@@ -0,0 +1,58 @@
+import Image from 'next/image'
+import MascotWithFourArms from 'Landing/assets/illustrations/MascotWithFourArms.svg'
+import MascotSad from 'Landing/assets/illustrations/MascotSad.svg'
+import Link from 'next/link'
+import { StaticImport } from 'next/dist/shared/lib/get-img-props'
+
+const SlackCallbackPage = ({
+    header,
+    message,
+    actionMessage,
+    icon,
+}: {
+    header: string
+    message?: string
+    actionMessage: string
+    icon: StaticImport
+}) => {
+    return (
+        <div className="flex w-full flex-1 flex-row bg-green-primary ">
+            <div className="flex flex-1 flex-col items-center justify-center gap-8 p-8 font-queensRegular text-white">
+                <h1 className="max-w-lg text-center text-5xl font-bold">{header}</h1>
+                <p className="max-w-lg text-center text-3xl ">{message}</p>
+                <p className="max-w-lg text-center text-3xl ">{actionMessage}</p>
+                <Link
+                    href={'/'}
+                    className="rounded-sm border border-green-secondary bg-green-800 px-8 py-2 text-white hover:bg-green-700"
+                >
+                    Go back
+                </Link>
+                <Image src={icon} alt="Pizzabot logo" width={400} height={400} />
+            </div>
+        </div>
+    )
+}
+
+const SlackCallbackPageSuccess = ({ message }: { message?: string }) => {
+    return (
+        <SlackCallbackPage
+            header={'The Pizza Bot has been added to Slack!'}
+            message={message}
+            actionMessage={'Check it out in Slack:)'}
+            icon={MascotWithFourArms}
+        />
+    )
+}
+
+const SlackCallbackPageError = ({ message }: { message?: string }) => {
+    return (
+        <SlackCallbackPage
+            header={'Error adding the pizzabot to slack...'}
+            message={message}
+            actionMessage={'Go back to the landing page to try again'}
+            icon={MascotSad}
+        />
+    )
+}
+
+export { SlackCallbackPageSuccess, SlackCallbackPageError }

application/next-frontend/src/Shared/components/LoginButton.tsx

@@ -1,6 +1,6 @@
 import { clientsideApiUri } from '@/api/endpoints'
 
-const LoginButton = () => {
+const LoginButton = ({ className }: { className?: string }) => {
     const loginRedirect = async () => {
         try {
             const res = await fetch(clientsideApiUri + '/auth/login')
@@ -16,8 +16,11 @@ const LoginButton = () => {
     }
 
     return (
-        <button className="mr-12" onClick={loginRedirect}>
-            <span className="text-base font-black text-dark">Login</span>
+        <button
+            className={`mx-12 flex items-center justify-center text-base font-black text-dark ${className ?? ''}`}
+            onClick={loginRedirect}
+        >
+            <span>Login</span>
         </button>
     )
 }