stackpress/esm/session/views/signin.js

Incept is a content management framework.

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useLanguage } from 'r22n';
import Control from 'frui/form/Control';
import Button from 'frui/form/Button';
import Input from 'frui/field/Input';
import Password from 'frui/field/Password';
import LayoutBlank from '../../view/layout/LayoutBlank.js';
import { useServer } from '../../view/server/hooks.js';
export function AuthSigninForm(props) {
    const { input, errors } = props;
    const { _ } = useLanguage();
    return (_jsxs("form", { className: "auth-form", method: "post", children: [input.type === 'phone' ? (_jsx(Control, { label: `${_('Phone Number')}*`, error: errors.phone, className: "control", children: _jsx(Input, { name: "phone", className: "field", error: !!errors.phone, defaultValue: input.phone, required: true }) })) : input.type === 'email' ? (_jsx(Control, { label: `${_('Email Address')}*`, error: errors.email, className: "control", children: _jsx(Input, { name: "email", className: "field", error: !!errors.email, defaultValue: input.email, required: true }) })) : (_jsx(Control, { label: `${_('Username')}*`, error: errors.username, className: "control", children: _jsx(Input, { name: "username", className: "field", error: !!errors.username, defaultValue: input.username, required: true }) })), _jsx(Control, { label: `${_('Password')}*`, error: errors.secret, className: "control", children: _jsx(Password, { name: "secret", error: !!errors.secret, defaultValue: input.secret, required: true }) }), _jsx("div", { className: "action", children: _jsx(Button, { className: "submit", type: "submit", children: _('Sign In') }) })] }));
}
export function AuthSigninBody() {
    const { config, request, response } = useServer();
    const { _ } = useLanguage();
    const input = {
        type: 'username',
        ...response.results,
        ...request.data()
    };
    const base = config.path('auth.base', '/auth');
    const options = new Set();
    if (config.path('auth.username'))
        options.add('username');
    if (config.path('auth.email'))
        options.add('email');
    if (config.path('auth.phone'))
        options.add('phone');
    const tabs = options.size > 1 ? Array.from(options).map(option => ({
        icon: option === 'phone'
            ? 'phone'
            : option === 'email'
                ? 'envelope'
                : 'user',
        label: option === 'phone'
            ? _('Phone')
            : option === 'email'
                ? _('Email')
                : _('Username'),
        class: input.type === option
            ? 'auth-tab active'
            : 'auth-tab',
        url: `${base}/signin/${option}`
    })) : [];
    return (_jsx("main", { className: "auth-signin-page auth-page", children: _jsxs("div", { className: "container", children: [config.has('brand', 'logo') ? (_jsx("img", { height: "50", alt: config.path('brand.name'), src: config.path('brand.logo'), className: "logo" })) : (_jsx("h2", { className: "brand", children: config.path('brand.name') })), _jsxs("section", { className: "auth-modal", children: [_jsxs("header", { children: [_jsx("i", { className: "fas fa-fw fa-lock" }), _jsx("h3", { className: "label", children: _('Sign In') })] }), tabs.length > 0 ? (_jsx("div", { className: "auth-tabs", children: tabs.map((tab, index) => (_jsxs("a", { href: tab.url, className: tab.class, children: [_jsx("i", { className: `fas fa-fw fa-${tab.icon}` }), _jsx("span", { className: "label", children: tab.label })] }, index))) })) : null, _jsx(AuthSigninForm, { errors: response.errors(), input: input }), _jsxs("footer", { children: [_jsx("a", { href: `${base}/signup`, children: _('No Account?') }), "\u00A0\u00A0|\u00A0\u00A0", _jsx("a", { href: `${base}/forgot`, children: _('Forgot Password?') })] })] })] }) }));
}
export function AuthSigninHead(props) {
    const { data, styles = [] } = props;
    const { favicon = '/favicon.ico' } = data?.brand || {};
    const { _ } = useLanguage();
    const mimetype = favicon.endsWith('.png')
        ? 'image/png'
        : favicon.endsWith('.svg')
            ? 'image/svg+xml'
            : 'image/x-icon';
    return (_jsxs(_Fragment, { children: [_jsx("title", { children: _('Sign In') }), favicon && _jsx("link", { rel: "icon", type: mimetype, href: favicon }), _jsx("link", { rel: "stylesheet", type: "text/css", href: "/styles/global.css" }), styles.map((href, index) => (_jsx("link", { rel: "stylesheet", type: "text/css", href: href }, index)))] }));
}
export function AuthSigninPage(props) {
    return (_jsx(LayoutBlank, { head: false, ...props, children: _jsx(AuthSigninBody, {}) }));
}
export const Head = AuthSigninHead;
export default AuthSigninPage;