@memori.ai/memori-react
Version:
[](https://www.npmjs.com/package/@memori.ai/memori-react)  ![TypeScript Support](https
212 lines • 18.4 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 Drawer_1 = tslib_1.__importDefault(require("../ui/Drawer"));
const react_hot_toast_1 = tslib_1.__importDefault(require("react-hot-toast"));
const react_i18next_1 = require("react-i18next");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const error_1 = require("../../helpers/error");
const utils_1 = require("../../helpers/utils");
const SignupForm_1 = tslib_1.__importDefault(require("../SignupForm/SignupForm"));
const AccountForm_1 = tslib_1.__importDefault(require("../AccountForm/AccountForm"));
const LoginDrawer = ({ open = false, onClose, onLogin, onLogout, user, loginToken, tenant, apiClient, __TEST__signup = false, __TEST__needMissingData = false, __TEST__waitingForOtp = false, __TEST__changePwd = false, }) => {
var _a, _b;
const { t, i18n } = (0, react_i18next_1.useTranslation)();
const lang = i18n.language === 'it' ? 'it' : 'en';
const { userLogin, updateUser } = apiClient.backend;
const isUserLoggedIn = (user === null || user === void 0 ? void 0 : user.userID) && loginToken;
const [loading, setLoading] = (0, react_1.useState)(false);
const [error, setError] = (0, react_1.useState)(null);
const [showSignup, setShowSignup] = (0, react_1.useState)(__TEST__signup);
const [userMustChangePwd, setUserMustChangePwd] = (0, react_1.useState)(__TEST__changePwd
? {
flowID: 'flowID',
tenant: tenant.name,
eMail: 'email',
userName: 'username',
password: 'password',
}
: undefined);
const [needsMissingData, setNeedsMissingData] = (0, react_1.useState)(__TEST__needMissingData
? {
token: 'token',
birthDate: true,
tnCAndPPAccepted: true,
}
: {});
const login = (e) => {
e.preventDefault();
const form = e.currentTarget;
const userNameOrEmail = form.userNameOrEmail.value;
const password = form.password.value;
const isEmail = utils_1.mailRegEx.test(userNameOrEmail);
const user = isEmail
? {
tenant: tenant === null || tenant === void 0 ? void 0 : tenant.name,
eMail: userNameOrEmail,
password: password,
}
: {
tenant: tenant === null || tenant === void 0 ? void 0 : tenant.name,
userName: userNameOrEmail,
password: password,
};
setLoading(true);
setError(null);
userLogin(user)
.then(data => {
var _a, _b, _c, _d, _e;
if (data.resultCode === -14) {
setUserMustChangePwd({
tenant: tenant.name,
eMail: isEmail ? userNameOrEmail : undefined,
userName: isEmail ? undefined : userNameOrEmail,
password: password,
flowID: (data.flowID || ((_a = data.user) === null || _a === void 0 ? void 0 : _a.flowID)),
});
}
else if (data.resultCode !== 0) {
console.error(data);
react_hot_toast_1.default.error(t((0, error_1.getErrori18nKey)(data.resultCode)));
setError(data.resultMessage);
}
else if (data.user && data.token) {
if (!((_b = data.user) === null || _b === void 0 ? void 0 : _b.tnCAndPPAccepted) || !((_c = data.user) === null || _c === void 0 ? void 0 : _c.birthDate)) {
setNeedsMissingData({
token: data.token,
birthDate: !((_d = data.user) === null || _d === void 0 ? void 0 : _d.birthDate),
tnCAndPPAccepted: !((_e = data.user) === null || _e === void 0 ? void 0 : _e.tnCAndPPAccepted),
});
}
else {
onLogin(data.user, data.token);
}
}
})
.catch(err => {
console.error('[LOGIN]', err);
if (err.message) {
react_hot_toast_1.default.error(err.message);
setError(err.message);
}
})
.finally(() => {
setLoading(false);
});
};
const updateMissingData = async (e) => {
var _a, _b, _c;
e.preventDefault();
const form = e.currentTarget;
const birthDate = (_a = form.birthDate) === null || _a === void 0 ? void 0 : _a.value;
const tnCAndPPAccepted = (_b = form.tnCAndPPAccepted) === null || _b === void 0 ? void 0 : _b.checked;
const pAndCUAccepted = (_c = form.pAndCUAccepted) === null || _c === void 0 ? void 0 : _c.checked;
if (!(user === null || user === void 0 ? void 0 : user.userID) || !(needsMissingData === null || needsMissingData === void 0 ? void 0 : needsMissingData.token)) {
return;
}
if (!birthDate || !tnCAndPPAccepted) {
setError(t('missingData'));
return;
}
let newUser = {
userID: user.userID,
birthDate: (user === null || user === void 0 ? void 0 : user.birthDate) || !needsMissingData.birthDate ? undefined : birthDate,
tnCAndPPAccepted: tnCAndPPAccepted || (user === null || user === void 0 ? void 0 : user.tnCAndPPAccepted),
tnCAndPPAcceptanceDate: tnCAndPPAccepted
? new Date().toISOString()
: undefined,
pAndCUAccepted: pAndCUAccepted || (user === null || user === void 0 ? void 0 : user.pAndCUAccepted),
pAndCUAcceptanceDate: pAndCUAccepted
? new Date().toISOString()
: undefined,
};
const { user: patchedUser, ...resp } = await updateUser(needsMissingData.token, user.userID, newUser);
if (resp.resultCode !== 0) {
console.error(resp);
react_hot_toast_1.default.error(t((0, error_1.getErrori18nKey)(resp.resultCode)));
setError(resp.resultMessage);
}
else {
react_hot_toast_1.default.success(t('success'));
onLogin(patchedUser || newUser, needsMissingData.token);
}
};
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 changePassword = async (e) => {
var _a, _b, _c, _d, _e;
e.preventDefault();
const form = e.currentTarget;
const tenantID = (_a = form.tenant.value) !== null && _a !== void 0 ? _a : tenant.name;
const flowID = (_b = form.flowID.value) !== null && _b !== void 0 ? _b : userMustChangePwd === null || userMustChangePwd === void 0 ? void 0 : userMustChangePwd.flowID;
const eMail = (_c = form.eMail.value) !== null && _c !== void 0 ? _c : userMustChangePwd === null || userMustChangePwd === void 0 ? void 0 : userMustChangePwd.eMail;
const userName = (_d = form.userName.value) !== null && _d !== void 0 ? _d : userMustChangePwd === null || userMustChangePwd === void 0 ? void 0 : userMustChangePwd.userName;
const password = (_e = form.password.value) !== null && _e !== void 0 ? _e : userMustChangePwd === null || userMustChangePwd === void 0 ? void 0 : userMustChangePwd.password;
const newPassword = form.newPassword.value;
if (!(newPassword === null || newPassword === void 0 ? void 0 : newPassword.length) || !pwdAcceptable) {
setError(t('login.passwordFormatError'));
return;
}
setLoading(true);
const user = {
tenant: tenantID,
flowID,
eMail,
userName,
password,
newPassword,
};
try {
const { user: patchedUser, token, ...resp } = await userLogin(user);
if (resp.resultCode !== 0) {
console.error(resp);
react_hot_toast_1.default.error(t((0, error_1.getErrori18nKey)(resp.resultCode)));
setError(resp.resultMessage);
}
else if (patchedUser && token) {
react_hot_toast_1.default.success(t('success'));
onLogin(patchedUser || user, token);
}
}
catch (e) {
let err = e;
console.error('[LOGIN/CHANGE PWD]', err);
if (err.message) {
react_hot_toast_1.default.error(err.message);
setError(err.message);
}
}
finally {
setLoading(false);
}
};
return ((0, jsx_runtime_1.jsx)(Drawer_1.default, { open: open, onClose: onClose, className: (0, classnames_1.default)('memori--login-drawer', {
'memori--login-drawer--logged': isUserLoggedIn,
'memori--login-drawer--signup': showSignup,
}), title: (0, jsx_runtime_1.jsx)("span", { className: "memori--login-drawer--title", children: isUserLoggedIn
? t('login.loggedDrawerTitle', { name: user.userName })
: showSignup
? t('login.signupDrawerTitle')
: t('login.loginDrawerTitle') }), children: isUserLoggedIn ? ((0, jsx_runtime_1.jsxs)("div", { className: "memori--login-drawer--logged", children: [user.avatarURL && ((0, jsx_runtime_1.jsx)("figure", { className: "memori--login-drawer--avatar", children: (0, jsx_runtime_1.jsx)("img", { src: user.avatarURL, alt: user.userName }) })), (0, jsx_runtime_1.jsx)(Button_1.default, { primary: true, onClick: () => {
onLogout();
}, children: t('login.logout') }), (0, jsx_runtime_1.jsx)(AccountForm_1.default, { user: user, loginToken: loginToken, apiClient: apiClient, onUserUpdate: user => onLogin(user, loginToken) })] })) : ((_a = needsMissingData === null || needsMissingData === void 0 ? void 0 : needsMissingData.token) === null || _a === void 0 ? void 0 : _a.length) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h3", { children: t('login.missingData') }), (0, jsx_runtime_1.jsx)("p", { children: t('login.missingDataHelper') }), (0, jsx_runtime_1.jsxs)("form", { className: "memori--login-drawer--form", onSubmit: updateMissingData, children: [needsMissingData.birthDate && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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') }) })] })), (needsMissingData === null || needsMissingData === void 0 ? void 0 : needsMissingData.tnCAndPPAccepted) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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", 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", defaultChecked: user === null || user === void 0 ? void 0 : user.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.goToAccountToChangeYourPreferences') }) }), (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.save') })] })] })) : (userMustChangePwd === null || userMustChangePwd === void 0 ? void 0 : userMustChangePwd.flowID) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { children: t('login.mustChangePassword') }), (0, jsx_runtime_1.jsxs)("form", { className: "memori--login-drawer--form", onSubmit: changePassword, children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", name: "tenant", value: (_b = userMustChangePwd.tenant) !== null && _b !== void 0 ? _b : tenant === null || tenant === void 0 ? void 0 : tenant.name }), (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: "flowID", value: userMustChangePwd.flowID }), (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: "eMail", value: userMustChangePwd.eMail }), (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: "userName", value: userMustChangePwd.userName }), (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: "password", value: userMustChangePwd.password }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: "#newPassword", children: [t('login.password'), (0, jsx_runtime_1.jsx)("input", { id: "newPassword", name: "newPassword", 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.jsx)(Button_1.default, { htmlType: "submit", primary: true, loading: loading, children: t('confirm') })] })] })) : showSignup ? ((0, jsx_runtime_1.jsx)(SignupForm_1.default, { tenant: tenant, apiClient: apiClient, onLogin: onLogin, goToLogin: () => setShowSignup(false), __TEST__waitingForOtp: __TEST__waitingForOtp })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("form", { className: "memori--login-drawer--form", onSubmit: login, children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: "#userNameOrEmail", children: [t('login.userNameOrEmail'), (0, jsx_runtime_1.jsx)("input", { id: "userNameOrEmail", name: "userNameOrEmail", required: true, autoComplete: "email", placeholder: "Username/email" })] }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: "#password", children: ["Password", (0, jsx_runtime_1.jsx)("input", { id: "password", name: "password", type: "password", required: true, autoComplete: "password", placeholder: "Password" })] }), (0, jsx_runtime_1.jsx)(Button_1.default, { htmlType: "submit", primary: true, loading: loading, children: t('login.login') }), !(tenant === null || tenant === void 0 ? void 0 : tenant.disableRegistration) ? ((0, jsx_runtime_1.jsxs)("p", { className: "memori--login-drawer--signup", children: [t('login.newUserSignUp'), ' ', (0, jsx_runtime_1.jsx)(Button_1.default, { outlined: true, onClick: () => setShowSignup(true), children: t('login.signUp') })] })) : tenant.adminEmail ? ((0, jsx_runtime_1.jsxs)("div", { className: "memori--login-drawer--signup", children: [(0, jsx_runtime_1.jsx)("p", { children: t('login.registrationDisabled') }), (0, jsx_runtime_1.jsxs)("p", { children: [t('login.contactAdmin'), ":", ' ', (0, jsx_runtime_1.jsx)("a", { href: `mailto:${tenant.adminEmail}`, children: tenant.adminEmail })] })] })) : null] }), error && ((0, jsx_runtime_1.jsx)("p", { role: "alert", className: "memori--login-drawer--error", children: error }))] })) }));
};
exports.default = LoginDrawer;
//# sourceMappingURL=LoginDrawer.js.map