@memori.ai/memori-react
Version:
[](https://www.npmjs.com/package/@memori.ai/memori-react)  ![TypeScript Support](https
199 lines • 15.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Button_1 = tslib_1.__importDefault(require("../ui/Button"));
const react_i18next_1 = require("react-i18next");
const react_hot_toast_1 = tslib_1.__importDefault(require("react-hot-toast"));
const utils_1 = require("../../helpers/utils");
const error_1 = require("../../helpers/error");
const reservedUserNames = [
'memori',
'private',
'public',
'api',
'404',
'500',
'it',
'en',
'account',
'auth',
'logout',
'privacy_and_cookie',
'unauthorized',
'users',
'virtual_spaces',
];
const SignupForm = ({ tenant, apiClient, onLogin, goToLogin, __TEST__waitingForOtp = false, }) => {
const { t, i18n } = (0, react_i18next_1.useTranslation)();
const lang = i18n.language === 'it' ? 'it' : 'en';
const { userSignUp, userConfirmSignUp, resendVerificationCode } = apiClient.backend;
const [email, setEmail] = (0, react_1.useState)();
const [username, setUsername] = (0, react_1.useState)();
const [password, setPassword] = (0, react_1.useState)();
const [confirmPassword, setConfirmPassword] = (0, react_1.useState)();
const pwdAcceptable = !password || (password && utils_1.pwdRegEx.test(password));
const pwdGreen = pwdAcceptable && password && password.length >= 24;
const pwdEmpty = !password || password.length === 0;
const pwdMeterValue = !pwdAcceptable || pwdEmpty
? 0
: password.length < 8
? 15
: password.length >= 32
? 100
: (password.length - 8) * (50 / 24) + 50;
const [loading, setLoading] = (0, react_1.useState)(false);
const [loadingOtp, setLoadingOtp] = (0, react_1.useState)(false);
const [waitingForOtp, setWaitingForOtp] = (0, react_1.useState)(__TEST__waitingForOtp);
const [error, setError] = (0, react_1.useState)(null);
const [referral, setReferral] = (0, react_1.useState)();
(0, react_1.useEffect)(() => {
setReferral(window.location.href);
}, []);
const generateUsernameFromEmail = (email) => email.split('@')[0].replace(/[^a-zA-Z0-9]/g, '');
const signup = async (e) => {
var _a, _b, _c, _d, _e, _f, _g;
e.preventDefault();
const form = e.currentTarget;
const tenantID = (_a = form.tenant.value) !== null && _a !== void 0 ? _a : tenant.name;
const eMail = ((_b = form.eMail.value) !== null && _b !== void 0 ? _b : email).toLowerCase();
const userName = (_c = form.userName.value) !== null && _c !== void 0 ? _c : username;
const password = form.password.value;
const birthDate = new Date((_d = form.birthDate) === null || _d === void 0 ? void 0 : _d.value).toISOString();
const tnCAndPPAccepted = (_e = form.tnCAndPPAccepted) === null || _e === void 0 ? void 0 : _e.checked;
const pAndCUAccepted = (_f = form.pAndCUAccepted) === null || _f === void 0 ? void 0 : _f.checked;
const referral = (_g = form.referral) === null || _g === void 0 ? void 0 : _g.value;
if (!eMail || !userName || !password || !birthDate || !tnCAndPPAccepted) {
setError(t('missingData'));
return;
}
setLoading(true);
setError(null);
const age = (new Date().getTime() - new Date(birthDate).getTime()) /
1000 /
60 /
60 /
24 /
365;
if (age < 14) {
react_hot_toast_1.default.error(t('login.underage', { age: 14 }));
setError(t('login.underage', { age: 14 }));
return;
}
try {
const { user, ...resp } = await userSignUp({
tenant: tenantID,
eMail,
userName,
password,
birthDate,
tnCAndPPAccepted,
tnCAndPPAcceptanceDate: new Date().toISOString(),
pAndCUAccepted,
pAndCUAcceptanceDate: new Date().toISOString(),
referral,
});
if (resp.resultCode !== 0) {
console.error(resp);
react_hot_toast_1.default.error(t((0, error_1.getErrori18nKey)(resp.resultCode)));
}
else if (user) {
react_hot_toast_1.default.success(t('success'));
setWaitingForOtp(true);
}
}
catch (e) {
let err = e;
console.error('[signup]', err);
if (err === null || err === void 0 ? void 0 : err.message)
react_hot_toast_1.default.error(err.message);
}
finally {
setLoading(false);
}
};
const resendOtp = async (e) => {
e.preventDefault();
if (!username)
return;
setLoadingOtp(true);
try {
const resp = await resendVerificationCode({
tenant: tenant === null || tenant === void 0 ? void 0 : tenant.name,
userName: username,
});
if (resp.resultCode === 0) {
react_hot_toast_1.default.success(t('resentVerificationCode'));
}
else {
console.error(resp);
react_hot_toast_1.default.error(t((0, error_1.getErrori18nKey)(resp.resultCode)));
}
}
catch (e) {
let err = e;
console.error('[resend otp]', err);
if (err === null || err === void 0 ? void 0 : err.message)
react_hot_toast_1.default.error(err.message);
}
finally {
setLoadingOtp(false);
}
};
const validateOtp = async (e) => {
var _a, _b, _c;
e.preventDefault();
const form = e.currentTarget;
const tenantID = (_a = form.tenant.value) !== null && _a !== void 0 ? _a : tenant.name;
const userName = (_b = form.userName.value) !== null && _b !== void 0 ? _b : username;
const pwd = (_c = form.password.value) !== null && _c !== void 0 ? _c : password;
const verificationCode = form.verificationCode.value;
setLoading(true);
setError(null);
try {
const { user, token, ...resp } = await userConfirmSignUp({
tenant: tenantID,
userName,
password: pwd,
verificationCode,
});
if (resp.resultCode !== 0) {
console.error(resp);
react_hot_toast_1.default.error(t((0, error_1.getErrori18nKey)(resp.resultCode)));
}
else if (user && token) {
react_hot_toast_1.default.success(t('success'));
onLogin(user, token);
}
}
catch (e) {
let err = e;
console.error('[validate otp]', err);
if (err === null || err === void 0 ? void 0 : err.message)
react_hot_toast_1.default.error(err.message);
}
finally {
setLoading(false);
}
};
return waitingForOtp ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("form", { className: "memori--login-drawer--form", onSubmit: validateOtp, children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", name: "userName", value: username }), (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: "password", value: password }), (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: "tenant", value: tenant.name }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: "#verificationCode", children: [t('login.otpCode'), (0, jsx_runtime_1.jsx)("input", { id: "verificationCode", name: "verificationCode", type: "text", required: true, autoComplete: "one-time-code", placeholder: t('login.otpCode') || 'OTP' })] }), (0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)(Button_1.default, { outlined: true, onClick: resendOtp, loading: loadingOtp, children: t('login.resendVerificationCode') }) }), (0, jsx_runtime_1.jsx)(Button_1.default, { htmlType: "submit", primary: true, loading: loading, children: t('confirm') })] }), error && ((0, jsx_runtime_1.jsx)("p", { role: "alert", className: "memori--login-drawer--error", children: error }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("form", { className: "memori--login-drawer--form", onSubmit: signup, children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", name: "tenant", value: tenant.name }), (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: "referral", value: referral }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: "#eMail", children: [t('login.email'), (0, jsx_runtime_1.jsx)("input", { type: "email", name: "eMail", id: "eMail", required: true, autoComplete: "email", placeholder: t('login.email') || 'Email', onChange: e => setEmail(e.target.value), "aria-invalid": !!(email === null || email === void 0 ? void 0 : email.length) && !utils_1.mailRegEx.test(email) })] }), !!(email === null || email === void 0 ? void 0 : email.length) && !utils_1.mailRegEx.test(email) && ((0, jsx_runtime_1.jsx)("p", { className: "memori--login-drawer--inline-error", children: t('login.emailFormatError') })), (0, jsx_runtime_1.jsxs)("label", { htmlFor: "userName", children: [t('login.username'), (0, jsx_runtime_1.jsx)("input", { type: "text", name: "userName", id: "userName", required: true, autoComplete: "username", placeholder: t('login.username') || 'Username', onFocus: () => {
if (!(username === null || username === void 0 ? void 0 : username.length) && !!(email === null || email === void 0 ? void 0 : email.length)) {
let username = generateUsernameFromEmail(email);
const field = document.getElementById('userName');
if (field) {
field.value = username;
setUsername(username);
}
}
}, onChange: e => setUsername(e.target.value), "aria-invalid": !!(username === null || username === void 0 ? void 0 : username.length) &&
(reservedUserNames.includes(username.toLowerCase()) ||
!utils_1.usernameRegEx.test(username)) })] }), !!(username === null || username === void 0 ? void 0 : username.length) &&
reservedUserNames.includes(username.toLowerCase()) && ((0, jsx_runtime_1.jsx)("p", { className: "memori--login-drawer--inline-error", children: t('login.usernameContainsReservedWord') })), !!(username === null || username === void 0 ? void 0 : username.length) && !utils_1.usernameRegEx.test(username) && ((0, jsx_runtime_1.jsx)("p", { className: "memori--login-drawer--inline-error", children: t('login.usernameFormatError') })), (0, jsx_runtime_1.jsxs)("label", { htmlFor: "#birthDate", children: [t('login.birthDate'), (0, jsx_runtime_1.jsx)("input", { id: "birthDate", name: "birthDate", type: "date", required: true, autoComplete: "bday" })] }), (0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)("small", { children: t('login.birthDateHelper') }) }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: "#password", children: [t('login.password'), (0, jsx_runtime_1.jsx)("input", { id: "password", name: "password", type: "password", required: true, autoComplete: "new-password", placeholder: t('login.password') || 'Password', onChange: e => setPassword(e.target.value), "aria-invalid": !pwdAcceptable })] }), !pwdAcceptable && ((0, jsx_runtime_1.jsx)("p", { className: "memori--login-drawer--inline-error", children: t('login.passwordFormatError') })), (0, jsx_runtime_1.jsxs)("label", { htmlFor: "#confirm-password", children: [t('login.confirmPassword'), (0, jsx_runtime_1.jsx)("input", { id: "confirm-password", name: "confirmPassword", type: "password", required: true, autoComplete: "new-password", placeholder: t('login.confirmPassword') || 'Password', onChange: e => setConfirmPassword(e.target.value), "aria-invalid": !!(password === null || password === void 0 ? void 0 : password.length) &&
!!(confirmPassword === null || confirmPassword === void 0 ? void 0 : confirmPassword.length) &&
password !== confirmPassword })] }), !!(password === null || password === void 0 ? void 0 : password.length) &&
!!(confirmPassword === null || confirmPassword === void 0 ? void 0 : confirmPassword.length) &&
password !== confirmPassword && ((0, jsx_runtime_1.jsx)("p", { className: "memori--login-drawer--inline-error", children: t('login.passwordMatchingError') })), (0, jsx_runtime_1.jsx)("meter", { className: "memori--login-drawer--password-meter", min: 0, low: 33, high: 66, optimum: 80, max: 100, value: pwdMeterValue, id: "password-strength-meter" }), (0, jsx_runtime_1.jsx)("small", { children: t(`login.pwd${pwdGreen ? 'Strong' : pwdAcceptable ? 'Acceptable' : 'Weak'}`) }), (0, jsx_runtime_1.jsxs)("label", { className: "memori-checkbox", children: [(0, jsx_runtime_1.jsxs)("span", { className: "memori-checkbox--input-wrapper", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", name: "tnCAndPPAccepted", required: true, className: "memori-checkbox--input" }), (0, jsx_runtime_1.jsx)("span", { className: "memori-checkbox--inner" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "memori-checkbox--text", children: [t('login.privacyLabel'), ' ', (0, jsx_runtime_1.jsx)("a", { href: `https://memori.ai/${lang}/privacy_and_cookie`, target: "_blank", rel: "noopener noreferrer", children: t('login.privacyAndCookiePolicy') }), ' ', t('login.and'), ' ', (0, jsx_runtime_1.jsx)("a", { href: `https://memori.ai/${lang}/tos`, target: "_blank", rel: "noopener noreferrer", children: t('login.termsOfService') })] })] }), (0, jsx_runtime_1.jsxs)("label", { className: "memori-checkbox", children: [(0, jsx_runtime_1.jsxs)("span", { className: "memori-checkbox--input-wrapper", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", name: "pAndCUAccepted", className: "memori-checkbox--input" }), (0, jsx_runtime_1.jsx)("span", { className: "memori-checkbox--inner" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "memori-checkbox--text", children: [t('login.pAndCUAccepted'), ' ', (0, jsx_runtime_1.jsx)("small", { children: (0, jsx_runtime_1.jsxs)("em", { children: ["(", t('login.optional'), ")"] }) })] })] }), (0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)("small", { children: t('login.deepThoughtExplaination') }) }), (0, jsx_runtime_1.jsx)(Button_1.default, { htmlType: "submit", primary: true, loading: loading, children: t('login.signUp') }), (0, jsx_runtime_1.jsxs)("p", { className: "memori--login-drawer--signup", children: [t('login.alreadyHaveAnAccount'), ' ', (0, jsx_runtime_1.jsx)(Button_1.default, { outlined: true, onClick: goToLogin, children: t('login.backToLogin') })] })] }), error && ((0, jsx_runtime_1.jsx)("p", { role: "alert", className: "memori--login-drawer--error", children: error }))] }));
};
exports.default = SignupForm;
//# sourceMappingURL=SignupForm.js.map