stackpress
Version:
Incept is a content management framework.
70 lines (69 loc) • 6 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Head = void 0;
exports.AuthSigninForm = AuthSigninForm;
exports.AuthSigninBody = AuthSigninBody;
exports.AuthSigninHead = AuthSigninHead;
exports.AuthSigninPage = AuthSigninPage;
const jsx_runtime_1 = require("react/jsx-runtime");
const r22n_1 = require("r22n");
const Control_1 = __importDefault(require("frui/form/Control"));
const Button_1 = __importDefault(require("frui/form/Button"));
const Input_1 = __importDefault(require("frui/field/Input"));
const Password_1 = __importDefault(require("frui/field/Password"));
const LayoutBlank_js_1 = __importDefault(require("../../view/layout/LayoutBlank.js"));
const hooks_js_1 = require("../../view/server/hooks.js");
function AuthSigninForm(props) {
const { input, errors } = props;
const { _ } = (0, r22n_1.useLanguage)();
return ((0, jsx_runtime_1.jsxs)("form", { className: "auth-form", method: "post", children: [input.type === 'phone' ? ((0, jsx_runtime_1.jsx)(Control_1.default, { label: `${_('Phone Number')}*`, error: errors.phone, className: "control", children: (0, jsx_runtime_1.jsx)(Input_1.default, { name: "phone", className: "field", error: !!errors.phone, defaultValue: input.phone, required: true }) })) : input.type === 'email' ? ((0, jsx_runtime_1.jsx)(Control_1.default, { label: `${_('Email Address')}*`, error: errors.email, className: "control", children: (0, jsx_runtime_1.jsx)(Input_1.default, { name: "email", className: "field", error: !!errors.email, defaultValue: input.email, required: true }) })) : ((0, jsx_runtime_1.jsx)(Control_1.default, { label: `${_('Username')}*`, error: errors.username, className: "control", children: (0, jsx_runtime_1.jsx)(Input_1.default, { name: "username", className: "field", error: !!errors.username, defaultValue: input.username, required: true }) })), (0, jsx_runtime_1.jsx)(Control_1.default, { label: `${_('Password')}*`, error: errors.secret, className: "control", children: (0, jsx_runtime_1.jsx)(Password_1.default, { name: "secret", error: !!errors.secret, defaultValue: input.secret, required: true }) }), (0, jsx_runtime_1.jsx)("div", { className: "action", children: (0, jsx_runtime_1.jsx)(Button_1.default, { className: "submit", type: "submit", children: _('Sign In') }) })] }));
}
function AuthSigninBody() {
const { config, request, response } = (0, hooks_js_1.useServer)();
const { _ } = (0, r22n_1.useLanguage)();
const input = Object.assign(Object.assign({ 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 ((0, jsx_runtime_1.jsx)("main", { className: "auth-signin-page auth-page", children: (0, jsx_runtime_1.jsxs)("div", { className: "container", children: [config.has('brand', 'logo') ? ((0, jsx_runtime_1.jsx)("img", { height: "50", alt: config.path('brand.name'), src: config.path('brand.logo'), className: "logo" })) : ((0, jsx_runtime_1.jsx)("h2", { className: "brand", children: config.path('brand.name') })), (0, jsx_runtime_1.jsxs)("section", { className: "auth-modal", children: [(0, jsx_runtime_1.jsxs)("header", { children: [(0, jsx_runtime_1.jsx)("i", { className: "fas fa-fw fa-lock" }), (0, jsx_runtime_1.jsx)("h3", { className: "label", children: _('Sign In') })] }), tabs.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "auth-tabs", children: tabs.map((tab, index) => ((0, jsx_runtime_1.jsxs)("a", { href: tab.url, className: tab.class, children: [(0, jsx_runtime_1.jsx)("i", { className: `fas fa-fw fa-${tab.icon}` }), (0, jsx_runtime_1.jsx)("span", { className: "label", children: tab.label })] }, index))) })) : null, (0, jsx_runtime_1.jsx)(AuthSigninForm, { errors: response.errors(), input: input }), (0, jsx_runtime_1.jsxs)("footer", { children: [(0, jsx_runtime_1.jsx)("a", { href: `${base}/signup`, children: _('No Account?') }), "\u00A0\u00A0|\u00A0\u00A0", (0, jsx_runtime_1.jsx)("a", { href: `${base}/forgot`, children: _('Forgot Password?') })] })] })] }) }));
}
function AuthSigninHead(props) {
const { data, styles = [] } = props;
const { favicon = '/favicon.ico' } = (data === null || data === void 0 ? void 0 : data.brand) || {};
const { _ } = (0, r22n_1.useLanguage)();
const mimetype = favicon.endsWith('.png')
? 'image/png'
: favicon.endsWith('.svg')
? 'image/svg+xml'
: 'image/x-icon';
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("title", { children: _('Sign In') }), favicon && (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: mimetype, href: favicon }), (0, jsx_runtime_1.jsx)("link", { rel: "stylesheet", type: "text/css", href: "/styles/global.css" }), styles.map((href, index) => ((0, jsx_runtime_1.jsx)("link", { rel: "stylesheet", type: "text/css", href: href }, index)))] }));
}
function AuthSigninPage(props) {
return ((0, jsx_runtime_1.jsx)(LayoutBlank_js_1.default, Object.assign({ head: false }, props, { children: (0, jsx_runtime_1.jsx)(AuthSigninBody, {}) })));
}
exports.Head = AuthSigninHead;
exports.default = AuthSigninPage;