Add basic login screen | add logout button

app/components/sidebar.tsx

@@ -1,16 +1,16 @@
-import { useEffect, useRef, useCallback } from "react";
+import { useEffect, useRef } from "react";
 
 import styles from "./home.module.scss";
 
-import { IconButton } from "./button";
-import SettingsIcon from "../icons/settings.svg";
-import GithubIcon from "../icons/github.svg";
-import ChatGptIcon from "../icons/chatgpt.svg";
 import AddIcon from "../icons/add.svg";
 import CloseIcon from "../icons/close.svg";
+import DragIcon from "../icons/drag.svg";
+import GithubIcon from "../icons/github.svg";
 import MaskIcon from "../icons/mask.svg";
 import PluginIcon from "../icons/plugin.svg";
-import DragIcon from "../icons/drag.svg";
+import SettingsIcon from "../icons/settings.svg";
+import SignoutIcon from "../icons/signout.svg";
+import { IconButton } from "./button";
 
 import Locale from "../locales";
 
@@ -25,9 +25,10 @@ import {
   REPO_URL,
 } from "../constant";
 
+import { signOut } from "next-auth/react";
+import dynamic from "next/dynamic";
 import { Link, useNavigate } from "react-router-dom";
 import { useMobileScreen } from "../utils";
-import dynamic from "next/dynamic";
 import { showConfirm, showToast } from "./ui-lib";
 
 const ChatList = dynamic(async () => (await import("./chat-list")).ChatList, {
@@ -148,11 +149,17 @@ export function SideBar(props: { className?: string }) {
           AdEx<b>GPT</b> - via API
         </div>
         <div className={styles["sidebar-sub-title"]}>
-          secure local UI for OpenAI API<br />
+          secure local UI for OpenAI API
-          <a href="https://adexpartners.sharepoint.com/sites/AdExGPT/SitePages/AdExGPT.aspx">FAQ & Support</a>
+          <br />
+          <a href="https://adexpartners.sharepoint.com/sites/AdExGPT/SitePages/AdExGPT.aspx">
+            FAQ & Support
+          </a>
         </div>
         <div className={styles["sidebar-logo"] + " no-dark"}>
-          <img src="https://assets.cdn.personio.de/logos/85756/default/fc91989a7a2e899e3655593e271461aa.jpg" width="60" />
+          <img
+            src="https://assets.cdn.personio.de/logos/85756/default/fc91989a7a2e899e3655593e271461aa.jpg"
+            width="60"
+          />
         </div>
       </div>
 
@@ -202,16 +209,26 @@ export function SideBar(props: { className?: string }) {
               }}
             />
           </div>
+
           <div className={styles["sidebar-action"]}>
             <Link to={Path.Settings}>
               <IconButton icon={<SettingsIcon />} shadow />
             </Link>
           </div>
+
           <div className={styles["sidebar-action"]}>
             <a href={REPO_URL} target="_blank" rel="noopener noreferrer">
               <IconButton icon={<GithubIcon />} shadow />
             </a>
           </div>
+
+          <div className={styles["sidebar-action"]}>
+            <IconButton
+              icon={<SignoutIcon />}
+              shadow
+              onClick={() => signOut()}
+            />
+          </div>
         </div>
         <div>
           <IconButton

app/constant.ts

@@ -45,7 +45,7 @@ export enum StoreKey {
 
 export const DEFAULT_SIDEBAR_WIDTH = 300;
 export const MAX_SIDEBAR_WIDTH = 500;
-export const MIN_SIDEBAR_WIDTH = 230;
+export const MIN_SIDEBAR_WIDTH = 280;
 export const NARROW_SIDEBAR_WIDTH = 100;
 
 export const ACCESS_CODE_PREFIX = "nk-";

app/icons/signout.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></svg>

app/login/login.module.scss

@@ -0,0 +1,25 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 16px;
+  width: 100%;
+  max-width: 560px;
+  padding: 16px;
+}
+
+.headline {
+  text-align: center;
+}
+
+.subline {
+  text-align: center;
+}
+
+.sign-in-button {
+  width: 100%;
+  max-width: 260px;
+  text-decoration: none;
+}

app/login/page.tsx

@@ -1,8 +1,14 @@
 "use client";
 
-import { signIn } from "next-auth/react";
+import { signIn, useSession } from "next-auth/react";
+import Link from "next/link";
+import { IconButton } from "../components/button";
+
+import styles from "./login.module.scss";
 
 export default function Login() {
+  const session = useSession();
+
   const handleLogin = async () => {
     signIn("azure-ad", {
       callbackUrl: "/",
@@ -10,8 +16,30 @@ export default function Login() {
   };
 
   return (
-    <div>
+    <div className={styles["container"]}>
-      <button onClick={handleLogin}>Login</button>
+      <h1 className={styles["headline"]}>Welcome to AdEx GPT</h1>
+
+      <p className={styles["subline"]}>
+        Before you can start using AdEx GPT you have to sign in using your AdEx
+        account. After a successful sign in you will be redirected to the chat.
+      </p>
+
+      {session.status === "authenticated" ? (
+        <Link href="/" className={styles["sign-in-button"]}>
+          <IconButton
+            text="Go to Chat"
+            type="primary"
+            className={styles["sign-in-button"]}
+          />
+        </Link>
+      ) : (
+        <IconButton
+          text="Login"
+          type="primary"
+          className={styles["sign-in-button"]}
+          onClick={handleLogin}
+        />
+      )}
     </div>
   );
 }