improve login page

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)
 }

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}</>;
 };

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>