@draftlab/auth 0.0.4 → 0.1.1
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.
- package/dist/error.d.ts +1 -1
- package/dist/provider/code.d.ts +26 -10
- package/dist/provider/code.js +26 -13
- package/dist/provider/password.d.ts +2 -2
- package/dist/storage/memory.d.ts +1 -1
- package/dist/storage/unstorage.d.ts +1 -1
- package/dist/storage/unstorage.js +1 -1
- package/dist/themes/theme.d.ts +2 -2
- package/dist/ui/base.d.ts +22 -35
- package/dist/ui/base.js +163 -177
- package/dist/ui/code.d.ts +22 -135
- package/dist/ui/code.js +199 -160
- package/dist/ui/form.d.ts +8 -6
- package/dist/ui/form.js +44 -46
- package/dist/ui/icon.d.ts +7 -84
- package/dist/ui/icon.js +56 -178
- package/dist/ui/password.d.ts +29 -34
- package/dist/ui/password.js +340 -236
- package/dist/ui/select.d.ts +19 -218
- package/dist/ui/select.js +72 -259
- package/package.json +4 -2
package/dist/ui/form.js
CHANGED
|
@@ -1,60 +1,58 @@
|
|
|
1
|
-
|
|
1
|
+
import { jsx, jsxs } from "preact/jsx-runtime";
|
|
2
|
+
|
|
3
|
+
//#region src/ui/form.tsx
|
|
2
4
|
/**
|
|
3
5
|
* Success icon component showing a checkmark in a circle.
|
|
4
6
|
* Used for positive feedback messages.
|
|
5
7
|
*/
|
|
6
|
-
const SuccessIcon = () =>
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
/>
|
|
21
|
-
</svg>
|
|
22
|
-
`;
|
|
8
|
+
const SuccessIcon = () => /* @__PURE__ */ jsx("svg", {
|
|
9
|
+
"aria-hidden": "true",
|
|
10
|
+
"data-slot": "icon-success",
|
|
11
|
+
fill: "none",
|
|
12
|
+
stroke: "currentColor",
|
|
13
|
+
strokeWidth: "1.5",
|
|
14
|
+
viewBox: "0 0 24 24",
|
|
15
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
16
|
+
children: /* @__PURE__ */ jsx("path", {
|
|
17
|
+
d: "M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z",
|
|
18
|
+
strokeLinecap: "round",
|
|
19
|
+
strokeLinejoin: "round"
|
|
20
|
+
})
|
|
21
|
+
});
|
|
23
22
|
/**
|
|
24
23
|
* Danger icon component showing an exclamation mark in a circle.
|
|
25
24
|
* Used for error and warning messages.
|
|
26
25
|
*/
|
|
27
|
-
const DangerIcon = () =>
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
/>
|
|
42
|
-
</svg>
|
|
43
|
-
`;
|
|
26
|
+
const DangerIcon = () => /* @__PURE__ */ jsx("svg", {
|
|
27
|
+
"aria-hidden": "true",
|
|
28
|
+
"data-slot": "icon-danger",
|
|
29
|
+
fill: "none",
|
|
30
|
+
stroke: "currentColor",
|
|
31
|
+
strokeWidth: "1.5",
|
|
32
|
+
viewBox: "0 0 24 24",
|
|
33
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
34
|
+
children: /* @__PURE__ */ jsx("path", {
|
|
35
|
+
d: "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z",
|
|
36
|
+
strokeLinecap: "round",
|
|
37
|
+
strokeLinejoin: "round"
|
|
38
|
+
})
|
|
39
|
+
});
|
|
44
40
|
/**
|
|
45
41
|
* Form alert component that displays error or success messages.
|
|
46
|
-
* Returns
|
|
42
|
+
* Returns a Preact component or null if no message.
|
|
47
43
|
*/
|
|
48
|
-
const FormAlert = (
|
|
49
|
-
if (!
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
44
|
+
const FormAlert = ({ message, color = "danger" }) => {
|
|
45
|
+
if (!message) return null;
|
|
46
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
47
|
+
"aria-live": "polite",
|
|
48
|
+
"data-color": color,
|
|
49
|
+
"data-component": "form-alert",
|
|
50
|
+
role: "alert",
|
|
51
|
+
children: [color === "success" ? /* @__PURE__ */ jsx(SuccessIcon, {}) : /* @__PURE__ */ jsx(DangerIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
52
|
+
"data-slot": "message",
|
|
53
|
+
children: message
|
|
54
|
+
})]
|
|
55
|
+
});
|
|
58
56
|
};
|
|
59
57
|
|
|
60
58
|
//#endregion
|
package/dist/ui/icon.d.ts
CHANGED
|
@@ -1,98 +1,21 @@
|
|
|
1
|
+
import { ComponentChildren } from "preact";
|
|
2
|
+
|
|
1
3
|
//#region src/ui/icon.d.ts
|
|
2
|
-
|
|
3
|
-
* Icon components for Draft Auth UI.
|
|
4
|
-
* Provides SVG icons for various authentication providers and common UI elements.
|
|
5
|
-
*
|
|
6
|
-
* ## Usage
|
|
7
|
-
*
|
|
8
|
-
* ```ts
|
|
9
|
-
* import { ICON_GITHUB, ICON_GOOGLE, ICON_EMAIL } from "./icon"
|
|
10
|
-
*
|
|
11
|
-
* // In provider buttons
|
|
12
|
-
* const buttonHtml = `
|
|
13
|
-
* <button>
|
|
14
|
-
* ${ICON_GITHUB}
|
|
15
|
-
* Continue with GitHub
|
|
16
|
-
* </button>
|
|
17
|
-
* `
|
|
18
|
-
*
|
|
19
|
-
* // In form elements
|
|
20
|
-
* const formHtml = `
|
|
21
|
-
* <div>
|
|
22
|
-
* ${ICON_EMAIL}
|
|
23
|
-
* Email verification
|
|
24
|
-
* </div>
|
|
25
|
-
* `
|
|
26
|
-
* ```
|
|
27
|
-
*
|
|
28
|
-
* ## Features
|
|
29
|
-
*
|
|
30
|
-
* - **Consistent sizing**: All icons are properly sized and scalable
|
|
31
|
-
* - **Accessibility**: Proper ARIA labels and semantic markup
|
|
32
|
-
* - **Current color**: Icons inherit text color for easy theming
|
|
33
|
-
* - **Optimized SVGs**: Clean, minimal SVG markup for performance
|
|
34
|
-
*
|
|
35
|
-
* @packageDocumentation
|
|
36
|
-
*/
|
|
4
|
+
|
|
37
5
|
/**
|
|
38
6
|
* GitHub brand icon with official logo design.
|
|
39
7
|
* Used for GitHub authentication provider buttons and references.
|
|
40
|
-
*
|
|
41
|
-
* @example
|
|
42
|
-
* ```ts
|
|
43
|
-
* const buttonHtml = `
|
|
44
|
-
* <button data-component="provider-button">
|
|
45
|
-
* ${ICON_GITHUB}
|
|
46
|
-
* Sign in with GitHub
|
|
47
|
-
* </button>
|
|
48
|
-
* `
|
|
49
|
-
* ```
|
|
50
8
|
*/
|
|
51
|
-
declare const ICON_GITHUB
|
|
9
|
+
declare const ICON_GITHUB: () => ComponentChildren;
|
|
52
10
|
/**
|
|
53
11
|
* Google brand icon with official multicolor logo design.
|
|
54
12
|
* Used for Google authentication provider buttons and references.
|
|
55
|
-
*
|
|
56
|
-
* @example
|
|
57
|
-
* ```ts
|
|
58
|
-
* const buttonHtml = `
|
|
59
|
-
* <button data-component="provider-button">
|
|
60
|
-
* ${ICON_GOOGLE}
|
|
61
|
-
* Continue with Google
|
|
62
|
-
* </button>
|
|
63
|
-
* `
|
|
64
|
-
* ```
|
|
65
13
|
*/
|
|
66
|
-
declare const ICON_GOOGLE
|
|
14
|
+
declare const ICON_GOOGLE: () => ComponentChildren;
|
|
67
15
|
/**
|
|
68
16
|
* Email envelope icon for email-related authentication flows.
|
|
69
17
|
* Used in email verification, password reset, and contact forms.
|
|
70
|
-
*
|
|
71
|
-
* @example
|
|
72
|
-
* ```ts
|
|
73
|
-
* const inputGroupHtml = `
|
|
74
|
-
* <div data-component="input-group">
|
|
75
|
-
* ${ICON_EMAIL}
|
|
76
|
-
* <input type="email" placeholder="Enter your email" />
|
|
77
|
-
* </div>
|
|
78
|
-
* `
|
|
79
|
-
* ```
|
|
80
|
-
*/
|
|
81
|
-
declare const ICON_EMAIL = "\n\t<svg\n\t\taria-label=\"Email\"\n\t\tfill=\"none\"\n\t\trole=\"img\"\n\t\tstroke=\"currentColor\"\n\t\tstroke-width=\"1.5\"\n\t\tviewBox=\"0 0 24 24\"\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t>\n\t\t<path\n\t\t\td=\"M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75\"\n\t\t\tstroke-linecap=\"round\"\n\t\t\tstroke-linejoin=\"round\"\n\t\t/>\n\t</svg>\n";
|
|
82
|
-
/**
|
|
83
|
-
* Slack brand icon with official logo design.
|
|
84
|
-
* Used for Slack authentication provider buttons and workplace integrations.
|
|
85
|
-
*
|
|
86
|
-
* @example
|
|
87
|
-
* ```ts
|
|
88
|
-
* const buttonHtml = `
|
|
89
|
-
* <button data-component="provider-button">
|
|
90
|
-
* ${ICON_SLACK}
|
|
91
|
-
* Continue with Slack
|
|
92
|
-
* </button>
|
|
93
|
-
* `
|
|
94
|
-
* ```
|
|
95
18
|
*/
|
|
96
|
-
declare const
|
|
19
|
+
declare const ICON_EMAIL: () => ComponentChildren;
|
|
97
20
|
//#endregion
|
|
98
|
-
export { ICON_EMAIL, ICON_GITHUB, ICON_GOOGLE
|
|
21
|
+
export { ICON_EMAIL, ICON_GITHUB, ICON_GOOGLE };
|
package/dist/ui/icon.js
CHANGED
|
@@ -1,192 +1,70 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
* Provides SVG icons for various authentication providers and common UI elements.
|
|
5
|
-
*
|
|
6
|
-
* ## Usage
|
|
7
|
-
*
|
|
8
|
-
* ```ts
|
|
9
|
-
* import { ICON_GITHUB, ICON_GOOGLE, ICON_EMAIL } from "./icon"
|
|
10
|
-
*
|
|
11
|
-
* // In provider buttons
|
|
12
|
-
* const buttonHtml = `
|
|
13
|
-
* <button>
|
|
14
|
-
* ${ICON_GITHUB}
|
|
15
|
-
* Continue with GitHub
|
|
16
|
-
* </button>
|
|
17
|
-
* `
|
|
18
|
-
*
|
|
19
|
-
* // In form elements
|
|
20
|
-
* const formHtml = `
|
|
21
|
-
* <div>
|
|
22
|
-
* ${ICON_EMAIL}
|
|
23
|
-
* Email verification
|
|
24
|
-
* </div>
|
|
25
|
-
* `
|
|
26
|
-
* ```
|
|
27
|
-
*
|
|
28
|
-
* ## Features
|
|
29
|
-
*
|
|
30
|
-
* - **Consistent sizing**: All icons are properly sized and scalable
|
|
31
|
-
* - **Accessibility**: Proper ARIA labels and semantic markup
|
|
32
|
-
* - **Current color**: Icons inherit text color for easy theming
|
|
33
|
-
* - **Optimized SVGs**: Clean, minimal SVG markup for performance
|
|
34
|
-
*
|
|
35
|
-
* @packageDocumentation
|
|
36
|
-
*/
|
|
1
|
+
import { jsx, jsxs } from "preact/jsx-runtime";
|
|
2
|
+
|
|
3
|
+
//#region src/ui/icon.tsx
|
|
37
4
|
/**
|
|
38
5
|
* GitHub brand icon with official logo design.
|
|
39
6
|
* Used for GitHub authentication provider buttons and references.
|
|
40
|
-
*
|
|
41
|
-
* @example
|
|
42
|
-
* ```ts
|
|
43
|
-
* const buttonHtml = `
|
|
44
|
-
* <button data-component="provider-button">
|
|
45
|
-
* ${ICON_GITHUB}
|
|
46
|
-
* Sign in with GitHub
|
|
47
|
-
* </button>
|
|
48
|
-
* `
|
|
49
|
-
* ```
|
|
50
7
|
*/
|
|
51
|
-
const ICON_GITHUB =
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
<path d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z" />
|
|
63
|
-
</svg>
|
|
64
|
-
`;
|
|
8
|
+
const ICON_GITHUB = () => /* @__PURE__ */ jsx("svg", {
|
|
9
|
+
"aria-label": "GitHub",
|
|
10
|
+
fill: "currentColor",
|
|
11
|
+
height: "250",
|
|
12
|
+
preserveAspectRatio: "xMidYMid",
|
|
13
|
+
role: "img",
|
|
14
|
+
viewBox: "0 0 256 250",
|
|
15
|
+
width: "256",
|
|
16
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
17
|
+
children: /* @__PURE__ */ jsx("path", { d: "M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z" })
|
|
18
|
+
});
|
|
65
19
|
/**
|
|
66
20
|
* Google brand icon with official multicolor logo design.
|
|
67
21
|
* Used for Google authentication provider buttons and references.
|
|
68
|
-
*
|
|
69
|
-
* @example
|
|
70
|
-
* ```ts
|
|
71
|
-
* const buttonHtml = `
|
|
72
|
-
* <button data-component="provider-button">
|
|
73
|
-
* ${ICON_GOOGLE}
|
|
74
|
-
* Continue with Google
|
|
75
|
-
* </button>
|
|
76
|
-
* `
|
|
77
|
-
* ```
|
|
78
22
|
*/
|
|
79
|
-
const ICON_GOOGLE =
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
`;
|
|
23
|
+
const ICON_GOOGLE = () => /* @__PURE__ */ jsxs("svg", {
|
|
24
|
+
"aria-label": "Google",
|
|
25
|
+
height: "262",
|
|
26
|
+
preserveAspectRatio: "xMidYMid",
|
|
27
|
+
role: "img",
|
|
28
|
+
viewBox: "0 0 256 262",
|
|
29
|
+
width: "256",
|
|
30
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
31
|
+
children: [
|
|
32
|
+
/* @__PURE__ */ jsx("path", {
|
|
33
|
+
d: "M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027",
|
|
34
|
+
fill: "#4285F4"
|
|
35
|
+
}),
|
|
36
|
+
/* @__PURE__ */ jsx("path", {
|
|
37
|
+
d: "M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1",
|
|
38
|
+
fill: "#34A853"
|
|
39
|
+
}),
|
|
40
|
+
/* @__PURE__ */ jsx("path", {
|
|
41
|
+
d: "M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782",
|
|
42
|
+
fill: "#FBBC05"
|
|
43
|
+
}),
|
|
44
|
+
/* @__PURE__ */ jsx("path", {
|
|
45
|
+
d: "M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251",
|
|
46
|
+
fill: "#EB4335"
|
|
47
|
+
})
|
|
48
|
+
]
|
|
49
|
+
});
|
|
107
50
|
/**
|
|
108
51
|
* Email envelope icon for email-related authentication flows.
|
|
109
52
|
* Used in email verification, password reset, and contact forms.
|
|
110
|
-
*
|
|
111
|
-
* @example
|
|
112
|
-
* ```ts
|
|
113
|
-
* const inputGroupHtml = `
|
|
114
|
-
* <div data-component="input-group">
|
|
115
|
-
* ${ICON_EMAIL}
|
|
116
|
-
* <input type="email" placeholder="Enter your email" />
|
|
117
|
-
* </div>
|
|
118
|
-
* `
|
|
119
|
-
* ```
|
|
120
|
-
*/
|
|
121
|
-
const ICON_EMAIL = `
|
|
122
|
-
<svg
|
|
123
|
-
aria-label="Email"
|
|
124
|
-
fill="none"
|
|
125
|
-
role="img"
|
|
126
|
-
stroke="currentColor"
|
|
127
|
-
stroke-width="1.5"
|
|
128
|
-
viewBox="0 0 24 24"
|
|
129
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
130
|
-
>
|
|
131
|
-
<path
|
|
132
|
-
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"
|
|
133
|
-
stroke-linecap="round"
|
|
134
|
-
stroke-linejoin="round"
|
|
135
|
-
/>
|
|
136
|
-
</svg>
|
|
137
|
-
`;
|
|
138
|
-
/**
|
|
139
|
-
* Slack brand icon with official logo design.
|
|
140
|
-
* Used for Slack authentication provider buttons and workplace integrations.
|
|
141
|
-
*
|
|
142
|
-
* @example
|
|
143
|
-
* ```ts
|
|
144
|
-
* const buttonHtml = `
|
|
145
|
-
* <button data-component="provider-button">
|
|
146
|
-
* ${ICON_SLACK}
|
|
147
|
-
* Continue with Slack
|
|
148
|
-
* </button>
|
|
149
|
-
* `
|
|
150
|
-
* ```
|
|
151
53
|
*/
|
|
152
|
-
const
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
fill="currentColor"
|
|
167
|
-
fill-rule="evenodd"
|
|
168
|
-
/>
|
|
169
|
-
<path
|
|
170
|
-
clip-rule="evenodd"
|
|
171
|
-
d="M24.0007 8.79951C24.0016 7.47547 22.9269 6.40098 21.6003 6.4C20.2736 6.40098 19.1989 7.47547 19.1999 8.79951V11.2H21.6003C22.9269 11.199 24.0016 10.1245 24.0007 8.79951ZM17.6006 8.79951V2.39951C17.6016 1.07645 16.5279 0.00195719 15.2012 0C13.8745 0.000978593 12.7998 1.07547 12.8008 2.39951V8.79951C12.7988 10.1235 13.8735 11.198 15.2002 11.2C16.5269 11.199 17.6016 10.1245 17.6006 8.79951Z"
|
|
172
|
-
fill="currentColor"
|
|
173
|
-
fill-rule="evenodd"
|
|
174
|
-
/>
|
|
175
|
-
<path
|
|
176
|
-
clip-rule="evenodd"
|
|
177
|
-
d="M15.1992 23.9998C16.5259 23.9988 17.6006 22.9243 17.5996 21.6003C17.6006 20.2763 16.5259 19.2018 15.1992 19.2008H12.7988V21.6003C12.7978 22.9234 13.8725 23.9978 15.1992 23.9998ZM15.1992 17.5988H21.5993C22.926 17.5978 24.0007 16.5234 23.9997 15.1993C24.0016 13.8753 22.927 12.8008 21.6003 12.7988H15.2002C13.8735 12.7998 12.7988 13.8743 12.7998 15.1983C12.7988 16.5234 13.8725 17.5978 15.1992 17.5988Z"
|
|
178
|
-
fill="currentColor"
|
|
179
|
-
fill-rule="evenodd"
|
|
180
|
-
/>
|
|
181
|
-
<path
|
|
182
|
-
clip-rule="evenodd"
|
|
183
|
-
d="M0 15.1993C-0.000979882 16.5234 1.07371 17.5978 2.40039 17.5988C3.72708 17.5978 4.80177 16.5234 4.80079 15.1993V12.7998H2.40039C1.07371 12.8008 -0.000979882 13.8753 0 15.1993ZM6.40007 15.1993V21.5993C6.3981 22.9234 7.47279 23.9978 8.79948 23.9998C10.1262 23.9988 11.2009 22.9243 11.1999 21.6003V15.2013C11.2018 13.8772 10.1271 12.8027 8.80046 12.8008C7.47279 12.8008 6.39909 13.8753 6.40007 15.1993Z"
|
|
184
|
-
fill="currentColor"
|
|
185
|
-
fill-rule="evenodd"
|
|
186
|
-
/>
|
|
187
|
-
</g>
|
|
188
|
-
</svg>
|
|
189
|
-
`;
|
|
54
|
+
const ICON_EMAIL = () => /* @__PURE__ */ jsx("svg", {
|
|
55
|
+
"aria-label": "Email",
|
|
56
|
+
fill: "none",
|
|
57
|
+
role: "img",
|
|
58
|
+
stroke: "currentColor",
|
|
59
|
+
strokeWidth: "1.5",
|
|
60
|
+
viewBox: "0 0 24 24",
|
|
61
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
62
|
+
children: /* @__PURE__ */ jsx("path", {
|
|
63
|
+
d: "M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75",
|
|
64
|
+
strokeLinecap: "round",
|
|
65
|
+
strokeLinejoin: "round"
|
|
66
|
+
})
|
|
67
|
+
});
|
|
190
68
|
|
|
191
69
|
//#endregion
|
|
192
|
-
export { ICON_EMAIL, ICON_GITHUB, ICON_GOOGLE
|
|
70
|
+
export { ICON_EMAIL, ICON_GITHUB, ICON_GOOGLE };
|
package/dist/ui/password.d.ts
CHANGED
|
@@ -3,49 +3,44 @@ import { PasswordConfig } from "../provider/password.js";
|
|
|
3
3
|
//#region src/ui/password.d.ts
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
7
|
-
* All text can be customized via the copy prop.
|
|
6
|
+
* Strongly typed copy text configuration for password UI
|
|
8
7
|
*/
|
|
9
|
-
|
|
10
|
-
error_email_taken: string;
|
|
11
|
-
error_invalid_code: string;
|
|
12
|
-
error_invalid_email: string;
|
|
13
|
-
error_invalid_password: string;
|
|
14
|
-
error_password_mismatch: string;
|
|
15
|
-
error_validation_error: string;
|
|
16
|
-
register_title: string;
|
|
17
|
-
register_description: string;
|
|
18
|
-
login_title: string;
|
|
19
|
-
login_description: string;
|
|
20
|
-
register: string;
|
|
21
|
-
register_prompt: string;
|
|
22
|
-
login_prompt: string;
|
|
23
|
-
login: string;
|
|
24
|
-
change_prompt: string;
|
|
25
|
-
code_resend: string;
|
|
26
|
-
code_return: string;
|
|
27
|
-
input_email: string;
|
|
28
|
-
input_password: string;
|
|
29
|
-
input_code: string;
|
|
30
|
-
input_repeat: string;
|
|
31
|
-
button_continue: string;
|
|
32
|
-
logo: string;
|
|
33
|
-
}
|
|
34
|
-
/**
|
|
35
|
-
* Type for customizable UI copy text.
|
|
36
|
-
*/
|
|
37
|
-
type PasswordUICopy = typeof DEFAULT_COPY;
|
|
8
|
+
interface PasswordUICopy {
|
|
9
|
+
readonly error_email_taken: string;
|
|
10
|
+
readonly error_invalid_code: string;
|
|
11
|
+
readonly error_invalid_email: string;
|
|
12
|
+
readonly error_invalid_password: string;
|
|
13
|
+
readonly error_password_mismatch: string;
|
|
14
|
+
readonly error_validation_error: string;
|
|
15
|
+
readonly register_title: string;
|
|
16
|
+
readonly register_description: string;
|
|
17
|
+
readonly login_title: string;
|
|
18
|
+
readonly login_description: string;
|
|
19
|
+
readonly register: string;
|
|
20
|
+
readonly register_prompt: string;
|
|
21
|
+
readonly login_prompt: string;
|
|
22
|
+
readonly login: string;
|
|
23
|
+
readonly change_prompt: string;
|
|
24
|
+
readonly code_resend: string;
|
|
25
|
+
readonly code_return: string;
|
|
26
|
+
readonly input_email: string;
|
|
27
|
+
readonly input_password: string;
|
|
28
|
+
readonly input_code: string;
|
|
29
|
+
readonly input_repeat: string;
|
|
30
|
+
readonly button_continue: string;
|
|
31
|
+
readonly logo: string;
|
|
32
|
+
}
|
|
38
33
|
/**
|
|
39
|
-
* Configuration options for the PasswordUI component
|
|
34
|
+
* Configuration options for the PasswordUI component
|
|
40
35
|
*/
|
|
41
36
|
interface PasswordUIOptions extends Pick<PasswordConfig, "sendCode" | "validatePassword"> {
|
|
42
37
|
/**
|
|
43
|
-
* Custom text copy for UI labels, messages, and errors
|
|
38
|
+
* Custom text copy for UI labels, messages, and errors
|
|
44
39
|
*/
|
|
45
40
|
readonly copy?: Partial<PasswordUICopy>;
|
|
46
41
|
}
|
|
47
42
|
/**
|
|
48
|
-
* Creates a complete UI configuration for password-based authentication
|
|
43
|
+
* Creates a complete UI configuration for password-based authentication
|
|
49
44
|
*/
|
|
50
45
|
declare const PasswordUI: (options: PasswordUIOptions) => PasswordConfig;
|
|
51
46
|
//#endregion
|