Add auto login

app/components/home.tsx

@@ -2,7 +2,7 @@
 
 require("../polyfill");
 
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 import styles from "./home.module.scss";
 
@@ -18,17 +18,17 @@ import { ErrorBoundary } from "./error";
 import { getISOLang, getLang } from "../locales";
 
 import {
+  Route,
   HashRouter as Router,
   Routes,
-  Route,
   useLocation,
 } from "react-router-dom";
-import { SideBar } from "./sidebar";
+import { api } from "../client/api";
+import { getClientConfig } from "../config/client";
+import { useAccessStore } from "../store";
 import { useAppConfig } from "../store/config";
 import { AuthPage } from "./auth";
-import { getClientConfig } from "../config/client";
-import { api } from "../client/api";
-import { useAccessStore } from "../store";
+import { SideBar } from "./sidebar";
 
 export function Loading(props: { noLogo?: boolean }) {
   return (
@@ -128,7 +128,8 @@ function Screen() {
   const isHome = location.pathname === Path.Home;
   const isAuth = location.pathname === Path.Auth;
   const isMobileScreen = useMobileScreen();
-  const shouldTightBorder = getClientConfig()?.isApp || (config.tightBorder && !isMobileScreen);
+  const shouldTightBorder =
+    getClientConfig()?.isApp || (config.tightBorder && !isMobileScreen);
 
   useEffect(() => {
     loadAsyncGoogleFont();

app/login/login.module.scss

@@ -1,25 +0,0 @@
-.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,45 +1,22 @@
 "use client";
 
 import { signIn, useSession } from "next-auth/react";
-import Link from "next/link";
-import { IconButton } from "../components/button";
 
-import styles from "./login.module.scss";
+import { useEffect } from "react";
+import { Loading } from "../components/home";
 
 export default function Login() {
   const session = useSession();
 
+  useEffect(() => {
     const handleLogin = async () => {
       signIn("azure-ad", {
         callbackUrl: "/",
       });
     };
 
-  return (
-    <div className={styles["container"]}>
-      <h1 className={styles["headline"]}>Welcome to AdEx GPT</h1>
+    handleLogin();
+  }, []);
 
-      <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>
-  );
+  return <Loading />;
 }