@solidstarters/solid-core-ui 1.1.211 → 1.1.212

package/dist/components/core/common/SolidAccountSettings/SolidAccountSettings.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import { Dialog } from "primereact/dialog";
+import { useEffect, useMemo, useState } from "react";
+import { SolidPersonalInfo } from "./SolidPersonalInfo";
+import { SolidChangePassword } from "./SolidChangePassword";
+import styles from './SolidAccountSettings.module.css'
+import { useSelector } from "react-redux";
+import { useLazyGetSolidSettingsQuery } from "../../../../redux/api/solidSettingsApi";
+
+export const SolidAccountSettings = ({ showProfileSettingsDialog, setShowProfileSettingsDialog }: any) => {
+    const [setting, setSetting] = useState({ key: "personal_info", label: "Persnoal Info" });
+
+    const [trigger, { data: solidSettingsData }] = useLazyGetSolidSettingsQuery();
+    useEffect(() => {
+        trigger("") // Fetch settings on mount
+    }, [])
+
+    const settings = [
+        {
+            label: "Persnoal Info",
+            key: "personal_info",
+            icon: "pi pi-user-edit"
+        },
+        // {
+        //     label: "Notification",
+        //     key: "notifications",
+        //     icon: "pi pi-bell"
+        // },
+        {
+            label: "Change Password",
+            key: "change_password",
+            icon: "pi pi-key"
+        },
+    ]
+
+    const renderSettingComponent = useMemo(() => {
+        switch (setting.key) {
+            case "personal_info":
+                return <SolidPersonalInfo />;
+            case "change_password":
+                return <SolidChangePassword solidSettingsData={solidSettingsData} />;
+            default:
+                return null;
+        }
+    }, [setting.key, solidSettingsData]);
+
+    return (
+        <Dialog
+            header={<h5 className='m-0 font-bold'>Account Settings</h5>}
+            headerClassName="px-4 py-3 secondary-border-bottom"
+            contentClassName="p-0"
+            visible={showProfileSettingsDialog}
+            className="solid-account-setting-main"
+            style={{ width: '60vw' }}
+            onHide={() => {
+                if (!showProfileSettingsDialog) return;
+                setShowProfileSettingsDialog(false);
+            }}
+            draggable={false}
+        >
+            <div className="grid m-0">
+                <div className={`col-2 md:col-3 p-3 ${styles.SolidSettingTabWrapper}`}>
+                    <div className="flex flex-column gap-1">
+                        {settings.map((option) => (
+                            <div
+                                key={option.key}
+                                className={`w-full flex align-items-center gap-2 text-start ${styles.SolidSettingTab} ${option.key === setting.key ? styles.SolidActiveSetting : styles.SolidDeActiveSetting}`}
+                                onClick={() => setSetting(option)}
+                            >
+                                <span className={option.icon}></span>
+                                <span className="hidden sm:inline">{option.label}</span>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+                <div className={`col-9 py-3 px-4 ${styles.SolidAccountSettingFormWrapper}`}>
+                    {renderSettingComponent}
+                    {/* <div className="p-3 secondary-border-bottom">
+                        <h5 className="m-0"></h5>
+                    </div>
+                    <div className="py-3 px-4 h-full">
+                        {renderSettingComponent()}
+                    </div> */}
+                </div>
+            </div>
+        </Dialog>
+    )
+}

package/dist/components/core/common/SolidAccountSettings/SolidChangePassword.tsx

@@ -0,0 +1,188 @@
+"use client"
+import { handleLogout } from '../../../../nextAuth/handleLogout';
+import { useChangePasswordMutation } from '../../../../redux/api/authApi';
+import { useFormik } from 'formik';
+import { useSession } from 'next-auth/react';
+import { Button } from 'primereact/button';
+import { Message } from 'primereact/message';
+import { Password } from 'primereact/password';
+import { Toast } from 'primereact/toast';
+import { useMemo, useRef } from 'react';
+import * as Yup from 'yup';
+import { SolidPasswordHelperText } from '../SolidPasswordHelperText';
+import { ERROR_MESSAGES } from '../../../../constants/error-messages';
+
+export const SolidChangePassword = ({ solidSettingsData }: any) => {
+    const toast = useRef<Toast>(null);
+    const [changePassword] = useChangePasswordMutation();
+
+    const session: any = useSession();
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            ...(severity === "error"
+                ? { sticky: true }            // stays until user closes
+                : { life: 3000 }),
+        });
+    };
+
+    const envPasswordRegex = process.env.NEXT_PUBLIC_PASSWORD_REGEX;
+
+    // Try backend regex first, then env, then fallback
+    const effectiveRegex = useMemo(() => {
+        try {
+            const backendRegex = solidSettingsData?.data?.authenticationPasswordRegex;
+            if (backendRegex) {
+                // const unescaped = JSON.parse(`"${backendRegex}"`);
+                return new RegExp(backendRegex);
+            }
+            if (envPasswordRegex) {
+                const unescaped = JSON.parse(`"${envPasswordRegex}"`);
+                return new RegExp(unescaped);
+            }
+        } catch (error) {
+            console.error(ERROR_MESSAGES.INVALID_PASSWORD_REGX, error);
+        }
+        return null;
+    }, [solidSettingsData, envPasswordRegex]);
+
+    const validationSchema = useMemo(() => {
+        const newPasswordValidation = effectiveRegex
+            ? Yup.string()
+                .matches(
+                    effectiveRegex,
+                    solidSettingsData?.data?.authenticationPasswordRegexErrorMessage ||
+                    ERROR_MESSAGES.PASSWORD_DO_NOT_MEET
+                )
+                .required(ERROR_MESSAGES.FIELD_REUQIRED('New password'))
+            : Yup.string()
+                .min(6, ERROR_MESSAGES.PASSWORD_CHARACTER(6))
+                .required(ERROR_MESSAGES.FIELD_REUQIRED('New password'));
+
+        return Yup.object({
+            email: Yup.string().email(ERROR_MESSAGES.FIELD_INAVLID_FORMAT('email')).required(ERROR_MESSAGES.FIELD_REUQIRED('Email')),
+            currentPassword: Yup.string()
+                .min(6, ERROR_MESSAGES.PASSWORD_CHARACTER(6))
+                .required(ERROR_MESSAGES.FIELD_REUQIRED('Current password')),
+            newPassword: newPasswordValidation,
+            confirmPassword: Yup.string()
+                .oneOf([Yup.ref("newPassword")], ERROR_MESSAGES.MUST_MATCH)
+                .required(ERROR_MESSAGES.FIELD_REUQIRED('Confirm password')),
+            id: Yup.number().required(ERROR_MESSAGES.FIELD_INAVLID_FORMAT('User ID')),
+        });
+    }, [effectiveRegex, solidSettingsData]);
+
+    const formik = useFormik({
+        initialValues: {
+            email: session?.data?.user?.user?.email,
+            currentPassword: "",
+            newPassword: "",
+            confirmPassword: "",
+            id: session?.data?.user?.user?.id,
+        },
+        validationSchema,
+        onSubmit: async (values, { setErrors, resetForm }) => {
+            try {
+                const payload = {
+                    id: values.id,
+                    email: session?.data?.user?.user?.email,
+                    currentPassword: values.currentPassword,
+                    newPassword: values.newPassword,
+                };
+
+                const response = await changePassword(payload).unwrap();
+                if (response?.error) {
+                    showToast("error", ERROR_MESSAGES.ERROR, response.error)
+                    setErrors({
+                        currentPassword: ERROR_MESSAGES.INCORRECT_CURRENT,
+                        newPassword: ERROR_MESSAGES.MUST_MATCH,
+                        confirmPassword: ERROR_MESSAGES.MUST_MATCH,
+                    })
+                } else {
+                    showToast("success", ERROR_MESSAGES.PASSWORD_CHANGE, ERROR_MESSAGES.PASSWORD_CHANGE);
+                    handleLogout(toast)
+                    resetForm();
+                }
+            } catch (err: any) {
+                showToast("error", err?.data?.message, err?.data?.data?.message ? err?.data?.data?.message : err?.data?.message);
+            }
+        },
+    });
+    const isFormFieldValid = (formik: any, fieldName: string) =>
+        formik.touched[fieldName] && formik.errors[fieldName];
+
+    return (
+        <form onSubmit={formik.handleSubmit} className="h-full flex flex-column justify-content-between">
+            <Toast ref={toast} />
+            <div>
+                <div className='grid'>
+                    <div className='col-12 md-col-8 lg:col-5'>
+                        <div className="flex flex-column gap-2">
+                            <label htmlFor="currentPassword" className="solid-auth-input-label">Current Password</label>
+                            <Password
+                                id="currentPassword"
+                                name="currentPassword"
+                                value={formik.values.currentPassword}
+                                onChange={formik.handleChange}
+                                onBlur={formik.handleBlur}
+                                toggleMask
+                                invalid={!!formik.errors.currentPassword}
+                                inputClassName="w-full"
+                                feedback={false}
+                            />
+                            {isFormFieldValid(formik, "currentPassword") && <Message
+                                className="text-red-500 text-sm"
+                                severity="error"
+                                text={formik?.errors?.currentPassword?.toString()}
+                            />}
+                        </div>
+                        <div className="flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4">
+                            <label htmlFor="password" className="solid-auth-input-label">New Password</label>
+                            <Password
+                                id="newPassword"
+                                name="newPassword"
+                                value={formik.values.newPassword}
+                                onChange={formik.handleChange}
+                                onBlur={formik.handleBlur}
+                                toggleMask
+                                invalid={!!formik.errors.newPassword}
+                                inputClassName="w-full"
+                                feedback={false}
+                            />
+                            {isFormFieldValid(formik, "newPassword") && <Message
+                                className="text-red-500 text-sm"
+                                severity="error"
+                                text={formik?.errors?.newPassword?.toString()}
+                            />}
+                        </div>
+                        <div className="flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4">
+                            <label htmlFor="password" className="solid-auth-input-label">Confirm New Password</label>
+                            <Password
+                                id="confirmPassword"
+                                name="confirmPassword"
+                                value={formik.values.confirmPassword}
+                                onChange={formik.handleChange}
+                                onBlur={formik.handleBlur}
+                                toggleMask
+                                invalid={!!formik.errors.confirmPassword}
+                                inputClassName="w-full"
+                                feedback={false}
+                            />
+                            {isFormFieldValid(formik, "confirmPassword") && <Message
+                                className="text-red-500 text-sm"
+                                severity="error"
+                                text={formik?.errors?.confirmPassword?.toString()}
+                            />}
+                        </div>
+                    </div>
+                </div>
+                <SolidPasswordHelperText text={solidSettingsData?.data?.authenticationPasswordComplexityDescription} />
+            </div>
+            <div>
+                <Button type='submit' size='small' label="Change Password" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
+            </div>
+        </form>
+    )
+}

package/dist/components/core/common/SolidAccountSettings/SolidNotifications.tsx

@@ -0,0 +1,139 @@
+"use client"
+import { ERROR_MESSAGES } from '../../../../constants/error-messages';
+import { useBulkUpdateSolidUserSettingsMutation, useGetSolidSettingsQuery } from '../../../../redux/api/solidSettingsApi';
+import { useFormik } from 'formik';
+import { Button } from 'primereact/button';
+import { InputSwitch } from 'primereact/inputswitch';
+import { Toast } from 'primereact/toast';
+import React, { useEffect, useRef } from 'react'
+import { useSelector } from 'react-redux';
+export const SolidNotifications = () => {
+    const {
+        data: solidSettingsData,
+        isLoading,
+        error,
+        refetch,
+    } = useGetSolidSettingsQuery(undefined);
+
+    useEffect(() => {
+        refetch();
+    }, []);
+
+    const toast = useRef<Toast>(null);
+    const [bulkUpdateSolidSettings] = useBulkUpdateSolidUserSettingsMutation();
+
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            ...(severity === "error"
+                ? { sticky: true }            // stays until user closes
+                : { life: 3000 }),
+        });
+    };
+
+    const initialValues = {
+        enableNotification: solidSettingsData?.data?.enableNotification ?? true
+    }
+
+    const formik = useFormik({
+        initialValues: initialValues,
+        enableReinitialize: true,
+        onSubmit: async (values) => {
+            try {
+                const updatedSettingsArray: Array<{ key: string; value: string; type: string }> = [];
+                const currentSettings = solidSettingsData?.data?.user || {};
+
+                const formData = new FormData();
+
+                // Compare changed fields
+                Object.entries(values).forEach(([key, value]) => {
+                    const currentValue = currentSettings[key];
+
+                    const normalizedCurrent = currentValue ?? "";
+                    const normalizedValue = value ?? "";
+
+                    if (normalizedCurrent !== normalizedValue) {
+                        if (value instanceof File) {
+                            formData.append(key, value);
+                            updatedSettingsArray.push({
+                                key,
+                                value: "",
+                                type: "user",
+                            });
+                        } else {
+                            updatedSettingsArray.push({
+                                key,
+                                value: value,
+                                type: "user",
+                            });
+                        }
+                    }
+                });
+
+                if (updatedSettingsArray.length === 0) {
+                    showToast("success", ERROR_MESSAGES.NO_CHANGE, ERROR_MESSAGES.NO_SETTING_UPDATE);
+                    return;
+                }
+
+                // Append settings array to formData
+                formData.append("settings", JSON.stringify(updatedSettingsArray));
+
+                // Call API
+                const response = await bulkUpdateSolidSettings({ data: formData }).unwrap();
+
+                if (response.statusCode === 200) {
+                    showToast("success", ERROR_MESSAGES.UPDATED, ERROR_MESSAGES.SETTING_UPDATED);
+                }
+
+            } catch (error) {
+                showToast("error", ERROR_MESSAGES.FAILED, ERROR_MESSAGES.SOMETHING_WRONG);
+            }
+        },
+    })
+
+
+    return (
+        <form onSubmit={formik.handleSubmit} className="h-full flex flex-column justify-content-between">
+            <Toast ref={toast} />
+            <div>
+                <div className="flex align-items-start justify-content-between pb-3">
+                    <div>
+                        <label className="form-field-label mb-2">Enable Notification</label>
+                        <div style={{ color: 'var(--solid-grey-500)' }}>Decide whether you want to be notified of new messages or updates.</div>
+                    </div>
+                    <div>
+                        <InputSwitch
+                            name="enableNotification"
+                            checked={formik.values.enableNotification}
+                            onChange={(e) => {
+                                formik.setFieldValue("enableNotification", e.value);
+                                // formik.submitForm();
+                            }}
+                        />
+                    </div>
+                </div>
+                {/* <div className="flex align-items-start justify-content-between pb-3 mt-3" style={{ borderBottom: '1px dashed var(--primary-light-color)' }}>
+                <div>
+                    <label className="form-field-label mb-2">Enable Notification</label>
+                    <div style={{ color: 'var(--solid-grey-500)' }}>Decide whether you want to be notified of new messages or updates.</div>
+                </div>
+                <div>
+                    <InputSwitch
+                        name="enableNotification"
+                        checked={formik.values.enableNotification}
+                        onChange={(e) => {
+                            formik.setFieldValue("enableNotification", e.value);
+                            formik.submitForm();
+                        }}
+                    />
+                </div>
+            </div> */}
+            </div>
+            <div>
+                <Button type='submit' size='small' label="Save" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
+            </div>
+        </form>
+    )
+}