@addev-be/ui 2.5.20 → 2.6.0

package/dist/services/index.js

@@ -18,13 +18,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SmartQueries = void 0;
 __exportStar(require("./WebSocketService"), exports);

package/dist/services/requests/userPermissions.d.ts

@@ -0,0 +1,4 @@
+export declare const useGetUserPermissionRequestHandler: () => (data: GetUserPermissionRequestDTO) => Promise<GetUserPermissionResponseDTO>;
+export declare const useGetAllUserPermissionsRequestHandler: () => (data: GetAllUserPermissionsRequestDTO) => Promise<GetAllUserPermissionsResponseDTO>;
+export declare const useSaveUserPermissionRequestHandler: () => (data: SaveUserPermissionRequestDTO) => Promise<SaveUserPermissionResponseDTO>;
+export declare const useDeleteUserPermissionRequestHandler: () => (data: DeleteUserPermissionRequestDTO) => Promise<DeleteUserPermissionResponseDTO>;

package/dist/services/requests/userPermissions.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDeleteUserPermissionRequestHandler = exports.useSaveUserPermissionRequestHandler = exports.useGetAllUserPermissionsRequestHandler = exports.useGetUserPermissionRequestHandler = void 0;
+var hooks_1 = require("../hooks");
+var useGetUserPermissionRequestHandler = function () {
+    return (0, hooks_1.useLoadingRequestHandler)('GetUserPermission');
+};
+exports.useGetUserPermissionRequestHandler = useGetUserPermissionRequestHandler;
+var useGetAllUserPermissionsRequestHandler = function () {
+    return (0, hooks_1.useLoadingRequestHandler)('GetAllUserPermissions');
+};
+exports.useGetAllUserPermissionsRequestHandler = useGetAllUserPermissionsRequestHandler;
+var useSaveUserPermissionRequestHandler = function () {
+    return (0, hooks_1.useLoadingRequestHandler)('SaveUserPermission');
+};
+exports.useSaveUserPermissionRequestHandler = useSaveUserPermissionRequestHandler;
+var useDeleteUserPermissionRequestHandler = function () {
+    return (0, hooks_1.useLoadingRequestHandler)('DeleteUserPermission');
+};
+exports.useDeleteUserPermissionRequestHandler = useDeleteUserPermissionRequestHandler;

package/dist/services/sqlRequests.d.ts

@@ -9,7 +9,7 @@ export type FieldDTO<T extends string = string> = {
 };
 export type ConditionDTO = {
     field: string;
-    operator: 'lessThan' | 'lessThanOrEqual' | 'lessThanOrEquals' | 'equals' | 'notEquals' | 'greaterThanOrEqual' | 'greaterThanOrEquals' | 'greaterThan' | 'like' | 'contains' | 'notContains' | 'startsWith' | 'endsWith' | 'notLike' | 'inRange' | 'between' | 'isNull' | 'isNotNull' | 'inArray' | 'in' | 'not' | 'and' | 'or';
+    operator: 'isLessThan' | 'isLessThanOrEqual' | 'isLessThanOrEquals' | 'lessThan' | 'lessThanOrEqual' | 'lessThanOrEquals' | 'equals' | 'notEquals' | 'isGreaterThanOrEqual' | 'isGreaterThanOrEquals' | 'isGreaterThan' | 'greaterThanOrEqual' | 'greaterThanOrEquals' | 'greaterThan' | 'like' | 'contains' | 'notContains' | 'startsWith' | 'endsWith' | 'notLike' | 'inRange' | 'between' | 'isNull' | 'isNotNull' | 'inArray' | 'in' | 'not' | 'and' | 'or';
     value?: string | number | boolean | null | (string | number | boolean | null)[];
     children?: ConditionDTO[];
     type?: SqlRequestGridColumn<unknown>['type'];

package/eslint.config.js

@@ -1,3 +1,3 @@
-import { eslintReactConfig } from '@addev-be/framework-utils/eslint/react.config.mjs';
-
-export default [...eslintReactConfig, { ignores: ['dist'] }];
+import { eslintReactConfig } from '@addev-be/framework-utils/eslint/react.config.mjs';
+
+export default [...eslintReactConfig, { ignores: ['dist'] }];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "2.5.20",
+  "version": "2.6.0",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",
@@ -21,7 +21,7 @@
     "update-version": "../../node/update-version.mjs"
   },
   "devDependencies": {
-    "@addev-be/framework-utils": "^2.5.20",
+    "@addev-be/framework-utils": "^2.6.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/react-hooks": "^8.0.1",

package/src/Icons.tsx

@@ -1,138 +1,138 @@
-import { FC, SVGProps, useEffect, useState } from 'react';
-
-import AngleLeftIcon from '../assets/icons/angle-left.svg?react';
-import AngleRightIcon from '../assets/icons/angle-right.svg?react';
-import ArrowDown19Icon from '../assets/icons/arrow-down-1-9.svg?react';
-import ArrowDownAZIcon from '../assets/icons/arrow-down-a-z.svg?react';
-import ArrowDownBigSmallIcon from '../assets/icons/arrow-down-big-small.svg?react';
-import ArrowUp91Icon from '../assets/icons/arrow-up-9-1.svg?react';
-import ArrowUpBigSmallIcon from '../assets/icons/arrow-up-big-small.svg?react';
-import ArrowUpZAIcon from '../assets/icons/arrow-up-z-a.svg?react';
-import ArrowsRotateIcon from '../assets/icons/arrows-rotate.svg?react';
-import ArrowsUpDownIcon from '../assets/icons/arrows-up-down.svg?react';
-import BarsIcon from '../assets/icons/bars.svg?react';
-import CheckIcon from '../assets/icons/check.svg?react';
-import ChevronDownIcon from '../assets/icons/chevron-down.svg?react';
-import ChevronLeftIcon from '../assets/icons/chevron-left.svg?react';
-import ChevronRightIcon from '../assets/icons/chevron-right.svg?react';
-import CircleCheckIcon from '../assets/icons/circle-check.svg?react';
-import CircleInfoIcon from '../assets/icons/circle-info.svg?react';
-import CircleXMarkIcon from '../assets/icons/circle-xmark.svg?react';
-import CopyIcon from '../assets/icons/copy.svg?react';
-import DownIcon from '../assets/icons/down.svg?react';
-import EllipsisIcon from '../assets/icons/ellipsis.svg?react';
-import FilterFullIcon from '../assets/icons/filter-full.svg?react';
-import FilterIcon from '../assets/icons/filter.svg?react';
-import FilterSlashIcon from '../assets/icons/filter-slash.svg?react';
-import FloppyDiskIcon from '../assets/icons/floppy-disk.svg?react';
-import HashtagIcon from '../assets/icons/hashtag.svg?react';
-import ImageSlashIcon from '../assets/icons/image-slash.svg?react';
-import LeftIcon from '../assets/icons/left.svg?react';
-import MagnifierIcon from '../assets/icons/magnifier.svg?react';
-import PhoneIcon from '../assets/icons/phone.svg?react';
-import PlusIcon from '../assets/icons/plus.svg?react';
-import RightIcon from '../assets/icons/right.svg?react';
-import SigmaIcon from '../assets/icons/sigma.svg?react';
-import SortCalendarAscendingIcon from '../assets/icons/sort-calendar-ascending.svg?react';
-import SortCalendarDescendingIcon from '../assets/icons/sort-calendar-descending.svg?react';
-import SpinnerIcon from '../assets/icons/spinner-third.svg?react';
-import TableColumnsIcon from '../assets/icons/table-columns.svg?react';
-import TableFooterIcon from '../assets/icons/table-footer.svg?react';
-import TableFooterSlashIcon from '../assets/icons/table-footer-slash.svg?react';
-import TableIcon from '../assets/icons/table.svg?react';
-import TallyIcon from '../assets/icons/tally.svg?react';
-import TrashCanIcon from '../assets/icons/trash-can.svg?react';
-import TriangleExclamationIcon from '../assets/icons/triangle-exclamation.svg?react';
-import UpIcon from '../assets/icons/up.svg?react';
-import UserTieIcon from '../assets/icons/user-tie.svg?react';
-import XBarIcon from '../assets/icons/x-bar.svg?react';
-import XMarkIcon from '../assets/icons/xmark.svg?react';
-import XMarkLargeIcon from '../assets/icons/xmark-large.svg?react';
-
-type IconFCProps = SVGProps<SVGSVGElement>;
-export type IconFC = FC<IconFCProps>;
-
-type AnimatedIconProps = {
-  icons: FC[];
-  speed?: number;
-};
-
-export const AnimatedIcon: FC<AnimatedIconProps & IconFCProps> = ({
-  icons,
-  speed = 150,
-  ...props
-}) => {
-  const [currentIcon, setCurrentIcon] = useState(0);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentIcon((currentIcon) => (currentIcon + 1) % icons.length);
-    }, speed);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, [icons.length, speed]);
-
-  const Icon = icons[currentIcon];
-  return <Icon {...props} />;
-};
-
-export const LoadingIcon: FC<IconFCProps> = ({ className, ...props }) => (
-  <SpinnerIcon className={`animate-spin ${className}`} {...props} />
-);
-
-export const BlankIcon: FC<IconFCProps> = (props) => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props} />
-);
-
-export {
-  AngleLeftIcon,
-  AngleRightIcon,
-  ArrowDown19Icon,
-  ArrowDownAZIcon,
-  ArrowDownBigSmallIcon,
-  ArrowsRotateIcon,
-  ArrowsUpDownIcon,
-  ArrowUp91Icon,
-  ArrowUpBigSmallIcon,
-  ArrowUpZAIcon,
-  BarsIcon,
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  CircleCheckIcon,
-  CircleInfoIcon,
-  CircleXMarkIcon,
-  CopyIcon,
-  DownIcon,
-  EllipsisIcon,
-  FilterFullIcon,
-  FilterIcon,
-  FilterSlashIcon,
-  FloppyDiskIcon,
-  HashtagIcon,
-  ImageSlashIcon,
-  LeftIcon,
-  MagnifierIcon,
-  PhoneIcon,
-  PlusIcon,
-  RightIcon,
-  SigmaIcon,
-  SortCalendarAscendingIcon,
-  SortCalendarDescendingIcon,
-  SpinnerIcon,
-  TableColumnsIcon,
-  TableFooterIcon,
-  TableFooterSlashIcon,
-  TableIcon,
-  TallyIcon,
-  TrashCanIcon,
-  TriangleExclamationIcon,
-  UpIcon,
-  UserTieIcon,
-  XBarIcon,
-  XMarkIcon,
-  XMarkLargeIcon,
-};
+import { FC, SVGProps, useEffect, useState } from 'react';
+
+import AngleLeftIcon from '../assets/icons/angle-left.svg?react';
+import AngleRightIcon from '../assets/icons/angle-right.svg?react';
+import ArrowDown19Icon from '../assets/icons/arrow-down-1-9.svg?react';
+import ArrowDownAZIcon from '../assets/icons/arrow-down-a-z.svg?react';
+import ArrowDownBigSmallIcon from '../assets/icons/arrow-down-big-small.svg?react';
+import ArrowUp91Icon from '../assets/icons/arrow-up-9-1.svg?react';
+import ArrowUpBigSmallIcon from '../assets/icons/arrow-up-big-small.svg?react';
+import ArrowUpZAIcon from '../assets/icons/arrow-up-z-a.svg?react';
+import ArrowsRotateIcon from '../assets/icons/arrows-rotate.svg?react';
+import ArrowsUpDownIcon from '../assets/icons/arrows-up-down.svg?react';
+import BarsIcon from '../assets/icons/bars.svg?react';
+import CheckIcon from '../assets/icons/check.svg?react';
+import ChevronDownIcon from '../assets/icons/chevron-down.svg?react';
+import ChevronLeftIcon from '../assets/icons/chevron-left.svg?react';
+import ChevronRightIcon from '../assets/icons/chevron-right.svg?react';
+import CircleCheckIcon from '../assets/icons/circle-check.svg?react';
+import CircleInfoIcon from '../assets/icons/circle-info.svg?react';
+import CircleXMarkIcon from '../assets/icons/circle-xmark.svg?react';
+import CopyIcon from '../assets/icons/copy.svg?react';
+import DownIcon from '../assets/icons/down.svg?react';
+import EllipsisIcon from '../assets/icons/ellipsis.svg?react';
+import FilterFullIcon from '../assets/icons/filter-full.svg?react';
+import FilterIcon from '../assets/icons/filter.svg?react';
+import FilterSlashIcon from '../assets/icons/filter-slash.svg?react';
+import FloppyDiskIcon from '../assets/icons/floppy-disk.svg?react';
+import HashtagIcon from '../assets/icons/hashtag.svg?react';
+import ImageSlashIcon from '../assets/icons/image-slash.svg?react';
+import LeftIcon from '../assets/icons/left.svg?react';
+import MagnifierIcon from '../assets/icons/magnifier.svg?react';
+import PhoneIcon from '../assets/icons/phone.svg?react';
+import PlusIcon from '../assets/icons/plus.svg?react';
+import RightIcon from '../assets/icons/right.svg?react';
+import SigmaIcon from '../assets/icons/sigma.svg?react';
+import SortCalendarAscendingIcon from '../assets/icons/sort-calendar-ascending.svg?react';
+import SortCalendarDescendingIcon from '../assets/icons/sort-calendar-descending.svg?react';
+import SpinnerIcon from '../assets/icons/spinner-third.svg?react';
+import TableColumnsIcon from '../assets/icons/table-columns.svg?react';
+import TableFooterIcon from '../assets/icons/table-footer.svg?react';
+import TableFooterSlashIcon from '../assets/icons/table-footer-slash.svg?react';
+import TableIcon from '../assets/icons/table.svg?react';
+import TallyIcon from '../assets/icons/tally.svg?react';
+import TrashCanIcon from '../assets/icons/trash-can.svg?react';
+import TriangleExclamationIcon from '../assets/icons/triangle-exclamation.svg?react';
+import UpIcon from '../assets/icons/up.svg?react';
+import UserTieIcon from '../assets/icons/user-tie.svg?react';
+import XBarIcon from '../assets/icons/x-bar.svg?react';
+import XMarkIcon from '../assets/icons/xmark.svg?react';
+import XMarkLargeIcon from '../assets/icons/xmark-large.svg?react';
+
+type IconFCProps = SVGProps<SVGSVGElement>;
+export type IconFC = FC<IconFCProps>;
+
+type AnimatedIconProps = {
+  icons: FC[];
+  speed?: number;
+};
+
+export const AnimatedIcon: FC<AnimatedIconProps & IconFCProps> = ({
+  icons,
+  speed = 150,
+  ...props
+}) => {
+  const [currentIcon, setCurrentIcon] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIcon((currentIcon) => (currentIcon + 1) % icons.length);
+    }, speed);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [icons.length, speed]);
+
+  const Icon = icons[currentIcon];
+  return <Icon {...props} />;
+};
+
+export const LoadingIcon: FC<IconFCProps> = ({ className, ...props }) => (
+  <SpinnerIcon className={`animate-spin ${className}`} {...props} />
+);
+
+export const BlankIcon: FC<IconFCProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props} />
+);
+
+export {
+  AngleLeftIcon,
+  AngleRightIcon,
+  ArrowDown19Icon,
+  ArrowDownAZIcon,
+  ArrowDownBigSmallIcon,
+  ArrowsRotateIcon,
+  ArrowsUpDownIcon,
+  ArrowUp91Icon,
+  ArrowUpBigSmallIcon,
+  ArrowUpZAIcon,
+  BarsIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  CircleCheckIcon,
+  CircleInfoIcon,
+  CircleXMarkIcon,
+  CopyIcon,
+  DownIcon,
+  EllipsisIcon,
+  FilterFullIcon,
+  FilterIcon,
+  FilterSlashIcon,
+  FloppyDiskIcon,
+  HashtagIcon,
+  ImageSlashIcon,
+  LeftIcon,
+  MagnifierIcon,
+  PhoneIcon,
+  PlusIcon,
+  RightIcon,
+  SigmaIcon,
+  SortCalendarAscendingIcon,
+  SortCalendarDescendingIcon,
+  SpinnerIcon,
+  TableColumnsIcon,
+  TableFooterIcon,
+  TableFooterSlashIcon,
+  TableIcon,
+  TallyIcon,
+  TrashCanIcon,
+  TriangleExclamationIcon,
+  UpIcon,
+  UserTieIcon,
+  XBarIcon,
+  XMarkIcon,
+  XMarkLargeIcon,
+};

package/src/components/auth/LoginForm.tsx

@@ -1,86 +1,86 @@
-import { FC, useCallback, useEffect, useRef, useState } from 'react';
-import { Link, redirect } from 'react-router-dom';
-
-import { Button } from '../forms/Button';
-import { Card } from '../ui/Card';
-import { FormContainer } from './styles';
-import { Input } from '../forms/styles';
-import { Message } from '../ui/Message';
-import { StackedLabel } from '../forms/VerticalLabel';
-import { useAuthentication } from '../../providers/hooks';
-
-export const LoginForm: FC = () => {
-  const [username, setUsername] = useState(
-    localStorage.getItem('username') || ''
-  );
-  const [password, setPassword] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState('');
-  const usernameInputRef = useRef<HTMLInputElement>(null);
-  const passwordInputRef = useRef<HTMLInputElement>(null);
-
-  const { login } = useAuthentication();
-
-  const onLoginClicked = useCallback(() => {
-    setError('');
-    setIsLoading(true);
-    login(username, password).then((success) => {
-      setIsLoading(false);
-      if (success) {
-        localStorage.setItem('username', username);
-        redirect('/');
-      } else {
-        setError('Identifiants invalides');
-      }
-    });
-  }, [login, password, username]);
-
-  useEffect(() => {
-    if (usernameInputRef.current && passwordInputRef.current) {
-      const input = !username
-        ? usernameInputRef.current
-        : passwordInputRef.current;
-      input.select();
-      input.focus();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  if (isLoading) return <div>Chargement...</div>;
-
-  return (
-    <Card>
-      <FormContainer>
-        <StackedLabel label="Adresse e-mail / Nom d'utilisateur">
-          <Input
-            ref={usernameInputRef}
-            type="email"
-            autoComplete="email"
-            required
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-          />
-        </StackedLabel>
-
-        <StackedLabel label="Mot de passe">
-          <Input
-            ref={passwordInputRef}
-            type="password"
-            autoComplete="current-password"
-            required
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-          />
-        </StackedLabel>
-
-        {error && <Message type="error">{error}</Message>}
-
-        <Button $color="primary" onClick={onLoginClicked}>
-          Se connecter
-        </Button>
-
-        <Link to="/recover">Mot de passe oublié ?</Link>
-      </FormContainer>
-    </Card>
-  );
-};
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { Link, redirect } from 'react-router-dom';
+
+import { Button } from '../forms/Button';
+import { Card } from '../ui/Card';
+import { FormContainer } from './styles';
+import { Input } from '../forms/styles';
+import { Message } from '../ui/Message';
+import { StackedLabel } from '../forms/VerticalLabel';
+import { useAuthentication } from '../../providers/hooks';
+
+export const LoginForm: FC = () => {
+  const [username, setUsername] = useState(
+    localStorage.getItem('username') || ''
+  );
+  const [password, setPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const usernameInputRef = useRef<HTMLInputElement>(null);
+  const passwordInputRef = useRef<HTMLInputElement>(null);
+
+  const { login } = useAuthentication();
+
+  const onLoginClicked = useCallback(() => {
+    setError('');
+    setIsLoading(true);
+    login(username, password).then((success) => {
+      setIsLoading(false);
+      if (success) {
+        localStorage.setItem('username', username);
+        redirect('/');
+      } else {
+        setError('Identifiants invalides');
+      }
+    });
+  }, [login, password, username]);
+
+  useEffect(() => {
+    if (usernameInputRef.current && passwordInputRef.current) {
+      const input = !username
+        ? usernameInputRef.current
+        : passwordInputRef.current;
+      input.select();
+      input.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (isLoading) return <div>Chargement...</div>;
+
+  return (
+    <Card>
+      <FormContainer>
+        <StackedLabel label="Adresse e-mail / Nom d'utilisateur">
+          <Input
+            ref={usernameInputRef}
+            type="email"
+            autoComplete="email"
+            required
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+          />
+        </StackedLabel>
+
+        <StackedLabel label="Mot de passe">
+          <Input
+            ref={passwordInputRef}
+            type="password"
+            autoComplete="current-password"
+            required
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </StackedLabel>
+
+        {error && <Message type="error">{error}</Message>}
+
+        <Button $color="primary" onClick={onLoginClicked}>
+          Se connecter
+        </Button>
+
+        <Link to="/recover">Mot de passe oublié ?</Link>
+      </FormContainer>
+    </Card>
+  );
+};

package/src/components/auth/LoginPage.tsx

@@ -1,32 +1,32 @@
-import { FC } from 'react';
-import { Outlet } from 'react-router-dom';
-
-export const LoginPage: FC = () => {
-  return (
-    <div className="flex flex-row h-full w-full">
-      <div className="relative hidden w-0 flex-1 lg:block">
-        <img className="absolute inset-0 h-full w-full object-cover" alt="" />
-      </div>
-      <div className="flex flex-1 flex-col justify-space-evenly overflow-y-auto px-4 py-12 sm:px-6 lg:flex-none lg:px-24 xl:px-36">
-        <div className="mx-auto w-full max-w-sm lg:max-w-96 lg:w-96 xl:max-w-[32rem] xl:w-[32rem]">
-          <div className="text-center">
-            <img
-              className="h-20 w-auto inline-block"
-              src="/logo192.png"
-              alt="Burotel"
-            />
-            <h2 className="mt-8 text-2xl font-bold leading-9 tracking-tight text-gray-900">
-              Connectez-vous
-            </h2>
-          </div>
-
-          <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-[640px]">
-            <div className="bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12">
-              <Outlet />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
+import { FC } from 'react';
+import { Outlet } from 'react-router-dom';
+
+export const LoginPage: FC = () => {
+  return (
+    <div className="flex flex-row h-full w-full">
+      <div className="relative hidden w-0 flex-1 lg:block">
+        <img className="absolute inset-0 h-full w-full object-cover" alt="" />
+      </div>
+      <div className="flex flex-1 flex-col justify-space-evenly overflow-y-auto px-4 py-12 sm:px-6 lg:flex-none lg:px-24 xl:px-36">
+        <div className="mx-auto w-full max-w-sm lg:max-w-96 lg:w-96 xl:max-w-[32rem] xl:w-[32rem]">
+          <div className="text-center">
+            <img
+              className="h-20 w-auto inline-block"
+              src="/logo192.png"
+              alt="Burotel"
+            />
+            <h2 className="mt-8 text-2xl font-bold leading-9 tracking-tight text-gray-900">
+              Connectez-vous
+            </h2>
+          </div>
+
+          <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-[640px]">
+            <div className="bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12">
+              <Outlet />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};