stackpress
Version:
Incept is a content management framework.
54 lines (53 loc) • 4.15 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useLanguage } from 'r22n';
import Button from 'frui/form/Button';
import Switch from 'frui/field/Switch';
import LayoutBlank from '../../view/layout/LayoutBlank';
import { useServer } from '../../view/server/hooks';
export function ApiOauthForm(props) {
const { appName, revert, items } = props;
const { _ } = useLanguage();
return (_jsxs("form", { method: "post", children: [items.length > 0 ? (_jsxs("div", { children: [_jsx("p", { className: "b-t-0 b-solid bx-0 bt-0 bb-1 py-10", children: _('Grant the following permissions:') }), items.map((item, index) => (_jsxs("div", { className: "flex flex-center-y b-t-0 b-solid bx-0 bt-0 bb-1 py-10", children: [_jsxs("div", { className: "flex-grow", children: [_jsxs("span", { children: [item.icon ? (_jsx("i", { className: `fas fa-fw fa-${item.icon}` })) : null, item.name] }), !!item.description ? (_jsx("p", { className: "tx-sm", children: item.description })) : null] }), _jsx(Switch, { name: "scopes[]", value: item.id })] }, index)))] })) : (_jsx("p", { className: "b-t-0 b-solid bx-0 bt-0 bb-1 py-10", children: _('%s is asking permissions to access your personal information.', appName) })), _jsxs("div", { className: "px-pt-20", children: [_jsx(Button, { className: "theme-bc-primary theme-bg-primary border !px-px-14 !px-py-8", type: "submit", children: _('Grant') }), _jsx("a", { className: "theme-bc-error theme-bg-primary border px-px-14 px-py-8", href: revert, children: _('Deny') })] })] }));
}
export function OAuthBody() {
const { config, request, response } = useServer();
const redirect = request.data.path('redirect_uri', '/');
const [uri, query] = redirect.split('?');
const params = new URLSearchParams(query);
params.set('error', 'denied');
const revert = `${uri}?${params.toString()}`;
const scope = request.data.path('scope', '');
const scopes = config.path('api.scopes', {});
const permissions = scope ? scope.split(' ') : [];
const application = response.results;
const appName = application?.name || 'Unknown';
const items = permissions.map(name => {
const scope = scopes[name];
if (!scope)
return false;
return {
id: name,
icon: scope.icon,
name: scope.name,
description: scope.description
};
}).filter(Boolean);
const { _ } = useLanguage();
return (_jsx("main", { className: "flex flex-col px-h-100-0 theme-bg-bg0 relative", children: _jsxs("div", { className: "px-p-10", children: [config.has('brand', 'logo') ? (_jsx("img", { height: "50", alt: config.path('brand.name'), src: config.path('brand.logo'), className: "block mx-auto 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-360", 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(ApiOauthForm, { appName: appName, revert: revert, items: items })] })] }) }));
}
export function ApiOauthHead(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: _('Grant Access') }), 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 ApiOauthPage(props) {
return (_jsx(LayoutBlank, { ...props, children: _jsx(OAuthBody, {}) }));
}
export const Head = ApiOauthHead;
export default ApiOauthPage;