From 9d1b705ab17a60979988ebbc8d8db8f82aaeca8b Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Mon, 20 May 2024 01:36:14 -0700
Subject: [PATCH] improve login page

---
 bin/core/src/auth/mod.rs     |  6 +++++-
 frontend/src/lib/socket.tsx  |  7 ++++---
 frontend/src/pages/login.tsx | 17 +++++++++++++++--
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/bin/core/src/auth/mod.rs b/bin/core/src/auth/mod.rs
index 61349864d..940c0abc3 100644
--- a/bin/core/src/auth/mod.rs
+++ b/bin/core/src/auth/mod.rs
@@ -8,7 +8,9 @@ use axum::{
 use monitor_client::entities::{monitor_timestamp, user::User};
 use mungos::mongodb::bson::doc;
 use rand::{distributions::Alphanumeric, thread_rng, Rng};
+use reqwest::StatusCode;
 use serde::Deserialize;
+use serror::AddStatusCode;
 
 use crate::{
   helpers::query::get_user,
@@ -36,7 +38,9 @@ pub async fn auth_request(
   mut req: Request,
   next: Next,
 ) -> serror::Result<Response> {
-  let user = authenticate_check_enabled(&headers).await?;
+  let user = authenticate_check_enabled(&headers)
+    .await
+    .status_code(StatusCode::UNAUTHORIZED)?;
   req.extensions_mut().insert(user);
   Ok(next.run(req).await)
 }
diff --git a/frontend/src/lib/socket.tsx b/frontend/src/lib/socket.tsx
index 424e41b4d..562060c0a 100644
--- a/frontend/src/lib/socket.tsx
+++ b/frontend/src/lib/socket.tsx
@@ -1,4 +1,4 @@
-import { useInvalidate } from "@lib/hooks";
+import { useInvalidate, useUser } from "@lib/hooks";
 import { Types } from "@monitor/client";
 import { Button } from "@ui/button";
 import { toast } from "@ui/use-toast";
@@ -136,6 +136,7 @@ export const WebsocketProvider = ({
   url: string;
   children: ReactNode;
 }) => {
+  const user = useUser().data;
   const invalidate = useInvalidate();
   const [_, set] = useWebsocket();
   const [connected, setConnected] = useWebsocketConnected();
@@ -146,7 +147,7 @@ export const WebsocketProvider = ({
   );
 
   useEffect(() => {
-    if (!connected) {
+    if (user && !connected) {
       const ws = make_websocket(
         url,
         () => setConnected(true),
@@ -158,7 +159,7 @@ export const WebsocketProvider = ({
       );
       set(ws);
     }
-  }, [set, url, connected]);
+  }, [set, url, user, connected]);
 
   return <>{children}</>;
 };
diff --git a/frontend/src/pages/login.tsx b/frontend/src/pages/login.tsx
index d9893be9b..55f126a5e 100644
--- a/frontend/src/pages/login.tsx
+++ b/frontend/src/pages/login.tsx
@@ -1,5 +1,12 @@
 import { Button } from "@ui/button";
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@ui/card";
 import { Input } from "@ui/input";
 import { Label } from "@ui/label";
 import { useAuth, useLoginOptions, useUserInvalidate } from "@lib/hooks";
@@ -7,6 +14,7 @@ import { useState } from "react";
 import { ThemeToggle } from "@ui/theme";
 import { AUTH_TOKEN_STORAGE_KEY, MONITOR_BASE_URL } from "@main";
 import { Loader2 } from "lucide-react";
+import { cn } from "@lib/utils";
 
 type OauthProvider = "Github" | "Google";
 
@@ -92,7 +100,12 @@ export const Login = () => {
       <div className="container flex justify-end items-center h-16">
         <ThemeToggle />
       </div>
-      <div className="flex justify-center items-center container mt-32">
+      <div
+        className={cn(
+          "flex justify-center items-center container",
+          options?.local ? "mt-32" : "mt-64"
+        )}
+      >
         <Card className="w-full max-w-[500px] place-self-center">
           <CardHeader className="flex-row justify-between">
             <div>