feat: display disconnect message on login form

packages/frontend/src/components/LoginForm.tsx

@@ -10,16 +10,20 @@ import { InputGroup } from "./InputGroup";
 import { PasswordInput } from "./PasswordInput";
 import { useMutation } from "@tanstack/react-query";
 import { type RouterInputs, api, getErrorMessage } from "../api";
+import { useState } from "react";
 
 export const LoginForm = () => {
   const [authData, setAuthData] = useAuthContext();
   const form = useForm<LoginFormProps>();
 
   const mutation = useMutation((body: LoginFormProps) => api.post("/api/login", { body }));
 
+  const [shouldShowPopup] = useState(localStorage.getItem("crvif/update-popup"));
+
   const login = async (values: LoginFormProps) => {
     const response = await mutation.mutateAsync(values);
     localStorage.setItem("crvif/version", "1");
+    localStorage.removeItem("crvif/update-popup");
     setAuthData({ ...authData, ...response });
   };
 
@@ -36,6 +40,13 @@ export const LoginForm = () => {
             title={<styled.span fontWeight="regular">{getErrorMessage(mutationError)}</styled.span>}
           />
         ) : null}
+        {shouldShowPopup && !mutationError ? (
+          <Alert
+            className={css({ mb: "1.5rem" })}
+            severity="info"
+            title="Vous avez été déconnecté suite à une mise à jour de l'application."
+          />
+        ) : null}
         <InputGroup state={mutationError ? "error" : undefined}>
           <Input
             label="Courriel"

packages/frontend/src/contexts/AuthContext.tsx

@@ -21,6 +21,7 @@ export const AuthProvider = ({ children }: PropsWithChildren) => {
     const version = localStorage.getItem("crvif/version");
     if (!version) {
       localStorage.removeItem("crvif/auth");
+      localStorage.setItem("crvif/update-popup", "true");
       localStorage.setItem("crvif/version", "1");
       window.location.reload();
     }