stackpress/esm/session/views/signup.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 AuthSignupForm(props) {
    const { input, errors } = props;
    const { _ } = useLanguage();
    return (_jsxs("form", { className: "auth-form", method: "post", children: [_jsx(Control, { label: `${_('Name')}*`, error: errors.email, className: "control", children: _jsx(Input, { name: "name", className: "field", error: !!errors.email, defaultValue: input.email, required: true }) }), _jsx(Control, { label: _('Email Address'), error: errors.email, className: "control", children: _jsx(Input, { name: "email", className: "field", error: !!errors.email, defaultValue: input.email }) }), _jsx(Control, { label: _('Phone Number'), error: errors.phone, className: "control", children: _jsx(Input, { name: "phone", className: "field", error: !!errors.phone, defaultValue: input.phone }) }), _jsx(Control, { label: _('Username'), error: errors.username, className: "control", children: _jsx(Input, { name: "username", className: "field", error: !!errors.username, defaultValue: input.username }) }), _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 Up') }) })] }));
}
export function AuthSignupBody() {
    const { config, request, response } = useServer();
    const input = {
        ...response.results,
        ...request.data()
    };
    const base = config.path('auth.base', '/auth');
    const errors = response.errors();
    const { _ } = useLanguage();
    return (_jsx("main", { className: "auth-signup-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-user" }), _jsx("h3", { className: "label", children: _('Sign Up') })] }), _jsx(AuthSignupForm, { errors: errors, input: input }), _jsx("footer", { children: _jsx("a", { href: `${base}/signin`, children: _('Have an Account?') }) })] })] }) }));
}
export function AuthSignupHead(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: _('Signup') }), 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 AuthSignupPage(props) {
    return (_jsx(LayoutBlank, { head: false, ...props, children: _jsx(AuthSignupBody, {}) }));
}
export const Head = AuthSignupHead;
export default AuthSignupPage;