@memori.ai/memori-react
Version:
[](https://www.npmjs.com/package/@memori.ai/memori-react)  ![TypeScript Support](https
121 lines • 11.2 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 Tooltip_1 = tslib_1.__importDefault(require("../ui/Tooltip"));
const imgMimeTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'];
const AccountForm = ({ user, loginToken, apiClient, onUserUpdate }) => {
const { t, i18n } = (0, react_i18next_1.useTranslation)();
const lang = i18n.language === 'it' ? 'it' : 'en';
const { updateUser, uploadAsset } = apiClient.backend;
const [email, setEmail] = (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 [error, setError] = (0, react_1.useState)(null);
const sendUserUpdate = async (userID, user) => {
try {
const { user: updatedUser, ...resp } = await updateUser(loginToken, userID, user);
if (resp.resultCode !== 0) {
console.error(resp);
react_hot_toast_1.default.error(t((0, error_1.getErrori18nKey)(resp.resultCode)));
}
else if (updatedUser) {
react_hot_toast_1.default.success(t('success'));
onUserUpdate(updatedUser);
}
}
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 submitUserUpdate = async (e) => {
var _a, _b, _c, _d, _e;
e.preventDefault();
if (!user.userID)
return;
const userID = user.userID;
const form = e.currentTarget;
const eMail = (_a = form.eMail.value) !== null && _a !== void 0 ? _a : email;
const newPassword = (_b = form.newPassword.value) !== null && _b !== void 0 ? _b : password;
const currentPassword = form.password.value;
const confirmPassword = form.confirmPassword.value;
const pAndCUAccepted = (_c = form.pAndCUAccepted) === null || _c === void 0 ? void 0 : _c.checked;
const avatar = (_e = (_d = form.avatar) === null || _d === void 0 ? void 0 : _d.files) === null || _e === void 0 ? void 0 : _e[0];
setLoading(true);
setError(null);
if ((newPassword === null || newPassword === void 0 ? void 0 : newPassword.length) && newPassword !== confirmPassword) {
setError(t('login.passwordMatchingError'));
setLoading(false);
return;
}
let patchedUser = {
...((eMail === null || eMail === void 0 ? void 0 : eMail.length) && eMail !== user.eMail ? { eMail } : {}),
...(newPassword ? { password: currentPassword, newPassword } : {}),
...(pAndCUAccepted !== undefined && pAndCUAccepted !== user.pAndCUAccepted
? { pAndCUAccepted, pAndCUAcceptanceDate: new Date().toISOString() }
: {}),
};
if (Object.values(patchedUser).length === 0 && !avatar) {
console.debug('No changes to submit');
setLoading(false);
return;
}
if (avatar) {
const reader = new FileReader();
reader.onload = async (e) => {
var _a, _b;
try {
const { asset: avatarAsset, ...resp } = await uploadAsset((_a = avatar.name) !== null && _a !== void 0 ? _a : 'avatar', (_b = e.target) === null || _b === void 0 ? void 0 : _b.result, loginToken);
if (resp.resultCode !== 0) {
console.error(resp);
react_hot_toast_1.default.error(t((0, error_1.getErrori18nKey)(resp.resultCode)));
}
else if (avatarAsset) {
patchedUser.avatarURL = avatarAsset.assetURL;
await sendUserUpdate(userID, patchedUser);
}
}
catch (e) {
let err = e;
console.error('[avatar upload]', err);
if (err === null || err === void 0 ? void 0 : err.message)
react_hot_toast_1.default.error(err.message);
}
};
reader.readAsDataURL(avatar);
}
else {
await sendUserUpdate(userID, patchedUser);
}
};
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h3", { className: "memori--login-drawer--edit-account-title", children: t('login.editAccount') }), (0, jsx_runtime_1.jsxs)("form", { className: "memori--login-drawer--form memori--login-drawer--account-form", onSubmit: submitUserUpdate, children: [(0, jsx_runtime_1.jsxs)("details", { className: "memori--details", children: [(0, jsx_runtime_1.jsx)("summary", { children: t('login.emailChange') }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: "#eMail", children: [t('login.email'), (0, jsx_runtime_1.jsx)("input", { type: "email", name: "eMail", id: "eMail", autoComplete: "email", placeholder: user.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)("details", { className: "memori--details", children: [(0, jsx_runtime_1.jsx)("summary", { children: t('login.passwordChange') }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: "#password", children: [t('login.currentPassword'), (0, jsx_runtime_1.jsx)("input", { id: "password", name: "password", type: "password", autoComplete: "password", placeholder: t('login.currentPassword') || 'Password' })] }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: "#newPassword", children: [t('login.newPassword'), (0, jsx_runtime_1.jsx)("input", { id: "newPassword", name: "newPassword", type: "password", 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", 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)("details", { className: "memori--details", children: [(0, jsx_runtime_1.jsx)("summary", { children: t('login.avatarChange') }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: "#avatar", children: ["Avatar", (0, jsx_runtime_1.jsx)("input", { type: "file", name: "avatar", id: "avatar", accept: imgMimeTypes.join(', '), placeholder: user.avatarURL })] })] }), (0, jsx_runtime_1.jsxs)("label", { className: "memori-checkbox memori-checkbox--disabled", children: [(0, jsx_runtime_1.jsxs)("span", { className: "memori-checkbox--input-wrapper", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", name: "tnCAndPPAccepted", disabled: true, defaultChecked: user.tnCAndPPAccepted, checked: user.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", className: "memori-checkbox--input", defaultChecked: user.pAndCUAccepted }), (0, jsx_runtime_1.jsx)("span", { className: "memori-checkbox--inner" })] }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { align: "left", content: t('login.deepThoughtExplaination'), children: (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)(Button_1.default, { htmlType: "submit", primary: true, loading: loading, children: t('login.save') })] }), error && ((0, jsx_runtime_1.jsx)("p", { role: "alert", className: "memori--login-drawer--error", children: error }))] }));
};
exports.default = AccountForm;
//# sourceMappingURL=AccountForm.js.map