@addev-be/ui 2.7.0 → 2.7.1

package/src/providers/AuthenticationProvider/index.tsx

@@ -1,303 +1,303 @@
-import {
-  FC,
-  PropsWithChildren,
-  createContext,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import {
-  useAuthenticateRequestHandler,
-  useCheckRecoveryKeyRequestHandler,
-  useLoginRequestHandler,
-  useLogoutRequestHandler,
-  useResetPasswordRequestHandler,
-  useSendRecoveryKeyRequestHandler,
-} from '../../services/requests/auth';
-
-import { UserDTO } from '../../services/types/users';
-import { WebSocketService } from '../../services/WebSocketService';
-import { basePermissions } from './helpers';
-
-export type AuthenticationContextProps = {
-  status?: number;
-  token?: string;
-  user?: UserDTO;
-  isAuthenticated: boolean;
-  authenticate: () => void;
-  login: (username: string, password: string) => Promise<boolean>;
-  logout: () => Promise<boolean>;
-  sendRecoveryKey: (email: string) => Promise<number>;
-  checkRecoveryKey: (key: string) => Promise<number>;
-  resetPassword: (key: string, password: string) => Promise<number>;
-  permissions: Record<string, string>;
-  hasPermission: (permission: string) => boolean;
-  setToken: (token?: string) => void;
-};
-
-export const AuthenticationContext = createContext<AuthenticationContextProps>({
-  status: undefined,
-  authenticate: () => {},
-  isAuthenticated: false,
-  login: async () => false,
-  logout: async () => false,
-  sendRecoveryKey: async () => -1,
-  checkRecoveryKey: async () => -1,
-  resetPassword: async () => -1,
-  permissions: {},
-  hasPermission: () => false,
-  setToken: () => {},
-});
-
-export type AuthenticationProviderProps = PropsWithChildren<{
-  permissions?: Record<string, string>;
-  loginComponent?: FC;
-  requestHandlerName?: string;
-}>;
-
-export const AuthenticationProvider: FC<AuthenticationProviderProps> = ({
-  permissions,
-  loginComponent: LoginComponent,
-  children,
-  requestHandlerName,
-}) => {
-  const allPermissions = useMemo(
-    () => ({ ...basePermissions, ...permissions }),
-    [permissions]
-  );
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [, setWebSocketStatus] = useState<boolean | undefined>(false);
-  const [token, setToken] = useState<string | undefined>(
-    sessionStorage.getItem('authToken') || undefined
-  );
-  const [user, setUser] = useState<UserDTO | undefined>(undefined);
-  const [status, setStatus] = useState<number | undefined>(undefined);
-
-  const sendAuthenticateRequest =
-    useAuthenticateRequestHandler(requestHandlerName);
-  const sendLoginRequest = useLoginRequestHandler();
-  const sendLogoutRequest = useLogoutRequestHandler();
-
-  const sendSendRecoveryKeyRequest = useSendRecoveryKeyRequestHandler();
-  const sendCheckRecoveryKeyRequest = useCheckRecoveryKeyRequestHandler();
-  const sendResetPasswordRequest = useResetPasswordRequestHandler();
-
-  const authenticate = useCallback(
-    (force = false) => {
-      if (token && (!user || force) && !isLoading) {
-        setIsLoading(true);
-        sendAuthenticateRequest({ token }).then(
-          (response) => {
-            setIsLoading(false);
-            setStatus(response.status);
-            if (response.status === 0 && response.user) {
-              setUser(response.user);
-            } else if (response.status > 0) {
-              setToken(undefined);
-              setUser(undefined);
-            }
-          },
-          () => {
-            setIsLoading(false);
-            setToken(undefined);
-            setUser(undefined);
-          }
-        );
-      }
-    },
-    [isLoading, sendAuthenticateRequest, token, user]
-  );
-
-  useEffect(() => {
-    if (token) {
-      sessionStorage.setItem('authToken', token);
-      authenticate();
-    } else {
-      sessionStorage.removeItem('authToken');
-    }
-  }, [authenticate, token]);
-
-  const [networkStatus, setNetworkStatus] = useState<boolean | undefined>(
-    false
-  );
-
-  const login = useCallback(
-    async (username: string, password: string) => {
-      if (isLoading) {
-        throw new Error('Already loading');
-      }
-
-      setIsLoading(true);
-      return sendLoginRequest({ username, password })
-        .then((response) => {
-          setIsLoading(false);
-          if (response.status === 0 && response.user) {
-            setToken(response.token);
-            setUser(response.user);
-            return true;
-          }
-          throw new Error(`Login failed with status ${response.status}`);
-        })
-        .catch(() => {
-          setIsLoading(false);
-          setToken(undefined);
-          setUser(undefined);
-          return false;
-        });
-    },
-    [isLoading, sendLoginRequest]
-  );
-
-  const logout = useCallback(
-    async () =>
-      sendLogoutRequest({})
-        .then((response) => {
-          return response.status === 0;
-        })
-        .finally(() => {
-          setToken(undefined);
-          setUser(undefined);
-          setStatus(undefined);
-        }),
-    [sendLogoutRequest]
-  );
-
-  const sendRecoveryKey = useCallback(
-    async (email: string) =>
-      sendSendRecoveryKeyRequest({ email }).then((response) => {
-        return response.status;
-      }),
-    [sendSendRecoveryKeyRequest]
-  );
-
-  const resetPassword = useCallback(
-    async (key: string, password: string) =>
-      sendResetPasswordRequest({ key, password }).then((response) => {
-        return response.status;
-      }),
-    [sendResetPasswordRequest]
-  );
-
-  const checkRecoveryKey = useCallback(
-    async (key: string) =>
-      sendCheckRecoveryKeyRequest({ key }).then((response) => {
-        return response.status;
-      }),
-    [sendCheckRecoveryKeyRequest]
-  );
-
-  const hasPermission = useCallback(
-    (permission: string) =>
-      permission in allPermissions &&
-      !!allPermissions[permission] &&
-      (user?.isAdmin ||
-        user?.profile?.isAdmin ||
-        (user?.permissions?.includes(permission) ?? false) ||
-        (user?.profile?.permissions?.includes(permission) ?? false)),
-    [
-      allPermissions,
-      user?.isAdmin,
-      user?.permissions,
-      user?.profile?.isAdmin,
-      user?.profile?.permissions,
-    ]
-  );
-
-  const webSocketStatusChanged = useCallback(
-    (status: boolean | undefined) => {
-      if (!networkStatus && status) {
-        authenticate(true);
-      }
-      setNetworkStatus(status);
-    },
-    [authenticate, networkStatus]
-  );
-
-  const webSocketErrorReceived = useCallback(
-    ({ status }: { status: number; message: string }) => {
-      // Handle logout when NotAuthenticated error is received
-      if (status === -4) {
-        logout();
-      }
-    },
-    [logout]
-  );
-
-  useEffect(() => {
-    const subscription = WebSocketService.getInstance().status$.subscribe(
-      webSocketStatusChanged
-    );
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [webSocketStatusChanged]);
-
-  useEffect(() => {
-    const subscription = WebSocketService.getInstance().error$.subscribe(
-      webSocketErrorReceived
-    );
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [webSocketErrorReceived]);
-
-  const contextValue = useMemo(
-    () => ({
-      status,
-      token,
-      user,
-      isAuthenticated: !!user,
-      authenticate,
-      login,
-      logout,
-      sendRecoveryKey,
-      checkRecoveryKey,
-      resetPassword,
-      permissions: allPermissions,
-      hasPermission,
-      setToken,
-    }),
-    [
-      status,
-      token,
-      user,
-      authenticate,
-      login,
-      logout,
-      sendRecoveryKey,
-      checkRecoveryKey,
-      resetPassword,
-      allPermissions,
-      hasPermission,
-    ]
-  );
-
-  useEffect(() => {
-    const subscription = WebSocketService.getInstance()?.status$.subscribe(
-      (newStatus) => {
-        setWebSocketStatus((previousStatus) => {
-          if (!previousStatus && newStatus) {
-            authenticate(true);
-          }
-          return newStatus;
-        });
-      }
-    );
-    return () => subscription?.unsubscribe();
-  }, [authenticate]);
-
-  return (
-    <AuthenticationContext.Provider value={contextValue}>
-      {!user ? (
-        LoginComponent ? (
-          <LoginComponent />
-        ) : (
-          <div>Not authenticated</div>
-        )
-      ) : (
-        children
-      )}
-    </AuthenticationContext.Provider>
-  );
-};
+import {
+  FC,
+  PropsWithChildren,
+  createContext,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import {
+  useAuthenticateRequestHandler,
+  useCheckRecoveryKeyRequestHandler,
+  useLoginRequestHandler,
+  useLogoutRequestHandler,
+  useResetPasswordRequestHandler,
+  useSendRecoveryKeyRequestHandler,
+} from '../../services/requests/auth';
+
+import { UserDTO } from '../../services/types/users';
+import { WebSocketService } from '../../services/WebSocketService';
+import { basePermissions } from './helpers';
+
+export type AuthenticationContextProps = {
+  status?: number;
+  token?: string;
+  user?: UserDTO;
+  isAuthenticated: boolean;
+  authenticate: () => void;
+  login: (username: string, password: string) => Promise<boolean>;
+  logout: () => Promise<boolean>;
+  sendRecoveryKey: (email: string) => Promise<number>;
+  checkRecoveryKey: (key: string) => Promise<number>;
+  resetPassword: (key: string, password: string) => Promise<number>;
+  permissions: Record<string, string>;
+  hasPermission: (permission: string) => boolean;
+  setToken: (token?: string) => void;
+};
+
+export const AuthenticationContext = createContext<AuthenticationContextProps>({
+  status: undefined,
+  authenticate: () => {},
+  isAuthenticated: false,
+  login: async () => false,
+  logout: async () => false,
+  sendRecoveryKey: async () => -1,
+  checkRecoveryKey: async () => -1,
+  resetPassword: async () => -1,
+  permissions: {},
+  hasPermission: () => false,
+  setToken: () => {},
+});
+
+export type AuthenticationProviderProps = PropsWithChildren<{
+  permissions?: Record<string, string>;
+  loginComponent?: FC;
+  requestHandlerName?: string;
+}>;
+
+export const AuthenticationProvider: FC<AuthenticationProviderProps> = ({
+  permissions,
+  loginComponent: LoginComponent,
+  children,
+  requestHandlerName,
+}) => {
+  const allPermissions = useMemo(
+    () => ({ ...basePermissions, ...permissions }),
+    [permissions]
+  );
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [, setWebSocketStatus] = useState<boolean | undefined>(false);
+  const [token, setToken] = useState<string | undefined>(
+    sessionStorage.getItem('authToken') || undefined
+  );
+  const [user, setUser] = useState<UserDTO | undefined>(undefined);
+  const [status, setStatus] = useState<number | undefined>(undefined);
+
+  const sendAuthenticateRequest =
+    useAuthenticateRequestHandler(requestHandlerName);
+  const sendLoginRequest = useLoginRequestHandler();
+  const sendLogoutRequest = useLogoutRequestHandler();
+
+  const sendSendRecoveryKeyRequest = useSendRecoveryKeyRequestHandler();
+  const sendCheckRecoveryKeyRequest = useCheckRecoveryKeyRequestHandler();
+  const sendResetPasswordRequest = useResetPasswordRequestHandler();
+
+  const authenticate = useCallback(
+    (force = false) => {
+      if (token && (!user || force) && !isLoading) {
+        setIsLoading(true);
+        sendAuthenticateRequest({ token }).then(
+          (response) => {
+            setIsLoading(false);
+            setStatus(response.status);
+            if (response.status === 0 && response.user) {
+              setUser(response.user);
+            } else if (response.status > 0) {
+              setToken(undefined);
+              setUser(undefined);
+            }
+          },
+          () => {
+            setIsLoading(false);
+            setToken(undefined);
+            setUser(undefined);
+          }
+        );
+      }
+    },
+    [isLoading, sendAuthenticateRequest, token, user]
+  );
+
+  useEffect(() => {
+    if (token) {
+      sessionStorage.setItem('authToken', token);
+      authenticate();
+    } else {
+      sessionStorage.removeItem('authToken');
+    }
+  }, [authenticate, token]);
+
+  const [networkStatus, setNetworkStatus] = useState<boolean | undefined>(
+    false
+  );
+
+  const login = useCallback(
+    async (username: string, password: string) => {
+      if (isLoading) {
+        throw new Error('Already loading');
+      }
+
+      setIsLoading(true);
+      return sendLoginRequest({ username, password })
+        .then((response) => {
+          setIsLoading(false);
+          if (response.status === 0 && response.user) {
+            setToken(response.token);
+            setUser(response.user);
+            return true;
+          }
+          throw new Error(`Login failed with status ${response.status}`);
+        })
+        .catch(() => {
+          setIsLoading(false);
+          setToken(undefined);
+          setUser(undefined);
+          return false;
+        });
+    },
+    [isLoading, sendLoginRequest]
+  );
+
+  const logout = useCallback(
+    async () =>
+      sendLogoutRequest({})
+        .then((response) => {
+          return response.status === 0;
+        })
+        .finally(() => {
+          setToken(undefined);
+          setUser(undefined);
+          setStatus(undefined);
+        }),
+    [sendLogoutRequest]
+  );
+
+  const sendRecoveryKey = useCallback(
+    async (email: string) =>
+      sendSendRecoveryKeyRequest({ email }).then((response) => {
+        return response.status;
+      }),
+    [sendSendRecoveryKeyRequest]
+  );
+
+  const resetPassword = useCallback(
+    async (key: string, password: string) =>
+      sendResetPasswordRequest({ key, password }).then((response) => {
+        return response.status;
+      }),
+    [sendResetPasswordRequest]
+  );
+
+  const checkRecoveryKey = useCallback(
+    async (key: string) =>
+      sendCheckRecoveryKeyRequest({ key }).then((response) => {
+        return response.status;
+      }),
+    [sendCheckRecoveryKeyRequest]
+  );
+
+  const hasPermission = useCallback(
+    (permission: string) =>
+      permission in allPermissions &&
+      !!allPermissions[permission] &&
+      (user?.isAdmin ||
+        user?.profile?.isAdmin ||
+        (user?.permissions?.includes(permission) ?? false) ||
+        (user?.profile?.permissions?.includes(permission) ?? false)),
+    [
+      allPermissions,
+      user?.isAdmin,
+      user?.permissions,
+      user?.profile?.isAdmin,
+      user?.profile?.permissions,
+    ]
+  );
+
+  const webSocketStatusChanged = useCallback(
+    (status: boolean | undefined) => {
+      if (!networkStatus && status) {
+        authenticate(true);
+      }
+      setNetworkStatus(status);
+    },
+    [authenticate, networkStatus]
+  );
+
+  const webSocketErrorReceived = useCallback(
+    ({ status }: { status: number; message: string }) => {
+      // Handle logout when NotAuthenticated error is received
+      if (status === -4) {
+        logout();
+      }
+    },
+    [logout]
+  );
+
+  useEffect(() => {
+    const subscription = WebSocketService.getInstance().status$.subscribe(
+      webSocketStatusChanged
+    );
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [webSocketStatusChanged]);
+
+  useEffect(() => {
+    const subscription = WebSocketService.getInstance().error$.subscribe(
+      webSocketErrorReceived
+    );
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [webSocketErrorReceived]);
+
+  const contextValue = useMemo(
+    () => ({
+      status,
+      token,
+      user,
+      isAuthenticated: !!user,
+      authenticate,
+      login,
+      logout,
+      sendRecoveryKey,
+      checkRecoveryKey,
+      resetPassword,
+      permissions: allPermissions,
+      hasPermission,
+      setToken,
+    }),
+    [
+      status,
+      token,
+      user,
+      authenticate,
+      login,
+      logout,
+      sendRecoveryKey,
+      checkRecoveryKey,
+      resetPassword,
+      allPermissions,
+      hasPermission,
+    ]
+  );
+
+  useEffect(() => {
+    const subscription = WebSocketService.getInstance()?.status$.subscribe(
+      (newStatus) => {
+        setWebSocketStatus((previousStatus) => {
+          if (!previousStatus && newStatus) {
+            authenticate(true);
+          }
+          return newStatus;
+        });
+      }
+    );
+    return () => subscription?.unsubscribe();
+  }, [authenticate]);
+
+  return (
+    <AuthenticationContext.Provider value={contextValue}>
+      {!user ? (
+        LoginComponent ? (
+          <LoginComponent />
+        ) : (
+          <div>Not authenticated</div>
+        )
+      ) : (
+        children
+      )}
+    </AuthenticationContext.Provider>
+  );
+};