@addev-be/ui 0.3.2 → 0.3.3

package/src/helpers/getScrollbarSize.ts

@@ -1,14 +1,14 @@
-let scrollBarSize: number[] | undefined = undefined;
-
-export const getScrollBarSize = () => {
-  if (!scrollBarSize) {
-    const el = document.createElement('div');
-    el.style.cssText = 'overflow:scroll; visibility:hidden; position:absolute;';
-    document.body.appendChild(el);
-    const width = el.offsetWidth - el.clientWidth;
-    const height = el.offsetHeight - el.clientHeight;
-    el.remove();
-    scrollBarSize = [width, height];
-  }
-  return scrollBarSize;
-};
+let scrollBarSize: number[] | undefined = undefined;
+
+export const getScrollBarSize = () => {
+  if (!scrollBarSize) {
+    const el = document.createElement('div');
+    el.style.cssText = 'overflow:scroll; visibility:hidden; position:absolute;';
+    document.body.appendChild(el);
+    const width = el.offsetWidth - el.clientWidth;
+    const height = el.offsetHeight - el.clientHeight;
+    el.remove();
+    scrollBarSize = [width, height];
+  }
+  return scrollBarSize;
+};

package/src/helpers/numbers.ts

@@ -1,26 +1,26 @@
-export const formatMoney = (number: number, decimals = 2, currency = 'EUR') =>
-  new Intl.NumberFormat(navigator.language, {
-    style: 'currency',
-    currency,
-    minimumFractionDigits: decimals,
-    maximumFractionDigits: decimals,
-  }).format(number);
-
-export const formatPercentage = (number: number, decimals = 2) =>
-  new Intl.NumberFormat(navigator.language, {
-    style: 'percent',
-    minimumFractionDigits: decimals,
-    maximumFractionDigits: decimals,
-  }).format(number);
-
-export const formatNumber = (number: number, decimals = 2) =>
-  new Intl.NumberFormat(navigator.language, {
-    minimumFractionDigits: decimals,
-    maximumFractionDigits: decimals,
-  }).format(number);
-
-export const formatNumberInvariant = (number: number, decimals = 2) =>
-  new Intl.NumberFormat('es-US', {
-    minimumFractionDigits: decimals,
-    maximumFractionDigits: decimals,
-  }).format(number);
+export const formatMoney = (number: number, decimals = 2, currency = 'EUR') =>
+  new Intl.NumberFormat(navigator.language, {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  }).format(number);
+
+export const formatPercentage = (number: number, decimals = 2) =>
+  new Intl.NumberFormat(navigator.language, {
+    style: 'percent',
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  }).format(number);
+
+export const formatNumber = (number: number, decimals = 2) =>
+  new Intl.NumberFormat(navigator.language, {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  }).format(number);
+
+export const formatNumberInvariant = (number: number, decimals = 2) =>
+  new Intl.NumberFormat('es-US', {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  }).format(number);

package/src/hooks/index.ts

@@ -1,2 +1,2 @@
-export * from './useElementSize';
-export * from './useWindowSize';
+export * from './useElementSize';
+export * from './useWindowSize';

package/src/hooks/useElementSize.ts

@@ -1,24 +1,24 @@
-import { useEffect, useState } from 'react';
-
-export const useElementSize = (element: HTMLElement | null) => {
-  const [size, setSize] = useState({ width: 0, height: 0 });
-
-  useEffect(() => {
-    if (!element) {
-      return;
-    }
-
-    const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      const { width, height } = entry.contentRect;
-      setSize({ width, height });
-    });
-
-    observer.observe(element);
-    return () => {
-      observer.disconnect();
-    };
-  }, [element]);
-
-  return size;
-};
+import { useEffect, useState } from 'react';
+
+export const useElementSize = (element: HTMLElement | null) => {
+  const [size, setSize] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    if (!element) {
+      return;
+    }
+
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      const { width, height } = entry.contentRect;
+      setSize({ width, height });
+    });
+
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [element]);
+
+  return size;
+};

package/src/hooks/useWindowSize.ts

@@ -1,20 +1,20 @@
-import { useEffect, useState } from 'react';
-
-export const useWindowSize = () => {
-  const [size, setSize] = useState({ width: 0, height: 0 });
-
-  useEffect(() => {
-    const handleResize = () => {
-      setSize({ width: window.outerWidth, height: window.outerHeight });
-    };
-
-    window.addEventListener('resize', handleResize);
-    handleResize();
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
-  return size;
-};
+import { useEffect, useState } from 'react';
+
+export const useWindowSize = () => {
+  const [size, setSize] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setSize({ width: window.outerWidth, height: window.outerHeight });
+    };
+
+    window.addEventListener('resize', handleResize);
+    handleResize();
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return size;
+};

package/src/index.ts

@@ -1,7 +1,7 @@
-export * from './components';
-export * from './providers';
-
-export * from './Icons';
-
-export * from './config';
-export * from './services';
+export * from './components';
+export * from './providers';
+
+export * from './Icons';
+
+export * from './config';
+export * from './services';

package/src/providers/AuthenticationProvider/index.tsx

@@ -1,143 +1,199 @@
-import {
-  FC,
-  PropsWithChildren,
-  createContext,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import {
-  UserDTO,
-  WebSocketService,
-  useAuthenticateRequestHandler,
-  useLoginRequestHandler,
-  useLogoutRequestHandler,
-} from '../../services';
-
-export type AuthenticationContextProps = {
-  token?: string;
-  user?: UserDTO;
-  authenticate: () => void;
-  login: (username: string, password: string) => void;
-  logout: () => void;
-};
-
-export const AuthenticationContext = createContext<AuthenticationContextProps>({
-  authenticate: () => {},
-  login: () => {},
-  logout: () => {},
-});
-
-export type AuthenticationProviderProps = PropsWithChildren<{
-  loginComponent?: FC;
-}>;
-
-export const AuthenticationProvider: FC<AuthenticationProviderProps> = ({
-  loginComponent: LoginComponent,
-  children,
-}) => {
-  const [, setWebSocketStatus] = useState<boolean | undefined>(false);
-  const [token, setToken] = useState<string | undefined>(
-    sessionStorage.getItem('authToken') || undefined
-  );
-  const [user, setUser] = useState<UserDTO | undefined>(undefined);
-
-  const sendAuthenticateRequest = useAuthenticateRequestHandler();
-  const sendLoginRequest = useLoginRequestHandler();
-  const sendLogoutRequest = useLogoutRequestHandler();
-
-  useEffect(() => {
-    if (token) {
-      sessionStorage.setItem('authToken', token);
-    } else {
-      sessionStorage.removeItem('authToken');
-    }
-  }, [token]);
-
-  const authenticate = useCallback(() => {
-    if (token && !user) {
-      sendAuthenticateRequest({ token }).then(
-        (response) => {
-          if (response.status === 0 && response.user) {
-            setUser(response.user);
-          } else if (response.status > 0) {
-            setToken(undefined);
-            setUser(undefined);
-          }
-        },
-        () => {
-          setToken(undefined);
-          setUser(undefined);
-        }
-      );
-    }
-  }, [sendAuthenticateRequest, token, user]);
-
-  const login = useCallback(
-    (username: string, password: string) => {
-      sendLoginRequest({ username, password }).then(
-        (response) => {
-          if (response.status === 0 && response.user) {
-            setToken(response.token);
-            setUser(response.user);
-          } else if (response.status > 0) {
-            setToken(undefined);
-            setUser(undefined);
-          }
-        },
-        () => {
-          setToken(undefined);
-          setUser(undefined);
-        }
-      );
-    },
-    [sendLoginRequest]
-  );
-
-  const logout = useCallback(() => {
-    sendLogoutRequest({}).finally(() => {
-      setToken(undefined);
-      setUser(undefined);
-    });
-  }, [sendLogoutRequest]);
-
-  const contextValue = useMemo(
-    () => ({
-      token,
-      user,
-      authenticate,
-      login,
-      logout,
-    }),
-    [authenticate, login, logout, token, user]
-  );
-
-  useEffect(() => {
-    const subscription = WebSocketService.getInstance()?.status$.subscribe(
-      (newStatus) => {
-        setWebSocketStatus((previousStatus) => {
-          if (!previousStatus && newStatus) {
-            authenticate();
-          }
-          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 {
+  UserDTO,
+  WebSocketService,
+  useAuthenticateRequestHandler,
+  useCheckRecoveryKeyRequestHandler,
+  useLoginRequestHandler,
+  useLogoutRequestHandler,
+  useResetPasswordRequestHandler,
+  useSendRecoveryKeyRequestHandler,
+} from '../../services';
+
+export type AuthenticationContextProps = {
+  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>;
+};
+
+export const AuthenticationContext = createContext<AuthenticationContextProps>({
+  authenticate: () => {},
+  isAuthenticated: false,
+  login: async () => false,
+  logout: async () => false,
+  sendRecoveryKey: async () => -1,
+  checkRecoveryKey: async () => -1,
+  resetPassword: async () => -1,
+});
+
+export type AuthenticationProviderProps = PropsWithChildren<{
+  loginComponent?: FC;
+}>;
+
+export const AuthenticationProvider: FC<AuthenticationProviderProps> = ({
+  loginComponent: LoginComponent,
+  children,
+}) => {
+  const [, setWebSocketStatus] = useState<boolean | undefined>(false);
+  const [token, setToken] = useState<string | undefined>(
+    sessionStorage.getItem('authToken') || undefined
+  );
+  const [user, setUser] = useState<UserDTO | undefined>(undefined);
+
+  const sendAuthenticateRequest = useAuthenticateRequestHandler();
+  const sendLoginRequest = useLoginRequestHandler();
+  const sendLogoutRequest = useLogoutRequestHandler();
+
+  const sendSendRecoveryKeyRequest = useSendRecoveryKeyRequestHandler();
+  const sendCheckRecoveryKeyRequest = useCheckRecoveryKeyRequestHandler();
+  const sendResetPasswordRequest = useResetPasswordRequestHandler();
+
+  useEffect(() => {
+    if (token) {
+      sessionStorage.setItem('authToken', token);
+    } else {
+      sessionStorage.removeItem('authToken');
+    }
+  }, [token]);
+
+  const authenticate = useCallback(() => {
+    if (token && !user) {
+      sendAuthenticateRequest({ token }).then(
+        (response) => {
+          if (response.status === 0 && response.user) {
+            setUser(response.user);
+          } else if (response.status > 0) {
+            setToken(undefined);
+            setUser(undefined);
+          }
+        },
+        () => {
+          setToken(undefined);
+          setUser(undefined);
+        }
+      );
+    }
+  }, [sendAuthenticateRequest, token, user]);
+
+  const login = useCallback(
+    async (username: string, password: string) =>
+      sendLoginRequest({ username, password })
+        .then((response) => {
+          if (response.status === 0 && response.user) {
+            setToken(response.token);
+            setUser(response.user);
+            return true;
+          }
+          throw new Error(`Login failed with status ${response.status}`);
+        })
+        .catch(() => {
+          setToken(undefined);
+          setUser(undefined);
+          return false;
+        }),
+    [sendLoginRequest]
+  );
+
+  const logout = useCallback(
+    async () =>
+      sendLogoutRequest({})
+        .then((response) => {
+          return response.status === 0;
+        })
+        .finally(() => {
+          setToken(undefined);
+          setUser(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 contextValue = useMemo(
+    () => ({
+      token,
+      user,
+      isAuthenticated: !!user,
+      authenticate,
+      login,
+      logout,
+      sendRecoveryKey,
+      checkRecoveryKey,
+      resetPassword,
+    }),
+    [
+      authenticate,
+      checkRecoveryKey,
+      login,
+      logout,
+      resetPassword,
+      sendRecoveryKey,
+      token,
+      user,
+    ]
+  );
+
+  useEffect(() => {
+    const subscription = WebSocketService.getInstance()?.status$.subscribe(
+      (newStatus) => {
+        setWebSocketStatus((previousStatus) => {
+          if (!previousStatus && newStatus) {
+            authenticate();
+          }
+          return newStatus;
+        });
+      }
+    );
+    return () => subscription?.unsubscribe();
+  }, [authenticate]);
+
+  return (
+    <AuthenticationContext.Provider value={contextValue}>
+      {!user ? (
+        LoginComponent ? (
+          <LoginComponent />
+        ) : (
+          <div>Not authenticated</div>
+        )
+      ) : (
+        children
+      )}
+    </AuthenticationContext.Provider>
+  );
+};

package/src/providers/LoadingProvider/index.tsx

@@ -1,47 +1,47 @@
-import {
-  FC,
-  PropsWithChildren,
-  createContext,
-  useCallback,
-  useMemo,
-  useState,
-} from 'react';
-
-import { Loading } from '../../components';
-
-export type LoadingContextType = {
-  startLoading: () => void;
-  stopLoading: () => void;
-};
-
-export const LoadingContext = createContext<LoadingContextType>({
-  startLoading: () => {},
-  stopLoading: () => {},
-});
-
-export const LoadingProvider: FC<PropsWithChildren> = ({ children }) => {
-  const [loadingCount, setLoadingCount] = useState(0);
-
-  const startLoading = useCallback(() => {
-    setLoadingCount((count) => count + 1);
-  }, []);
-
-  const stopLoading = useCallback(() => {
-    setLoadingCount((count) => count - 1);
-  }, []);
-
-  const value = useMemo(
-    () => ({
-      startLoading,
-      stopLoading,
-    }),
-    [startLoading, stopLoading]
-  );
-
-  return (
-    <LoadingContext.Provider value={value}>
-      <Loading visible={loadingCount > 0}>Chargement ...</Loading>
-      {children}
-    </LoadingContext.Provider>
-  );
-};
+import {
+  FC,
+  PropsWithChildren,
+  createContext,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
+
+import { Loading } from '../../components';
+
+export type LoadingContextType = {
+  startLoading: () => void;
+  stopLoading: () => void;
+};
+
+export const LoadingContext = createContext<LoadingContextType>({
+  startLoading: () => {},
+  stopLoading: () => {},
+});
+
+export const LoadingProvider: FC<PropsWithChildren> = ({ children }) => {
+  const [loadingCount, setLoadingCount] = useState(0);
+
+  const startLoading = useCallback(() => {
+    setLoadingCount((count) => count + 1);
+  }, []);
+
+  const stopLoading = useCallback(() => {
+    setLoadingCount((count) => count - 1);
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      startLoading,
+      stopLoading,
+    }),
+    [startLoading, stopLoading]
+  );
+
+  return (
+    <LoadingContext.Provider value={value}>
+      <Loading visible={loadingCount > 0}>Chargement ...</Loading>
+      {children}
+    </LoadingContext.Provider>
+  );
+};