components#Modal JavaScript Examples

UploadKeyPairsModal = () => {
    const mediator = useMediator();

    const [invalidFile, setInvalidFile] = useState(false);

    const readFile = (e) => {
        const file = e.target.files[0];
        const reader = new FileReader();

        reader.onload = function (e) {
            const json = JSON.parse(e.target.result);
            if (
                json.signing === undefined ||
                json.encryption === undefined ||
                json.provider === undefined
            )
                setInvalidFile(true);
            else mediator.keyPairs = json;
        };

        reader.readAsBinaryString(file);
    };

    let notice;

    if (invalidFile)
        notice = (
            <Message type="danger">
                <T t={t} k="upload-key-pairs.invalid-file" />
            </Message>
        );
    else notice = <T t={t} k="upload-key-pairs.notice" />;

    const footer = (
        <Form>
            <FieldSet>
                <label htmlFor="file-upload" className="custom-file-upload">
                    <T t={t} k="upload-key-pairs.input" />
                    <input
                        id="file-upload"
                        className="bulma-input"
                        type="file"
                        onChange={(e) => readFile(e)}
                    />
                </label>
            </FieldSet>
        </Form>
    );
    return (
        <Modal
            footer={footer}
            className="kip-upload-key-pairs"
            title={<T t={t} k="upload-key-pairs.title" />}
        >
            {notice}
        </Modal>
    );
}

TestQueuesModal = withRouter(
    withActions(({ keyPairs, router, testQueues, testQueuesAction }) => {
        const [initialized, setInitialized] = useState(false);

        useEffect(() => {
            if (initialized) return;
            setInitialized(true);
            testQueuesAction(keyPairs);
        });

        const readFile = (e) => {
            const file = e.target.files[0];
            const reader = new FileReader();

            reader.onload = function (e) {
                const json = JSON.parse(e.target.result);
                testQueuesAction(keyPairs, json);
            };

            reader.readAsBinaryString(file);
        };

        let notice;

        const { status } = testQueues;

        if (status === 'invalid')
            notice = (
                <Message type="danger">
                    <T t={t} k="upload-queues.invalid-file" />
                </Message>
            );
        else if (status === 'valid')
            notice = (
                <Message type="success">
                    <T t={t} k="upload-queues.valid-file" />
                </Message>
            );
        else notice = <T t={t} k="upload-queues.notice" />;

        const footer = (
            <Form>
                <FieldSet>
                    <label htmlFor="file-upload" className="custom-file-upload">
                        <T t={t} k="upload-queues.input" />
                        <input
                            id="file-upload"
                            disabled={
                                keyPairs === undefined || keyPairs.data === null
                            }
                            className="bulma-input"
                            type="file"
                            onChange={(e) => readFile(e)}
                        />
                    </label>
                </FieldSet>
            </Form>
        );
        return (
            <Modal
                footer={footer}
                onClose={() => router.navigateToUrl('/mediator/settings')}
                className="kip-upload-file"
                title={<T t={t} k="upload-queues.title" />}
            >
                {notice}
            </Modal>
        );
    }, [])
)

Providers = ({ action, id }) => {
    const router = useRouter();
    const mediator = useMediator();
    const [view, setView] = useState('pending');

    useInterval(async () => {
        await mediator.pendingProviders().get();
        await mediator.verifiedProviders().get();
    }, 10000);

    const render = () => {
        const providers =
            view === 'pending'
                ? mediator.pendingProviders().result()
                : mediator.verifiedProviders().result();

        const showProvider = (i) => {
            const id = buf2hex(b642buf(i));
            router.navigateToUrl(`/mediator/providers/show/${id}`);
        };

        let modal;

        const closeModal = () => router.navigateToUrl('/mediator/providers');

        if (action === 'show' && id !== undefined) {
            const base64Id = buf2b64(hex2buf(id));
            const provider = providers.data.find(
                (provider) => provider.data.publicKeys.signing === base64Id
            );

            const doConfirmProvider = async () => {
                const result = await mediator.confirmProvider(provider);
                console.log(result);
            };

            if (provider !== undefined)
                modal = (
                    <Modal
                        title={<T t={t} k="providers.edit" />}
                        save={<T t={t} k="providers.confirm" />}
                        onSave={doConfirmProvider}
                        saveType="success"
                        onClose={closeModal}
                        onCancel={closeModal}
                    >
                        <div className="kip-provider-data">
                            <T t={t} k="providers.confirmText" />
                            <table className="bulma-table bulma-is-fullwidth bulma-is-striped">
                                <thead>
                                    <tr>
                                        <th>
                                            <T t={t} k="provider-data.field" />
                                        </th>
                                        <th>
                                            <T t={t} k="provider-data.value" />
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <T t={t} k="provider-data.name" />
                                        </td>
                                        <td>{provider.data.name}</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <T t={t} k="provider-data.street" />
                                        </td>
                                        <td>{provider.data.street}</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <T t={t} k="provider-data.city" />
                                        </td>
                                        <td>{provider.data.city}</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <T
                                                t={t}
                                                k="provider-data.zipCode"
                                            />
                                        </td>
                                        <td>{provider.data.zipCode}</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <T t={t} k="provider-data.email" />
                                        </td>
                                        <td>{provider.data.email}</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <T t={t} k="provider-data.phone" />
                                        </td>
                                        <td>{provider.data.phone}</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <T
                                                t={t}
                                                k="provider-data.description"
                                            />
                                        </td>
                                        <td>{provider.data.description}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </Modal>
                );
        }

        const providerItems = providers.data
            .sort(sortProviderByDate)
            .map((provider) => (
                <ListItem
                    onClick={() =>
                        showProvider(provider.data.publicKeys.signing)
                    }
                    key={provider.data.publicKeys.signing}
                    isCard
                >
                    <ListColumn size="md">{provider.data.name}</ListColumn>
                    <ListColumn size="md">
                        {provider.data.street} · {provider.data.city}
                    </ListColumn>
                </ListItem>
            ));

        return (
            <CardContent>
                <div className="kip-providers">
                    {modal}
                    <DropdownMenu
                        title={
                            <F>
                                <Icon icon="check-circle" />
                                <T t={t} k={`providers.${view}`} />
                            </F>
                        }
                    >
                        <DropdownMenuItem
                            icon="check-circle"
                            onClick={() => setView('verified')}
                        >
                            <T t={t} k="providers.verified" />
                        </DropdownMenuItem>
                        <DropdownMenuItem
                            icon="exclamation-circle"
                            onClick={() => setView('pending')}
                        >
                            <T t={t} k="providers.pending" />
                        </DropdownMenuItem>
                    </DropdownMenu>
                    <List>
                        <ListHeader>
                            <ListColumn size="md">
                                <T t={t} k="providers.name" />
                            </ListColumn>
                            <ListColumn size="md">
                                <T t={t} k="providers.address" />
                            </ListColumn>
                        </ListHeader>
                        {providerItems}
                    </List>
                </div>
            </CardContent>
        );
    };
    return (
        <WithLoader
            resources={[
                mediator.pendingProviders().result(),
                mediator.verifiedProviders().result(),
            ]}
            renderLoaded={render}
        />
    );
}

BaseSettings = ({
    type,
    settings,
    keyPairs,
    keyPairsAction,
    action,
    secondaryAction,
    id,
    router,
}) => {
    let modal;

    const [initialized, setInitialized] = useState(false);
    const [loggingOut, setLoggingOut] = useState(false);

    useEffect(() => {
        if (initialized) return;
        setInitialized(true);
        keyPairsAction();
    });

    const cancel = () => {
        router.navigateToUrl('/mediator/settings');
    };

    const logOut = () => {
        setLoggingOut(true);

        const backend = settings.get('backend');
        backend.local.deleteAll('mediator::');
        router.navigateToUrl('/mediator/logged-out');
    };

    if (action === 'test-queues') {
        modal = <TestQueuesModal keyPairs={keyPairs} />;
    } else if (action === 'logout') {
        modal = (
            <Modal
                onClose={cancel}
                save={<T t={t} k="log-out" />}
                disabled={loggingOut}
                waiting={loggingOut}
                title={<T t={t} k="log-out-modal.title" />}
                onCancel={cancel}
                onSave={logOut}
                saveType="warning"
            >
                <p>
                    <T
                        t={t}
                        k={
                            loggingOut
                                ? 'log-out-modal.logging-out'
                                : 'log-out-modal.text'
                        }
                    />
                </p>
            </Modal>
        );
    }

    return (
        <F>
            {modal}
            <CardContent>
                <div className="kip-mediator-settings">
                    <h2>
                        <T t={t} k="test-queues.title" />
                    </h2>
                    <p>
                        <T t={t} k="test-queues.text" />
                    </p>
                    <div className="kip-buttons">
                        <Button
                            type="success"
                            href="/mediator/settings/test-queues"
                        >
                            <T t={t} k="test-queues.button" />
                        </Button>
                    </div>
                </div>
            </CardContent>
            <CardFooter>
                <div className="kip-buttons">
                    <Button type="warning" href="/mediator/settings/logout">
                        <T t={t} k="log-out" />
                    </Button>
                </div>
            </CardFooter>
        </F>
    );
}

NewAppointment = withForm(
    ({ route, action, id, form: { valid, error, data, set, reset } }) => {
        let actionUrl = '';
        const settings = useSettings();
        const router = useRouter();
        if (action !== undefined) actionUrl = `/${action}`;
        if (id !== undefined) actionUrl += `/view/${id}`;
        const [saving, setSaving] = useState(false);
        const cancel = () =>
            router.navigateToUrl(`/provider/schedule${actionUrl}`);

        let appointment;

        if (id !== undefined)
            appointment = appointments.find((app) => hexId(app.id) === id);

        const save = () => {
            let action;
            setSaving(true);
            // we remove unnecessary fields like 'time' and 'date'
            delete data.time;
            delete data.date;
            if (appointment !== undefined) action = updateAppointmentAction;
            else action = createAppointmentAction;
            const promise = action(data, appointment);
            promise.finally(() => setSaving(false));
            promise.then(() => {
                // we reload the appointments
                openAppointmentsAction();
                // and we go back to the schedule view
                router.navigateToUrl(`/provider/schedule${actionUrl}`);
            });
        };

        useEffectOnce(() => {
            if (appointment !== undefined) {
                const appointmentData = {
                    time: formatTime(appointment.timestamp),
                    date: formatDate(appointment.timestamp),
                    slots: appointment.slots,
                    duration: appointment.duration,
                };
                for (const [_, v] of Object.entries(properties)) {
                    for (const [kk, _] of Object.entries(v.values)) {
                        if (appointment[kk] !== undefined)
                            appointmentData[kk] = true;
                        else delete appointmentData[kk];
                    }
                }
                reset(appointmentData);
            } else {
                const newData = {
                    duration: data.duration || 30,
                    slots: data.slots || 1,
                };

                let firstProperty;
                let found = false;
                addProps: for (const [_, v] of Object.entries(properties)) {
                    for (const [kk, _] of Object.entries(v.values)) {
                        if (firstProperty === undefined) firstProperty = kk;
                        if (data[kk] !== undefined) {
                            found = true;
                            newData[kk] = true;
                            break addProps;
                        }
                    }
                }
                if (!found) newData[firstProperty] = true;

                if (route.hashParams !== undefined) {
                    if (route.hashParams.timestamp !== undefined) {
                        const date = new Date(route.hashParams.timestamp);
                        newData.time = formatTime(date);
                        newData.date = formatDate(date);
                    }
                }
                reset(newData);
            }
        });

        const properties = settings.get('appointmentProperties');

        const apptProperties = Object.entries(properties).map(([k, v]) => {
            const options = Object.entries(v.values).map(([kv, vv]) => ({
                value: kv,
                key: vv,
                title: <T t={properties} k={`${k}.values.${kv}`} />,
            }));

            let currentOption;

            for (const [k, v] of Object.entries(data)) {
                for (const option of options) {
                    if (k === option.value && v === true) currentOption = k;
                }
            }

            const changeTo = (option) => {
                const newData = { ...data };
                for (const option of options) newData[option.value] = undefined;
                newData[option.value] = true;
                reset(newData);
            };

            return (
                <React.Fragment key={k}>
                    <h2>
                        <T t={properties} k={`${k}.title`} />
                    </h2>
                    <RichSelect
                        options={options}
                        value={currentOption}
                        onChange={(option) => changeTo(option)}
                    />
                </React.Fragment>
            );
        });

        const durations = [
            5, 10, 15, 20, 30, 45, 60, 90, 120, 150, 180, 210, 240,
        ].map((v) => ({
            value: v,
            title: (
                <T
                    t={t}
                    k={`schedule.appointment.duration.title`}
                    duration={v}
                />
            ),
        }));

        return (
            <Modal
                saveDisabled={!valid || saving}
                cancelDisabled={saving}
                closeDisabled={saving}
                className="kip-new-appointment"
                onSave={save}
                waiting={saving}
                onCancel={cancel}
                onClose={cancel}
                title={
                    <T
                        t={t}
                        k={
                            appointment !== undefined
                                ? 'edit-appointment.title'
                                : 'new-appointment.title'
                        }
                    />
                }
            >
                <FormComponent>
                    <FieldSet>
                        <div className="kip-field">
                            <Label htmlFor="date">
                                <T t={t} k="new-appointment.date" />
                            </Label>
                            <ErrorFor error={error} field="date" />
                            <input
                                value={data.date || ''}
                                type="date"
                                className="bulma-input"
                                onChange={(e) => set('date', e.target.value)}
                            />
                        </div>
                        <div className="kip-field">
                            <Label htmlFor="time">
                                <T t={t} k="new-appointment.time" />
                            </Label>
                            <ErrorFor error={error} field="time" />
                            <input
                                type="time"
                                className="bulma-input"
                                value={data.time || ''}
                                onChange={(e) => set('time', e.target.value)}
                                step={60}
                            />
                        </div>
                        <div className="kip-field kip-is-fullwidth kip-slider">
                            <Label htmlFor="slots">
                                <T t={t} k="new-appointment.slots" />
                            </Label>
                            <ErrorFor error={error} field="slots" />
                            <input
                                type="number"
                                className="bulma-input"
                                value={data.slots || 1}
                                onChange={(e) =>
                                    set('slots', parseInt(e.target.value))
                                }
                                step={1}
                                min={1}
                                max={50}
                            />
                        </div>
                        <div className="kip-field kip-is-fullwidth">
                            <RichSelect
                                id="duration"
                                value={data.duration || 30}
                                onChange={(value) =>
                                    set('duration', value.value)
                                }
                                options={durations}
                            />
                        </div>

                        <div className="kip-field kip-is-fullwidth">
                            {apptProperties}
                        </div>
                    </FieldSet>
                </FormComponent>
            </Modal>
        );
    },
    AppointmentForm,
    'form'
)

Settings = withActions(
    withRouter(
        withSettings(
            ({
                action,
                type,
                settings,
                keys,
                keysAction,
                keyPairs,
                keyPairsAction,
                providerSecret,
                providerSecretAction,
                backupData,
                backupDataAction,
                providerData,
                providerDataAction,
                verifiedProviderData,
                verifiedProviderDataAction,
                router,
            }) => {
                const [deleting, setDeleting] = useState(false);
                const [loggingOut, setLoggingOut] = useState(false);
                const [initialized, setInitialized] = useState(false);
                const [view, setView] = useState('verified');

                // we load all the resources we need
                useEffect(() => {
                    if (initialized) return;

                    keysAction();
                    verifiedProviderDataAction();
                    providerDataAction();

                    setInitialized(true);
                });

                let modal;

                const title = settings.get('title').toLowerCase();

                const cancel = () => {
                    router.navigateToUrl('/provider/settings');
                };

                const deleteData = () => {
                    setDeleting(true);
                    const backend = settings.get('backend');
                    backend.local.deleteAll('provider::');
                    setDeleting(false);
                    router.navigateToUrl('/provider/deleted');
                };

                const logOut = () => {
                    setLoggingOut(true);

                    const kpa = keyPairsAction('logoutKeyPairs');
                    kpa.then((kp) => {
                        const psa = providerSecretAction(
                            undefined,
                            'logoutProviderSecret'
                        );
                        psa.then((ps) => {
                            // we give the backup data action a different name to avoid it being rejected
                            // in case there's already a backup in progress... It will still be queued
                            // up to ensure no conflicts can occur.
                            const ba = backupDataAction(
                                kp.data,
                                ps.data,
                                'logout'
                            );
                            ba.then(() => {
                                const backend = settings.get('backend');
                                backend.local.deleteAll('provider::');
                                router.navigateToUrl('/provider/logged-out');
                            });
                            ba.catch(() => setLoggingOut(false));
                        });
                        psa.catch(() => setLoggingOut(false));
                    });
                    kpa.catch(() => setLoggingOut(false));
                };

                if (action === 'backup') {
                    modal = (
                        <Modal
                            onClose={cancel}
                            save="Sicherungsdatei herunterladen"
                            title={<T t={t} k="backup-modal.title" />}
                            onCancel={cancel}
                            cancel={<T t={t} k="backup-modal.close" />}
                            saveType="success"
                        >
                            <p>
                                <T t={t} k="backup-modal.text" />
                            </p>
                            <hr />
                            <DataSecret
                                secret={providerSecret.data}
                                embedded={true}
                                hideNotice={true}
                            />
                            <Button
                                style={{ marginRight: '1em' }}
                                type="success"
                                onClick={() =>
                                    copyToClipboard(providerSecret.data)
                                }
                            >
                                Datenschlüssel kopieren
                            </Button>
                            <BackupDataLink
                                downloadText={
                                    <T t={t} k="backup-modal.download-backup" />
                                }
                                onSuccess={cancel}
                            />
                        </Modal>
                    );
                } else if (action === 'delete') {
                    modal = (
                        <Modal
                            onClose={cancel}
                            save={<T t={t} k="delete" />}
                            disabled={deleting}
                            waiting={deleting}
                            title={<T t={t} k="delete-modal.title" />}
                            onCancel={cancel}
                            onSave={deleteData}
                            saveType="danger"
                        >
                            <p>
                                <T
                                    t={t}
                                    k={
                                        deleting
                                            ? 'delete-modal.deleting-text'
                                            : 'delete-modal.text'
                                    }
                                />
                            </p>
                        </Modal>
                    );
                } else if (action === 'logout') {
                    modal = (
                        <Modal
                            onClose={cancel}
                            save={<T t={t} k="log-out" />}
                            disabled={loggingOut}
                            waiting={loggingOut}
                            title={<T t={t} k="log-out-modal.title" />}
                            onCancel={cancel}
                            onSave={logOut}
                            saveType="warning"
                        >
                            <p>
                                <T
                                    t={t}
                                    k={
                                        loggingOut
                                            ? 'log-out-modal.logging-out'
                                            : 'log-out-modal.text'
                                    }
                                />
                            </p>
                            <hr />
                            <DataSecret
                                secret={providerSecret.data}
                                embedded={true}
                                hideNotice={true}
                            />
                            <Button
                                style={{ marginRight: '1em' }}
                                type="success"
                                onClick={() =>
                                    copyToClipboard(providerSecret.data)
                                }
                            >
                                Datenschlüssel kopieren
                            </Button>
                            <BackupDataLink
                                downloadText={
                                    <T t={t} k="backup-modal.download-backup" />
                                }
                            />
                        </Modal>
                    );
                }

                const render = () => {
                    return (
                        <div className="kip-provider-settings">
                            {modal}
                            <CardContent>
                                <h2>
                                    <T t={t} k="provider-data.title" />
                                </h2>

                                <p style={{ marginBottom: '1em' }}>
                                    <T
                                        t={t}
                                        k="provider-data.verified-vs-unverifired-desc"
                                    />
                                </p>

                                <DropdownMenu
                                    title={
                                        <F>
                                            <Icon icon="calendar" />{' '}
                                            <T t={t} k={`settings.${view}`} />
                                        </F>
                                    }
                                >
                                    <DropdownMenuItem
                                        icon="calendar"
                                        onClick={() => setView('verified')}
                                    >
                                        <T t={t} k={`settings.verified`} />
                                    </DropdownMenuItem>
                                    <DropdownMenuItem
                                        icon="list"
                                        onClick={() => setView('local')}
                                    >
                                        <T t={t} k={`settings.local`} />
                                    </DropdownMenuItem>
                                </DropdownMenu>
                                <ProviderData
                                    providerData={
                                        view === 'verified'
                                            ? verifiedProviderData
                                            : providerData
                                    }
                                    verified={view === 'verified'}
                                />
                            </CardContent>
                            <CardFooter>
                                <div className="kip-buttons">
                                    <Button
                                        type="success"
                                        href="/provider/settings/backup"
                                    >
                                        <T t={t} k="backup" />
                                    </Button>
                                    <Button
                                        type="warning"
                                        href="/provider/settings/logout"
                                    >
                                        <T t={t} k="log-out" />
                                    </Button>
                                    {false && (
                                        <Button
                                            type="danger"
                                            href="/provider/settings/delete"
                                        >
                                            <T t={t} k="delete" />
                                        </Button>
                                    )}
                                </div>
                            </CardFooter>
                        </div>
                    );
                };

                // we wait until all resources have been loaded before we display the form
                return (
                    <WithLoader
                        resources={[
                            keyPairs,
                            providerData,
                            verifiedProviderData,
                        ]}
                        renderLoaded={render}
                    />
                );
            }
        )
    ),
    []
)

AcceptedInvitation = () => {
    const [showDelete, setShowDelete] = useState(false);

    const doDelete = () => {
        setShowDelete(false);
        cancelInvitationAction(acceptedInvitation.data, tokenData.data).then(
            () => {
                // we reload the appointments
                invitationAction();
                acceptedInvitationAction();
            }
        );
    };

    const {
        offer,
        invitation: invitationData,
        slotData,
    } = acceptedInvitation.data;
    const currentOffer = offers.find((of) => of.id == offer.id);
    let currentSlotData;

    if (currentOffer !== undefined)
        currentSlotData = currentOffer.slotData.find(
            (sl) => sl.id === slotData.id
        );

    let notice;
    let changed = false;
    for (const [k, v] of Object.entries(currentOffer)) {
        if (
            k === 'open' ||
            k === 'slotData' ||
            k === 'properties' ||
            k === 'slots'
        )
            continue;
        if (offer[k] !== v) {
            changed = true;
            break;
        }
    }
    if (changed)
        notice = (
            <F>
                <Message type="danger">
                    <T t={t} k="invitation-accepted.changed" />
                </Message>
            </F>
        );
    const d = new Date(currentOffer.timestamp);

    let modal;

    if (showDelete)
        return (
            <Modal
                onSave={doDelete}
                onClose={() => setShowDelete(false)}
                onCancel={() => setShowDelete(false)}
                saveType="danger"
                save={<T t={t} k="invitation-accepted.delete.confirm" />}
                cancel={<T t={t} k="invitation-accepted.delete.cancel" />}
                title={<T t={t} k="invitation-accepted.delete.title" />}
                className="kip-appointment-overview"
            >
                <p>
                    <T t={t} k="invitation-accepted.delete.notice" />
                </p>
            </Modal>
        );

    return (
        <F>
            <CardContent>
                {notice}
                <div className="kip-accepted-invitation">
                    <h2>
                        <T t={t} k="invitation-accepted.title" />
                    </h2>
                    <ProviderDetails data={invitationData.provider} />
                    <OfferDetails offer={currentOffer} />
                    <p className="kip-appointment-date">
                        {d.toLocaleDateString()} ·{' '}
                        <u>{d.toLocaleTimeString()}</u>
                    </p>
                    <p className="kip-booking-code">
                        <span>
                            <T t={t} k={'invitation-accepted.booking-code'} />
                        </span>
                        {userSecret.data.slice(0, 4)}
                    </p>
                </div>
            </CardContent>
            <CardFooter>
                <Button type="warning" onClick={() => setShowDelete(true)}>
                    <T t={t} k="cancel-appointment" />
                </Button>
            </CardFooter>
        </F>
    );
}

Settings = withActions(
    withSettings(
        withRouter(
            ({ settings, action, router, userSecret, backupDataAction }) => {
                const [loggingOut, setLoggingOut] = useState(false);

                let logOutModal;

                const cancel = () => {
                    router.navigateToUrl('/user/settings');
                };

                const logOut = () => {
                    setLoggingOut(true);
                    const backend = settings.get('backend');
                    // we perform a backup before logging the user out...
                    backupDataAction(userSecret.data, 'logout').then(() => {
                        backend.local.deleteAll('user::');
                        setLoggingOut(false);
                        router.navigateToUrl('/user/logged-out');
                    });
                };

                if (action === 'logout') {
                    logOutModal = (
                        <Modal
                            onClose={cancel}
                            save={<T t={t} k="log-out" />}
                            disabled={loggingOut}
                            waiting={loggingOut}
                            title={<T t={t} k="log-out-modal.title" />}
                            onCancel={cancel}
                            onSave={logOut}
                            saveType="warning"
                        >
                            <p>
                                <T
                                    t={t}
                                    k={
                                        loggingOut
                                            ? 'log-out-modal.logging-out'
                                            : 'log-out-modal.text'
                                    }
                                />
                            </p>
                            <hr />
                            {userSecret !== undefined && (
                                <StoreOnline
                                    secret={userSecret.data}
                                    embedded={true}
                                    hideNotice={true}
                                />
                            )}
                        </Modal>
                    );
                }

                return (
                    <F>
                        <CardContent>
                            <div className="kip-user-settings">
                                {logOutModal}
                                <h2>
                                    <T t={t} k="user-data.title" />
                                </h2>
                                <p>
                                    <T t={t} k="user-data.notice" />
                                </p>
                            </div>
                        </CardContent>
                        <CardFooter>
                            <div className="kip-buttons">
                                <Button
                                    type="warning"
                                    href="/user/settings/logout"
                                >
                                    <T t={t} k="log-out" />
                                </Button>
                            </div>
                        </CardFooter>
                    </F>
                );
            }
        )
    ),
    []
)

StoreOnline = ({ secret, embedded, hideNotice }) => {
    const [bookmarkModal, setBookmarkModal] = useState(false);
    const [copyModal, setCopyModal] = useState(false);
    const settings = useSettings();
    const user = useUser();

    let modal;

    const showBookmarkModal = () => {
        history.pushState(
            {},
            settings.t(t, 'store-secrets.restore.title'),
            `/user/restore#${user.secret}`
        );
        setBookmarkModal(true);
    };

    const hideBookmarkModal = () => {
        history.back();
        setBookmarkModal(false);
    };

    if (bookmarkModal)
        modal = (
            <Modal
                title={<T t={t} k="store-secrets.bookmark-modal.title" />}
                onClose={hideBookmarkModal}
            >
                <T t={t} k="store-secrets.bookmark-modal.text" />
            </Modal>
        );

    const chunks = user.secret.match(/.{1,4}/g);

    const fragments = [];
    for (let i = 0; i < chunks.length; i++) {
        fragments.push(<F key={`${i}-main`}>{chunks[i]}</F>);
        if (i < chunks.length - 1)
            fragments.push(
                <strong key={`${i}-dot`} style={{ userSelect: 'none' }}>
                    ·
                </strong>
            );
    }

    return (
        <F>
            {modal}
            {!embedded && (
                <p className="kip-secrets-notice">
                    <T t={t} k="store-secrets.online.text" safe />
                </p>
            )}
            <div
                className={
                    'kip-secrets-box' + (embedded ? ' kip-is-embedded' : '')
                }
            >
                {
                    <F>
                        <div className="kip-uid">
                            {!hideNotice && (
                                <span>
                                    <T t={t} k="store-secrets.secret" />
                                </span>
                            )}
                            <code>{fragments}</code>
                        </div>
                    </F>
                }
            </div>
            {!embedded && (
                <div className="kip-secrets-links">
                    <A
                        className="bulma-button bulma-is-small"
                        onClick={showBookmarkModal}
                    >
                        <T t={t} k="store-secrets.bookmark" />
                    </A>
                </div>
            )}
        </F>
    );
}