@addev-be/ui 0.19.0 → 0.19.1

package/dist/providers/ThemeProvider/defaultTheme.js

@@ -376,12 +376,6 @@ exports.defaultTheme = {
         '32': '8rem',
         '40': '10rem',
         '48': '12rem',
-        '56': '14rem',
-        '64': '16rem',
-        '72': '18rem',
-        '80': '20rem',
-        '96': '24rem',
-        '128': '32rem',
     },
     sizes: {
         '0': '0',
@@ -396,19 +390,12 @@ exports.defaultTheme = {
         '8': '2rem',
         '10': '2.5rem',
         '12': '3rem',
-        '14': '3.5rem',
         '16': '4rem',
         '20': '5rem',
         '24': '6rem',
         '32': '8rem',
         '40': '10rem',
         '48': '12rem',
-        '56': '14rem',
-        '64': '16rem',
-        '72': '18rem',
-        '80': '20rem',
-        '96': '24rem',
-        '128': '32rem',
     },
     rounded: {
         none: '0',

package/dist/providers/ThemeProvider/types.d.ts

@@ -5,11 +5,10 @@ export type ThemeRawColor = 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'r
 export type ThemePredefinedColor = 'primary' | 'secondary' | 'neutral' | 'success' | 'warning' | 'danger' | 'info';
 export type ThemeColor = ThemeRawColor | ThemePredefinedColor;
 export type ThemeColorReference = ThemeColor | ThemeColorDefinition;
-export type ThemeColorWithIntensity = `${ThemeColor}-${ThemeColorIntensity}`;
 export type ThemeTextSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
 export type ThemeFontFamily = 'sans' | 'serif' | 'mono';
 export type ThemeFontWeight = 'light' | 'normal' | 'bold';
-export type ThemeSpace = '0' | '0_5' | '1' | '1_5' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12' | '14' | '16' | '20' | '24' | '32' | '40' | '48' | '56' | '64' | '72' | '80' | '96' | '128';
+export type ThemeSpace = '0' | '0_5' | '1' | '1_5' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12' | '16' | '20' | '24' | '32' | '40' | '48';
 export type ThemeSize = '0' | '0_5' | '1' | '1_5' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12' | '16' | '20' | '24' | '32' | '40' | '48';
 export type ThemeRounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
 export type ThemeShadow = 'sm' | 'md' | 'lg' | 'xl' | '2xl';

package/dist/providers/UiProviders/index.js

@@ -32,7 +32,6 @@ var react_1 = require("react");
 var PortalsProvider_1 = require("../PortalsProvider");
 var SettingsProvider_1 = require("../SettingsProvider");
 var ThemeProvider_1 = require("../ThemeProvider/ThemeProvider");
-var TrackingProvider_1 = require("../TrackingProvider");
 var defaultTheme_1 = require("../ThemeProvider/defaultTheme");
 exports.UiContext = (0, react_1.createContext)({
     rootRect: new DOMRect(),
@@ -58,6 +57,6 @@ var UiProviders = function (_a) {
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [rootRef.current]);
-    return ((0, jsx_runtime_1.jsx)(ThemeProvider_1.ThemeProvider, { "$theme": defaultTheme_1.defaultTheme, "$darkMode": $darkMode, children: (0, jsx_runtime_1.jsx)(exports.UiContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)(styles.Root, { ref: rootRef, children: (0, jsx_runtime_1.jsx)(SettingsProvider_1.SettingsProvider, { children: (0, jsx_runtime_1.jsx)(TrackingProvider_1.TrackingProvider, { children: (0, jsx_runtime_1.jsx)(PortalsProvider_1.PortalsProvider, { children: children }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(ThemeProvider_1.ThemeProvider, { "$theme": defaultTheme_1.defaultTheme, "$darkMode": $darkMode, children: (0, jsx_runtime_1.jsx)(exports.UiContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)(styles.Root, { ref: rootRef, children: (0, jsx_runtime_1.jsx)(SettingsProvider_1.SettingsProvider, { children: (0, jsx_runtime_1.jsx)(PortalsProvider_1.PortalsProvider, { children: children }) }) }) }) }));
 };
 exports.UiProviders = UiProviders;

package/dist/providers/index.d.ts

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

package/dist/providers/index.js

@@ -17,7 +17,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./AuthenticationProvider"), exports);
 __exportStar(require("./PortalsProvider"), exports);
 __exportStar(require("./ThemeProvider"), exports);
-__exportStar(require("./TrackingProvider"), exports);
 __exportStar(require("./UiProviders"), exports);
-__exportStar(require("./TrackingProvider/hooks"), exports);
 __exportStar(require("./hooks"), exports);

package/dist/services/globalSearch.d.ts

@@ -1,9 +1,8 @@
-import { ConditionDTO, SqlRequestRow } from './sqlRequests';
+import { SqlRequestRow } from './sqlRequests';
 export type GlobalSearchRequestDTO = {
     types: string[];
     searchTerm: string;
     limit?: number;
-    conditions?: ConditionDTO[];
 };
 export type GlobalSearchResponseDTO<T = any> = {
     data: Record<string, SqlRequestRow<T>[]>;

package/dist/services/index.d.ts

@@ -3,16 +3,9 @@ export * from './HttpService';
 export * from './hooks';
 export * from './globalSearch';
 export * from './requests/auth';
-export * from './requests/generic';
-export * from './requests/tracking';
 export * from './requests/users';
 export * from './requests/userProfiles';
 export * from './types/auth';
 export * from './types/base';
-export * from './types/generic';
-export * from './types/tracking';
 export * from './types/users';
 export * from './types/userProfiles';
-export * from './sqlRequests';
-export * from './updateSqlRequests';
-export * as SmartQueries from './smartQueries';

package/dist/services/index.js

@@ -10,38 +10,18 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
 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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SmartQueries = void 0;
 __exportStar(require("./WebSocketService"), exports);
 __exportStar(require("./HttpService"), exports);
 __exportStar(require("./hooks"), exports);
 __exportStar(require("./globalSearch"), exports);
 __exportStar(require("./requests/auth"), exports);
-__exportStar(require("./requests/generic"), exports);
-__exportStar(require("./requests/tracking"), exports);
 __exportStar(require("./requests/users"), exports);
 __exportStar(require("./requests/userProfiles"), exports);
 __exportStar(require("./types/auth"), exports);
 __exportStar(require("./types/base"), exports);
-__exportStar(require("./types/generic"), exports);
-__exportStar(require("./types/tracking"), exports);
 __exportStar(require("./types/users"), exports);
 __exportStar(require("./types/userProfiles"), exports);
-__exportStar(require("./sqlRequests"), exports);
-__exportStar(require("./updateSqlRequests"), exports);
-exports.SmartQueries = __importStar(require("./smartQueries"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.19.0",
+  "version": "0.19.1",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",
@@ -20,7 +20,7 @@
     "update-version": "../../node/update-version.mjs"
   },
   "devDependencies": {
-    "@addev-be/framework-utils": "^0.19.0",
+    "@addev-be/framework-utils": "^0.19.1",
     "@types/lodash": "^4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

package/src/Icons.tsx

@@ -1,134 +1,136 @@
-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 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 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,
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  CircleCheckIcon,
-  CircleInfoIcon,
-  CircleXMarkIcon,
-  CopyIcon,
-  DownIcon,
-  EllipsisIcon,
-  FilterFullIcon,
-  FilterIcon,
-  FilterSlashIcon,
-  HashtagIcon,
-  ImageSlashIcon,
-  LeftIcon,
-  MagnifierIcon,
-  PhoneIcon,
-  PlusIcon,
-  RightIcon,
-  SigmaIcon,
-  SortCalendarAscendingIcon,
-  SortCalendarDescendingIcon,
-  SpinnerIcon,
-  TableColumnsIcon,
-  TableFooterIcon,
-  TableFooterSlashIcon,
-  TableIcon,
-  TallyIcon,
-  TriangleExclamationIcon,
-  UpIcon,
-  UserTieIcon,
-  XBarIcon,
-  XMarkIcon,
-  XMarkLargeIcon,
-  FloppyDiskIcon,
-};
+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 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,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  CircleCheckIcon,
+  CircleInfoIcon,
+  CircleXMarkIcon,
+  CopyIcon,
+  DownIcon,
+  EllipsisIcon,
+  FilterFullIcon,
+  FilterIcon,
+  FilterSlashIcon,
+  HashtagIcon,
+  ImageSlashIcon,
+  LeftIcon,
+  MagnifierIcon,
+  PhoneIcon,
+  PlusIcon,
+  RightIcon,
+  SigmaIcon,
+  SortCalendarAscendingIcon,
+  SortCalendarDescendingIcon,
+  SpinnerIcon,
+  TableColumnsIcon,
+  TableFooterIcon,
+  TableFooterSlashIcon,
+  TableIcon,
+  TallyIcon,
+  TrashCanIcon,
+  TriangleExclamationIcon,
+  UpIcon,
+  UserTieIcon,
+  XBarIcon,
+  XMarkIcon,
+  XMarkLargeIcon,
+  FloppyDiskIcon,
+};

package/src/components/auth/LoginForm.tsx

@@ -1,84 +1,84 @@
-import { Button, Input } from '../forms';
-import { Card, Message } from '../ui';
-import { FC, useCallback, useEffect, useRef, useState } from 'react';
-import { Link, redirect } from 'react-router-dom';
-
-import { FormContainer } from './styles';
-import { StackedLabel } from '../forms/VerticalLabel';
-import { useAuthentication } from '../../providers';
-
-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 { Button, Input } from '../forms';
+import { Card, Message } from '../ui';
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { Link, redirect } from 'react-router-dom';
+
+import { FormContainer } from './styles';
+import { StackedLabel } from '../forms/VerticalLabel';
+import { useAuthentication } from '../../providers';
+
+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>
+  );
+};