@addev-be/ui 0.19.1 → 0.19.3

package/dist/services/types/generic.js

@@ -0,0 +1,79 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    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 __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.genericDeleteResponseDtoCodec = exports.genericDeleteRequestDtoCodec = exports.genericArchiveResponseDtoCodec = exports.genericArchiveRequestDtoCodec = exports.getGenericSaveResponseDtoCodec = exports.getGenericSaveRequestDtoCodec = exports.getGenericGetAllResponseDtoCodec = exports.genericGetAllRequestDtoCodec = exports.getGenericGetResponseDtoCodec = exports.genericGetRequestDtoCodec = void 0;
+var t = __importStar(require("io-ts"));
+exports.genericGetRequestDtoCodec = t.type({
+    id: t.string,
+}, 'GenericGetRequestDTO');
+var getGenericGetResponseDtoCodec = function (codec) {
+    return t.type({
+        status: t.number,
+        data: codec,
+    });
+};
+exports.getGenericGetResponseDtoCodec = getGenericGetResponseDtoCodec;
+/*****/
+exports.genericGetAllRequestDtoCodec = t.type({}, 'GenericGetAllRequestDTO');
+var getGenericGetAllResponseDtoCodec = function (codec) {
+    return t.type({
+        status: t.number,
+        data: t.array(codec),
+    });
+};
+exports.getGenericGetAllResponseDtoCodec = getGenericGetAllResponseDtoCodec;
+/*****/
+var getGenericSaveRequestDtoCodec = function (codec) {
+    return t.type({
+        data: codec,
+    });
+};
+exports.getGenericSaveRequestDtoCodec = getGenericSaveRequestDtoCodec;
+var getGenericSaveResponseDtoCodec = function (codec) {
+    return t.type({
+        status: t.number,
+        data: codec,
+    });
+};
+exports.getGenericSaveResponseDtoCodec = getGenericSaveResponseDtoCodec;
+/*****/
+exports.genericArchiveRequestDtoCodec = t.intersection([
+    t.type({
+        ids: t.array(t.string),
+    }),
+    t.partial({
+        archived: t.boolean,
+    }),
+], 'GenericArchiveRequestDTO');
+exports.genericArchiveResponseDtoCodec = t.type({
+    status: t.array(t.number),
+}, 'GenericArchiveResponseDTO');
+/*****/
+exports.genericDeleteRequestDtoCodec = t.type({
+    ids: t.array(t.string),
+}, 'GenericDeleteRequestDTO');
+exports.genericDeleteResponseDtoCodec = t.type({
+    status: t.array(t.number),
+}, 'GenericDeleteResponseDTO');

package/dist/services/types/tracking.d.ts

@@ -0,0 +1,24 @@
+import * as t from 'io-ts';
+export declare const trackingEventDtoCodec: t.TypeC<{
+    name: t.StringC;
+    details: t.RecordC<t.StringC, t.UnionC<[t.StringC, t.NumberC, t.BooleanC, t.NullC]>>;
+    id: t.UnionC<[t.StringC, t.NullC]>;
+}>;
+export type TrackingEventDTO = t.TypeOf<typeof trackingEventDtoCodec>;
+export declare const sendTrackingEventRequestDtoCodec: t.TypeC<{
+    data: t.TypeC<{
+        name: t.StringC;
+        details: t.RecordC<t.StringC, t.UnionC<[t.StringC, t.NumberC, t.BooleanC, t.NullC]>>;
+        id: t.UnionC<[t.StringC, t.NullC]>;
+    }>;
+}>;
+export declare const sendTrackingEventResponseDtoCodec: t.TypeC<{
+    status: t.NumberC;
+    data: t.TypeC<{
+        name: t.StringC;
+        details: t.RecordC<t.StringC, t.UnionC<[t.StringC, t.NumberC, t.BooleanC, t.NullC]>>;
+        id: t.UnionC<[t.StringC, t.NullC]>;
+    }>;
+}>;
+export type SendTrackingEventRequestDTO = t.TypeOf<typeof sendTrackingEventRequestDtoCodec>;
+export type SendTrackingEventResponseDTO = t.TypeOf<typeof sendTrackingEventResponseDtoCodec>;

package/dist/services/types/tracking.js

@@ -0,0 +1,47 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    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 __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.sendTrackingEventResponseDtoCodec = exports.sendTrackingEventRequestDtoCodec = exports.trackingEventDtoCodec = void 0;
+var t = __importStar(require("io-ts"));
+var base_1 = require("./base");
+exports.trackingEventDtoCodec = t.type(__assign(__assign({}, base_1.baseModelDtoCodec.props), { name: t.string, details: t.record(t.string, t.union([t.string, t.number, t.boolean, t.null])) }), 'TrackingEventDTO');
+exports.sendTrackingEventRequestDtoCodec = t.type({
+    data: exports.trackingEventDtoCodec,
+}, 'SendTrackingEventRequestDTO');
+exports.sendTrackingEventResponseDtoCodec = t.type({
+    status: t.number,
+    data: exports.trackingEventDtoCodec,
+}, 'SendTrackingEventResponseDTO');

package/dist/services/updateSqlRequests.d.ts

@@ -0,0 +1,24 @@
+export type UpdateSqlRequestDTO = {
+    type: string;
+    added: {
+        [id: string]: {
+            [field: string]: string | number | boolean | null | undefined;
+        };
+    };
+    updated: {
+        [id: string]: {
+            [field: string]: string | number | boolean | null | undefined;
+        };
+    };
+};
+export type UpdateSqlResponseDTO = {
+    results: {
+        [id: string]: {
+            status: number;
+            error?: string;
+        };
+    };
+};
+type UpdateSqlRequestHandler = (request: UpdateSqlRequestDTO) => Promise<UpdateSqlResponseDTO>;
+export declare const useUpdateSqlRequestHandler: (name: string) => UpdateSqlRequestHandler;
+export {};

package/dist/services/updateSqlRequests.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUpdateSqlRequestHandler = void 0;
+var hooks_1 = require("./hooks");
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var useUpdateSqlRequestHandler = function (name) { return (0, hooks_1.useWebSocketRequestHandler)(name); };
+exports.useUpdateSqlRequestHandler = useUpdateSqlRequestHandler;

package/package.json

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

package/src/Icons.tsx

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