@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.
93 lines (92 loc) • 5.83 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { VisibilityStyle } from '../styling/visibility-style';
import { SF_WEBSERVICE_API_KEY_HEADER, invalidDataAttr, invalidateElement, isValidEmail, serializeForm } from '../common/utils';
import { classNames } from '../../editor/utils/classNames';
import { getUniqueId } from '../../editor/utils/getUniqueId';
export function ForgottenPasswordFormClient(props) {
const emailInputId = getUniqueId('sf-email-', props.widgetContext.model.Id);
const formRef = React.useRef(null);
const emailInputRef = React.useRef(null);
const labels = props.labels;
const visibilityClassHidden = props.visibilityClasses[VisibilityStyle.Hidden];
const [invalidInputs, setInvalidInputs] = React.useState({});
const [showFormContainer, setFormContainer] = React.useState(true);
const [showSuccessContainer, setSuccessContainer] = React.useState(false);
const [errorMessage, setErrorMessage] = React.useState('');
const [sentEmailLabelMessage, setSentEmailLabelMessage] = React.useState('');
const handleSubmit = (event) => {
event.preventDefault();
if (!validateForm(formRef.current)) {
return;
}
let model = { model: serializeForm(formRef.current) };
let submitUrl = formRef.current.attributes['action'].value;
const headers = { 'Content-Type': 'application/json' };
if (props.webserviceApiKey) {
headers[SF_WEBSERVICE_API_KEY_HEADER] = props.webserviceApiKey;
}
window.fetch(submitUrl, { method: 'POST', body: JSON.stringify(model), headers })
.then(() => {
setSentEmailLabelMessage(emailInputRef.current.value);
setFormContainer(false);
setSuccessContainer(true);
});
};
const validateForm = function (form) {
let isValid = true;
setInvalidInputs({});
setErrorMessage('');
const emptyInputs = {};
let requiredInputs = form.querySelectorAll('input[data-sf-role=\'required\']');
requiredInputs.forEach((input) => {
if (!input.value) {
invalidateElement(emptyInputs, input);
setInvalidInputs(emptyInputs);
isValid = false;
}
});
if (!isValid) {
setErrorMessage(labels.fieldIsRequiredMessage);
return false;
}
if (!isValidEmail(emailInputRef.current.value)) {
invalidateElement(emptyInputs, emailInputRef.current);
setInvalidInputs(emptyInputs);
setErrorMessage(labels.invalidEmailFormatMessage);
return false;
}
return true;
};
const inputValidationAttrs = (name) => {
return {
className: classNames('form-control', {
[props.invalidClass]: invalidInputs[name]
}),
[invalidDataAttr]: invalidInputs[name],
name: name
};
};
const errorMessageClass = classNames('alert alert-danger my-3', {
[visibilityClassHidden]: !errorMessage || errorMessage === ''
});
const errorMessageStyles = {
display: !visibilityClassHidden ? errorMessage ? '' : 'none' : ''
};
const successContainerClass = classNames('mt-3', {
[visibilityClassHidden]: !showSuccessContainer
});
const successContainerStyle = {
display: !visibilityClassHidden ? showSuccessContainer ? '' : 'none' : ''
};
if (props.widgetContext.requestContext.isLive && !props.resetPasswordUrl?.toUpperCase().startsWith('HTTP')) {
props = { ...props, resetPasswordUrl: typeof window !== 'undefined' ? window.location.protocol + '//' + props.resetPasswordUrl : '' };
}
return (_jsxs(_Fragment, { children: [_jsx("div", { "data-sf-role": "error-message-container", className: errorMessageClass, style: errorMessageStyles, role: "alert", "aria-live": "assertive", children: errorMessage }), _jsxs("div", { "data-sf-role": "form-container", className: classNames({
[visibilityClassHidden]: !showFormContainer
}), style: {
display: !visibilityClassHidden ? showFormContainer ? '' : 'none' : ''
}, children: [_jsx("p", { children: labels.forgottenPasswordLabel }), _jsxs("form", { ref: formRef, onSubmit: handleSubmit, action: props.sendResetPasswordEmailHandlerPath, role: "form", noValidate: true, children: [_jsxs("div", { className: "mb-3", children: [_jsx("label", { className: "form-label", htmlFor: emailInputId, children: labels.emailLabel }), _jsx("input", { ref: emailInputRef, id: emailInputId, type: "email", "data-sf-role": "required", ...inputValidationAttrs('Email') })] }), _jsx("input", { className: "btn btn-primary w-100", type: "submit", value: labels.sendButtonLabel }), _jsx("input", { type: "hidden", name: "ResetPasswordUrl", value: props.resetPasswordUrl }), _jsx("input", { type: "hidden", name: "MembershipProviderName", value: props.membershipProviderName || '' }), _jsx("input", { type: "hidden", name: "RegistrationPageUrl", value: props.registrationPageUrl })] }), _jsx("input", { type: "hidden", name: "InvalidEmailFormatMessage", value: labels.invalidEmailFormatMessage }), _jsx("input", { type: "hidden", name: "FieldIsRequiredMessage", value: labels.fieldIsRequiredMessage })] }), _jsxs("div", { "data-sf-role": "success-message-container", className: successContainerClass, style: successContainerStyle, children: [_jsxs("p", { children: [`${labels.forgottenPasswordSubmitMessage} `, _jsx("strong", { "data-sf-role": "sent-email-label", children: sentEmailLabelMessage })] }), _jsx("p", { children: labels.forgottenPasswordLinkMessage })] })] }));
}
;