@hanzo/ui 8.32.2 → 8.32.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -7,12 +7,39 @@ const react_1 = require("react");
|
|
|
7
7
|
const react_2 = require("@hanzo/i18n/react");
|
|
8
8
|
const react_3 = require("@hanzo/iam/react");
|
|
9
9
|
const react_simple_icons_1 = require("@icons-pack/react-simple-icons");
|
|
10
|
-
const button_1 = require("../backends/gui/button.cjs");
|
|
11
|
-
const field_1 = require("../backends/gui/field.cjs");
|
|
12
|
-
const input_1 = require("../backends/gui/input.cjs");
|
|
13
10
|
const layout_1 = require("../backends/gui/layout.cjs");
|
|
14
11
|
const handoff_1 = require("./handoff.cjs");
|
|
15
12
|
const NAME = { google: 'Google', github: 'GitHub' };
|
|
13
|
+
/** hanzo.app's front-page sign-in rules (steps.tsx `HERO_STYLE`), scoped to this panel. */
|
|
14
|
+
const AT = '[data-slot="signin-panel"]';
|
|
15
|
+
const FILL = 'var(--popover,var(--panel))';
|
|
16
|
+
const EDGE = 'var(--border,var(--edge))';
|
|
17
|
+
const STRONG = 'var(--border-strong,var(--bound))';
|
|
18
|
+
const INK = 'var(--foreground,var(--ink))';
|
|
19
|
+
const MUTE = 'var(--muted-foreground,var(--quiet))';
|
|
20
|
+
const STYLE = `${AT} [data-signin-body]{container-type:inline-size;display:flex;flex-direction:column;gap:10px;width:100%}` +
|
|
21
|
+
`${AT} [data-signin-pair]{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}` +
|
|
22
|
+
`@container (max-width:379.98px){${AT} [data-signin-pair]{grid-template-columns:1fr}}` +
|
|
23
|
+
`${AT} [data-signin-btn]{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:46px;margin:0;padding:0 14px;border-radius:14px;border:1px solid ${EDGE};background:${FILL};color:${INK};font-family:var(--font-sans,Zen,system-ui,sans-serif);font-size:14px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .2s cubic-bezier(.16,1,.3,1),border-color .2s,background-color .2s,opacity .2s}` +
|
|
24
|
+
`${AT} [data-signin-btn]:hover:not(:disabled){border-color:${STRONG};transform:translateY(-2px)}` +
|
|
25
|
+
`${AT} [data-signin-btn]:active:not(:disabled){transform:scale(.98)}` +
|
|
26
|
+
`${AT} [data-signin-btn]:disabled{opacity:.55;cursor:not-allowed}` +
|
|
27
|
+
`${AT} [data-signin-btn][data-solid]{background:${INK};color:var(--background);border-color:${INK}}` +
|
|
28
|
+
`${AT} [data-signin-btn][data-solid]:hover:not(:disabled){opacity:.92;transform:none}` +
|
|
29
|
+
`${AT} [data-signin-btn] svg{flex-shrink:0}` +
|
|
30
|
+
`${AT} [data-signin-or]{display:flex;align-items:center;gap:12px;font-size:12.5px;color:${MUTE}}` +
|
|
31
|
+
`${AT} [data-signin-or]::before,${AT} [data-signin-or]::after{content:'';flex:1;height:1px;background:${EDGE}}` +
|
|
32
|
+
`${AT} [data-signin-form]{display:flex;flex-direction:column;gap:10px;margin:0}` +
|
|
33
|
+
`${AT} [data-signin-field]{box-sizing:border-box;width:100%;height:46px;margin:0;padding:0 16px;border-radius:14px;border:1px solid ${EDGE};background-color:${FILL};color:${INK};font-family:var(--font-sans,Zen,system-ui,sans-serif);font-size:14px;outline:none}` +
|
|
34
|
+
`${AT} [data-signin-field]::placeholder{color:${MUTE}}` +
|
|
35
|
+
`${AT} [data-signin-field]:focus-visible{border-color:${STRONG};box-shadow:0 0 0 2px var(--ring,${STRONG})}` +
|
|
36
|
+
`${AT} [data-signin-wrong]{margin:0;font-size:13px;color:var(--destructive,#e5484d)}` +
|
|
37
|
+
`${AT} [data-signin-quiet]{margin:0;font-size:13px;color:${MUTE}}` +
|
|
38
|
+
`${AT} [data-signin-quiet] button{padding:0;border:0;background:none;color:${INK};font:inherit;cursor:pointer}` +
|
|
39
|
+
`${AT} [data-signin-quiet] button:hover:not(:disabled){text-decoration:underline}` +
|
|
40
|
+
`${AT} [data-signin-terms]{margin:0;max-width:400px;text-align:center;font-size:12px;line-height:18px;color:${MUTE}}` +
|
|
41
|
+
`${AT} [data-signin-terms] a{color:${INK};text-decoration:none}` +
|
|
42
|
+
`${AT} [data-signin-terms] a:hover{text-decoration:underline;text-underline-offset:2px}`;
|
|
16
43
|
function SignInPanel(props) {
|
|
17
44
|
return props.request ? (0, jsx_runtime_1.jsx)(Panel, { ...props, mint: props.request }) : (0, jsx_runtime_1.jsx)(UnderProvider, { ...props });
|
|
18
45
|
}
|
|
@@ -21,9 +48,10 @@ function UnderProvider(props) {
|
|
|
21
48
|
const { sdk } = (0, react_3.useIam)();
|
|
22
49
|
return (0, jsx_runtime_1.jsx)(Panel, { ...props, mint: (params) => sdk.getSigninUrl(params) });
|
|
23
50
|
}
|
|
24
|
-
function Panel({ title, line, providers = ['google', 'github'], signin = handoff_1.SIGNIN, signup =
|
|
51
|
+
function Panel({ title, line, providers = ['google', 'github'], signin = handoff_1.SIGNIN, signup = false, termsHref = 'https://hanzo.ai/terms', privacyHref = 'https://hanzo.ai/privacy', authorize = (u) => u, track, mint, background = '$background', borderColor = '$borderColor', bare = false, }) {
|
|
25
52
|
const { t } = (0, react_2.useI18n)();
|
|
26
53
|
const [email, setEmail] = (0, react_1.useState)('');
|
|
54
|
+
const [emailOpen, setEmailOpen] = (0, react_1.useState)(false);
|
|
27
55
|
const [busy, setBusy] = (0, react_1.useState)(null);
|
|
28
56
|
const [wrong, setWrong] = (0, react_1.useState)(null);
|
|
29
57
|
/** Mint this site's own request, then leave for where `way` goes. */
|
|
@@ -49,8 +77,13 @@ function Panel({ title, line, providers = ['google', 'github'], signin = handoff
|
|
|
49
77
|
}
|
|
50
78
|
void leave('email', { kind: 'email', email: typed }, typed);
|
|
51
79
|
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
80
|
+
const card = bare ? {} : { bg: background, borderWidth: 1, borderColor, rounded: '$6', p: '$6' };
|
|
81
|
+
const emailLabel = t(busy === 'email' ? 'One moment…' : 'Continue with email');
|
|
82
|
+
return ((0, jsx_runtime_1.jsxs)(layout_1.YStack, { "data-slot": "signin-panel", "data-surface": bare ? 'bare' : 'card', width: "100%", maxW: bare ? 400 : 464, items: "center", gap: "$3", ...card, children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: STYLE } }), title ? ((0, jsx_runtime_1.jsx)(layout_1.Heading, { render: "h1", size: "$8", fontWeight: "500", color: "$ink", m: 0, text: "center", children: title })) : null, line ? ((0, jsx_runtime_1.jsx)(layout_1.Paragraph, { size: "$3", color: "$quiet", m: 0, text: "center", maxW: 360, children: line })) : null, (0, jsx_runtime_1.jsxs)("div", { "data-signin-body": "", style: title || line ? { marginTop: 12 } : undefined, children: [providers.length ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-signin-pair": "", children: providers.map((p) => ((0, jsx_runtime_1.jsxs)("button", { "data-signin-btn": "", type: "button", disabled: busy !== null, onClick: () => void leave(p, { kind: 'provider', provider: p }), children: [p === 'google' ? (0, jsx_runtime_1.jsx)(react_simple_icons_1.SiGoogle, { size: 17, "aria-hidden": true }) : (0, jsx_runtime_1.jsx)(react_simple_icons_1.SiGithub, { size: 17, "aria-hidden": true }), t('Continue with {provider}', { provider: NAME[p] })] }, p))) }), (0, jsx_runtime_1.jsx)("div", { "data-signin-or": "", children: t('or') })] })) : null, emailOpen ? ((0, jsx_runtime_1.jsxs)("form", { "data-signin-form": "", onSubmit: withEmail, noValidate: true, children: [(0, jsx_runtime_1.jsx)("input", { id: "hanzo-signin-email", "data-signin-field": "", type: "email", name: "email", autoComplete: "username", "aria-label": t('Email'), "aria-invalid": wrong ? true : undefined, value: email, onChange: (e) => setEmail(e.target.value), placeholder: "you@company.com", autoFocus: true }), wrong ? ((0, jsx_runtime_1.jsx)("p", { "data-signin-wrong": "", role: "alert", children: t(wrong) })) : null, (0, jsx_runtime_1.jsx)("button", { "data-signin-btn": "", "data-solid": "", type: "submit", disabled: busy !== null, children: emailLabel })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [wrong ? ((0, jsx_runtime_1.jsx)("p", { "data-signin-wrong": "", role: "alert", children: t(wrong) })) : null, (0, jsx_runtime_1.jsx)("button", { "data-signin-btn": "", "data-solid": "", type: "button", disabled: busy !== null, onClick: () => {
|
|
83
|
+
setWrong(null);
|
|
84
|
+
setEmailOpen(true);
|
|
85
|
+
}, children: emailLabel })] }))] }), signup ? ((0, jsx_runtime_1.jsxs)("p", { "data-signin-quiet": "", children: [`${t('New to Hanzo?')} `, (0, jsx_runtime_1.jsx)("button", { type: "button", disabled: busy !== null, onClick: () => void leave('signup', { kind: 'signup' }), children: t('Create account') })] })) : null, (0, jsx_runtime_1.jsx)("p", { "data-signin-terms": "", children: t("By continuing, you agree to Hanzo's {terms} and {privacy}.", {
|
|
86
|
+
terms: (0, jsx_runtime_1.jsx)("a", { href: termsHref, children: t('Terms') }),
|
|
87
|
+
privacy: (0, jsx_runtime_1.jsx)("a", { href: privacyHref, children: t('Privacy Policy') }),
|
|
55
88
|
}) })] }));
|
|
56
89
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
1
|
+
import { type ComponentProps, type ReactNode } from 'react';
|
|
2
|
+
import { YStack } from '../backends/gui/layout.js';
|
|
2
3
|
import { type ProviderKind } from './handoff.js';
|
|
3
4
|
/**
|
|
4
5
|
* The sign-in a Hanzo site draws on its own front page (hanzo.app, hanzo.bot,
|
|
@@ -12,9 +13,23 @@ import { type ProviderKind } from './handoff.js';
|
|
|
12
13
|
* hanzo.ai/signup. The session that answers is hanzo.ai's, so a person signed in
|
|
13
14
|
* on any Hanzo site is not asked again.
|
|
14
15
|
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
16
|
+
* It is drawn as hanzo.app's own front-page sign-in (hanzo-inc/app
|
|
17
|
+
* components/auth/steps.tsx `HERO_STYLE`), rule for rule, so the sites read as one
|
|
18
|
+
* product's: the providers side by side, then one solid Continue with email that
|
|
19
|
+
* opens the address field when pressed, and no sign-up line (hanzo.ai/login offers
|
|
20
|
+
* one). The rules are carried here as one scoped stylesheet: the host mounts its
|
|
21
|
+
* GuiProvider and imports none. They read design's custom properties (`--popover`,
|
|
22
|
+
* `--border`, `--border-strong`, `--foreground`, `--muted-foreground`) with gui's
|
|
23
|
+
* theme keys behind them, so a host without design's sheet still draws it.
|
|
24
|
+
* Framework-free: a Next export and a Vite app draw it alike.
|
|
25
|
+
*
|
|
26
|
+
* It stands on its own card, a solid ground inside a hairline, since a front page
|
|
27
|
+
* draws it over a busy backdrop (hanzo.team's dot field showed through the
|
|
28
|
+
* buttons and the field). The card is the site's to colour (`background`,
|
|
29
|
+
* `borderColor`: a theme token or any CSS colour), and `bare` drops it for a host
|
|
30
|
+
* that sets the panel in a card of its own. Inside the card the controls keep
|
|
31
|
+
* hanzo.app's 400px measure, so the card is 464px wide; under 380px of room the
|
|
32
|
+
* providers stack.
|
|
18
33
|
*/
|
|
19
34
|
export interface SignInPanelProps {
|
|
20
35
|
/** The headline: `Sign in to Hanzo Team`. Omit to draw the panel alone under the host's own. */
|
|
@@ -25,7 +40,7 @@ export interface SignInPanelProps {
|
|
|
25
40
|
providers?: ProviderKind[];
|
|
26
41
|
/** The origin people sign in on. Default https://hanzo.ai. */
|
|
27
42
|
signin?: string;
|
|
28
|
-
/** Offer "Create account". Default
|
|
43
|
+
/** Offer "Create account" under the form. Default false: hanzo.app's sign-in has none, and hanzo.ai/login offers it. */
|
|
29
44
|
signup?: boolean;
|
|
30
45
|
termsHref?: string;
|
|
31
46
|
privacyHref?: string;
|
|
@@ -40,10 +55,18 @@ export interface SignInPanelProps {
|
|
|
40
55
|
* and the provider's client mints it.
|
|
41
56
|
*/
|
|
42
57
|
request?: Mint;
|
|
58
|
+
/** The card's ground: a theme token (`$panel`) or any CSS colour. Default `$background`, solid. */
|
|
59
|
+
background?: Paint;
|
|
60
|
+
/** The card's hairline: a theme token or any CSS colour. Default `$borderColor`. */
|
|
61
|
+
borderColor?: Paint;
|
|
62
|
+
/** No card: the panel alone, for a host that sets it in a card of its own. */
|
|
63
|
+
bare?: boolean;
|
|
43
64
|
}
|
|
44
65
|
type Mint = (params?: {
|
|
45
66
|
additionalParams?: Record<string, string>;
|
|
46
67
|
}) => Promise<string>;
|
|
68
|
+
/** A colour the card takes, as the stack it is drawn on takes one. */
|
|
69
|
+
type Paint = ComponentProps<typeof YStack>['bg'];
|
|
47
70
|
export declare function SignInPanel(props: SignInPanelProps): import("react").JSX.Element;
|
|
48
71
|
export {};
|
|
49
72
|
//# sourceMappingURL=SignInPanel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SignInPanel.d.ts","sourceRoot":"","sources":["../../src/auth/SignInPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"SignInPanel.d.ts","sourceRoot":"","sources":["../../src/auth/SignInPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,cAAc,EAAkB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIrF,OAAO,EAAsB,MAAM,EAAE,MAAM,wBAAwB,CAAA;AACnE,OAAO,EAA4B,KAAK,YAAY,EAAY,MAAM,WAAW,CAAA;AAEjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,WAAW,gBAAgB;IAC/B,gGAAgG;IAChG,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,mCAAmC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,oEAAoE;IACpE,SAAS,CAAC,EAAE,YAAY,EAAE,CAAA;IAC1B,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,wHAAwH;IACxH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wFAAwF;IACxF,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACnC,gEAAgE;IAChE,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;IAC/D;;;;;OAKG;IACH,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,mGAAmG;IACnG,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,oFAAoF;IACpF,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,KAAK,IAAI,GAAG,CAAC,MAAM,CAAC,EAAE;IAAE,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAAE,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;AAEvF,sEAAsE;AACtE,KAAK,KAAK,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,IAAI,CAAC,CAAA;AAoChD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAElD"}
|
package/dist/auth/SignInPanel.js
CHANGED
|
@@ -1,15 +1,42 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useState } from 'react';
|
|
4
4
|
import { useI18n } from '@hanzo/i18n/react';
|
|
5
5
|
import { useIam } from '@hanzo/iam/react';
|
|
6
6
|
import { SiGithub, SiGoogle } from '@icons-pack/react-simple-icons';
|
|
7
|
-
import {
|
|
8
|
-
import { Field, FieldError, FieldSeparator } from '../backends/gui/field.js';
|
|
9
|
-
import { Input } from '../backends/gui/input.js';
|
|
10
|
-
import { Anchor, Heading, Paragraph, YStack } from '../backends/gui/layout.js';
|
|
7
|
+
import { Heading, Paragraph, YStack } from '../backends/gui/layout.js';
|
|
11
8
|
import { address, handoff, SIGNIN } from './handoff.js';
|
|
12
9
|
const NAME = { google: 'Google', github: 'GitHub' };
|
|
10
|
+
/** hanzo.app's front-page sign-in rules (steps.tsx `HERO_STYLE`), scoped to this panel. */
|
|
11
|
+
const AT = '[data-slot="signin-panel"]';
|
|
12
|
+
const FILL = 'var(--popover,var(--panel))';
|
|
13
|
+
const EDGE = 'var(--border,var(--edge))';
|
|
14
|
+
const STRONG = 'var(--border-strong,var(--bound))';
|
|
15
|
+
const INK = 'var(--foreground,var(--ink))';
|
|
16
|
+
const MUTE = 'var(--muted-foreground,var(--quiet))';
|
|
17
|
+
const STYLE = `${AT} [data-signin-body]{container-type:inline-size;display:flex;flex-direction:column;gap:10px;width:100%}` +
|
|
18
|
+
`${AT} [data-signin-pair]{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}` +
|
|
19
|
+
`@container (max-width:379.98px){${AT} [data-signin-pair]{grid-template-columns:1fr}}` +
|
|
20
|
+
`${AT} [data-signin-btn]{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:46px;margin:0;padding:0 14px;border-radius:14px;border:1px solid ${EDGE};background:${FILL};color:${INK};font-family:var(--font-sans,Zen,system-ui,sans-serif);font-size:14px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .2s cubic-bezier(.16,1,.3,1),border-color .2s,background-color .2s,opacity .2s}` +
|
|
21
|
+
`${AT} [data-signin-btn]:hover:not(:disabled){border-color:${STRONG};transform:translateY(-2px)}` +
|
|
22
|
+
`${AT} [data-signin-btn]:active:not(:disabled){transform:scale(.98)}` +
|
|
23
|
+
`${AT} [data-signin-btn]:disabled{opacity:.55;cursor:not-allowed}` +
|
|
24
|
+
`${AT} [data-signin-btn][data-solid]{background:${INK};color:var(--background);border-color:${INK}}` +
|
|
25
|
+
`${AT} [data-signin-btn][data-solid]:hover:not(:disabled){opacity:.92;transform:none}` +
|
|
26
|
+
`${AT} [data-signin-btn] svg{flex-shrink:0}` +
|
|
27
|
+
`${AT} [data-signin-or]{display:flex;align-items:center;gap:12px;font-size:12.5px;color:${MUTE}}` +
|
|
28
|
+
`${AT} [data-signin-or]::before,${AT} [data-signin-or]::after{content:'';flex:1;height:1px;background:${EDGE}}` +
|
|
29
|
+
`${AT} [data-signin-form]{display:flex;flex-direction:column;gap:10px;margin:0}` +
|
|
30
|
+
`${AT} [data-signin-field]{box-sizing:border-box;width:100%;height:46px;margin:0;padding:0 16px;border-radius:14px;border:1px solid ${EDGE};background-color:${FILL};color:${INK};font-family:var(--font-sans,Zen,system-ui,sans-serif);font-size:14px;outline:none}` +
|
|
31
|
+
`${AT} [data-signin-field]::placeholder{color:${MUTE}}` +
|
|
32
|
+
`${AT} [data-signin-field]:focus-visible{border-color:${STRONG};box-shadow:0 0 0 2px var(--ring,${STRONG})}` +
|
|
33
|
+
`${AT} [data-signin-wrong]{margin:0;font-size:13px;color:var(--destructive,#e5484d)}` +
|
|
34
|
+
`${AT} [data-signin-quiet]{margin:0;font-size:13px;color:${MUTE}}` +
|
|
35
|
+
`${AT} [data-signin-quiet] button{padding:0;border:0;background:none;color:${INK};font:inherit;cursor:pointer}` +
|
|
36
|
+
`${AT} [data-signin-quiet] button:hover:not(:disabled){text-decoration:underline}` +
|
|
37
|
+
`${AT} [data-signin-terms]{margin:0;max-width:400px;text-align:center;font-size:12px;line-height:18px;color:${MUTE}}` +
|
|
38
|
+
`${AT} [data-signin-terms] a{color:${INK};text-decoration:none}` +
|
|
39
|
+
`${AT} [data-signin-terms] a:hover{text-decoration:underline;text-underline-offset:2px}`;
|
|
13
40
|
export function SignInPanel(props) {
|
|
14
41
|
return props.request ? _jsx(Panel, { ...props, mint: props.request }) : _jsx(UnderProvider, { ...props });
|
|
15
42
|
}
|
|
@@ -18,9 +45,10 @@ function UnderProvider(props) {
|
|
|
18
45
|
const { sdk } = useIam();
|
|
19
46
|
return _jsx(Panel, { ...props, mint: (params) => sdk.getSigninUrl(params) });
|
|
20
47
|
}
|
|
21
|
-
function Panel({ title, line, providers = ['google', 'github'], signin = SIGNIN, signup =
|
|
48
|
+
function Panel({ title, line, providers = ['google', 'github'], signin = SIGNIN, signup = false, termsHref = 'https://hanzo.ai/terms', privacyHref = 'https://hanzo.ai/privacy', authorize = (u) => u, track, mint, background = '$background', borderColor = '$borderColor', bare = false, }) {
|
|
22
49
|
const { t } = useI18n();
|
|
23
50
|
const [email, setEmail] = useState('');
|
|
51
|
+
const [emailOpen, setEmailOpen] = useState(false);
|
|
24
52
|
const [busy, setBusy] = useState(null);
|
|
25
53
|
const [wrong, setWrong] = useState(null);
|
|
26
54
|
/** Mint this site's own request, then leave for where `way` goes. */
|
|
@@ -46,9 +74,14 @@ function Panel({ title, line, providers = ['google', 'github'], signin = SIGNIN,
|
|
|
46
74
|
}
|
|
47
75
|
void leave('email', { kind: 'email', email: typed }, typed);
|
|
48
76
|
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
77
|
+
const card = bare ? {} : { bg: background, borderWidth: 1, borderColor, rounded: '$6', p: '$6' };
|
|
78
|
+
const emailLabel = t(busy === 'email' ? 'One moment…' : 'Continue with email');
|
|
79
|
+
return (_jsxs(YStack, { "data-slot": "signin-panel", "data-surface": bare ? 'bare' : 'card', width: "100%", maxW: bare ? 400 : 464, items: "center", gap: "$3", ...card, children: [_jsx("style", { dangerouslySetInnerHTML: { __html: STYLE } }), title ? (_jsx(Heading, { render: "h1", size: "$8", fontWeight: "500", color: "$ink", m: 0, text: "center", children: title })) : null, line ? (_jsx(Paragraph, { size: "$3", color: "$quiet", m: 0, text: "center", maxW: 360, children: line })) : null, _jsxs("div", { "data-signin-body": "", style: title || line ? { marginTop: 12 } : undefined, children: [providers.length ? (_jsxs(_Fragment, { children: [_jsx("div", { "data-signin-pair": "", children: providers.map((p) => (_jsxs("button", { "data-signin-btn": "", type: "button", disabled: busy !== null, onClick: () => void leave(p, { kind: 'provider', provider: p }), children: [p === 'google' ? _jsx(SiGoogle, { size: 17, "aria-hidden": true }) : _jsx(SiGithub, { size: 17, "aria-hidden": true }), t('Continue with {provider}', { provider: NAME[p] })] }, p))) }), _jsx("div", { "data-signin-or": "", children: t('or') })] })) : null, emailOpen ? (_jsxs("form", { "data-signin-form": "", onSubmit: withEmail, noValidate: true, children: [_jsx("input", { id: "hanzo-signin-email", "data-signin-field": "", type: "email", name: "email", autoComplete: "username", "aria-label": t('Email'), "aria-invalid": wrong ? true : undefined, value: email, onChange: (e) => setEmail(e.target.value), placeholder: "you@company.com", autoFocus: true }), wrong ? (_jsx("p", { "data-signin-wrong": "", role: "alert", children: t(wrong) })) : null, _jsx("button", { "data-signin-btn": "", "data-solid": "", type: "submit", disabled: busy !== null, children: emailLabel })] })) : (_jsxs(_Fragment, { children: [wrong ? (_jsx("p", { "data-signin-wrong": "", role: "alert", children: t(wrong) })) : null, _jsx("button", { "data-signin-btn": "", "data-solid": "", type: "button", disabled: busy !== null, onClick: () => {
|
|
80
|
+
setWrong(null);
|
|
81
|
+
setEmailOpen(true);
|
|
82
|
+
}, children: emailLabel })] }))] }), signup ? (_jsxs("p", { "data-signin-quiet": "", children: [`${t('New to Hanzo?')} `, _jsx("button", { type: "button", disabled: busy !== null, onClick: () => void leave('signup', { kind: 'signup' }), children: t('Create account') })] })) : null, _jsx("p", { "data-signin-terms": "", children: t("By continuing, you agree to Hanzo's {terms} and {privacy}.", {
|
|
83
|
+
terms: _jsx("a", { href: termsHref, children: t('Terms') }),
|
|
84
|
+
privacy: _jsx("a", { href: privacyHref, children: t('Privacy Policy') }),
|
|
52
85
|
}) })] }));
|
|
53
86
|
}
|
|
54
87
|
//# sourceMappingURL=SignInPanel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SignInPanel.js","sourceRoot":"","sources":["../../src/auth/SignInPanel.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"SignInPanel.js","sourceRoot":"","sources":["../../src/auth/SignInPanel.tsx"],"names":[],"mappings":"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"}
|
package/dist/gallery.html
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!doctype html><html lang="en" class="t_dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>@hanzo/ui 8.32.
|
|
1
|
+
<!doctype html><html lang="en" class="t_dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>@hanzo/ui 8.32.4</title><style>/* @hanzo/ui — generated by scripts/gen-css.mjs. Do not edit. */
|
|
2
2
|
:root { --hanzo-ui-styles: 1; }
|
|
3
3
|
/* Hanzo Design System — the entry point. Import THIS one file.
|
|
4
4
|
*
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hanzo/ui",
|
|
3
|
-
"version": "8.32.
|
|
3
|
+
"version": "8.32.4",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Hanzo UI — the one canonical Hanzo component library, on @hanzo/gui + @hanzo/design. ONE substrate: every component renders through @hanzo/gui primitives, so the same import works on web, native (expo) and desktop (Tauri). Self-contained (theme.css), presentational, host-agnostic, clean-room.",
|
|
6
6
|
"exports": {
|