@addev-be/ui 0.2.19 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.2.19",
+  "version": "0.3.1",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",
@@ -45,6 +45,7 @@
     "io-ts": "^2.2.21",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
+    "rxjs": "^7.8.1",
     "uuid": "^10.0.0"
   }
 }

package/src/providers/AuthenticationProvider/index.tsx

@@ -0,0 +1,143 @@
+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>
+  );
+};

package/src/providers/LoadingProvider/index.tsx

@@ -0,0 +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>
+  );
+};

package/src/providers/ThemeProvider/index.ts

@@ -1,3 +1,4 @@
 export { ThemeProvider } from './ThemeProvider';
 
 export { type Theme } from './types';
+export { defaultTheme } from './defaultTheme';

package/src/providers/hooks.ts

@@ -1,8 +1,10 @@
+import { LoadingContext } from './LoadingProvider';
 import { PortalsContext } from './PortalsProvider';
 import { SettingsContext } from './SettingsProvider';
 import { UiContext } from './UiProviders';
 import { useContext } from 'react';
 
+export const useLoading = () => useContext(LoadingContext);
 export const usePortals = () => useContext(PortalsContext);
-export const useUi = () => useContext(UiContext);
 export const useSettings = () => useContext(SettingsContext);
+export const useUi = () => useContext(UiContext);

package/src/providers/index.ts

@@ -1,5 +1,6 @@
-export * from './UiProviders';
+export * from './AuthenticationProvider';
 export * from './PortalsProvider';
 export * from './ThemeProvider';
+export * from './UiProviders';
 
 export * from './hooks';

package/src/services/WebSocketService.ts

@@ -1,13 +1,16 @@
 import { Config } from '../config';
 import { Request } from './base';
+import { Subject } from 'rxjs';
 import { v4 } from 'uuid';
 
 export class WebSocketService {
   private static instance: WebSocketService;
   private config: Config;
   private socket: WebSocket | null = null;
-  public status: boolean | undefined = false;
-  private listeners: ((status: boolean | undefined) => void)[] = [];
+
+  public status: boolean | undefined = undefined;
+  public status$ = new Subject<boolean | undefined>();
+
   private queue: Request[] = [];
   private promises: {
     [id: string]: {
@@ -71,23 +74,9 @@ export class WebSocketService {
     }
   }
 
-  public subscribe(listener: (status: boolean | undefined) => void) {
-    this.listeners.push(listener);
-    listener(this.status);
-    return () => this.listeners.splice(this.listeners.indexOf(listener), 1);
-  }
-
-  public unsubscribe(listener: (status: boolean | undefined) => void) {
-    this.listeners.splice(this.listeners.indexOf(listener), 1);
-  }
-
   private setStatus(status: boolean | undefined) {
-    const previousStatus = this.status;
     this.status = status;
-    this.listeners.forEach((listener) => listener(status));
-    if (this.socket && !previousStatus && status) {
-      this.sendQueue();
-    }
+    this.status$.next(status);
   }
 
   private sendQueue() {

package/src/services/hooks.ts

@@ -1,6 +1,23 @@
 import { HttpService } from './HttpService';
 import { WebSocketService } from './WebSocketService';
 import { useCallback } from 'react';
+import { useLoading } from '../providers';
+
+export const useLoadingRequestHandler = <TReq, TRes>(
+  name: string
+): ((data: TReq) => Promise<TRes>) => {
+  const { startLoading, stopLoading } = useLoading();
+
+  return useCallback(
+    (data: TReq) => {
+      startLoading();
+      return WebSocketService.getInstance()
+        .sendRequest<TReq, TRes>(name, data)
+        .finally(stopLoading);
+    },
+    [name, startLoading, stopLoading]
+  );
+};
 
 export const useWebSocketRequestHandler = <TReq, TRes>(
   name: string

package/src/services/index.ts

@@ -1,2 +1,8 @@
 export * from './WebSocketService';
 export * from './hooks';
+
+export * from './requests/auth';
+
+export * from './types/auth';
+export * from './types/base';
+export * from './types/users';

package/src/services/requests/auth.ts

@@ -0,0 +1,44 @@
+import {
+  AuthenticateRequestDTO,
+  AuthenticateResponseDTO,
+  CheckRecoveryKeyRequestDTO,
+  CheckRecoveryKeyResponseDTO,
+  LoginRequestDTO,
+  LoginResponseDTO,
+  LogoutRequestDTO,
+  LogoutResponseDTO,
+  ResetPasswordRequestDTO,
+  ResetPasswordResponseDTO,
+  SendRecoveryKeyRequestDTO,
+  SendRecoveryKeyResponseDTO,
+} from '../types/auth';
+
+import { useLoadingRequestHandler } from '../hooks';
+
+export const useAuthenticateRequestHandler = () =>
+  useLoadingRequestHandler<AuthenticateRequestDTO, AuthenticateResponseDTO>(
+    'Authenticate'
+  );
+
+export const useLoginRequestHandler = () =>
+  useLoadingRequestHandler<LoginRequestDTO, LoginResponseDTO>('Login');
+
+export const useLogoutRequestHandler = () =>
+  useLoadingRequestHandler<LogoutRequestDTO, LogoutResponseDTO>('Logout');
+
+export const useSendRecoveryKeyRequestHandler = () =>
+  useLoadingRequestHandler<
+    SendRecoveryKeyRequestDTO,
+    SendRecoveryKeyResponseDTO
+  >('SendRecoveryKey');
+
+export const useCheckRecoveryKeyRequestHandler = () =>
+  useLoadingRequestHandler<
+    CheckRecoveryKeyRequestDTO,
+    CheckRecoveryKeyResponseDTO
+  >('CheckRecoveryKey');
+
+export const useResetPasswordRequestHandler = () =>
+  useLoadingRequestHandler<ResetPasswordRequestDTO, ResetPasswordResponseDTO>(
+    'ResetPassword'
+  );

package/src/services/types/auth.ts

@@ -0,0 +1,131 @@
+import * as t from 'io-ts';
+
+import { userDtoCodec } from './users';
+
+export const loginRequestDtoCodec = t.type(
+  {
+    username: t.string,
+    password: t.string,
+  },
+  'LoginRequestDTO'
+);
+
+export const loginResponseDtoCodec = t.type(
+  {
+    status: t.number,
+    token: t.string,
+    user: t.union([userDtoCodec, t.null]),
+  },
+  'LoginResponseDTO'
+);
+
+export type LoginRequestDTO = t.TypeOf<typeof loginRequestDtoCodec>;
+export type LoginResponseDTO = t.TypeOf<typeof loginResponseDtoCodec>;
+
+/*****/
+
+export const logoutRequestDtoCodec = t.type({}, 'LogoutRequestDTO');
+
+export const logoutResponseDtoCodec = t.type(
+  {
+    status: t.number,
+  },
+  'LogoutResponseDTO'
+);
+
+export type LogoutRequestDTO = t.TypeOf<typeof logoutRequestDtoCodec>;
+export type LogoutResponseDTO = t.TypeOf<typeof logoutResponseDtoCodec>;
+
+/*****/
+
+export const authenticateRequestDtoCodec = t.type(
+  {
+    token: t.string,
+  },
+  'AuthenticateRequestDTO'
+);
+
+export const authenticateResponseDtoCodec = t.type(
+  {
+    status: t.number,
+    user: t.union([userDtoCodec, t.null]),
+  },
+  'AuthenticateResponseDTO'
+);
+
+export type AuthenticateRequestDTO = t.TypeOf<
+  typeof authenticateRequestDtoCodec
+>;
+export type AuthenticateResponseDTO = t.TypeOf<
+  typeof authenticateResponseDtoCodec
+>;
+
+/*****/
+
+export const sendRecoveryKeyRequestDtoCodec = t.type(
+  {
+    email: t.string,
+  },
+  'SendRecoveryKeyRequestDTO'
+);
+
+export const sendRecoveryKeyResponseDtoCodec = t.type(
+  {
+    status: t.number,
+  },
+  'SendRecoveryKeyResponseDTO'
+);
+
+export type SendRecoveryKeyRequestDTO = t.TypeOf<
+  typeof sendRecoveryKeyRequestDtoCodec
+>;
+export type SendRecoveryKeyResponseDTO = t.TypeOf<
+  typeof sendRecoveryKeyResponseDtoCodec
+>;
+
+/*****/
+
+export const checkRecoveryKeyRequestDtoCodec = t.type(
+  {
+    key: t.string,
+  },
+  'CheckRecoveryKeyRequestDTO'
+);
+
+export const checkRecoveryKeyResponseDtoCodec = t.type(
+  {
+    status: t.number,
+  },
+  'CheckRecoveryKeyResponseDTO'
+);
+
+export type CheckRecoveryKeyRequestDTO = t.TypeOf<
+  typeof checkRecoveryKeyRequestDtoCodec
+>;
+export type CheckRecoveryKeyResponseDTO = t.TypeOf<
+  typeof checkRecoveryKeyResponseDtoCodec
+>;
+
+/*****/
+
+export const resetPasswordRequestDtoCodec = t.type(
+  {
+    key: t.string,
+    password: t.string,
+  },
+  'ResetPasswordRequestDTO'
+);
+
+export const resetPasswordResponseDtoCodec = t.type(
+  {
+    status: t.number,
+  },
+  'ResetPasswordResponseDTO'
+);
+
+export type ResetPasswordRequestDTO = t.TypeOf<
+  typeof resetPasswordRequestDtoCodec
+>;
+export type ResetPasswordResponseDTO = t.TypeOf<
+  typeof resetPasswordResponseDtoCodec
+>;

package/src/services/types/base.ts

@@ -0,0 +1,10 @@
+import * as t from 'io-ts';
+
+export const baseModelDtoCodec = t.type({
+  id: t.union([t.string, t.null]),
+});
+
+export type BaseModelDTO = t.TypeOf<typeof baseModelDtoCodec>;
+
+export const UUID_REGEX =
+  /^[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/i;

package/src/services/types/users.ts

@@ -0,0 +1,20 @@
+import * as t from 'io-ts';
+
+import { baseModelDtoCodec } from './base';
+
+export const userDtoCodec = t.intersection(
+  [
+    t.type({
+      ...baseModelDtoCodec.props,
+      username: t.string,
+    }),
+    t.partial({
+      name: t.string,
+      email: t.string,
+      lastLogin: t.union([t.string, t.null]),
+    }),
+  ],
+  'UserDTO'
+);
+
+export type UserDTO = t.TypeOf<typeof userDtoCodec>;