@memori.ai/memori-react
Version:
[](https://www.npmjs.com/package/@memori.ai/memori-react)  ![TypeScript Support](https
118 lines • 10 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import Button from '../ui/Button';
import { useTranslation } from 'react-i18next';
import toast from 'react-hot-toast';
import { mailRegEx, pwdRegEx } from '../../helpers/utils';
import { getErrori18nKey } from '../../helpers/error';
import Tooltip from '../ui/Tooltip';
const imgMimeTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'];
const AccountForm = ({ user, loginToken, apiClient, onUserUpdate }) => {
const { t, i18n } = useTranslation();
const lang = i18n.language === 'it' ? 'it' : 'en';
const { updateUser, uploadAsset } = apiClient.backend;
const [email, setEmail] = useState();
const [password, setPassword] = useState();
const [confirmPassword, setConfirmPassword] = useState();
const pwdAcceptable = !password || (password && 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] = useState(false);
const [error, setError] = useState(null);
const sendUserUpdate = async (userID, user) => {
try {
const { user: updatedUser, ...resp } = await updateUser(loginToken, userID, user);
if (resp.resultCode !== 0) {
console.error(resp);
toast.error(t(getErrori18nKey(resp.resultCode)));
}
else if (updatedUser) {
toast.success(t('success'));
onUserUpdate(updatedUser);
}
}
catch (e) {
let err = e;
console.error('[signup]', err);
if (err === null || err === void 0 ? void 0 : err.message)
toast.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);
toast.error(t(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)
toast.error(err.message);
}
};
reader.readAsDataURL(avatar);
}
else {
await sendUserUpdate(userID, patchedUser);
}
};
return (_jsxs(_Fragment, { children: [_jsx("h3", { className: "memori--login-drawer--edit-account-title", children: t('login.editAccount') }), _jsxs("form", { className: "memori--login-drawer--form memori--login-drawer--account-form", onSubmit: submitUserUpdate, children: [_jsxs("details", { className: "memori--details", children: [_jsx("summary", { children: t('login.emailChange') }), _jsxs("label", { htmlFor: "#eMail", children: [t('login.email'), _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) && !mailRegEx.test(email) })] }), !!(email === null || email === void 0 ? void 0 : email.length) && !mailRegEx.test(email) && (_jsx("p", { className: "memori--login-drawer--inline-error", children: t('login.emailFormatError') }))] }), _jsxs("details", { className: "memori--details", children: [_jsx("summary", { children: t('login.passwordChange') }), _jsxs("label", { htmlFor: "#password", children: [t('login.currentPassword'), _jsx("input", { id: "password", name: "password", type: "password", autoComplete: "password", placeholder: t('login.currentPassword') || 'Password' })] }), _jsxs("label", { htmlFor: "#newPassword", children: [t('login.newPassword'), _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 && (_jsx("p", { className: "memori--login-drawer--inline-error", children: t('login.passwordFormatError') })), _jsxs("label", { htmlFor: "#confirm-password", children: [t('login.confirmPassword'), _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 && (_jsx("p", { className: "memori--login-drawer--inline-error", children: t('login.passwordMatchingError') })), _jsx("meter", { className: "memori--login-drawer--password-meter", min: 0, low: 33, high: 66, optimum: 80, max: 100, value: pwdMeterValue, id: "password-strength-meter" }), _jsx("small", { children: t(`login.pwd${pwdGreen ? 'Strong' : pwdAcceptable ? 'Acceptable' : 'Weak'}`) })] }), _jsxs("details", { className: "memori--details", children: [_jsx("summary", { children: t('login.avatarChange') }), _jsxs("label", { htmlFor: "#avatar", children: ["Avatar", _jsx("input", { type: "file", name: "avatar", id: "avatar", accept: imgMimeTypes.join(', '), placeholder: user.avatarURL })] })] }), _jsxs("label", { className: "memori-checkbox memori-checkbox--disabled", children: [_jsxs("span", { className: "memori-checkbox--input-wrapper", children: [_jsx("input", { type: "checkbox", name: "tnCAndPPAccepted", disabled: true, defaultChecked: user.tnCAndPPAccepted, checked: user.tnCAndPPAccepted, className: "memori-checkbox--input" }), _jsx("span", { className: "memori-checkbox--inner" })] }), _jsxs("span", { className: "memori-checkbox--text", children: [t('login.privacyLabel'), ' ', _jsx("a", { href: `https://memori.ai/${lang}/privacy_and_cookie`, target: "_blank", rel: "noopener noreferrer", children: t('login.privacyAndCookiePolicy') }), ' ', t('login.and'), ' ', _jsx("a", { href: `https://memori.ai/${lang}/tos`, target: "_blank", rel: "noopener noreferrer", children: t('login.termsOfService') })] })] }), _jsxs("label", { className: "memori-checkbox", children: [_jsxs("span", { className: "memori-checkbox--input-wrapper", children: [_jsx("input", { type: "checkbox", name: "pAndCUAccepted", className: "memori-checkbox--input", defaultChecked: user.pAndCUAccepted }), _jsx("span", { className: "memori-checkbox--inner" })] }), _jsx(Tooltip, { align: "left", content: t('login.deepThoughtExplaination'), children: _jsxs("span", { className: "memori-checkbox--text", children: [t('login.pAndCUAccepted'), ' ', _jsx("small", { children: _jsxs("em", { children: ["(", t('login.optional'), ")"] }) })] }) })] }), _jsx(Button, { htmlType: "submit", primary: true, loading: loading, children: t('login.save') })] }), error && (_jsx("p", { role: "alert", className: "memori--login-drawer--error", children: error }))] }));
};
export default AccountForm;
//# sourceMappingURL=AccountForm.js.map