@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.
69 lines (68 loc) • 6.49 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useRef } from 'react';
import { getUniqueId } from '../../editor/utils/getUniqueId';
import { classNames } from '../../editor/utils/classNames';
import { VisibilityStyle } from '../styling/visibility-style';
import { invalidDataAttr } from '../common/utils';
export function ProfileForm(props) {
const { formData, setFormData, submitForm, setFileUpload, viewProps, showPasswordPrompt, invalidInputs, allowedAvatarFormats, isContextLive } = props;
const labels = viewProps.labels;
const defaultAvatarUrl = '/SFRes/images/Telerik.Sitefinity.Resources/Images.DefaultPhoto.png';
const firstNameInputId = getUniqueId('sf-first-name-', viewProps.widgetContext.model.Id);
const lastNameInputId = getUniqueId('sf-last-name-', viewProps.widgetContext.model.Id);
const emailInputId = getUniqueId('sf-email-', viewProps.widgetContext.model.Id);
const nicknameInputId = getUniqueId('sf-nickname-', viewProps.widgetContext.model.Id);
const aboutInputId = getUniqueId('sf-about-', viewProps.widgetContext.model.Id);
const passwordInputId = getUniqueId('sf-password-', viewProps.widgetContext.model.Id);
const fileUploadInputId = getUniqueId('sf-file-upload-', viewProps.widgetContext.model.Id);
const formRef = useRef(null);
const visibilityClassHidden = viewProps.visibilityClasses[VisibilityStyle.Hidden];
const editProfileContainerClass = classNames({
[visibilityClassHidden]: showPasswordPrompt
});
const editProfileContainerStyle = {
display: !visibilityClassHidden ? !showPasswordPrompt ? '' : 'none' : ''
};
const passwordContainerClass = classNames({
[visibilityClassHidden]: !showPasswordPrompt
});
const passwordContainerStyle = {
display: !visibilityClassHidden ? showPasswordPrompt ? '' : 'none' : ''
};
const inputValidationAttrs = (name) => {
return {
className: classNames('form-control', {
[viewProps.invalidClass]: invalidInputs[name]
}),
[invalidDataAttr]: invalidInputs[name],
name: name
};
};
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData((prevData) => ({ ...prevData, [name]: value }));
};
const handleFileUpload = (event) => {
if (event.target.files && event.target.files[0]) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (e) => {
setFormData((prevData) => ({ ...prevData, Avatar: e.target?.result }));
};
reader.readAsDataURL(file);
setFileUpload(file);
}
};
const handleFormSubmit = (event) => {
event.preventDefault();
submitForm(formRef.current);
};
return (_jsx(_Fragment, { children: _jsxs("form", { ref: formRef, role: "form", noValidate: true, method: "post", action: viewProps.updateProfileHandlerPath, onSubmit: handleFormSubmit, children: [_jsxs("div", { "data-sf-role": "edit-profile-container", className: editProfileContainerClass, style: editProfileContainerStyle, children: [_jsxs("div", { className: "d-flex", children: [_jsx("div", { className: "mb-3", children:
/* eslint-disable-next-line @next/next/no-img-element */
_jsx("img", { "data-sf-role": "sf-user-profile-avatar", src: formData.Avatar || defaultAvatarUrl, alt: formData.Email || '', width: 100 }) }), _jsxs("div", { className: "mx-3", children: [_jsx("a", { href: "#", className: "link-primary", children: _jsx("label", { htmlFor: fileUploadInputId, children: labels.changePhotoLabel }) }), _jsx("input", { onChange: handleFileUpload, type: "file", id: fileUploadInputId, "data-sf-role": "edit-profile-upload-picture-input", name: "Avatar", style: { display: 'none' }, accept: allowedAvatarFormats })] })] }), _jsx(ProfileFormInput, { id: firstNameInputId, type: "text", value: formData.FirstName || '', label: labels.firstNameLabel, onChange: handleInputChange, required: true, disabled: viewProps.readOnlyFields?.includes('FirstName'), attributes: { ...inputValidationAttrs('FirstName') } }), _jsx(ProfileFormInput, { id: lastNameInputId, type: "text", value: formData.LastName || '', label: labels.lastNameLabel, onChange: handleInputChange, required: true, disabled: viewProps.readOnlyFields?.includes('LastName'), attributes: { ...inputValidationAttrs('LastName') } }), _jsx(ProfileFormInput, { id: emailInputId, type: "text", value: formData.Email || '', label: labels.emailLabel, onChange: handleInputChange, required: true, disabled: viewProps.readOnlyFields?.includes('Email'), attributes: { ...inputValidationAttrs('Email') } }), _jsx(ProfileFormInput, { id: nicknameInputId, type: "text", value: formData.Nickname || '', label: labels.nicknameLabel, onChange: handleInputChange, required: false, disabled: viewProps.readOnlyFields?.includes('Email'), attributes: { ...inputValidationAttrs('Nickname') } }), _jsxs("div", { className: "mb-3", children: [_jsx("label", { htmlFor: aboutInputId, className: "form-label", children: labels.aboutLabel }), _jsx("textarea", { id: aboutInputId, value: formData.About || '', onChange: handleInputChange, disabled: viewProps.readOnlyFields?.includes('About'), ...inputValidationAttrs('About') })] })] }), _jsxs("div", { "data-sf-role": "password-container", className: passwordContainerClass, style: passwordContainerStyle, children: [_jsx("div", { className: "mb-3", children: labels.changeEmailLabel }), _jsx(ProfileFormInput, { id: passwordInputId, type: "password", value: formData.Password || '', label: labels.passwordLabel, onChange: handleInputChange, required: false, disabled: false, attributes: { ...inputValidationAttrs('Password') } })] }), _jsx("input", { className: "btn btn-primary w-100", type: "submit", value: labels.saveButtonLabel, disabled: !isContextLive }), _jsx("input", { type: "hidden", value: "", name: "sf_antiforgery" })] }) }));
}
;
export function ProfileFormInput(props) {
return (_jsxs("div", { className: "mb-3", children: [_jsx("label", { htmlFor: props.id, className: "form-label", children: props.label }), _jsx("input", { id: props.id, type: props.type, value: props.value || '', onChange: props.onChange, required: props.required, disabled: props.disabled, ...props.attributes })] }));
}