@stackframe/stack 2.5.24 → 2.5.27
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/CHANGELOG.md +30 -0
- package/dist/components/elements/user-avatar.d.mts +1 -0
- package/dist/components/elements/user-avatar.d.ts +1 -0
- package/dist/components/elements/user-avatar.js +4 -3
- package/dist/components/elements/user-avatar.js.map +1 -1
- package/dist/components/oauth-button.js +74 -0
- package/dist/components/oauth-button.js.map +1 -1
- package/dist/components/profile-image-editor.d.mts +11 -0
- package/dist/components/profile-image-editor.d.ts +11 -0
- package/dist/components/profile-image-editor.js +160 -0
- package/dist/components/profile-image-editor.js.map +1 -0
- package/dist/components/team-icon.js +2 -13
- package/dist/components/team-icon.js.map +1 -1
- package/dist/components-page/account-settings.js +48 -19
- package/dist/components-page/account-settings.js.map +1 -1
- package/dist/esm/components/elements/user-avatar.js +4 -3
- package/dist/esm/components/elements/user-avatar.js.map +1 -1
- package/dist/esm/components/oauth-button.js +74 -0
- package/dist/esm/components/oauth-button.js.map +1 -1
- package/dist/esm/components/profile-image-editor.js +124 -0
- package/dist/esm/components/profile-image-editor.js.map +1 -0
- package/dist/esm/components/team-icon.js +3 -4
- package/dist/esm/components/team-icon.js.map +1 -1
- package/dist/esm/components-page/account-settings.js +48 -19
- package/dist/esm/components-page/account-settings.js.map +1 -1
- package/dist/esm/generated/global-css.js +1 -1
- package/dist/esm/generated/global-css.js.map +1 -1
- package/dist/esm/lib/stack-app.js +14 -4
- package/dist/esm/lib/stack-app.js.map +1 -1
- package/dist/esm/utils/constants.js +1 -1
- package/dist/esm/utils/constants.js.map +1 -1
- package/dist/generated/global-css.d.mts +1 -1
- package/dist/generated/global-css.d.ts +1 -1
- package/dist/generated/global-css.js +1 -1
- package/dist/generated/global-css.js.map +1 -1
- package/dist/lib/stack-app.d.mts +3 -0
- package/dist/lib/stack-app.d.ts +3 -0
- package/dist/lib/stack-app.js +14 -4
- package/dist/lib/stack-app.js.map +1 -1
- package/dist/utils/constants.d.mts +1 -1
- package/dist/utils/constants.d.ts +1 -1
- package/dist/utils/constants.js +1 -1
- package/dist/utils/constants.js.map +1 -1
- package/package.json +9 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,35 @@
|
|
|
1
1
|
# @stackframe/stack
|
|
2
2
|
|
|
3
|
+
## 2.5.27
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Bugfixes
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
- @stackframe/stack-shared@2.5.27
|
|
10
|
+
- @stackframe/stack-sc@2.5.27
|
|
11
|
+
- @stackframe/stack-ui@2.5.27
|
|
12
|
+
|
|
13
|
+
## 2.5.26
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- Bugfixes
|
|
18
|
+
- Updated dependencies
|
|
19
|
+
- @stackframe/stack-sc@2.5.26
|
|
20
|
+
- @stackframe/stack-shared@2.5.26
|
|
21
|
+
- @stackframe/stack-ui@2.5.26
|
|
22
|
+
|
|
23
|
+
## 2.5.25
|
|
24
|
+
|
|
25
|
+
### Patch Changes
|
|
26
|
+
|
|
27
|
+
- GitLab OAuth provider
|
|
28
|
+
- Updated dependencies
|
|
29
|
+
- @stackframe/stack-shared@2.5.25
|
|
30
|
+
- @stackframe/stack-ui@2.5.25
|
|
31
|
+
- @stackframe/stack-sc@2.5.25
|
|
32
|
+
|
|
3
33
|
## 2.5.24
|
|
4
34
|
|
|
5
35
|
### Patch Changes
|
|
@@ -23,14 +23,15 @@ __export(user_avatar_exports, {
|
|
|
23
23
|
UserAvatar: () => UserAvatar
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(user_avatar_exports);
|
|
26
|
-
var import_lucide_react = require("lucide-react");
|
|
27
26
|
var import_stack_ui = require("@stackframe/stack-ui");
|
|
27
|
+
var import_lucide_react = require("lucide-react");
|
|
28
28
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
29
|
+
var defaultSize = 34;
|
|
29
30
|
function UserAvatar(props) {
|
|
30
31
|
const user = props.user;
|
|
31
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Avatar, { style: { height: props.size ||
|
|
32
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Avatar, { style: { height: props.size || defaultSize, width: props.size || defaultSize }, className: props.border ? "border" : "", children: [
|
|
32
33
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.AvatarImage, { src: user?.profileImageUrl || "" }),
|
|
33
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.AvatarFallback, { children: user ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-medium", children: (user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.UserRound, { className: "
|
|
34
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.AvatarFallback, { children: user ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-medium", style: { fontSize: (props.size || defaultSize) * 0.5 }, children: (user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.UserRound, { className: "text-zinc-500", size: (props.size || defaultSize) * 0.6 }) })
|
|
34
35
|
] });
|
|
35
36
|
}
|
|
36
37
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/elements/user-avatar.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../../src/components/elements/user-avatar.tsx"],"sourcesContent":["import { Avatar, AvatarFallback, AvatarImage } from \"@stackframe/stack-ui\";\nimport { UserRound } from \"lucide-react\";\n\nconst defaultSize = 34;\n\nexport function UserAvatar(props: {\n size?: number,\n user?: {\n profileImageUrl?: string | null,\n displayName?: string | null,\n primaryEmail?: string | null,\n } | null,\n border?: boolean,\n}) {\n const user = props.user;\n return (\n <Avatar style={{ height: props.size || defaultSize, width: props.size || defaultSize }} className={props.border ? 'border' : ''}>\n <AvatarImage src={user?.profileImageUrl || ''} />\n <AvatarFallback>\n {user ?\n <div className='font-medium' style={{ fontSize: (props.size || defaultSize) * 0.5 }}>\n {(user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase()}\n </div> :\n <UserRound className=\"text-zinc-500\" size={(props.size || defaultSize) * 0.6} />}\n </AvatarFallback>\n </Avatar>\n );\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAoD;AACpD,0BAA0B;AAetB;AAbJ,IAAM,cAAc;AAEb,SAAS,WAAW,OAQxB;AACD,QAAM,OAAO,MAAM;AACnB,SACE,6CAAC,0BAAO,OAAO,EAAE,QAAQ,MAAM,QAAQ,aAAa,OAAO,MAAM,QAAQ,YAAY,GAAG,WAAW,MAAM,SAAS,WAAW,IAC3H;AAAA,gDAAC,+BAAY,KAAK,MAAM,mBAAmB,IAAI;AAAA,IAC/C,4CAAC,kCACE,iBACC,4CAAC,SAAI,WAAU,eAAc,OAAO,EAAE,WAAW,MAAM,QAAQ,eAAe,IAAI,GAC9E,gBAAK,eAAe,KAAK,eAAe,MAAM,GAAG,CAAC,EAAE,YAAY,GACpE,IACA,4CAAC,iCAAU,WAAU,iBAAgB,OAAO,MAAM,QAAQ,eAAe,KAAK,GAClF;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -71,6 +71,70 @@ function SpotifyIcon({ iconSize: iconSize2 }) {
|
|
|
71
71
|
function DiscordIcon({ iconSize: iconSize2 }) {
|
|
72
72
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize2, height: iconSize2, viewBox: "0 0 127.14 96.36", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "#fff", d: "M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z" }) });
|
|
73
73
|
}
|
|
74
|
+
function GitlabIcon({ iconSize: iconSize2 }) {
|
|
75
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
76
|
+
"svg",
|
|
77
|
+
{
|
|
78
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
79
|
+
width: iconSize2,
|
|
80
|
+
height: iconSize2,
|
|
81
|
+
viewBox: "0 -10 256 256",
|
|
82
|
+
version: "1.1",
|
|
83
|
+
preserveAspectRatio: "xMidYMid",
|
|
84
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
|
|
85
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
86
|
+
"path",
|
|
87
|
+
{
|
|
88
|
+
d: "M128.07485,236.074667 L128.07485,236.074667 L175.17885,91.1043048 L80.9708495,91.1043048 L128.07485,236.074667 L128.07485,236.074667 Z",
|
|
89
|
+
fill: "#E24329"
|
|
90
|
+
}
|
|
91
|
+
),
|
|
92
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
93
|
+
"path",
|
|
94
|
+
{
|
|
95
|
+
d: "M128.07485,236.074423 L80.9708495,91.104061 L14.9557638,91.104061 L128.07485,236.074423 L128.07485,236.074423 Z",
|
|
96
|
+
fill: "#FC6D26"
|
|
97
|
+
}
|
|
98
|
+
),
|
|
99
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
100
|
+
"path",
|
|
101
|
+
{
|
|
102
|
+
d: "M14.9558857,91.1044267 L14.9558857,91.1044267 L0.641828571,135.159589 C-0.663771429,139.17757 0.766171429,143.57955 4.18438095,146.06275 L128.074971,236.074789 L14.9558857,91.1044267 L14.9558857,91.1044267 Z",
|
|
103
|
+
fill: "#FCA326"
|
|
104
|
+
}
|
|
105
|
+
),
|
|
106
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
107
|
+
"path",
|
|
108
|
+
{
|
|
109
|
+
d: "M14.9558857,91.1045486 L80.9709714,91.1045486 L52.6000762,3.79026286 C51.1408762,-0.703146667 44.7847619,-0.701927619 43.3255619,3.79026286 L14.9558857,91.1045486 L14.9558857,91.1045486 Z",
|
|
110
|
+
fill: "#E24329"
|
|
111
|
+
}
|
|
112
|
+
),
|
|
113
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
114
|
+
"path",
|
|
115
|
+
{
|
|
116
|
+
d: "M128.07485,236.074423 L175.17885,91.104061 L241.193935,91.104061 L128.07485,236.074423 L128.07485,236.074423 Z",
|
|
117
|
+
fill: "#FC6D26"
|
|
118
|
+
}
|
|
119
|
+
),
|
|
120
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
121
|
+
"path",
|
|
122
|
+
{
|
|
123
|
+
d: "M241.193935,91.1044267 L241.193935,91.1044267 L255.507992,135.159589 C256.813592,139.17757 255.38365,143.57955 251.96544,146.06275 L128.07485,236.074789 L241.193935,91.1044267 L241.193935,91.1044267 Z",
|
|
124
|
+
fill: "#FCA326"
|
|
125
|
+
}
|
|
126
|
+
),
|
|
127
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
128
|
+
"path",
|
|
129
|
+
{
|
|
130
|
+
d: "M241.193935,91.1045486 L175.17885,91.1045486 L203.549745,3.79026286 C205.008945,-0.703146667 211.365059,-0.701927619 212.824259,3.79026286 L241.193935,91.1045486 L241.193935,91.1045486 Z",
|
|
131
|
+
fill: "#E24329"
|
|
132
|
+
}
|
|
133
|
+
)
|
|
134
|
+
] })
|
|
135
|
+
}
|
|
136
|
+
);
|
|
137
|
+
}
|
|
74
138
|
var changeColor = (c, value) => {
|
|
75
139
|
if (c.isLight()) {
|
|
76
140
|
value = -value;
|
|
@@ -141,6 +205,16 @@ function OAuthButton({
|
|
|
141
205
|
};
|
|
142
206
|
break;
|
|
143
207
|
}
|
|
208
|
+
case "gitlab": {
|
|
209
|
+
style = {
|
|
210
|
+
backgroundColor: "#111",
|
|
211
|
+
textColor: "#fff",
|
|
212
|
+
border: "1px solid #333",
|
|
213
|
+
name: "Gitlab",
|
|
214
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GitlabIcon, { iconSize })
|
|
215
|
+
};
|
|
216
|
+
break;
|
|
217
|
+
}
|
|
144
218
|
default: {
|
|
145
219
|
style = {
|
|
146
220
|
name: provider,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/oauth-button.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@stackframe/stack-ui';\nimport { useStackApp } from '..';\nimport Color from 'color';\nimport { useId } from 'react';\n\nconst iconSize = 22;\n\nfunction GoogleIcon({ iconSize } : { iconSize: number} ) {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 24 24\">\n <path fill=\"#4285F4\" d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"/>\n <path fill=\"#34A853\" d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"/>\n <path fill=\"#FBBC05\" d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"/>\n <path fill=\"#EA4335\" d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"/>\n <path fill=\"none\" d=\"M1 1h22v22H1z\" />\n </svg>\n );\n}\n\nfunction FacebookIcon({ iconSize } : { iconSize: number} ) {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 512 512\">\n <path fill='#FFFFFF' d=\"M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z\"/>\n </svg>\n );\n}\n\nfunction GitHubIcon({ iconSize } : { iconSize: number} ) {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 496 512\">\n <path fill='#FFFFFF' d=\"M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z\"/>\n </svg>\n );\n}\n\nfunction MicrosoftIcon({ iconSize } : { iconSize: number} ) {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 21 21\">\n <title>{\"MS-SymbolLockup\"}</title>\n <path fill=\"#f25022\" d=\"M1 1h9v9H1z\" />\n <path fill=\"#00a4ef\" d=\"M1 11h9v9H1z\" />\n <path fill=\"#7fba00\" d=\"M11 1h9v9h-9z\" />\n <path fill=\"#ffb900\" d=\"M11 11h9v9h-9z\" />\n </svg>\n );\n}\n\nfunction SpotifyIcon({ iconSize } : { iconSize: number} ) {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 496 512\">\n <path fill='#ffffff' d=\"M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z\"/>\n </svg>\n );\n}\nfunction DiscordIcon({ iconSize } : { iconSize: number} ) {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 127.14 96.36\">\n <path fill=\"#fff\" d=\"M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z\"/>\n </svg>\n );\n}\n\n\nconst changeColor = (c: Color, value: number) => {\n if (c.isLight()) {\n value = -value;\n }\n return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();\n};\n\nexport function OAuthButton({\n provider,\n type,\n}: {\n provider: string,\n type: 'sign-in' | 'sign-up',\n}) {\n const stackApp = useStackApp();\n const styleId = useId().replaceAll(':', '-');\n\n let style : {\n backgroundColor?: string,\n textColor?: string,\n name: string,\n icon: JSX.Element | null,\n border?: string,\n };\n switch (provider) {\n case 'google': {\n style = {\n backgroundColor: '#fff',\n textColor: '#000',\n name: 'Google',\n border: '1px solid #ddd',\n icon: <GoogleIcon iconSize={iconSize} />,\n };\n break;\n }\n case 'github': {\n style = {\n backgroundColor: '#111',\n textColor: '#fff',\n border: '1px solid #333',\n name: 'GitHub',\n icon: <GitHubIcon iconSize={iconSize} />,\n };\n break;\n }\n case 'facebook': {\n style = {\n backgroundColor: '#1877F2',\n textColor: '#fff',\n name: 'Facebook',\n icon: <FacebookIcon iconSize={iconSize} />,\n };\n break;\n }\n case 'microsoft': {\n style = {\n backgroundColor: '#2f2f2f',\n textColor: '#fff',\n name: 'Microsoft',\n icon: <MicrosoftIcon iconSize={iconSize} />,\n };\n break;\n }\n case 'spotify': {\n style = {\n backgroundColor: '#1DB954',\n textColor: '#fff',\n name: 'Spotify',\n icon: <SpotifyIcon iconSize={iconSize} />,\n };\n break;\n }\n case 'discord': {\n style = {\n backgroundColor: '#5865F2',\n textColor: '#fff',\n name: 'Discord',\n icon: <DiscordIcon iconSize={iconSize} />,\n };\n break;\n }\n default: {\n style = {\n name: provider,\n icon: null,\n };\n }\n }\n\n const styleSheet = `\n .stack-oauth-button-${styleId} {\n background-color: ${style.backgroundColor} !important;\n color: ${style.textColor} !important;\n border: ${style.border} !important;\n }\n .stack-oauth-button-${styleId}:hover {\n background-color: ${changeColor(Color(style.backgroundColor), 10)} !important;\n }\n `;\n\n return (\n <>\n <style>{styleSheet}</style>\n <Button\n onClick={() => stackApp.signInWithOAuth(provider)}\n className={`stack-oauth-button-${styleId}`}\n >\n <div className='flex items-center w-full gap-4'>\n {style.icon}\n <span className='flex-1'>\n {type === 'sign-up' ? 'Sign up with ' : 'Sign in with '}{style.name}\n </span>\n </div>\n </Button>\n </>\n );\n}\n"],"mappings":"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","names":["iconSize","Color"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/oauth-button.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@stackframe/stack-ui';\nimport { useStackApp } from '..';\nimport Color from 'color';\nimport { useId } from 'react';\n\nconst iconSize = 22;\n\nfunction GoogleIcon({ iconSize } : { iconSize: number} ) {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 24 24\">\n <path fill=\"#4285F4\" d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"/>\n <path fill=\"#34A853\" d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"/>\n <path fill=\"#FBBC05\" d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"/>\n <path fill=\"#EA4335\" d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"/>\n <path fill=\"none\" d=\"M1 1h22v22H1z\" />\n </svg>\n );\n}\n\nfunction FacebookIcon({ iconSize } : { iconSize: number} ) {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 512 512\">\n <path fill='#FFFFFF' d=\"M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z\"/>\n </svg>\n );\n}\n\nfunction GitHubIcon({ iconSize } : { iconSize: number} ) {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 496 512\">\n <path fill='#FFFFFF' d=\"M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z\"/>\n </svg>\n );\n}\n\nfunction MicrosoftIcon({ iconSize } : { iconSize: number} ) {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 21 21\">\n <title>{\"MS-SymbolLockup\"}</title>\n <path fill=\"#f25022\" d=\"M1 1h9v9H1z\" />\n <path fill=\"#00a4ef\" d=\"M1 11h9v9H1z\" />\n <path fill=\"#7fba00\" d=\"M11 1h9v9h-9z\" />\n <path fill=\"#ffb900\" d=\"M11 11h9v9h-9z\" />\n </svg>\n );\n}\n\nfunction SpotifyIcon({ iconSize } : { iconSize: number} ) {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 496 512\">\n <path fill='#ffffff' d=\"M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z\"/>\n </svg>\n );\n}\nfunction DiscordIcon({ iconSize } : { iconSize: number} ) {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 127.14 96.36\">\n <path fill=\"#fff\" d=\"M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z\"/>\n </svg>\n );\n}\nfunction GitlabIcon({ iconSize } : { iconSize: number} ) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={iconSize}\n height={iconSize}\n viewBox=\"0 -10 256 256\"\n version=\"1.1\"\n preserveAspectRatio=\"xMidYMid\"\n >\n <g>\n <path\n d=\"M128.07485,236.074667 L128.07485,236.074667 L175.17885,91.1043048 L80.9708495,91.1043048 L128.07485,236.074667 L128.07485,236.074667 Z\"\n fill=\"#E24329\"\n ></path>\n <path\n d=\"M128.07485,236.074423 L80.9708495,91.104061 L14.9557638,91.104061 L128.07485,236.074423 L128.07485,236.074423 Z\"\n fill=\"#FC6D26\"\n ></path>\n <path\n d=\"M14.9558857,91.1044267 L14.9558857,91.1044267 L0.641828571,135.159589 C-0.663771429,139.17757 0.766171429,143.57955 4.18438095,146.06275 L128.074971,236.074789 L14.9558857,91.1044267 L14.9558857,91.1044267 Z\"\n fill=\"#FCA326\"\n ></path>\n <path\n d=\"M14.9558857,91.1045486 L80.9709714,91.1045486 L52.6000762,3.79026286 C51.1408762,-0.703146667 44.7847619,-0.701927619 43.3255619,3.79026286 L14.9558857,91.1045486 L14.9558857,91.1045486 Z\"\n fill=\"#E24329\"\n ></path>\n <path\n d=\"M128.07485,236.074423 L175.17885,91.104061 L241.193935,91.104061 L128.07485,236.074423 L128.07485,236.074423 Z\"\n fill=\"#FC6D26\"\n ></path>\n <path\n d=\"M241.193935,91.1044267 L241.193935,91.1044267 L255.507992,135.159589 C256.813592,139.17757 255.38365,143.57955 251.96544,146.06275 L128.07485,236.074789 L241.193935,91.1044267 L241.193935,91.1044267 Z\"\n fill=\"#FCA326\"\n ></path>\n <path\n d=\"M241.193935,91.1045486 L175.17885,91.1045486 L203.549745,3.79026286 C205.008945,-0.703146667 211.365059,-0.701927619 212.824259,3.79026286 L241.193935,91.1045486 L241.193935,91.1045486 Z\"\n fill=\"#E24329\"\n ></path>\n </g>\n </svg>\n );\n}\n\n\nconst changeColor = (c: Color, value: number) => {\n if (c.isLight()) {\n value = -value;\n }\n return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();\n};\n\nexport function OAuthButton({\n provider,\n type,\n}: {\n provider: string,\n type: 'sign-in' | 'sign-up',\n}) {\n const stackApp = useStackApp();\n const styleId = useId().replaceAll(':', '-');\n\n let style : {\n backgroundColor?: string,\n textColor?: string,\n name: string,\n icon: JSX.Element | null,\n border?: string,\n };\n switch (provider) {\n case 'google': {\n style = {\n backgroundColor: '#fff',\n textColor: '#000',\n name: 'Google',\n border: '1px solid #ddd',\n icon: <GoogleIcon iconSize={iconSize} />,\n };\n break;\n }\n case 'github': {\n style = {\n backgroundColor: '#111',\n textColor: '#fff',\n border: '1px solid #333',\n name: 'GitHub',\n icon: <GitHubIcon iconSize={iconSize} />,\n };\n break;\n }\n case 'facebook': {\n style = {\n backgroundColor: '#1877F2',\n textColor: '#fff',\n name: 'Facebook',\n icon: <FacebookIcon iconSize={iconSize} />,\n };\n break;\n }\n case 'microsoft': {\n style = {\n backgroundColor: '#2f2f2f',\n textColor: '#fff',\n name: 'Microsoft',\n icon: <MicrosoftIcon iconSize={iconSize} />,\n };\n break;\n }\n case 'spotify': {\n style = {\n backgroundColor: '#1DB954',\n textColor: '#fff',\n name: 'Spotify',\n icon: <SpotifyIcon iconSize={iconSize} />,\n };\n break;\n }\n case 'discord': {\n style = {\n backgroundColor: '#5865F2',\n textColor: '#fff',\n name: 'Discord',\n icon: <DiscordIcon iconSize={iconSize} />,\n };\n break;\n }\n case 'gitlab': {\n style = {\n backgroundColor: \"#111\",\n textColor: \"#fff\",\n border: \"1px solid #333\",\n name: \"Gitlab\",\n icon: <GitlabIcon iconSize={iconSize} />,\n };\n break;\n }\n default: {\n style = {\n name: provider,\n icon: null,\n };\n }\n }\n\n const styleSheet = `\n .stack-oauth-button-${styleId} {\n background-color: ${style.backgroundColor} !important;\n color: ${style.textColor} !important;\n border: ${style.border} !important;\n }\n .stack-oauth-button-${styleId}:hover {\n background-color: ${changeColor(Color(style.backgroundColor), 10)} !important;\n }\n `;\n\n return (\n <>\n <style>{styleSheet}</style>\n <Button\n onClick={() => stackApp.signInWithOAuth(provider)}\n className={`stack-oauth-button-${styleId}`}\n >\n <div className='flex items-center w-full gap-4'>\n {style.icon}\n <span className='flex-1'>\n {type === 'sign-up' ? 'Sign up with ' : 'Sign in with '}{style.name}\n </span>\n </div>\n </Button>\n </>\n );\n}\n"],"mappings":"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","names":["iconSize","Color"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ComponentProps } from 'react';
|
|
3
|
+
import { UserAvatar } from './elements/user-avatar.mjs';
|
|
4
|
+
|
|
5
|
+
declare function checkImageUrl(url: string): Promise<boolean>;
|
|
6
|
+
declare function ProfileImageEditor(props: {
|
|
7
|
+
user: NonNullable<ComponentProps<typeof UserAvatar>['user']>;
|
|
8
|
+
onProfileImageUrlChange: (profileImageUrl: string | null) => void | Promise<void>;
|
|
9
|
+
}): react_jsx_runtime.JSX.Element;
|
|
10
|
+
|
|
11
|
+
export { ProfileImageEditor, checkImageUrl };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ComponentProps } from 'react';
|
|
3
|
+
import { UserAvatar } from './elements/user-avatar.js';
|
|
4
|
+
|
|
5
|
+
declare function checkImageUrl(url: string): Promise<boolean>;
|
|
6
|
+
declare function ProfileImageEditor(props: {
|
|
7
|
+
user: NonNullable<ComponentProps<typeof UserAvatar>['user']>;
|
|
8
|
+
onProfileImageUrlChange: (profileImageUrl: string | null) => void | Promise<void>;
|
|
9
|
+
}): react_jsx_runtime.JSX.Element;
|
|
10
|
+
|
|
11
|
+
export { ProfileImageEditor, checkImageUrl };
|
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/components/profile-image-editor.tsx
|
|
31
|
+
var profile_image_editor_exports = {};
|
|
32
|
+
__export(profile_image_editor_exports, {
|
|
33
|
+
ProfileImageEditor: () => ProfileImageEditor,
|
|
34
|
+
checkImageUrl: () => checkImageUrl
|
|
35
|
+
});
|
|
36
|
+
module.exports = __toCommonJS(profile_image_editor_exports);
|
|
37
|
+
var import_base64 = require("@stackframe/stack-shared/dist/utils/base64");
|
|
38
|
+
var import_stack_ui = require("@stackframe/stack-ui");
|
|
39
|
+
var import_browser_image_compression = __toESM(require("browser-image-compression"));
|
|
40
|
+
var import_lucide_react = require("lucide-react");
|
|
41
|
+
var import_react = require("react");
|
|
42
|
+
var import_react_avatar_editor = __toESM(require("react-avatar-editor"));
|
|
43
|
+
var import_user_avatar = require("./elements/user-avatar");
|
|
44
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
45
|
+
async function checkImageUrl(url) {
|
|
46
|
+
try {
|
|
47
|
+
const res = await fetch(url, { method: "HEAD" });
|
|
48
|
+
const buff = await res.blob();
|
|
49
|
+
return buff.type.startsWith("image/");
|
|
50
|
+
} catch (e) {
|
|
51
|
+
return false;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
function ProfileImageEditor(props) {
|
|
55
|
+
const cropRef = (0, import_react.useRef)(null);
|
|
56
|
+
const [slideValue, setSlideValue] = (0, import_react.useState)(1);
|
|
57
|
+
const [rawUrl, setRawUrl] = (0, import_react.useState)(null);
|
|
58
|
+
const [error, setError] = (0, import_react.useState)(null);
|
|
59
|
+
function reset() {
|
|
60
|
+
setSlideValue(1);
|
|
61
|
+
setRawUrl(null);
|
|
62
|
+
setError(null);
|
|
63
|
+
}
|
|
64
|
+
function upload() {
|
|
65
|
+
const input = document.createElement("input");
|
|
66
|
+
input.type = "file";
|
|
67
|
+
input.onchange = (e) => {
|
|
68
|
+
const file = e.target.files?.[0];
|
|
69
|
+
if (!file) return;
|
|
70
|
+
(0, import_base64.fileToBase64)(file).then(async (rawUrl2) => {
|
|
71
|
+
if (await checkImageUrl(rawUrl2)) {
|
|
72
|
+
setRawUrl(rawUrl2);
|
|
73
|
+
setError(null);
|
|
74
|
+
} else {
|
|
75
|
+
setError("Invalid image");
|
|
76
|
+
}
|
|
77
|
+
}).then(() => input.remove()).catch(console.error);
|
|
78
|
+
};
|
|
79
|
+
input.click();
|
|
80
|
+
}
|
|
81
|
+
if (!rawUrl) {
|
|
82
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
|
|
83
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cursor-pointer relative", onClick: upload, children: [
|
|
84
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
85
|
+
import_user_avatar.UserAvatar,
|
|
86
|
+
{
|
|
87
|
+
size: 100,
|
|
88
|
+
user: props.user,
|
|
89
|
+
border: true
|
|
90
|
+
}
|
|
91
|
+
),
|
|
92
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute top-0 left-0 h-[100px] w-[100px] bg-gray-500/20 backdrop-blur-sm items-center justify-center rounded-full flex opacity-0 hover:opacity-100 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-background p-2 rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Upload, { className: "h-5 w-5" }) }) })
|
|
93
|
+
] }),
|
|
94
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "destructive", type: "label", children: error })
|
|
95
|
+
] });
|
|
96
|
+
}
|
|
97
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
|
|
98
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
99
|
+
import_react_avatar_editor.default,
|
|
100
|
+
{
|
|
101
|
+
ref: cropRef,
|
|
102
|
+
image: rawUrl || props.user.profileImageUrl || "",
|
|
103
|
+
borderRadius: 1e3,
|
|
104
|
+
color: [0, 0, 0, 0.72],
|
|
105
|
+
scale: slideValue,
|
|
106
|
+
rotate: 0,
|
|
107
|
+
border: 20,
|
|
108
|
+
className: "border"
|
|
109
|
+
}
|
|
110
|
+
),
|
|
111
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
112
|
+
import_stack_ui.Slider,
|
|
113
|
+
{
|
|
114
|
+
min: 1,
|
|
115
|
+
max: 5,
|
|
116
|
+
step: 0.1,
|
|
117
|
+
defaultValue: [slideValue],
|
|
118
|
+
value: [slideValue],
|
|
119
|
+
onValueChange: (v) => setSlideValue(v[0])
|
|
120
|
+
}
|
|
121
|
+
),
|
|
122
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-row gap-2", children: [
|
|
123
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
124
|
+
import_stack_ui.Button,
|
|
125
|
+
{
|
|
126
|
+
onClick: async () => {
|
|
127
|
+
if (cropRef.current && rawUrl) {
|
|
128
|
+
const croppedUrl = cropRef.current.getImage().toDataURL("image/jpeg");
|
|
129
|
+
const compressedFile = await (0, import_browser_image_compression.default)(
|
|
130
|
+
await import_browser_image_compression.default.getFilefromDataUrl(croppedUrl, "profile-image"),
|
|
131
|
+
{
|
|
132
|
+
maxSizeMB: 0.1,
|
|
133
|
+
fileType: "image/jpeg"
|
|
134
|
+
}
|
|
135
|
+
);
|
|
136
|
+
const compressedUrl = await import_browser_image_compression.default.getDataUrlFromFile(compressedFile);
|
|
137
|
+
await props.onProfileImageUrlChange(compressedUrl);
|
|
138
|
+
reset();
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
children: "Save"
|
|
142
|
+
}
|
|
143
|
+
),
|
|
144
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
145
|
+
import_stack_ui.Button,
|
|
146
|
+
{
|
|
147
|
+
variant: "secondary",
|
|
148
|
+
onClick: reset,
|
|
149
|
+
children: "Cancel"
|
|
150
|
+
}
|
|
151
|
+
)
|
|
152
|
+
] })
|
|
153
|
+
] });
|
|
154
|
+
}
|
|
155
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
156
|
+
0 && (module.exports = {
|
|
157
|
+
ProfileImageEditor,
|
|
158
|
+
checkImageUrl
|
|
159
|
+
});
|
|
160
|
+
//# sourceMappingURL=profile-image-editor.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/profile-image-editor.tsx"],"sourcesContent":["import { fileToBase64 } from '@stackframe/stack-shared/dist/utils/base64';\nimport { Button, Slider, Typography } from '@stackframe/stack-ui';\nimport imageCompression from 'browser-image-compression';\nimport { Upload } from 'lucide-react';\nimport { ComponentProps, useRef, useState } from 'react';\nimport AvatarEditor from 'react-avatar-editor';\nimport { UserAvatar } from './elements/user-avatar';\n\nexport async function checkImageUrl(url: string){\n try {\n const res = await fetch(url, { method: 'HEAD' });\n const buff = await res.blob();\n return buff.type.startsWith('image/');\n } catch (e) {\n return false;\n }\n}\n\nexport function ProfileImageEditor(props: {\n user: NonNullable<ComponentProps<typeof UserAvatar>['user']>,\n onProfileImageUrlChange: (profileImageUrl: string | null) => void | Promise<void>,\n}) {\n const cropRef = useRef<AvatarEditor>(null);\n const [slideValue, setSlideValue] = useState(1);\n const [rawUrl, setRawUrl] = useState<string | null>(null);\n const [error, setError] = useState<string | null>(null);\n\n function reset() {\n setSlideValue(1);\n setRawUrl(null);\n setError(null);\n }\n\n function upload() {\n const input = document.createElement('input');\n input.type = 'file';\n input.onchange = (e) => {\n const file = (e.target as HTMLInputElement).files?.[0];\n if (!file) return;\n fileToBase64(file)\n .then(async (rawUrl) => {\n if (await checkImageUrl(rawUrl)) {\n setRawUrl(rawUrl);\n setError(null);\n } else {\n setError('Invalid image');\n }\n })\n .then(() => input.remove())\n .catch(console.error);\n };\n input.click();\n }\n\n if (!rawUrl) {\n return <div className='flex flex-col'>\n <div className='cursor-pointer relative' onClick={upload}>\n <UserAvatar\n size={100}\n user={props.user}\n border\n />\n <div className='absolute top-0 left-0 h-[100px] w-[100px] bg-gray-500/20 backdrop-blur-sm items-center justify-center rounded-full flex opacity-0 hover:opacity-100 transition-opacity'>\n <div className='bg-background p-2 rounded-full'>\n <Upload className='h-5 w-5' />\n </div>\n </div>\n </div>\n {error && <Typography variant='destructive' type='label'>{error}</Typography>}\n </div>;\n }\n\n return (\n <div className='flex flex-col items-center gap-4'>\n <AvatarEditor\n ref={cropRef}\n image={rawUrl || props.user.profileImageUrl || \"\"}\n borderRadius={1000}\n color={[0, 0, 0, 0.72]}\n scale={slideValue}\n rotate={0}\n border={20}\n className='border'\n />\n <Slider\n min={1}\n max={5}\n step={0.1}\n defaultValue={[slideValue]}\n value={[slideValue]}\n onValueChange={(v) => setSlideValue(v[0])}\n />\n\n <div className='flex flex-row gap-2'>\n <Button\n onClick={async () => {\n if (cropRef.current && rawUrl) {\n const croppedUrl = cropRef.current.getImage().toDataURL('image/jpeg');\n const compressedFile = await imageCompression(\n await imageCompression.getFilefromDataUrl(croppedUrl, 'profile-image'),\n {\n maxSizeMB: 0.1,\n fileType: \"image/jpeg\",\n }\n );\n const compressedUrl = await imageCompression.getDataUrlFromFile(compressedFile);\n await props.onProfileImageUrlChange(compressedUrl);\n reset();\n }\n }}\n >\n Save\n </Button>\n <Button\n variant=\"secondary\"\n onClick={reset}\n >\n Cancel\n </Button>\n </div>\n </div>\n );\n}"],"mappings":"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","names":["rawUrl","AvatarEditor","imageCompression"]}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
2
|
var __defProp = Object.defineProperty;
|
|
4
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
6
|
var __export = (target, all) => {
|
|
9
7
|
for (var name in all)
|
|
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
15
|
}
|
|
18
16
|
return to;
|
|
19
17
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
19
|
|
|
30
20
|
// src/components/team-icon.tsx
|
|
@@ -33,14 +23,13 @@ __export(team_icon_exports, {
|
|
|
33
23
|
TeamIcon: () => TeamIcon
|
|
34
24
|
});
|
|
35
25
|
module.exports = __toCommonJS(team_icon_exports);
|
|
36
|
-
var import_image = __toESM(require("next/image"));
|
|
37
26
|
var import_stack_ui = require("@stackframe/stack-ui");
|
|
38
27
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
39
28
|
function TeamIcon(props) {
|
|
40
29
|
if (props.team.profileImageUrl) {
|
|
41
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
30
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Avatar, { className: "w-6 h-6 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.AvatarImage, { src: props.team.profileImageUrl, alt: props.team.displayName }) });
|
|
42
31
|
} else {
|
|
43
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-center w-6 h-6 rounded bg-
|
|
32
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-center w-6 h-6 rounded bg-zinc-200", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: "text-zinc-800 dark:text-zinc-800", children: props.team.displayName.slice(0, 1).toUpperCase() }) });
|
|
44
33
|
}
|
|
45
34
|
}
|
|
46
35
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/team-icon.tsx"],"sourcesContent":["import Image from \"next/image\";\nimport { Team } from \"..\";\nimport { Typography } from \"@stackframe/stack-ui\";\n\nexport function TeamIcon(props: { team: Team }) {\n if (props.team.profileImageUrl) {\n return (\n <
|
|
1
|
+
{"version":3,"sources":["../../src/components/team-icon.tsx"],"sourcesContent":["import Image from \"next/image\";\nimport { Team } from \"..\";\nimport { Avatar, AvatarImage, Typography } from \"@stackframe/stack-ui\";\n\nexport function TeamIcon(props: { team: Team }) {\n if (props.team.profileImageUrl) {\n return (\n <Avatar className=\"w-6 h-6 rounded\">\n <AvatarImage src={props.team.profileImageUrl} alt={props.team.displayName} />\n </Avatar>\n );\n } else {\n return (\n <div className=\"flex items-center justify-center w-6 h-6 rounded bg-zinc-200\">\n <Typography className=\"text-zinc-800 dark:text-zinc-800\">{props.team.displayName.slice(0, 1).toUpperCase()}</Typography>\n </div>\n );\n }\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAAgD;AAMxC;AAJD,SAAS,SAAS,OAAuB;AAC9C,MAAI,MAAM,KAAK,iBAAiB;AAC9B,WACE,4CAAC,0BAAO,WAAU,mBAChB,sDAAC,+BAAY,KAAK,MAAM,KAAK,iBAAiB,KAAK,MAAM,KAAK,aAAa,GAC7E;AAAA,EAEJ,OAAO;AACL,WACE,4CAAC,SAAI,WAAU,gEACb,sDAAC,8BAAW,WAAU,oCAAoC,gBAAM,KAAK,YAAY,MAAM,GAAG,CAAC,EAAE,YAAY,GAAE,GAC7G;AAAA,EAEJ;AACF;","names":[]}
|
|
@@ -54,12 +54,14 @@ var import__ = require("..");
|
|
|
54
54
|
var import_form_warning = require("../components/elements/form-warning");
|
|
55
55
|
var import_sidebar_layout = require("../components/elements/sidebar-layout");
|
|
56
56
|
var import_user_avatar = require("../components/elements/user-avatar");
|
|
57
|
+
var import_profile_image_editor = require("../components/profile-image-editor");
|
|
57
58
|
var import_team_icon = require("../components/team-icon");
|
|
58
59
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
59
60
|
function AccountSettings({ fullPage = false }) {
|
|
60
61
|
const user = (0, import__.useUser)({ or: "redirect" });
|
|
61
62
|
const teams = user.useTeams();
|
|
62
|
-
const
|
|
63
|
+
const stackApp = (0, import__.useStackApp)();
|
|
64
|
+
const project = stackApp.useProject();
|
|
63
65
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
64
66
|
import_sidebar_layout.SidebarLayout,
|
|
65
67
|
{
|
|
@@ -117,18 +119,32 @@ function AccountSettings({ fullPage = false }) {
|
|
|
117
119
|
}] : []
|
|
118
120
|
].filter((p) => p.type === "divider" || p.content),
|
|
119
121
|
title: "Account Settings",
|
|
120
|
-
basePath:
|
|
122
|
+
basePath: stackApp.urls.accountSettings
|
|
121
123
|
}
|
|
122
124
|
);
|
|
123
125
|
}
|
|
124
126
|
function ProfileSection() {
|
|
125
127
|
const user = (0, import__.useUser)({ or: "redirect" });
|
|
126
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.
|
|
127
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
128
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-8", children: [
|
|
129
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-start", children: [
|
|
130
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { className: "mb-2", children: "Profile image" }),
|
|
131
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
132
|
+
import_profile_image_editor.ProfileImageEditor,
|
|
133
|
+
{
|
|
134
|
+
user,
|
|
135
|
+
onProfileImageUrlChange: async (profileImageUrl) => {
|
|
136
|
+
await user.update({ profileImageUrl });
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
)
|
|
140
|
+
] }),
|
|
141
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
|
|
142
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { children: "Display name" }),
|
|
143
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.EditableText, { value: user.displayName || "", onSave: async (newDisplayName) => {
|
|
144
|
+
await user.update({ displayName: newDisplayName });
|
|
145
|
+
} })
|
|
146
|
+
] })
|
|
147
|
+
] });
|
|
132
148
|
}
|
|
133
149
|
function EmailVerificationSection() {
|
|
134
150
|
const user = (0, import__.useUser)({ or: "redirect" });
|
|
@@ -347,7 +363,6 @@ function SignOutSection() {
|
|
|
347
363
|
) }) });
|
|
348
364
|
}
|
|
349
365
|
function UserSettings(props) {
|
|
350
|
-
const app = (0, import__.useStackApp)();
|
|
351
366
|
const user = (0, import__.useUser)({ or: "redirect" });
|
|
352
367
|
const [leaving, setLeaving] = (0, import_react.useState)(false);
|
|
353
368
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: !leaving ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -374,16 +389,30 @@ function ManagementSettings(props) {
|
|
|
374
389
|
if (!updateTeamPermission) {
|
|
375
390
|
return null;
|
|
376
391
|
}
|
|
377
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.
|
|
378
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
392
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
393
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
|
|
394
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { children: "Team display name" }),
|
|
395
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
396
|
+
import_profile_image_editor.ProfileImageEditor,
|
|
397
|
+
{
|
|
398
|
+
user: props.team,
|
|
399
|
+
onProfileImageUrlChange: async (profileImageUrl) => {
|
|
400
|
+
await props.team.update({ profileImageUrl });
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
)
|
|
404
|
+
] }),
|
|
405
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
|
|
406
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { children: "Team display name" }),
|
|
407
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
408
|
+
import_stack_ui.EditableText,
|
|
409
|
+
{
|
|
410
|
+
value: props.team.displayName,
|
|
411
|
+
onSave: async (newDisplayName) => await props.team.update({ displayName: newDisplayName })
|
|
412
|
+
}
|
|
413
|
+
)
|
|
414
|
+
] })
|
|
415
|
+
] });
|
|
387
416
|
}
|
|
388
417
|
function ProfileSettings(props) {
|
|
389
418
|
const user = (0, import__.useUser)({ or: "redirect" });
|