@sqrzro/admin 2.0.0 → 2.1.0-bz.1

package/src/core/TwoFactorSetup/index.tsx

@@ -1,91 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import { useForm, useUniqid } from '@sqrzro/hooks';
-import { AuthService } from '@sqrzro/utility';
-
-import ContentBlock from '../../components/ContentBlock';
-
-import TwoFactorMethodList, { TwoFactorMethods } from '../TwoFactorMethodList';
-import TwoFactorSetupAuthenticator from '../TwoFactorSetupAuthenticator';
-import TwoFactorSetupYubikey from '../TwoFactorSetupYubikey';
-
-interface TwoFactorData {
-    identifier: string;
-    password: string;
-    provider: string;
-    two_factor_code: string; // eslint-disable-line @typescript-eslint/naming-convention
-}
-
-interface TwoFactorFields {
-    name: string;
-    one_time_code: string; // eslint-disable-line @typescript-eslint/naming-convention
-    password: string;
-    provider: string;
-    secret: string;
-}
-
-interface TwoFactorProps {
-    data: TwoFactorData;
-}
-
-function TwoFactor({ data }: TwoFactorProps): React.ReactElement {
-    const uniqid = useUniqid();
-    const [activePanel, setActivePanel] = useState<TwoFactorMethods | null>(null);
-
-    const { formData, isLoading, handleSubmit, setFormData } = useForm<TwoFactorFields>({
-        defaults: {
-            name: `${data.identifier}_${uniqid}`,
-            one_time_code: '', // eslint-disable-line @typescript-eslint/naming-convention, camelcase
-            password: data.password,
-            provider: data.provider,
-            secret: '',
-        },
-        errorMessage: false,
-        hasFieldErrors: false,
-        onSubmitSuccess: () => AuthService.login(),
-        successMessage: false,
-        url: 'auth/two-factor',
-    });
-
-    const handlePanel = (panel: TwoFactorMethods): void => {
-        setActivePanel(panel);
-        setFormData('provider', panel);
-    };
-
-    switch (activePanel) {
-        case TwoFactorMethods.google:
-            return (
-                <TwoFactorSetupAuthenticator
-                    formData={formData}
-                    isLoading={isLoading}
-                    onSubmit={handleSubmit}
-                    setFormData={setFormData}
-                />
-            );
-        case TwoFactorMethods.yubikey:
-            return (
-                <TwoFactorSetupYubikey
-                    formData={formData}
-                    isLoading={isLoading}
-                    onSubmit={handleSubmit}
-                    setFormData={setFormData}
-                />
-            );
-        default:
-            return (
-                <div>
-                    <ContentBlock isCentered>
-                        <p>
-                            You will need to setup two factor authentication (2FA). This protects
-                            your account with an additional login step.
-                        </p>
-                        <p>To get started, select which device you would like to use:</p>
-                    </ContentBlock>
-                    <TwoFactorMethodList onSelect={handlePanel} />
-                </div>
-            );
-    }
-}
-
-export default TwoFactor;

package/src/core/TwoFactorSetupAuthenticator/TwoFactorSetupAuthenticator.module.css

@@ -1,6 +0,0 @@
-.image {
-    display: flex;
-    height: 10rem;
-    justify-content: center;
-    margin-bottom: 3rem;
-}

package/src/core/TwoFactorSetupAuthenticator/index.tsx

@@ -1,100 +0,0 @@
-'use client';
-
-import React, { Fragment, useEffect, useState } from 'react';
-
-import Button from '../../components/Button';
-import CodeInput from '../../components/CodeInput';
-import ContentBlock from '../../components/ContentBlock';
-
-import { ApiService } from '@sqrzro/utility';
-
-// Import styles from './TwoFactorSetupAuthenticator.module.css';
-
-export enum TwoFactorSetupAuthenticatorPanels {
-    image = 'image',
-    code = 'code',
-}
-
-interface TwoFactorFields {
-    name: string;
-    one_time_code: string; // eslint-disable-line @typescript-eslint/naming-convention
-    password: string;
-    provider: string;
-    secret: string;
-}
-
-interface TwoFactorResponse {
-    secret: string;
-    url: string;
-}
-
-interface TwoFactorSetupAuthenticatorProps<T = TwoFactorFields> {
-    formData: T;
-    isLoading: boolean;
-    onSubmit: (event?: React.FormEvent<HTMLFormElement>) => void;
-    setFormData: (key: keyof T, value: T[keyof T]) => void;
-}
-
-function TwoFactorSetupAuthenticator({
-    formData,
-    isLoading,
-    onSubmit,
-    setFormData,
-}: TwoFactorSetupAuthenticatorProps): React.ReactElement | null {
-    const [imageUrl, setImageUrl] = useState('');
-    const [activePanel, setActivePanel] = useState<TwoFactorSetupAuthenticatorPanels | null>(
-        TwoFactorSetupAuthenticatorPanels.image
-    );
-
-    async function getSecret(): Promise<void> {
-        const response = await ApiService.get<TwoFactorResponse>('auth/two_factor/google/secret');
-        setFormData('secret', response.data.secret);
-        setImageUrl(response.data.url);
-    }
-
-    useEffect(() => {
-        void getSecret();
-    }, []);
-
-    switch (activePanel) {
-        case TwoFactorSetupAuthenticatorPanels.image:
-            return (
-                <Fragment>
-                    <ContentBlock isCentered>
-                        <strong>Step One.</strong> Open your Authenticator app and scan the QR code
-                        below:
-                    </ContentBlock>
-                    <div className="/*styles.image*/">
-                        {imageUrl ? <img height="100" src={imageUrl} width="100" /> : null}
-                    </div>
-                    <Button
-                        onClick={(): void => setActivePanel(TwoFactorSetupAuthenticatorPanels.code)}
-                        isFullWidth
-                    >
-                        Next
-                    </Button>
-                </Fragment>
-            );
-        case TwoFactorSetupAuthenticatorPanels.code:
-            return (
-                <Fragment>
-                    <ContentBlock isCentered>
-                        <strong>Step Two.</strong> Verify your identity by entering the code
-                        generated by your Authenticator app:
-                    </ContentBlock>
-                    <CodeInput
-                        isDisabled={isLoading}
-                        name="one_time_code"
-                        onChange={(event): void => setFormData('one_time_code', event.target.value)}
-                        onFinalChange={(): void => onSubmit()}
-                        value={formData.one_time_code}
-                        isAutoFocus
-                    />
-                </Fragment>
-            );
-        default:
-            return null;
-    }
-}
-
-export default TwoFactorSetupAuthenticator;

package/src/core/TwoFactorSetupYubikey/index.tsx

@@ -1,49 +0,0 @@
-import React, { Fragment } from 'react';
-
-import ContentBlock from '../../components/ContentBlock';
-import YubikeyInput from '../YubikeyInput';
-
-interface TwoFactorFields {
-    name: string;
-    one_time_code: string; // eslint-disable-line @typescript-eslint/naming-convention
-    password: string;
-    provider: string;
-    secret: string;
-}
-
-interface TwoFactorSetupYubikeyProps<T = TwoFactorFields> {
-    formData: T;
-    isLoading: boolean;
-    onSubmit: (event?: React.FormEvent<HTMLFormElement>) => void;
-    setFormData: (key: keyof T, value: T[keyof T]) => void;
-}
-
-function TwoFactorSetupYubikey({
-    formData,
-    isLoading,
-    onSubmit,
-    setFormData,
-}: TwoFactorSetupYubikeyProps): React.ReactElement | null {
-    function handleKeyDown(event: React.KeyboardEvent): void {
-        if (event.key === 'Enter') {
-            onSubmit();
-        }
-    }
-
-    return (
-        <Fragment>
-            <ContentBlock isCentered>
-                Verify your identity by entering the code generated by your Authenticator app:
-            </ContentBlock>
-            <YubikeyInput
-                isDisabled={isLoading}
-                name="secret"
-                onChange={(event): void => setFormData('secret', event.target.value)}
-                onKeyDown={handleKeyDown}
-                value={formData.secret}
-            />
-        </Fragment>
-    );
-}
-
-export default TwoFactorSetupYubikey;

package/src/core/TwoFactorYubikey/index.tsx

@@ -1,41 +0,0 @@
-import React, { Fragment } from 'react';
-
-import ContentBlock from '../../components/ContentBlock';
-
-import YubikeyInput from '../YubikeyInput';
-
-import type { InputEventHandler } from '../../utility/interfaces';
-
-interface TwoFactorYubikeyProps {
-    onChange: InputEventHandler<string>;
-    onSubmit: (event?: React.FormEvent<HTMLFormElement>) => void;
-    value: string;
-}
-
-function TwoFactorYubikey({
-    onChange,
-    onSubmit,
-    value,
-}: TwoFactorYubikeyProps): React.ReactElement {
-    function handleKeyDown(event: React.KeyboardEvent): void {
-        if (event.key === 'Enter') {
-            onSubmit();
-        }
-    }
-
-    return (
-        <Fragment>
-            <ContentBlock isCentered>
-                Please verify your identity by pressing the button or gold disc on your Yubikey.
-            </ContentBlock>
-            <YubikeyInput
-                name="two_factor_code"
-                onChange={onChange}
-                onKeyDown={handleKeyDown}
-                value={value}
-            />
-        </Fragment>
-    );
-}
-
-export default TwoFactorYubikey;

package/src/core/WeekCalendarDay/WeekCalendarDay.module.css

@@ -1,32 +0,0 @@
-.root {
-    background: repeating-linear-gradient(var(--clr-grey300), white .3rem, white 6rem);
-    background-position: 0 4rem;
-    border-radius: .5rem;
-    position: relative;
-    width: 13%;
-}
-
-.title {
-    background-color: var(--clr-white);
-    border-radius: .5rem;
-    color: var(--clr-grey700);
-    font-size: var(--fs-sml);
-    font-weight: var(--fw-bold);
-    line-height: 4rem;
-    text-align: center;
-}
-
-.item {
-    background-color: var(--clr-link);
-    border-radius: .2rem;
-    color: var(--clr-white);
-    font-size: var(--fs-sml);
-    left: 1rem;
-    padding: .5rem .8rem;
-    position: absolute;
-    right: 1rem;
-
-    &:hover {
-        color: var(--clr-white);
-    }
-}

package/src/core/WeekCalendarDay/index.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import FormatService from '../../services/FormatService';
-
-import Link from '../../components/Link';
-
-// Import styles from './WeekCalendarDay.module.css';
-
-interface DataItem {
-    id: number;
-    datetime: string;
-    patient: { name: string };
-}
-
-interface TransformedItem extends DataItem {
-    offset: number;
-    to: string;
-}
-
-interface WeekCalendarDayProps {
-    data?: DataItem[] | null;
-    date: Date;
-}
-
-function WeekCalendarDay({ data, date }: WeekCalendarDayProps): React.ReactElement {
-    const filtered: TransformedItem[] = (data || [])
-        .map((item) => {
-            const [itemDate, itemTime] = item.datetime.split(' ');
-
-            if (itemDate !== FormatService.date(date, 'Y-MM-dd')) {
-                return null;
-            }
-
-            const [hours, minutes] = itemTime.split(':');
-            // eslint-disable-next-line @typescript-eslint/no-magic-numbers, no-mixed-operators
-            const offset = (parseInt(hours, 10) - 8) * 60 + parseInt(minutes, 10) + 40;
-
-            return { ...item, offset, to: `/appointments/${item.id}` };
-        })
-        .filter((item): item is TransformedItem => Boolean(item));
-
-    return (
-        <div className="/*styles.root*/">
-            <div className="/*styles.div*/">{FormatService.date(date, 'E dd/MM')}</div>
-            {filtered.map((item) => (
-                <Link key={item.to} to={item.to}>
-                    {FormatService.date(item.datetime, 'HH:mm')} {item.patient.name}
-                </Link>
-            ))}
-        </div>
-    );
-}
-
-WeekCalendarDay.propTypes = {
-    date: PropTypes.instanceOf(Date).isRequired,
-    data: PropTypes.arrayOf(
-        PropTypes.shape({
-            id: PropTypes.number.isRequired,
-            datetime: PropTypes.string.isRequired,
-            patient: PropTypes.shape({
-                name: PropTypes.string.isRequired,
-            }).isRequired,
-        }).isRequired
-    ),
-};
-
-export default WeekCalendarDay;

package/src/core/YubikeyInput/YubikeyInput.module.css

@@ -1,27 +0,0 @@
-.root {
-    position: relative;
-}
-
-.rootIsDisabled {
-    opacity: .3;
-    pointer-events: none;
-}
-
-.progress {
-    background-color: var(--clr-grey200);
-    border-radius: 1rem;
-    height: 1rem;
-    overflow: hidden;
-}
-
-.bar {
-    background-color: var(--clr-warning);
-    display: block;
-    height: 1rem;
-}
-
-.input {
-    left: -999em;
-    opacity: 0;
-    position: absolute;
-}

package/src/core/YubikeyInput/YubikeyInput.spec.tsx

@@ -1,77 +0,0 @@
-import React, { Fragment } from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import TestChangeHandler from '../../utility/TestChangeHandler';
-
-import YubikeyInput from './index';
-
-describe('YubikeyInput', () => {
-    it('should render', () => {
-        render(<YubikeyInput name="lorem" />);
-        expect(screen.getByRole('textbox')).toBeInTheDocument();
-    });
-
-    it('should handle change', async () => {
-        const user = userEvent.setup();
-
-        render(
-            <TestChangeHandler defaultValue="">
-                <YubikeyInput name="lorem" />
-            </TestChangeHandler>
-        );
-
-        await user.type(screen.getByRole('textbox'), 'Ipsum');
-        expect(screen.getByRole('textbox')).toHaveValue('Ipsum');
-        expect(screen.getByTestId('test-change-handler-value')).toHaveTextContent('Ipsum');
-    });
-
-    it('should handle keydown', async () => {
-        const user = userEvent.setup();
-
-        const mockFn = jest.fn();
-        render(<YubikeyInput name="lorem" onKeyDown={mockFn} />);
-
-        await user.type(screen.getByRole('textbox'), 'Ipsum');
-        expect(mockFn).toHaveBeenCalledTimes(5);
-    });
-
-    it('should render 0% progress', () => {
-        const mockFn = jest.fn();
-
-        render(<YubikeyInput name="lorem" onChange={mockFn} value="" />);
-        expect(screen.getByTestId('yubikey-input-progress')).toHaveStyle('width: 0%');
-    });
-
-    it('should render 50% progress', () => {
-        const mockFn = jest.fn();
-        const value = '1111111111111111111111';
-
-        render(<YubikeyInput name="lorem" onChange={mockFn} value={value} />);
-        expect(screen.getByTestId('yubikey-input-progress')).toHaveStyle('width: 50%');
-    });
-
-    it('should render 100% progress', () => {
-        const mockFn = jest.fn();
-        const value = '11111111111111111111111111111111111111111111';
-
-        render(<YubikeyInput name="lorem" onChange={mockFn} value={value} />);
-        expect(screen.getByTestId('yubikey-input-progress')).toHaveStyle('width: 100%');
-    });
-
-    it('should handle forced blur', async () => {
-        const user = userEvent.setup();
-
-        const mockFn = jest.fn();
-        render(
-            <Fragment>
-                <YubikeyInput name="lorem" onKeyDown={mockFn} />
-                <div>Blur</div>
-            </Fragment>
-        );
-
-        expect(screen.getByRole('textbox')).toHaveFocus();
-        await user.click(screen.getByText('Blur'));
-        expect(screen.getByRole('textbox')).toHaveFocus();
-    });
-});

package/src/core/YubikeyInput/index.tsx

@@ -1,76 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-
-import Assistive from '../Assistive';
-
-import type { InputProps } from '../../utility/interfaces';
-
-// Import styles from './YubikeyInput.module.css';
-
-const YUBIKEY_LENGTH = 44;
-const PERCENT = 100;
-
-// .root {
-//     position: relative;
-// }
-
-// .rootIsDisabled {
-//     opacity: .3;
-//     pointer-events: none;
-// }
-
-// .progress {
-//     background-color: var(--clr-grey200);
-//     border-radius: 1rem;
-//     height: 1rem;
-//     overflow: hidden;
-// }
-
-// .bar {
-//     background-color: var(--clr-warning);
-//     display: block;
-//     height: 1rem;
-// }
-
-// .input {
-//     left: -999em;
-//     opacity: 0;
-//     position: absolute;
-// }
-
-function YubikeyInput({
-    isDisabled,
-    name,
-    onChange,
-    onKeyDown,
-    value,
-}: InputProps<string>): React.ReactElement {
-    function handleBlur(event: React.FocusEvent<HTMLInputElement>): void {
-        event.target.focus();
-    }
-
-    return (
-        <div className="relative">
-            <div className="h-2 overflow-hidden rounded-full bg-slate-200">
-                <i
-                    className="block h-2 bg-amber-400"
-                    data-testid="yubikey-input-progress"
-                    style={{ width: `${((value || '').length / YUBIKEY_LENGTH) * PERCENT}%` }}
-                />
-            </div>
-            <Assistive>
-                <input
-                    className="/*styles.input*/"
-                    name={name}
-                    onBlur={handleBlur}
-                    onChange={onChange}
-                    onKeyDown={onKeyDown}
-                    value={value}
-                    autoFocus
-                />
-            </Assistive>
-        </div>
-    );
-}
-
-export default YubikeyInput;

package/src/filters/BooleanFilter/index.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Dropdown from '../../components/Dropdown';
-
-import type { FilterFieldProps, RenderSummaryArgs } from '../../filters/interfaces';
-import { isStringArray } from '../../utility/interfaces';
-import type { StrictSimpleObject } from '../../utility/interfaces';
-
-function getData(data?: StrictSimpleObject[] | string[]): StrictSimpleObject[] {
-    if (!data?.length || !isStringArray(data)) {
-        return [];
-    }
-
-    return [
-        {
-            id: '1',
-            name: data[0],
-        },
-        {
-            id: '0',
-            name: data[1],
-        },
-    ];
-}
-
-function BooleanFilter({ data, ...props }: FilterFieldProps): React.ReactElement {
-    return <Dropdown isPanelOnly {...props} data={getData(data)} />;
-}
-
-BooleanFilter.propTypes = {
-    data: PropTypes.oneOfType([
-        PropTypes.arrayOf(
-            PropTypes.shape({
-                id: PropTypes.string.isRequired,
-                name: PropTypes.string.isRequired,
-            }).isRequired
-        ),
-        PropTypes.arrayOf(PropTypes.string.isRequired),
-    ]),
-};
-
-export function renderSummary({ data, value }: RenderSummaryArgs): string {
-    return getData(data).find((item) => item.id.toString() === value?.toString())?.name || '';
-}
-
-export default BooleanFilter;

package/src/filters/DateFilter/index.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-
-import CalendarInput from '../../components/CalendarInput';
-
-import type { FilterFieldProps, RenderSummaryArgs } from '../../filters/interfaces';
-import FormatService from '../../services/FormatService';
-
-const YEAR_LENGTH = 4;
-
-function DateFilter({ value, ...props }: FilterFieldProps): React.ReactElement {
-    return <CalendarInput {...props} value={String(value)} isPanelOnly isRange />;
-}
-
-export function renderSummary({ value }: RenderSummaryArgs): string {
-    if (!value || typeof value !== 'string') {
-        return '';
-    }
-
-    const splitValues = value.split(',');
-
-    if (splitValues.length === 1) {
-        return '';
-    }
-
-    if (splitValues[0] === splitValues[1]) {
-        return FormatService.date(splitValues[0]);
-    }
-
-    const isSameYear = splitValues[0].startsWith(splitValues[1].substring(0, YEAR_LENGTH));
-
-    return splitValues
-        .map((item) => FormatService.date(item, isSameYear ? 'dd/MM' : 'dd/MM/Y'))
-        .join(' - ');
-}
-
-export default DateFilter;