@addev-be/ui 2.4.2 → 2.4.4

package/dist/components/forms/Form/InputWithLabel.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputWithLabel = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles_1 = require("./styles");
+var InputWithLabel = function (_a) {
+    var label = _a.label, Icon = _a.icon, readOnly = _a.readOnly, children = _a.children;
+    return ((0, jsx_runtime_1.jsxs)(styles_1.InputContainer, { className: readOnly ? 'read-only' : '', children: [(label || Icon) && ((0, jsx_runtime_1.jsxs)("span", { children: [Icon && (0, jsx_runtime_1.jsx)(Icon, {}), label] })), children] }));
+};
+exports.InputWithLabel = InputWithLabel;

package/dist/components/forms/Form/types.d.ts

@@ -0,0 +1,7 @@
+import { IconFC } from '../../../Icons';
+import { PropsWithChildren } from 'react';
+export type InputContainerProps = PropsWithChildren<{
+    label?: string;
+    icon?: IconFC;
+    readOnly?: boolean;
+}>;

package/dist/components/forms/Form/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/search/QuickSearchBar.js

@@ -73,6 +73,8 @@ var QuickSearchBar = function (_a) {
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         });
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InputComponent, { type: "text", ref: fakeInputRef, value: term, onFocus: onFocus, placeholder: placeholder }), dropdownVisible && rect && ((0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, { "$sourceRect": destRect, onClose: function () { return setDropdownVisible(false); }, "$width": rect.width, "$height": [results ? 250 : rect.height, 400], "$autoPositionY": false, children: (0, jsx_runtime_1.jsxs)(styles.QuickSearchDropdownContainer, { children: [(0, jsx_runtime_1.jsx)(InputComponent, { type: "text", ref: inputRef, value: term, placeholder: placeholder, onChange: function (e) { return setTerm(e.target.value); }, onClick: function (e) { return e.stopPropagation(); } }), results && ((0, jsx_runtime_1.jsx)(QuickSearchResults_1.QuickSearchResults, { results: results, definitions: types, term: debouncedTerm }))] }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InputComponent, { type: "text", ref: fakeInputRef, value: term, onFocus: onFocus, placeholder: placeholder }), dropdownVisible && rect && ((0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, { "$sourceRect": destRect, onClose: function () { return setDropdownVisible(false); }, "$width": rect.width, "$height": [results ? 250 : rect.height, 400], "$autoPositionY": false, children: (0, jsx_runtime_1.jsxs)(styles.QuickSearchDropdownContainer, { children: [(0, jsx_runtime_1.jsx)(InputComponent, { type: "text", ref: inputRef, value: term, placeholder: placeholder, onChange: function (e) { return setTerm(e.target.value); }, onClick: function (e) { return e.stopPropagation(); }, onPaste: function (e) {
+                                e.clipboardData.getData('text');
+                            } }), results && ((0, jsx_runtime_1.jsx)(QuickSearchResults_1.QuickSearchResults, { results: results, definitions: types, term: debouncedTerm }))] }) }))] }));
 };
 exports.QuickSearchBar = QuickSearchBar;

package/dist/config/types.d.ts

@@ -0,0 +1,11 @@
+export type EnvType = 'dev' | 'test' | 'staging' | 'prod';
+export type Config = {
+    webSocketUrl: string;
+    httpServerUrl: `${string}/`;
+    invoicingEnabled?: boolean;
+};
+type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+export type PartialConfig = DeepPartial<Config>;
+export {};

package/dist/config/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/helpers/react.d.ts

@@ -0,0 +1,2 @@
+import { ForwardRefExoticComponent, ForwardRefRenderFunction, PropsWithoutRef, RefAttributes } from 'react';
+export declare const forwardRefGeneric: <T, P = {}>(render: ForwardRefRenderFunction<T, PropsWithoutRef<P>>) => ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

package/dist/helpers/react.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.forwardRefGeneric = void 0;
+var react_1 = require("react");
+var forwardRefGeneric = function (render) {
+    return (0, react_1.forwardRef)(render);
+};
+exports.forwardRefGeneric = forwardRefGeneric;

package/dist/helpers/styled/index.d.ts

@@ -0,0 +1 @@
+export * from './space';

package/dist/helpers/styled/index.js

@@ -0,0 +1,17 @@
+"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 __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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./space"), exports);

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/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.4.2",
+  "version": "2.4.4",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",
@@ -20,7 +20,7 @@
     "update-version": "../../node/update-version.mjs"
   },
   "devDependencies": {
-    "@addev-be/framework-utils": "^2.4.2",
+    "@addev-be/framework-utils": "^2.4.4",
     "@types/lodash": "^4.17.20",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",

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