stackpress/dist/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';
import { useServer } from '../../view/server/hooks';
export function AuthSignupForm(props) {
    const { input, errors } = props;
    const { _ } = useLanguage();
    return (_jsxs("form", { className: "px-px-10", method: "post", children: [_jsx(Control, { label: `${_('Name')}*`, error: errors.email, className: "px-pt-20", children: _jsx(Input, { name: "name", className: "block", error: !!errors.email, defaultValue: input.email, required: true }) }), _jsx(Control, { label: _('Email Address'), error: errors.email, className: "px-pt-20", children: _jsx(Input, { name: "email", className: "block", error: !!errors.email, defaultValue: input.email }) }), _jsx(Control, { label: _('Phone Number'), error: errors.phone, className: "px-pt-20", children: _jsx(Input, { name: "phone", className: "block", error: !!errors.phone, defaultValue: input.phone }) }), _jsx(Control, { label: _('Username'), error: errors.username, className: "px-pt-20", children: _jsx(Input, { name: "username", className: "block", error: !!errors.username, defaultValue: input.username }) }), _jsx(Control, { label: `${_('Password')}*`, error: errors.secret, className: "px-pt-20", children: _jsx(Password, { name: "secret", error: !!errors.secret, defaultValue: input.secret, required: true }) }), _jsx("div", { className: "px-py-20", children: _jsx(Button, { className: "theme-bc-primary theme-bg-primary border px-w-100-0 !px-px-14 !px-py-8", type: "submit", children: _('Sign Up') }) })] }));
}
export function AuthSignupBody() {
    const { config, request, response } = useServer();
    const input = {
        ...response.results,
        ...request.data()
    };
    const errors = response.errors();
    const { _ } = useLanguage();
    return (_jsx("main", { className: "theme-bg-bg0 px-w-100-0 px-h-100-0 overflow-auto", children: _jsxs("div", { className: "flex flex-col mx-auto items-center px-w-360", children: [config.has('brand', 'logo') ? (_jsx("img", { height: "50", alt: config.path('brand.name'), src: config.path('brand.logo'), className: "block mx-auto px-mt-20 px-mb-10" })) : (_jsx("h2", { className: "px-mb-10 px-fs-20 text-center", children: config.path('brand.name') })), _jsxs("section", { className: "theme-bg-bg1 theme-bc-bd3 border px-w-100-0", children: [_jsxs("header", { className: "theme-bg-bg2 flex items-center px-p-10", children: [_jsx("i", { className: "fas fa-fw fa-user" }), _jsx("h3", { className: "px-ml-5 uppercase font-normal px-fs-16", children: _('Sign Up') })] }), _jsx(AuthSignupForm, { errors: errors, input: input })] }), _jsx("footer", { className: "px-py-10" })] }) }));
}
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;