@progress/sitefinity-nextjs-sdk
Version:
Provides OOB widgets developed using the Next.js framework, which includes an abstraction layer for Sitefinity communication. Additionally, it offers an expanded API, typings, and tools for further development and integration.
144 lines (143 loc) • 7.23 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useMemo, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import { ProfileClient } from './profile-client';
import { RestClient } from '../../rest-sdk/rest-client';
import { RootUrlService } from '../../rest-sdk/root-url.service';
import { SecurityService } from '../../services/security-service';
const EncryptedParam = 'qs';
export function ProfileDefaultView(props) {
const context = props.widgetContext.requestContext;
const labels = props.labels;
const searchParams = useSearchParams();
const [isUserAuthenticated, setIsUserAuthenticated] = useState(props.isUserAuthenticated ?? false);
const [initialEmail, setInitialEmail] = useState('');
const [newEmail, setNewEmail] = useState('');
const [isConfirmEmailRequest, setIsConfirmEmailRequest] = useState(false);
const [sendAgainActivationLink, setSendAgainActivationLink] = useState(false);
const [confirmEmailExpiredError, setConfirmEmailExpiredError] = useState(false);
const [emailChangeError, setEmailChangeError] = useState(false);
const [errorObj, setErrorObj] = useState({});
const [successMessage, setSuccessMessage] = useState(false);
const [propsClone, setPropsClone] = useState(JSON.parse(JSON.stringify(props)));
const [formData, setFormData] = useState({
FirstName: props?.firstName,
LastName: props?.lastName,
Email: props?.email,
Password: '',
Nickname: props?.nickname,
About: props?.about,
Avatar: props?.avatarUrl,
...props?.customFields
});
const confirmEmailChangeParam = useMemo(() => {
if (searchParams.get(EncryptedParam)) {
setIsConfirmEmailRequest(true);
return searchParams.get(EncryptedParam);
}
}, [searchParams]);
useEffect(() => {
if (context?.isLive && confirmEmailChangeParam) {
handleEmailChange(confirmEmailChangeParam);
}
}, [context?.isLive, confirmEmailChangeParam]);
const getUserData = async () => {
const user = await RestClient.getCurrentUser().then((user) => {
const hasUser = (user && user.IsAuthenticated);
if (hasUser) {
return user;
}
});
if (!user?.IsAuthenticated) {
return;
}
setPropsClone((currentProps) => ({
...currentProps,
id: user?.Id,
email: user?.Email,
firstName: user?.FirstName,
lastName: user?.LastName,
nickname: user?.Nickname,
about: user?.About,
avatarUrl: user?.Avatar,
allowedAvatarFormats: user?.AllowedAvatarFormats,
customFields: user?.CustomFields,
readOnlyFields: user?.ReadOnlyFields
}));
setFormData({
FirstName: user?.FirstName,
LastName: user?.LastName,
Email: user?.Email,
Password: '',
Nickname: user?.Nickname,
About: user?.About,
Avatar: user?.Avatar,
...user?.CustomFields
});
setInitialEmail(user?.Email);
setIsUserAuthenticated(true);
};
useEffect(() => {
if (!context.isEdit) {
getUserData();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const handleEmailChange = (confirmEmailChangeParam) => {
const serviceUrl = RootUrlService.getServerCmsServiceUrl();
const wholeUrl = `${serviceUrl}/users/changeEmail${RestClient.buildQueryParams({ qs: encodeURIComponent(confirmEmailChangeParam) })}`;
window.fetch(wholeUrl, {
method: 'GET'
}).then((response) => {
const status = response.status;
if (status === 0 || (status >= 200 && status < 400)) {
setIsConfirmEmailRequest(false);
setSuccessMessage(true);
response.json().then((res) => {
setFormData((prevState) => ({ ...prevState, Email: res.value.Email }));
setInitialEmail(res.value.Email);
});
}
else if (status === 400) {
setEmailChangeError(true);
}
else {
response.json().then((res) => {
const error = res.error;
if (error && error.code === 'Gone') {
setNewEmail(JSON.parse(error.message).Email);
setErrorObj(JSON.parse(error.message));
setConfirmEmailExpiredError(true);
}
});
}
});
};
const handleSendAgain = () => {
const sendAgainActivationLinkUrl = props.sendAgainActivationLinkUrl;
const requestBody = new FormData();
for (let key in errorObj) {
if (Object.hasOwn(errorObj, key)) {
requestBody.append(key, errorObj[key]);
}
}
SecurityService.setAntiForgeryTokens().then(() => {
window.fetch(sendAgainActivationLinkUrl, {
method: 'POST',
body: requestBody
});
});
setSendAgainActivationLink(true);
};
return (_jsx(_Fragment, { children: _jsx("div", { ...propsClone.attributes, children: isUserAuthenticated &&
_jsx(_Fragment, { children: !isConfirmEmailRequest ?
_jsx(ProfileClient, { viewProps: propsClone, successMessage: successMessage, setSuccessMessage: setSuccessMessage, formData: formData, setFormData: setFormData, initialEmail: initialEmail, setInitialEmail: setInitialEmail })
:
_jsx(_Fragment, { children: confirmEmailExpiredError ?
_jsxs("div", { "data-sf-role": "confirm-email-change-container", children: [_jsx("div", { className: "mb-3", "data-sf-role": "confirm-email-change-title", children: _jsx("h2", { children: sendAgainActivationLink ? labels.sendConfirmationLinkSuccessTitle : labels.confirmEmailChangeTitleExpiredLabel }) }), _jsx("div", { className: "mb-3", "data-sf-role": "confirm-email-change-message", children: sendAgainActivationLink
? labels.sendConfirmationLinkSuccessMessage.replace('{0}', newEmail)
: labels.confirmEmailChangeDescriptionExpiredLabel.replace('{0}', newEmail) }), _jsx("input", { className: "btn btn-primary", type: "submit", onClick: handleSendAgain, value: sendAgainActivationLink ? labels.sendAgainActivationLink : labels.sendActivationLink })] })
: emailChangeError &&
_jsxs("div", { "data-sf-role": "confirm-email-change-error-container", children: [_jsx("div", { className: "mb-3", children: _jsx("h2", { children: labels.confirmEmailChangeTitleErrorLabel }) }), _jsx("div", { className: "mb-3", children: labels.confirmEmailChangeDescriptionErrorLabel })] }) }) }) }) }));
}