@stack-spot/auth-react 2.6.0 → 2.7.0
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 +7 -0
- package/out/index.d.ts +1 -0
- package/out/index.js +329 -264
- package/out/index.js.map +1 -1
- package/out/index.mjs +332 -267
- package/out/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/Login.tsx +78 -45
- package/src/SessionManager.ts +18 -0
- package/src/hooks.ts +17 -0
- package/src/index.ts +2 -1
package/out/index.mjs
CHANGED
|
@@ -1,253 +1,15 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { Flex, Text, Label, Input, Button, Box } from '@citric/core';
|
|
3
|
-
import {
|
|
3
|
+
import { getCookieDomain, setCookie, getCookie, removeCookie, BannerWarning, useEffectOnce } from '@stack-spot/portal-components';
|
|
4
4
|
import { theme, CSSToCitricAdapter } from '@stack-spot/portal-theme';
|
|
5
5
|
import '@stack-spot/portal-theme/dist/theme.css';
|
|
6
|
-
import { useTranslate, useLanguage } from '@stack-spot/portal-translate';
|
|
7
|
-
import {
|
|
6
|
+
import { useTranslate, interpolate, useLanguage } from '@stack-spot/portal-translate';
|
|
7
|
+
import { useState, useEffect, forwardRef } from 'react';
|
|
8
8
|
import { LoadingCircular, Card } from '@citric/ui';
|
|
9
9
|
import { MiniLogo } from '@stack-spot/portal-components/svg';
|
|
10
10
|
import { styled } from 'styled-components';
|
|
11
11
|
import { AuthManager } from '@stack-spot/auth';
|
|
12
12
|
|
|
13
|
-
var __defProp$4 = Object.defineProperty;
|
|
14
|
-
var __defProps$4 = Object.defineProperties;
|
|
15
|
-
var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
|
|
16
|
-
var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
|
|
17
|
-
var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
|
|
18
|
-
var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
|
|
19
|
-
var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
20
|
-
var __spreadValues$4 = (a, b) => {
|
|
21
|
-
for (var prop in b || (b = {}))
|
|
22
|
-
if (__hasOwnProp$4.call(b, prop))
|
|
23
|
-
__defNormalProp$4(a, prop, b[prop]);
|
|
24
|
-
if (__getOwnPropSymbols$4)
|
|
25
|
-
for (var prop of __getOwnPropSymbols$4(b)) {
|
|
26
|
-
if (__propIsEnum$4.call(b, prop))
|
|
27
|
-
__defNormalProp$4(a, prop, b[prop]);
|
|
28
|
-
}
|
|
29
|
-
return a;
|
|
30
|
-
};
|
|
31
|
-
var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
|
|
32
|
-
const Github = forwardRef((props, ref) => /* @__PURE__ */ jsxs("svg", __spreadProps$4(__spreadValues$4({ ref }, props), { width: "25", height: "25", viewBox: "0 0 25 25", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
33
|
-
/* @__PURE__ */ jsxs("g", { "clip-path": "url(#clip0_1215_2072)", children: [
|
|
34
|
-
/* @__PURE__ */ jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.0011 4.38525C10.1019 4.38624 8.26498 5.05889 6.81881 6.28294C5.37263 7.50698 4.4115 9.20259 4.10726 11.0666C3.80302 12.9306 4.17551 14.8414 5.15814 16.4574C6.14077 18.0733 7.66946 19.2891 9.47085 19.8872C9.86827 19.961 10.018 19.7147 10.018 19.5053C10.018 19.2958 10.01 18.6886 10.0074 18.0247C7.78183 18.5055 7.31155 17.0856 7.31155 17.0856C6.94858 16.1635 6.42399 15.9212 6.42399 15.9212C5.69804 15.4286 6.4783 15.4378 6.4783 15.4378C7.28241 15.4944 7.705 16.2584 7.705 16.2584C8.4177 17.4741 9.57683 17.1225 10.0325 16.917C10.1041 16.402 10.312 16.0516 10.5412 15.8527C8.76345 15.6525 6.89559 14.9702 6.89559 11.9222C6.88457 11.1317 7.17958 10.3673 7.71957 9.78704C7.63744 9.58683 7.36321 8.77808 7.79772 7.67954C7.79772 7.67954 8.46936 7.46616 9.99809 8.49488C11.3093 8.13834 12.6928 8.13834 14.0041 8.49488C15.5315 7.46616 16.2018 7.67954 16.2018 7.67954C16.6376 8.77544 16.3634 9.58419 16.2813 9.78704C16.823 10.3674 17.1186 11.1332 17.1066 11.9248C17.1066 14.9794 15.2347 15.6525 13.4543 15.8487C13.7404 16.0964 13.9961 16.5798 13.9961 17.3227C13.9961 18.387 13.9868 19.2431 13.9868 19.5053C13.9868 19.7173 14.1312 19.9649 14.5366 19.8872C16.3382 19.289 17.867 18.0731 18.8496 16.4568C19.8323 14.8406 20.2046 12.9295 19.9 11.0653C19.5954 9.20112 18.6338 7.50549 17.1871 6.28166C15.7405 5.05782 13.9031 4.38561 12.0037 4.38525H12.0011Z", fill: "white" }),
|
|
35
|
-
/* @__PURE__ */ jsx("path", { d: "M9.35091 17.3684C9.35091 17.4329 9.27673 17.4882 9.18135 17.4896C9.08597 17.4909 9.00781 17.4382 9.00781 17.3736C9.00781 17.3091 9.08199 17.2538 9.17737 17.2525C9.27275 17.2511 9.35091 17.3025 9.35091 17.3684Z", fill: "white" }),
|
|
36
|
-
/* @__PURE__ */ jsx("path", { d: "M9.96094 17.2672C9.97286 17.3317 9.90662 17.3989 9.81124 17.4147C9.71586 17.4305 9.63241 17.3923 9.62048 17.3291C9.60856 17.2659 9.67745 17.1974 9.77018 17.1803C9.86291 17.1631 9.94902 17.2027 9.96094 17.2672Z", fill: "white" }),
|
|
37
|
-
/* @__PURE__ */ jsx("path", { d: "M8.6968 17.324C8.67693 17.3859 8.58685 17.4136 8.49676 17.3872C8.40668 17.3609 8.34707 17.2871 8.36429 17.2239C8.38151 17.1607 8.47292 17.1317 8.56433 17.1607C8.65573 17.1897 8.71402 17.2595 8.6968 17.324Z", fill: "white" }),
|
|
38
|
-
/* @__PURE__ */ jsx("path", { d: "M8.09774 17.0658C8.05402 17.1145 7.96527 17.1013 7.89241 17.0355C7.81955 16.9696 7.80232 16.88 7.84604 16.8326C7.88975 16.7852 7.97851 16.7984 8.05402 16.8629C8.12953 16.9274 8.1441 17.0183 8.09774 17.0658V17.0658Z", fill: "white" }),
|
|
39
|
-
/* @__PURE__ */ jsx("path", { d: "M7.6686 16.6231C7.61959 16.6574 7.53612 16.6231 7.48976 16.5546C7.47694 16.5423 7.46674 16.5276 7.45978 16.5113C7.45281 16.495 7.44922 16.4775 7.44922 16.4598C7.44922 16.4421 7.45281 16.4246 7.45978 16.4083C7.46674 16.392 7.47694 16.3772 7.48976 16.3649C7.53877 16.332 7.62224 16.3649 7.6686 16.4321C7.71497 16.4993 7.71629 16.5889 7.6686 16.6231V16.6231Z", fill: "white" }),
|
|
40
|
-
/* @__PURE__ */ jsx("path", { d: "M7.3535 16.1662C7.32607 16.1799 7.29468 16.1838 7.26472 16.177C7.23475 16.1703 7.20807 16.1534 7.18924 16.1293C7.13757 16.074 7.12697 15.9976 7.16671 15.9633C7.20645 15.9291 7.27799 15.9449 7.32966 16.0002C7.38132 16.0555 7.39324 16.1319 7.3535 16.1662Z", fill: "white" }),
|
|
41
|
-
/* @__PURE__ */ jsx("path", { d: "M7.02905 15.8062C7.01183 15.8457 6.94825 15.8576 6.89658 15.8299C6.84492 15.8022 6.8065 15.7509 6.82505 15.71C6.8436 15.6692 6.90586 15.6587 6.95752 15.6863C7.00919 15.714 7.04893 15.7667 7.02905 15.8062Z", fill: "white" })
|
|
42
|
-
] }),
|
|
43
|
-
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_1215_2072", children: /* @__PURE__ */ jsx("rect", { width: "16", height: "16", fill: "white", transform: "translate(4 4.05176)" }) }) })
|
|
44
|
-
] })));
|
|
45
|
-
|
|
46
|
-
var __defProp$3 = Object.defineProperty;
|
|
47
|
-
var __defProps$3 = Object.defineProperties;
|
|
48
|
-
var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
|
|
49
|
-
var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
|
|
50
|
-
var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
|
|
51
|
-
var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
|
|
52
|
-
var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
53
|
-
var __spreadValues$3 = (a, b) => {
|
|
54
|
-
for (var prop in b || (b = {}))
|
|
55
|
-
if (__hasOwnProp$3.call(b, prop))
|
|
56
|
-
__defNormalProp$3(a, prop, b[prop]);
|
|
57
|
-
if (__getOwnPropSymbols$3)
|
|
58
|
-
for (var prop of __getOwnPropSymbols$3(b)) {
|
|
59
|
-
if (__propIsEnum$3.call(b, prop))
|
|
60
|
-
__defNormalProp$3(a, prop, b[prop]);
|
|
61
|
-
}
|
|
62
|
-
return a;
|
|
63
|
-
};
|
|
64
|
-
var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
|
|
65
|
-
const Google = forwardRef((props, ref) => /* @__PURE__ */ jsxs("svg", __spreadProps$3(__spreadValues$3({ ref }, props), { width: "25", height: "25", viewBox: "0 0 25 25", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
66
|
-
/* @__PURE__ */ jsxs("g", { "clip-path": "url(#clip0_1215_2403)", children: [
|
|
67
|
-
/* @__PURE__ */ jsx("path", { d: "M20.3442 12.2359C20.3442 11.6921 20.3001 11.1454 20.206 10.6104H12.6602V13.691H16.9813C16.802 14.6846 16.2258 15.5635 15.3822 16.122V18.1209H17.9602C19.4741 16.7276 20.3442 14.6699 20.3442 12.2359Z", fill: "#4285F4" }),
|
|
68
|
-
/* @__PURE__ */ jsx("path", { d: "M12.6607 20.0525C14.8184 20.0525 16.6379 19.344 17.9637 18.1212L15.3857 16.1223C14.6684 16.6103 13.7425 16.8866 12.6637 16.8866C10.5766 16.8866 8.80696 15.4785 8.17202 13.5854H5.51172V15.6461C6.86979 18.3475 9.63592 20.0525 12.6607 20.0525V20.0525Z", fill: "#34A853" }),
|
|
69
|
-
/* @__PURE__ */ jsx("path", { d: "M8.16852 13.5856C7.83341 12.592 7.83341 11.5161 8.16852 10.5225V8.46191H5.51116C4.37649 10.7224 4.37649 13.3857 5.51116 15.6462L8.16852 13.5856V13.5856Z", fill: "#FBBC04" }),
|
|
70
|
-
/* @__PURE__ */ jsx("path", { d: "M12.6607 7.2182C13.8013 7.20056 14.9036 7.62974 15.7296 8.41754L18.0136 6.1335C16.5674 4.77543 14.6479 4.02878 12.6607 4.0523C9.63592 4.0523 6.86979 5.75724 5.51172 8.46163L8.16908 10.5223C8.80108 8.62625 10.5736 7.2182 12.6607 7.2182V7.2182Z", fill: "#EA4335" })
|
|
71
|
-
] }),
|
|
72
|
-
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_1215_2403", children: /* @__PURE__ */ jsx("rect", { width: "16", height: "16", fill: "white", transform: "translate(4.5 4.05176)" }) }) })
|
|
73
|
-
] })));
|
|
74
|
-
|
|
75
|
-
var __defProp$2 = Object.defineProperty;
|
|
76
|
-
var __defProps$2 = Object.defineProperties;
|
|
77
|
-
var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
|
|
78
|
-
var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
|
|
79
|
-
var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
|
|
80
|
-
var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
|
|
81
|
-
var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
82
|
-
var __spreadValues$2 = (a, b) => {
|
|
83
|
-
for (var prop in b || (b = {}))
|
|
84
|
-
if (__hasOwnProp$2.call(b, prop))
|
|
85
|
-
__defNormalProp$2(a, prop, b[prop]);
|
|
86
|
-
if (__getOwnPropSymbols$2)
|
|
87
|
-
for (var prop of __getOwnPropSymbols$2(b)) {
|
|
88
|
-
if (__propIsEnum$2.call(b, prop))
|
|
89
|
-
__defNormalProp$2(a, prop, b[prop]);
|
|
90
|
-
}
|
|
91
|
-
return a;
|
|
92
|
-
};
|
|
93
|
-
var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
|
|
94
|
-
const Microsoft = forwardRef((props, ref) => /* @__PURE__ */ jsxs("svg", __spreadProps$2(__spreadValues$2({ ref }, props), { width: "25", height: "25", viewBox: "0 0 25 25", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
95
|
-
/* @__PURE__ */ jsx("path", { d: "M5.19531 4.74707H12.1518V11.7036H5.19531V4.74707Z", fill: "#F35325" }),
|
|
96
|
-
/* @__PURE__ */ jsx("path", { d: "M12.8477 4.74707H19.8042V11.7036H12.8477V4.74707Z", fill: "#81BC06" }),
|
|
97
|
-
/* @__PURE__ */ jsx("path", { d: "M5.19531 12.3994H12.1518V19.3559H5.19531V12.3994Z", fill: "#05A6F0" }),
|
|
98
|
-
/* @__PURE__ */ jsx("path", { d: "M12.8477 12.3994H19.8042V19.3559H12.8477V12.3994Z", fill: "#FFBA08" })
|
|
99
|
-
] })));
|
|
100
|
-
|
|
101
|
-
const LoginBox = styled.form`
|
|
102
|
-
display: flex;
|
|
103
|
-
flex-direction: column;
|
|
104
|
-
justify-content: center;
|
|
105
|
-
gap: 24px;
|
|
106
|
-
|
|
107
|
-
header {
|
|
108
|
-
display: flex;
|
|
109
|
-
flex-direction: column;
|
|
110
|
-
align-items: center;
|
|
111
|
-
gap: 24px;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.separator {
|
|
115
|
-
padding: 0 8px;
|
|
116
|
-
display: flex;
|
|
117
|
-
flex-direction: row;
|
|
118
|
-
align-items: center;
|
|
119
|
-
justify-content: center;
|
|
120
|
-
gap: 8px;
|
|
121
|
-
margin: 0;
|
|
122
|
-
|
|
123
|
-
&:before, &:after {
|
|
124
|
-
content: '';
|
|
125
|
-
height: 1px;
|
|
126
|
-
flex: 1;
|
|
127
|
-
background-color: ${theme.color.light["500"]};
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
.error {
|
|
132
|
-
color: ${theme.color.danger["500"]};
|
|
133
|
-
line-height: 1.5rem;
|
|
134
|
-
}
|
|
135
|
-
`;
|
|
136
|
-
const EmailNotAllowed = () => {
|
|
137
|
-
const t = useTranslate(dictionary);
|
|
138
|
-
return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "center", children: [
|
|
139
|
-
/* @__PURE__ */ jsx(Text, { appearance: "body2", children: t.emailNotAllowedTitle }),
|
|
140
|
-
/* @__PURE__ */ jsx(Text, { appearance: "body2", colorScheme: "light.700", children: t.emailNotAllowedSubtitle })
|
|
141
|
-
] }) });
|
|
142
|
-
};
|
|
143
|
-
const Login = ({ onSubmit, initialValue = "", welcomeText, removeLoadingOnSuccess, className, style, banner, loginTypes = ["idp", "sso"] }) => {
|
|
144
|
-
const t = useTranslate(dictionary);
|
|
145
|
-
const searchParams = new URLSearchParams(location.search);
|
|
146
|
-
const [error, setError] = useState(searchParams.get("error_description") || searchParams.get("error") || "");
|
|
147
|
-
const [errorCode] = useState(searchParams.get("error_code") || "");
|
|
148
|
-
const [loading, setLoading] = useState(false);
|
|
149
|
-
const [loginProvider, setLoginProvider] = useState();
|
|
150
|
-
const [email, setEmail] = useState(initialValue);
|
|
151
|
-
const disabled = !email.match(/\w+@\w+/);
|
|
152
|
-
const idpLoginEnabled = loginTypes.includes("idp");
|
|
153
|
-
const ssoLoginEnabled = loginTypes.includes("sso");
|
|
154
|
-
async function login(type, provider) {
|
|
155
|
-
setError("");
|
|
156
|
-
setLoading(true);
|
|
157
|
-
provider !== loginProvider && setLoginProvider(provider);
|
|
158
|
-
try {
|
|
159
|
-
const data = type === "idp" && !!provider ? { type: "idp", provider: `external-idp:${provider}` } : { type: "sso", email };
|
|
160
|
-
await onSubmit(data);
|
|
161
|
-
if (removeLoadingOnSuccess)
|
|
162
|
-
setLoading(false);
|
|
163
|
-
} catch (error2) {
|
|
164
|
-
setLoading(false);
|
|
165
|
-
setLoginProvider(void 0);
|
|
166
|
-
setError(error2.message || error2.toString());
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
function submitForm(e) {
|
|
170
|
-
e.preventDefault();
|
|
171
|
-
if (disabled)
|
|
172
|
-
return;
|
|
173
|
-
login("sso");
|
|
174
|
-
}
|
|
175
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
176
|
-
/* @__PURE__ */ jsxs(LoginBox, { onSubmit: submitForm, className, style, children: [
|
|
177
|
-
/* @__PURE__ */ jsxs("header", { children: [
|
|
178
|
-
/* @__PURE__ */ jsx(MiniLogo, {}),
|
|
179
|
-
/* @__PURE__ */ jsxs(Flex, { flexDirection: "column", alignItems: "center", children: [
|
|
180
|
-
/* @__PURE__ */ jsx(Text, { appearance: "body1", weight: "medium", children: welcomeText || t.welcome }),
|
|
181
|
-
/* @__PURE__ */ jsxs(Text, { appearance: "body2", colorScheme: "light.700", children: [
|
|
182
|
-
" ",
|
|
183
|
-
t.loginWithEmail
|
|
184
|
-
] })
|
|
185
|
-
] })
|
|
186
|
-
] }),
|
|
187
|
-
errorCode && errorCode === "EMAIL_IS_NOT_ALLOWED" && /* @__PURE__ */ jsx(EmailNotAllowed, {}),
|
|
188
|
-
ssoLoginEnabled && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", style: { gap: "4px", marginTop: "4px" }, children: [
|
|
189
|
-
/* @__PURE__ */ jsx(Label, { htmlFor: "email", children: t.label }),
|
|
190
|
-
/* @__PURE__ */ jsx(Input, { type: "email", name: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: t.placeholder }),
|
|
191
|
-
/* @__PURE__ */ jsx(Button, { colorScheme: "primary", size: "md", style: { marginTop: "12px" }, disabled: disabled || loading, children: loading && !loginProvider ? /* @__PURE__ */ jsx(LoadingCircular, {}) : /* @__PURE__ */ jsx(Text, { children: t.continue }) })
|
|
192
|
-
] }) }),
|
|
193
|
-
ssoLoginEnabled && idpLoginEnabled && /* @__PURE__ */ jsx("p", { className: "separator", children: /* @__PURE__ */ jsx(Text, { appearance: "microtext1", colorScheme: "light.700", children: t.or }) }),
|
|
194
|
-
idpLoginEnabled && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", children: [
|
|
195
|
-
/* @__PURE__ */ jsx(Text, { colorScheme: "light.700", appearance: "body2", style: { textAlign: "center" }, mb: 4, children: t.trial }),
|
|
196
|
-
/* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Button, { colorScheme: "light", type: "button", size: "md", sx: { width: "100%" }, onClick: () => login("idp", "google"), disabled: loading, children: loginProvider === "google" ? /* @__PURE__ */ jsx(LoadingCircular, {}) : /* @__PURE__ */ jsxs(Flex, { alignItems: "center", style: { gap: "4px" }, children: [
|
|
197
|
-
/* @__PURE__ */ jsx(Google, {}),
|
|
198
|
-
t.loginWithGoogle
|
|
199
|
-
] }) }) }),
|
|
200
|
-
/* @__PURE__ */ jsx(Box, { my: "3", children: /* @__PURE__ */ jsx(Button, { colorScheme: "light", type: "button", size: "md", sx: { width: "100%" }, onClick: () => login("idp", "microsoft"), disabled: loading, children: loginProvider === "microsoft" ? /* @__PURE__ */ jsx(LoadingCircular, {}) : /* @__PURE__ */ jsxs(Flex, { alignItems: "center", style: { gap: "4px" }, children: [
|
|
201
|
-
/* @__PURE__ */ jsx(Microsoft, {}),
|
|
202
|
-
t.loginWithMicrosoft
|
|
203
|
-
] }) }) }),
|
|
204
|
-
/* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Button, { colorScheme: "light", type: "button", size: "md", sx: { width: "100%" }, onClick: () => login("idp", "github"), disabled: loading, children: loginProvider === "github" ? /* @__PURE__ */ jsx(LoadingCircular, {}) : /* @__PURE__ */ jsxs(Flex, { alignItems: "center", style: { gap: "4px" }, children: [
|
|
205
|
-
/* @__PURE__ */ jsx(Github, {}),
|
|
206
|
-
t.loginWithGithub
|
|
207
|
-
] }) }) })
|
|
208
|
-
] }) }),
|
|
209
|
-
error && /* @__PURE__ */ jsxs(Text, { className: "error", children: [
|
|
210
|
-
t.error,
|
|
211
|
-
": ",
|
|
212
|
-
error
|
|
213
|
-
] })
|
|
214
|
-
] }),
|
|
215
|
-
banner ? /* @__PURE__ */ jsx(BannerWarning, { children: banner }) : null
|
|
216
|
-
] });
|
|
217
|
-
};
|
|
218
|
-
const dictionary = {
|
|
219
|
-
en: {
|
|
220
|
-
welcome: "Welcome to StackSpot",
|
|
221
|
-
loginWithEmail: "Log in with your email.",
|
|
222
|
-
label: "Corporate email",
|
|
223
|
-
placeholder: "email@company.com",
|
|
224
|
-
continue: "Continue",
|
|
225
|
-
or: "Or",
|
|
226
|
-
loginWithGithub: "Sign in with Github",
|
|
227
|
-
loginWithGoogle: "Sign in with Google",
|
|
228
|
-
loginWithMicrosoft: "Sign in with Microsoft",
|
|
229
|
-
error: "Error while attempting to login",
|
|
230
|
-
emailNotAllowedTitle: "Your email is linked to an Enterprise account.",
|
|
231
|
-
emailNotAllowedSubtitle: "Please log in with your corporate email.",
|
|
232
|
-
trial: "Access your trial account"
|
|
233
|
-
},
|
|
234
|
-
pt: {
|
|
235
|
-
welcome: "Bem vindo \xE0 StackSpot",
|
|
236
|
-
loginWithEmail: "Fa\xE7a login com seu e-mail.",
|
|
237
|
-
label: "Email corporativo",
|
|
238
|
-
placeholder: "email@empresa.com",
|
|
239
|
-
continue: "Continuar",
|
|
240
|
-
or: "Ou",
|
|
241
|
-
loginWithGithub: "Entrar com o GitHub",
|
|
242
|
-
loginWithGoogle: "Entrar com Google",
|
|
243
|
-
loginWithMicrosoft: "Entrar com Microsoft",
|
|
244
|
-
error: "Erro ao fazer login",
|
|
245
|
-
emailNotAllowedTitle: '"Este e-mail est\xE1 vinculado a uma conta Enterprise.',
|
|
246
|
-
emailNotAllowedSubtitle: "Fa\xE7a login com seu email corporativo.",
|
|
247
|
-
trial: "Acesse sua conta de teste"
|
|
248
|
-
}
|
|
249
|
-
};
|
|
250
|
-
|
|
251
13
|
const sessionKey$1 = `stk-session${getCookieDomain()}`;
|
|
252
14
|
const sessionCookie = Object.freeze({
|
|
253
15
|
set: (data) => setCookie(sessionKey$1, JSON.stringify(data)),
|
|
@@ -275,27 +37,27 @@ const redirect = async (url) => {
|
|
|
275
37
|
await new Promise(() => "");
|
|
276
38
|
};
|
|
277
39
|
|
|
278
|
-
var __defProp$
|
|
279
|
-
var __defProps$
|
|
280
|
-
var __getOwnPropDescs$
|
|
281
|
-
var __getOwnPropSymbols$
|
|
282
|
-
var __hasOwnProp$
|
|
283
|
-
var __propIsEnum$
|
|
284
|
-
var __defNormalProp$
|
|
285
|
-
var __spreadValues$
|
|
40
|
+
var __defProp$4 = Object.defineProperty;
|
|
41
|
+
var __defProps$4 = Object.defineProperties;
|
|
42
|
+
var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
|
|
43
|
+
var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
|
|
44
|
+
var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
|
|
45
|
+
var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
|
|
46
|
+
var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
47
|
+
var __spreadValues$4 = (a, b) => {
|
|
286
48
|
for (var prop in b || (b = {}))
|
|
287
|
-
if (__hasOwnProp$
|
|
288
|
-
__defNormalProp$
|
|
289
|
-
if (__getOwnPropSymbols$
|
|
290
|
-
for (var prop of __getOwnPropSymbols$
|
|
291
|
-
if (__propIsEnum$
|
|
292
|
-
__defNormalProp$
|
|
49
|
+
if (__hasOwnProp$4.call(b, prop))
|
|
50
|
+
__defNormalProp$4(a, prop, b[prop]);
|
|
51
|
+
if (__getOwnPropSymbols$4)
|
|
52
|
+
for (var prop of __getOwnPropSymbols$4(b)) {
|
|
53
|
+
if (__propIsEnum$4.call(b, prop))
|
|
54
|
+
__defNormalProp$4(a, prop, b[prop]);
|
|
293
55
|
}
|
|
294
56
|
return a;
|
|
295
57
|
};
|
|
296
|
-
var __spreadProps$
|
|
58
|
+
var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
|
|
297
59
|
var __publicField = (obj, key, value) => {
|
|
298
|
-
__defNormalProp$
|
|
60
|
+
__defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
299
61
|
return value;
|
|
300
62
|
};
|
|
301
63
|
const sessionKey = "session";
|
|
@@ -308,7 +70,7 @@ const _SessionManager = class _SessionManager {
|
|
|
308
70
|
config.loginUrl || (config.loginUrl = location.origin);
|
|
309
71
|
const redirectUrl = (config.redirectUrl || config.loginUrl).replace(/([^/])$/, "$1/");
|
|
310
72
|
this.config = config;
|
|
311
|
-
this.auth = new AuthManager(__spreadProps$
|
|
73
|
+
this.auth = new AuthManager(__spreadProps$4(__spreadValues$4({}, config), {
|
|
312
74
|
redirectUrl,
|
|
313
75
|
storage: localStorage,
|
|
314
76
|
sessionPersistence: {
|
|
@@ -494,10 +256,322 @@ ${error}`);
|
|
|
494
256
|
console.error("Error while sending event to RD Station", data);
|
|
495
257
|
}
|
|
496
258
|
}
|
|
259
|
+
async getTrialEnabledProviders() {
|
|
260
|
+
try {
|
|
261
|
+
const response = await fetch(`${this.config.accountUrl}/v1/accounts/trial/sso`);
|
|
262
|
+
const trialProviders = await response.json();
|
|
263
|
+
if (!response.ok) {
|
|
264
|
+
console.error("Error while fetching available login providers", trialProviders);
|
|
265
|
+
}
|
|
266
|
+
const providerKeys = Object.keys(trialProviders || {});
|
|
267
|
+
return providerKeys.filter((key) => trialProviders[key] === true);
|
|
268
|
+
} catch (error) {
|
|
269
|
+
console.error("Error while fetching available login providers", error);
|
|
270
|
+
return [];
|
|
271
|
+
}
|
|
272
|
+
}
|
|
497
273
|
};
|
|
498
274
|
__publicField(_SessionManager, "instance");
|
|
499
275
|
let SessionManager = _SessionManager;
|
|
500
276
|
|
|
277
|
+
function useSession() {
|
|
278
|
+
const manager = SessionManager.instance;
|
|
279
|
+
const [session, setSession] = useState((manager == null ? void 0 : manager.hasSession()) ? manager.getSession() : void 0);
|
|
280
|
+
useEffect(() => {
|
|
281
|
+
return manager == null ? void 0 : manager.onChange(setSession);
|
|
282
|
+
}, []);
|
|
283
|
+
return session;
|
|
284
|
+
}
|
|
285
|
+
const useTrialProviders = ({ enabled = true }) => {
|
|
286
|
+
const [isLoadingTrialProviders, setIsLoadingTrialProviders] = useState(enabled);
|
|
287
|
+
const [trialProviders, setTrialProviders] = useState([]);
|
|
288
|
+
useEffect(() => {
|
|
289
|
+
(async () => {
|
|
290
|
+
if (!SessionManager.instance || !enabled)
|
|
291
|
+
return;
|
|
292
|
+
const providers = await SessionManager.instance.getTrialEnabledProviders();
|
|
293
|
+
setTrialProviders(providers);
|
|
294
|
+
setIsLoadingTrialProviders(false);
|
|
295
|
+
})();
|
|
296
|
+
}, [SessionManager.instance]);
|
|
297
|
+
return [trialProviders, isLoadingTrialProviders];
|
|
298
|
+
};
|
|
299
|
+
|
|
300
|
+
var __defProp$3 = Object.defineProperty;
|
|
301
|
+
var __defProps$3 = Object.defineProperties;
|
|
302
|
+
var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
|
|
303
|
+
var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
|
|
304
|
+
var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
|
|
305
|
+
var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
|
|
306
|
+
var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
307
|
+
var __spreadValues$3 = (a, b) => {
|
|
308
|
+
for (var prop in b || (b = {}))
|
|
309
|
+
if (__hasOwnProp$3.call(b, prop))
|
|
310
|
+
__defNormalProp$3(a, prop, b[prop]);
|
|
311
|
+
if (__getOwnPropSymbols$3)
|
|
312
|
+
for (var prop of __getOwnPropSymbols$3(b)) {
|
|
313
|
+
if (__propIsEnum$3.call(b, prop))
|
|
314
|
+
__defNormalProp$3(a, prop, b[prop]);
|
|
315
|
+
}
|
|
316
|
+
return a;
|
|
317
|
+
};
|
|
318
|
+
var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
|
|
319
|
+
const Github = forwardRef((props, ref) => /* @__PURE__ */ jsxs("svg", __spreadProps$3(__spreadValues$3({ ref }, props), { width: "25", height: "25", viewBox: "0 0 25 25", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
320
|
+
/* @__PURE__ */ jsxs("g", { "clip-path": "url(#clip0_1215_2072)", children: [
|
|
321
|
+
/* @__PURE__ */ jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.0011 4.38525C10.1019 4.38624 8.26498 5.05889 6.81881 6.28294C5.37263 7.50698 4.4115 9.20259 4.10726 11.0666C3.80302 12.9306 4.17551 14.8414 5.15814 16.4574C6.14077 18.0733 7.66946 19.2891 9.47085 19.8872C9.86827 19.961 10.018 19.7147 10.018 19.5053C10.018 19.2958 10.01 18.6886 10.0074 18.0247C7.78183 18.5055 7.31155 17.0856 7.31155 17.0856C6.94858 16.1635 6.42399 15.9212 6.42399 15.9212C5.69804 15.4286 6.4783 15.4378 6.4783 15.4378C7.28241 15.4944 7.705 16.2584 7.705 16.2584C8.4177 17.4741 9.57683 17.1225 10.0325 16.917C10.1041 16.402 10.312 16.0516 10.5412 15.8527C8.76345 15.6525 6.89559 14.9702 6.89559 11.9222C6.88457 11.1317 7.17958 10.3673 7.71957 9.78704C7.63744 9.58683 7.36321 8.77808 7.79772 7.67954C7.79772 7.67954 8.46936 7.46616 9.99809 8.49488C11.3093 8.13834 12.6928 8.13834 14.0041 8.49488C15.5315 7.46616 16.2018 7.67954 16.2018 7.67954C16.6376 8.77544 16.3634 9.58419 16.2813 9.78704C16.823 10.3674 17.1186 11.1332 17.1066 11.9248C17.1066 14.9794 15.2347 15.6525 13.4543 15.8487C13.7404 16.0964 13.9961 16.5798 13.9961 17.3227C13.9961 18.387 13.9868 19.2431 13.9868 19.5053C13.9868 19.7173 14.1312 19.9649 14.5366 19.8872C16.3382 19.289 17.867 18.0731 18.8496 16.4568C19.8323 14.8406 20.2046 12.9295 19.9 11.0653C19.5954 9.20112 18.6338 7.50549 17.1871 6.28166C15.7405 5.05782 13.9031 4.38561 12.0037 4.38525H12.0011Z", fill: "white" }),
|
|
322
|
+
/* @__PURE__ */ jsx("path", { d: "M9.35091 17.3684C9.35091 17.4329 9.27673 17.4882 9.18135 17.4896C9.08597 17.4909 9.00781 17.4382 9.00781 17.3736C9.00781 17.3091 9.08199 17.2538 9.17737 17.2525C9.27275 17.2511 9.35091 17.3025 9.35091 17.3684Z", fill: "white" }),
|
|
323
|
+
/* @__PURE__ */ jsx("path", { d: "M9.96094 17.2672C9.97286 17.3317 9.90662 17.3989 9.81124 17.4147C9.71586 17.4305 9.63241 17.3923 9.62048 17.3291C9.60856 17.2659 9.67745 17.1974 9.77018 17.1803C9.86291 17.1631 9.94902 17.2027 9.96094 17.2672Z", fill: "white" }),
|
|
324
|
+
/* @__PURE__ */ jsx("path", { d: "M8.6968 17.324C8.67693 17.3859 8.58685 17.4136 8.49676 17.3872C8.40668 17.3609 8.34707 17.2871 8.36429 17.2239C8.38151 17.1607 8.47292 17.1317 8.56433 17.1607C8.65573 17.1897 8.71402 17.2595 8.6968 17.324Z", fill: "white" }),
|
|
325
|
+
/* @__PURE__ */ jsx("path", { d: "M8.09774 17.0658C8.05402 17.1145 7.96527 17.1013 7.89241 17.0355C7.81955 16.9696 7.80232 16.88 7.84604 16.8326C7.88975 16.7852 7.97851 16.7984 8.05402 16.8629C8.12953 16.9274 8.1441 17.0183 8.09774 17.0658V17.0658Z", fill: "white" }),
|
|
326
|
+
/* @__PURE__ */ jsx("path", { d: "M7.6686 16.6231C7.61959 16.6574 7.53612 16.6231 7.48976 16.5546C7.47694 16.5423 7.46674 16.5276 7.45978 16.5113C7.45281 16.495 7.44922 16.4775 7.44922 16.4598C7.44922 16.4421 7.45281 16.4246 7.45978 16.4083C7.46674 16.392 7.47694 16.3772 7.48976 16.3649C7.53877 16.332 7.62224 16.3649 7.6686 16.4321C7.71497 16.4993 7.71629 16.5889 7.6686 16.6231V16.6231Z", fill: "white" }),
|
|
327
|
+
/* @__PURE__ */ jsx("path", { d: "M7.3535 16.1662C7.32607 16.1799 7.29468 16.1838 7.26472 16.177C7.23475 16.1703 7.20807 16.1534 7.18924 16.1293C7.13757 16.074 7.12697 15.9976 7.16671 15.9633C7.20645 15.9291 7.27799 15.9449 7.32966 16.0002C7.38132 16.0555 7.39324 16.1319 7.3535 16.1662Z", fill: "white" }),
|
|
328
|
+
/* @__PURE__ */ jsx("path", { d: "M7.02905 15.8062C7.01183 15.8457 6.94825 15.8576 6.89658 15.8299C6.84492 15.8022 6.8065 15.7509 6.82505 15.71C6.8436 15.6692 6.90586 15.6587 6.95752 15.6863C7.00919 15.714 7.04893 15.7667 7.02905 15.8062Z", fill: "white" })
|
|
329
|
+
] }),
|
|
330
|
+
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_1215_2072", children: /* @__PURE__ */ jsx("rect", { width: "16", height: "16", fill: "white", transform: "translate(4 4.05176)" }) }) })
|
|
331
|
+
] })));
|
|
332
|
+
|
|
333
|
+
var __defProp$2 = Object.defineProperty;
|
|
334
|
+
var __defProps$2 = Object.defineProperties;
|
|
335
|
+
var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
|
|
336
|
+
var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
|
|
337
|
+
var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
|
|
338
|
+
var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
|
|
339
|
+
var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
340
|
+
var __spreadValues$2 = (a, b) => {
|
|
341
|
+
for (var prop in b || (b = {}))
|
|
342
|
+
if (__hasOwnProp$2.call(b, prop))
|
|
343
|
+
__defNormalProp$2(a, prop, b[prop]);
|
|
344
|
+
if (__getOwnPropSymbols$2)
|
|
345
|
+
for (var prop of __getOwnPropSymbols$2(b)) {
|
|
346
|
+
if (__propIsEnum$2.call(b, prop))
|
|
347
|
+
__defNormalProp$2(a, prop, b[prop]);
|
|
348
|
+
}
|
|
349
|
+
return a;
|
|
350
|
+
};
|
|
351
|
+
var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
|
|
352
|
+
const Google = forwardRef((props, ref) => /* @__PURE__ */ jsxs("svg", __spreadProps$2(__spreadValues$2({ ref }, props), { width: "25", height: "25", viewBox: "0 0 25 25", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
353
|
+
/* @__PURE__ */ jsxs("g", { "clip-path": "url(#clip0_1215_2403)", children: [
|
|
354
|
+
/* @__PURE__ */ jsx("path", { d: "M20.3442 12.2359C20.3442 11.6921 20.3001 11.1454 20.206 10.6104H12.6602V13.691H16.9813C16.802 14.6846 16.2258 15.5635 15.3822 16.122V18.1209H17.9602C19.4741 16.7276 20.3442 14.6699 20.3442 12.2359Z", fill: "#4285F4" }),
|
|
355
|
+
/* @__PURE__ */ jsx("path", { d: "M12.6607 20.0525C14.8184 20.0525 16.6379 19.344 17.9637 18.1212L15.3857 16.1223C14.6684 16.6103 13.7425 16.8866 12.6637 16.8866C10.5766 16.8866 8.80696 15.4785 8.17202 13.5854H5.51172V15.6461C6.86979 18.3475 9.63592 20.0525 12.6607 20.0525V20.0525Z", fill: "#34A853" }),
|
|
356
|
+
/* @__PURE__ */ jsx("path", { d: "M8.16852 13.5856C7.83341 12.592 7.83341 11.5161 8.16852 10.5225V8.46191H5.51116C4.37649 10.7224 4.37649 13.3857 5.51116 15.6462L8.16852 13.5856V13.5856Z", fill: "#FBBC04" }),
|
|
357
|
+
/* @__PURE__ */ jsx("path", { d: "M12.6607 7.2182C13.8013 7.20056 14.9036 7.62974 15.7296 8.41754L18.0136 6.1335C16.5674 4.77543 14.6479 4.02878 12.6607 4.0523C9.63592 4.0523 6.86979 5.75724 5.51172 8.46163L8.16908 10.5223C8.80108 8.62625 10.5736 7.2182 12.6607 7.2182V7.2182Z", fill: "#EA4335" })
|
|
358
|
+
] }),
|
|
359
|
+
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_1215_2403", children: /* @__PURE__ */ jsx("rect", { width: "16", height: "16", fill: "white", transform: "translate(4.5 4.05176)" }) }) })
|
|
360
|
+
] })));
|
|
361
|
+
|
|
362
|
+
var __defProp$1 = Object.defineProperty;
|
|
363
|
+
var __defProps$1 = Object.defineProperties;
|
|
364
|
+
var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
|
|
365
|
+
var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
|
|
366
|
+
var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
|
|
367
|
+
var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
|
|
368
|
+
var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
369
|
+
var __spreadValues$1 = (a, b) => {
|
|
370
|
+
for (var prop in b || (b = {}))
|
|
371
|
+
if (__hasOwnProp$1.call(b, prop))
|
|
372
|
+
__defNormalProp$1(a, prop, b[prop]);
|
|
373
|
+
if (__getOwnPropSymbols$1)
|
|
374
|
+
for (var prop of __getOwnPropSymbols$1(b)) {
|
|
375
|
+
if (__propIsEnum$1.call(b, prop))
|
|
376
|
+
__defNormalProp$1(a, prop, b[prop]);
|
|
377
|
+
}
|
|
378
|
+
return a;
|
|
379
|
+
};
|
|
380
|
+
var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
|
|
381
|
+
const Microsoft = forwardRef((props, ref) => /* @__PURE__ */ jsxs("svg", __spreadProps$1(__spreadValues$1({ ref }, props), { width: "25", height: "25", viewBox: "0 0 25 25", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
382
|
+
/* @__PURE__ */ jsx("path", { d: "M5.19531 4.74707H12.1518V11.7036H5.19531V4.74707Z", fill: "#F35325" }),
|
|
383
|
+
/* @__PURE__ */ jsx("path", { d: "M12.8477 4.74707H19.8042V11.7036H12.8477V4.74707Z", fill: "#81BC06" }),
|
|
384
|
+
/* @__PURE__ */ jsx("path", { d: "M5.19531 12.3994H12.1518V19.3559H5.19531V12.3994Z", fill: "#05A6F0" }),
|
|
385
|
+
/* @__PURE__ */ jsx("path", { d: "M12.8477 12.3994H19.8042V19.3559H12.8477V12.3994Z", fill: "#FFBA08" })
|
|
386
|
+
] })));
|
|
387
|
+
|
|
388
|
+
const LoginBox = styled.form`
|
|
389
|
+
display: flex;
|
|
390
|
+
flex-direction: column;
|
|
391
|
+
justify-content: center;
|
|
392
|
+
gap: 24px;
|
|
393
|
+
|
|
394
|
+
header {
|
|
395
|
+
display: flex;
|
|
396
|
+
flex-direction: column;
|
|
397
|
+
align-items: center;
|
|
398
|
+
gap: 24px;
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
.separator {
|
|
402
|
+
padding: 0 8px;
|
|
403
|
+
display: flex;
|
|
404
|
+
flex-direction: row;
|
|
405
|
+
align-items: center;
|
|
406
|
+
justify-content: center;
|
|
407
|
+
gap: 8px;
|
|
408
|
+
margin: 0;
|
|
409
|
+
|
|
410
|
+
&:before, &:after {
|
|
411
|
+
content: '';
|
|
412
|
+
height: 1px;
|
|
413
|
+
flex: 1;
|
|
414
|
+
background-color: ${theme.color.light["500"]};
|
|
415
|
+
}
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
.error {
|
|
419
|
+
color: ${theme.color.danger["500"]};
|
|
420
|
+
line-height: 1.5rem;
|
|
421
|
+
}
|
|
422
|
+
`;
|
|
423
|
+
const providerIcons = {
|
|
424
|
+
github: /* @__PURE__ */ jsx(Github, {}),
|
|
425
|
+
google: /* @__PURE__ */ jsx(Google, {}),
|
|
426
|
+
microsoft: /* @__PURE__ */ jsx(Microsoft, {})
|
|
427
|
+
};
|
|
428
|
+
function capitalize(str) {
|
|
429
|
+
return str.charAt(0).toUpperCase() + str.slice(1);
|
|
430
|
+
}
|
|
431
|
+
const ButtonProvider = ({ provider, login, loading }) => {
|
|
432
|
+
const t = useTranslate(dictionary);
|
|
433
|
+
return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Button, { colorScheme: "light", type: "button", size: "md", sx: { width: "100%" }, onClick: () => login("idp", provider), disabled: loading, children: loading ? /* @__PURE__ */ jsx(LoadingCircular, {}) : /* @__PURE__ */ jsxs(Flex, { alignItems: "center", style: { gap: "4px" }, children: [
|
|
434
|
+
providerIcons[provider],
|
|
435
|
+
interpolate(t.loginWithGithub, capitalize(provider))
|
|
436
|
+
] }) }) });
|
|
437
|
+
};
|
|
438
|
+
const EmailNotAllowed = () => {
|
|
439
|
+
const t = useTranslate(dictionary);
|
|
440
|
+
return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "center", children: [
|
|
441
|
+
/* @__PURE__ */ jsx(Text, { appearance: "body2", children: t.emailNotAllowedTitle }),
|
|
442
|
+
/* @__PURE__ */ jsx(Text, { appearance: "body2", colorScheme: "light.700", children: t.emailNotAllowedSubtitle })
|
|
443
|
+
] }) });
|
|
444
|
+
};
|
|
445
|
+
const Login = ({
|
|
446
|
+
onSubmit,
|
|
447
|
+
initialValue = "",
|
|
448
|
+
welcomeText,
|
|
449
|
+
removeLoadingOnSuccess,
|
|
450
|
+
className,
|
|
451
|
+
style,
|
|
452
|
+
banner,
|
|
453
|
+
loginTypes = ["idp", "sso"]
|
|
454
|
+
}) => {
|
|
455
|
+
const t = useTranslate(dictionary);
|
|
456
|
+
const [trialProviders, isLoadingTrialProviders] = useTrialProviders({ enabled: loginTypes.includes("idp") });
|
|
457
|
+
const searchParams = new URLSearchParams(location.search);
|
|
458
|
+
const [error, setError] = useState(searchParams.get("error_description") || searchParams.get("error") || "");
|
|
459
|
+
const [errorCode] = useState(searchParams.get("error_code") || "");
|
|
460
|
+
const [loading, setLoading] = useState(false);
|
|
461
|
+
const providerQueryParam = searchParams.get("provider");
|
|
462
|
+
const [loginProvider, setLoginProvider] = useState();
|
|
463
|
+
const [email, setEmail] = useState(initialValue || searchParams.get("email") || "");
|
|
464
|
+
const disabled = !email.match(/\w+@\w+/);
|
|
465
|
+
const idpLoginEnabled = loginTypes.includes("idp") && !!(trialProviders == null ? void 0 : trialProviders.length);
|
|
466
|
+
const ssoLoginEnabled = loginTypes.includes("sso");
|
|
467
|
+
useEffect(() => {
|
|
468
|
+
if (!providerQueryParam)
|
|
469
|
+
return;
|
|
470
|
+
if (providerQueryParam === "email")
|
|
471
|
+
login("sso");
|
|
472
|
+
else if (trialProviders == null ? void 0 : trialProviders.includes(providerQueryParam))
|
|
473
|
+
login("idp", providerQueryParam);
|
|
474
|
+
}, [trialProviders, isLoadingTrialProviders]);
|
|
475
|
+
async function login(type, provider) {
|
|
476
|
+
setError("");
|
|
477
|
+
setLoading(true);
|
|
478
|
+
provider !== loginProvider && setLoginProvider(provider);
|
|
479
|
+
try {
|
|
480
|
+
const data = type === "idp" && !!provider ? { type: "idp", provider: `external-idp:${provider}` } : { type: "sso", email };
|
|
481
|
+
await onSubmit(data);
|
|
482
|
+
if (removeLoadingOnSuccess)
|
|
483
|
+
setLoading(false);
|
|
484
|
+
} catch (error2) {
|
|
485
|
+
setLoading(false);
|
|
486
|
+
setLoginProvider(void 0);
|
|
487
|
+
setError(error2.message || error2.toString());
|
|
488
|
+
}
|
|
489
|
+
}
|
|
490
|
+
function submitForm(e) {
|
|
491
|
+
e.preventDefault();
|
|
492
|
+
if (disabled)
|
|
493
|
+
return;
|
|
494
|
+
login("sso");
|
|
495
|
+
}
|
|
496
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
497
|
+
/* @__PURE__ */ jsxs(LoginBox, { onSubmit: submitForm, className, style, children: [
|
|
498
|
+
/* @__PURE__ */ jsxs("header", { children: [
|
|
499
|
+
/* @__PURE__ */ jsx(MiniLogo, {}),
|
|
500
|
+
/* @__PURE__ */ jsxs(Flex, { flexDirection: "column", alignItems: "center", children: [
|
|
501
|
+
/* @__PURE__ */ jsx(Text, { appearance: "body1", weight: "medium", children: welcomeText || t.welcome }),
|
|
502
|
+
/* @__PURE__ */ jsxs(Text, { appearance: "body2", colorScheme: "light.700", children: [
|
|
503
|
+
" ",
|
|
504
|
+
t.loginWithEmail
|
|
505
|
+
] })
|
|
506
|
+
] })
|
|
507
|
+
] }),
|
|
508
|
+
errorCode && errorCode === "EMAIL_IS_NOT_ALLOWED" && /* @__PURE__ */ jsx(EmailNotAllowed, {}),
|
|
509
|
+
ssoLoginEnabled && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", style: { gap: "4px", marginTop: "4px" }, children: [
|
|
510
|
+
/* @__PURE__ */ jsx(Label, { htmlFor: "email", children: t.label }),
|
|
511
|
+
/* @__PURE__ */ jsx(Input, { type: "email", name: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: t.placeholder }),
|
|
512
|
+
/* @__PURE__ */ jsx(Button, { colorScheme: "primary", size: "md", style: { marginTop: "12px" }, disabled: disabled || loading, children: loading && !loginProvider ? /* @__PURE__ */ jsx(LoadingCircular, {}) : /* @__PURE__ */ jsx(Text, { children: t.continue }) })
|
|
513
|
+
] }) }),
|
|
514
|
+
isLoadingTrialProviders ? /* @__PURE__ */ jsxs(Flex, { alignContent: "center", justifyContent: "center", my: 5, children: [
|
|
515
|
+
" ",
|
|
516
|
+
/* @__PURE__ */ jsx(LoadingCircular, {}),
|
|
517
|
+
" "
|
|
518
|
+
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
519
|
+
ssoLoginEnabled && idpLoginEnabled && /* @__PURE__ */ jsx("p", { className: "separator", children: /* @__PURE__ */ jsx(Text, { appearance: "microtext1", colorScheme: "light.700", children: t.or }) }),
|
|
520
|
+
idpLoginEnabled && /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", gap: true, children: [
|
|
521
|
+
/* @__PURE__ */ jsx(Text, { colorScheme: "light.700", appearance: "body2", style: { textAlign: "center" }, mb: 4, children: t.trial }),
|
|
522
|
+
trialProviders == null ? void 0 : trialProviders.map((provider) => /* @__PURE__ */ jsx(
|
|
523
|
+
ButtonProvider,
|
|
524
|
+
{
|
|
525
|
+
provider,
|
|
526
|
+
login,
|
|
527
|
+
loading: loading && loginProvider === provider
|
|
528
|
+
},
|
|
529
|
+
provider
|
|
530
|
+
))
|
|
531
|
+
] })
|
|
532
|
+
] }),
|
|
533
|
+
error && /* @__PURE__ */ jsxs(Text, { className: "error", children: [
|
|
534
|
+
t.error,
|
|
535
|
+
": ",
|
|
536
|
+
error
|
|
537
|
+
] })
|
|
538
|
+
] }),
|
|
539
|
+
banner ? /* @__PURE__ */ jsx(BannerWarning, { children: banner }) : null
|
|
540
|
+
] });
|
|
541
|
+
};
|
|
542
|
+
const dictionary = {
|
|
543
|
+
en: {
|
|
544
|
+
welcome: "Welcome to StackSpot",
|
|
545
|
+
loginWithEmail: "Log in with your email.",
|
|
546
|
+
label: "Corporate email",
|
|
547
|
+
placeholder: "email@company.com",
|
|
548
|
+
continue: "Continue",
|
|
549
|
+
or: "Or",
|
|
550
|
+
loginWithGithub: "Sign in with Github",
|
|
551
|
+
loginWithGoogle: "Sign in with Google",
|
|
552
|
+
loginWithMicrosoft: "Sign in with Microsoft",
|
|
553
|
+
error: "Error while attempting to login",
|
|
554
|
+
emailNotAllowedTitle: "Your email is linked to an Enterprise account.",
|
|
555
|
+
emailNotAllowedSubtitle: "Please log in with your corporate email.",
|
|
556
|
+
trial: "Access your trial account"
|
|
557
|
+
},
|
|
558
|
+
pt: {
|
|
559
|
+
welcome: "Bem vindo \xE0 StackSpot",
|
|
560
|
+
loginWithEmail: "Fa\xE7a login com seu e-mail.",
|
|
561
|
+
label: "Email corporativo",
|
|
562
|
+
placeholder: "email@empresa.com",
|
|
563
|
+
continue: "Continuar",
|
|
564
|
+
or: "Ou",
|
|
565
|
+
loginWithGithub: "Entrar com o GitHub",
|
|
566
|
+
loginWithGoogle: "Entrar com Google",
|
|
567
|
+
loginWithMicrosoft: "Entrar com Microsoft",
|
|
568
|
+
error: "Erro ao fazer login",
|
|
569
|
+
emailNotAllowedTitle: '"Este e-mail est\xE1 vinculado a uma conta Enterprise.',
|
|
570
|
+
emailNotAllowedSubtitle: "Fa\xE7a login com seu email corporativo.",
|
|
571
|
+
trial: "Acesse sua conta de teste"
|
|
572
|
+
}
|
|
573
|
+
};
|
|
574
|
+
|
|
501
575
|
var __defProp = Object.defineProperty;
|
|
502
576
|
var __defProps = Object.defineProperties;
|
|
503
577
|
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
@@ -557,14 +631,5 @@ const Authenticated = ({ children, onLogin, onSession, customLoginProps, session
|
|
|
557
631
|
) }) });
|
|
558
632
|
};
|
|
559
633
|
|
|
560
|
-
function useSession() {
|
|
561
|
-
const manager = SessionManager.instance;
|
|
562
|
-
const [session, setSession] = useState((manager == null ? void 0 : manager.hasSession()) ? manager.getSession() : void 0);
|
|
563
|
-
useEffect(() => {
|
|
564
|
-
return manager == null ? void 0 : manager.onChange(setSession);
|
|
565
|
-
}, []);
|
|
566
|
-
return session;
|
|
567
|
-
}
|
|
568
|
-
|
|
569
634
|
export { Authenticated, Login, SessionManager, useSession };
|
|
570
635
|
//# sourceMappingURL=index.mjs.map
|