@solidstarters/solid-core-ui 1.1.69 → 1.1.71

package/dist/components/auth/SolidRegister.tsx

@@ -0,0 +1,348 @@
+"use client";
+
+import { useInitateRegisterMutation, useRegisterMutation } from "@/redux/api/authApi";
+import { useLazyGetAuthSettingsQuery } from "@/redux/api/solidSettingsApi";
+import { FetchBaseQueryError } from "@reduxjs/toolkit/query/react";
+import { Form, Formik } from "formik";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Button } from "primereact/button";
+import { Divider } from "primereact/divider";
+import { InputText } from "primereact/inputtext";
+import { Message } from "primereact/message";
+import { Password } from "primereact/password";
+import { TabPanel, TabView } from "primereact/tabview";
+import { Toast } from "primereact/toast";
+import { classNames } from "primereact/utils";
+import { useEffect, useRef } from "react";
+import * as Yup from "yup";
+import { SocialMediaLogin } from "../common/SocialMediaLogin";
+import { AppTitle } from "@/helpers/AppTitle";
+import Image from "next/image";
+import SolidLogo from '../../resources/images/SS-Logo.png'
+
+interface AuthTabsProps {
+    iamPasswordRegistrationEnabled: boolean;
+    iamPasswordLessRegistrationEnabled: boolean;
+}
+
+const SolidRegister = () => {
+    const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery();
+    useEffect(() => {
+        trigger("")
+    }, [trigger])
+    const toast = useRef<Toast>(null);
+
+    const router = useRouter();
+
+    const isFormFieldValid = (formik: any, fieldName: string) =>
+        formik.touched[fieldName] && formik.errors[fieldName];
+
+    const [register, { isLoading, error, isSuccess, data }] = useRegisterMutation();
+
+    const [initiateOtpRegister] = useInitateRegisterMutation();
+
+    const showError = () => {
+        if (error) {
+            if ("data" in error) {
+                const apiError = error as FetchBaseQueryError;
+                const errorMessages = Array.isArray(apiError.data?.message)
+                    ? apiError.data?.message
+                    : [apiError.data?.message];
+
+                toast.current?.show({
+                    severity: "error",
+                    summary: "Error",
+                    detail: errorMessages.join(", "),
+                    life: 3000,
+                });
+            } else {
+                const serializedError = error as Error;
+                toast.current?.show({
+                    severity: "error",
+                    summary: "Error",
+                    detail: serializedError.message || "An error occurred",
+                    life: 3000,
+                });
+            }
+        }
+    };
+
+    useEffect(() => {
+        if (error) {
+            showError();
+        }
+    }, [error]);
+
+    useEffect(() => {
+        if (isSuccess) {
+            router.replace("/auth/login");
+        }
+    }, [isSuccess])
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            life: 3000,
+        });
+    };
+
+    const PasswordSignup = () => {
+        return (
+            <Formik
+                initialValues={{
+                    username: "",
+                    email: "",
+                    password: "",
+                }}
+                validationSchema={Yup.object({
+                    username: Yup.string().required("User Name is required"),
+                    email: Yup.string()
+                        .email("Invalid email address")
+                        .required("Email is required"),
+                    password: Yup.string()
+                        .required("Password is required")
+                        .min(8, "Password must be at least 8 characters")
+                        .matches(/[a-z]/, "Password must contain at least one lowercase letter")
+                        .matches(/[A-Z]/, "Password must contain at least one uppercase letter")
+                        .matches(/\d/, "Password must contain at least one number")
+                        .matches(/[@$!%*?&#^(){}[\]|\\/~`+=<>:;'"_,.-]/, "Password must contain at least one special character"),
+                })}
+                onSubmit={async (values, { setSubmitting, setErrors }) => {
+                    try {
+                        const userData = {
+                            username: values.username,
+                            email: values.email,
+                            password: values.password,
+                        };
+
+                        const response = await register(userData).unwrap();
+                        if (response?.statusCode === 200) {
+                            showToast("success", "User Registered", response?.data?.message);
+                            setTimeout(() => {
+                                router.push(`/auth/login`);
+                            }, 3000);
+                        } else {
+                            showToast("error", "Login Error", response.error);
+                            // setErrors({
+                            //     username: 'Invalid email or password',
+                            //     email: "Invalid email or password",
+                            //     password: "Invalid email or password",
+                            // });
+                        }
+                    } catch (err: any) {
+                        showToast("error", "Login Conflict", err?.data ? err?.data?.message : "Something Went Wrong");
+                    } finally {
+                        setSubmitting(false);
+                    }
+                }}
+            >
+                {(formik) => (
+                    <Form>
+                        <div>
+                            <div className="flex flex-column gap-2 mt-3">
+                                <label htmlFor="email" className="solid-auth-input-label">Username</label>
+                                <InputText
+                                    id="username"
+                                    name="username"
+                                    placeholder="username"
+                                    onChange={formik.handleChange}
+                                    value={formik.values.username}
+                                    invalid={!!formik.errors.username}
+                                />
+                            </div>
+                            {isFormFieldValid(formik, "username") && <Message
+                                className="text-red-500 text-sm mt-1 py-0"
+                                severity="error"
+                                text={formik?.errors?.username?.toString()}
+                            />}
+                        </div>
+                        <div>
+                            <div className="flex flex-column gap-2 mt-3">
+                                <label htmlFor="email" className="solid-auth-input-label">Email</label>
+                                <InputText
+                                    id="email"
+                                    name="email"
+                                    placeholder="Yourgmail@123.com"
+                                    onChange={formik.handleChange}
+                                    value={formik.values.email}
+                                    invalid={!!formik.errors.email}
+                                />
+                            </div>
+                            {isFormFieldValid(formik, "email") && <Message
+                                className="text-red-500 text-sm mt-1 py-0"
+                                severity="error"
+                                text={formik?.errors?.email?.toString()}
+                            />}
+                        </div>
+                        <div>
+                            <div className="flex flex-column gap-2 mt-3">
+                                <label htmlFor="password" className="solid-auth-input-label">Password</label>
+                                <Password
+                                    id="password"
+                                    name="password"
+                                    value={formik.values.password}
+                                    onChange={formik.handleChange}
+                                    toggleMask
+                                    inputClassName="w-full"
+                                    feedback={false}
+                                    invalid={!!formik.errors.password}
+                                />
+                            </div>
+                            {isFormFieldValid(formik, "password") && <Message
+                                className="text-red-500 text-sm mt-1 py-0"
+                                severity="error"
+                                text={formik?.errors?.password?.toString()}
+                            />}
+                        </div>
+                        <div className="mt-4">
+                            <Button className="w-full font-light auth-submit-button" label="Sign Up" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
+                        </div>
+                    </Form>
+                )}
+            </Formik>
+        )
+    }
+
+    const PasswordLessSignup = () => {
+        return (
+            <Formik
+                initialValues={{
+                    username: "",
+                    email: "",
+                }}
+                validationSchema={Yup.object({
+                    username: Yup.string().required("User Name is required"),
+                    email: Yup.string()
+                        .email("Invalid email address")
+                        .required("Email is required"),
+                })}
+                onSubmit={async (values, { setSubmitting }) => {
+                    try {
+                        const payload = {
+                            username: values.username,
+                            email: values.email,
+                            validationSources: ["email"]
+                        };
+
+                        const response = await initiateOtpRegister(payload).unwrap(); // Call mutation trigger
+
+                        if (response?.statusCode === 200) {
+                            showToast("success", "OTP sent Successfully", response?.data?.message);
+                            const email = values.email;
+                            router.push(`/auth/initiate-register?email=${email}`);
+                        } else {
+                            showToast("error", "Login Error", response.error);
+                        }
+                    } catch (err: any) {
+                        showToast("error", "Login Error", err?.data ? err?.data?.message : "Something Went Wrong");
+                    } finally {
+                        setSubmitting(false);
+                    }
+                }}
+            >
+                {(formik) => (
+                    <Form>
+                        <div className="flex flex-column gap-2 mt-3">
+                            <label htmlFor="email" className="solid-auth-input-label">Username</label>
+                            <InputText
+                                id="username"
+                                name="username"
+                                placeholder="username"
+                                onChange={formik.handleChange}
+                                value={formik.values.username}
+                                invalid={!!formik.errors.username}
+                            />
+                            {isFormFieldValid(formik, "username") && <Message
+                                className="text-red-500 text-sm"
+                                severity="error"
+                                text={formik?.errors?.username?.toString()}
+                            />}
+                        </div>
+                        <div className="flex flex-column gap-2 mt-3">
+                            <label htmlFor="email" className="solid-auth-input-label">Email</label>
+                            <InputText
+                                id="email"
+                                name="email"
+                                placeholder="Yourgmail@123.com"
+                                onChange={formik.handleChange}
+                                value={formik.values.email}
+                                invalid={!!formik.errors.email}
+                            />
+                            {isFormFieldValid(formik, "email") && <Message
+                                className="text-red-500 text-sm"
+                                severity="error"
+                                text={formik?.errors?.email?.toString()}
+                            />}
+                        </div>
+                        <div className="mt-4">
+                            <Button className="w-full font-light auth-submit-button" label="Sign Up" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
+                        </div>
+                    </Form>
+                )}
+            </Formik>
+        )
+    }
+
+    const AuthTabs: React.FC<AuthTabsProps> = ({ iamPasswordRegistrationEnabled, iamPasswordLessRegistrationEnabled }) => {
+        if (iamPasswordRegistrationEnabled && iamPasswordLessRegistrationEnabled) {
+            return (
+                <TabView className="solid-auth-tabview">
+                    <TabPanel header="With Password">
+                        <PasswordSignup />
+                    </TabPanel>
+                    <TabPanel header="Without Password">
+                        <PasswordLessSignup />
+                    </TabPanel>
+                </TabView>
+            );
+        } else if (iamPasswordRegistrationEnabled) {
+            return <PasswordSignup />;
+        } else if (iamPasswordLessRegistrationEnabled) {
+            return <PasswordLessSignup />;
+        } else {
+            return <p>No authentication method available</p>;
+        }
+    };
+    return (
+        <div className="">
+            <Toast ref={toast} />
+            <div className={`auth-container ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'center' : 'side'}`}>
+                {solidSettingsData?.data?.authPagesLayout === 'center' &&
+                    <div className="flex justify-content-center">
+                        <div className="solid-logo flex align-items-center gap-3">
+                            <Image
+                                alt="solid logo"
+                                src={SolidLogo}
+                                className="relative"
+                                fill
+                            />
+                            <AppTitle title={solidSettingsData} />
+                        </div>
+                    </div>
+                }
+                <h2 className={`solid-auth-title ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'text-center mt-4' : 'text-left'}`}>Sign Up</h2>
+                {/* <p className="solid-auth-subtitle text-sm">By continuing, you agree to the <Link href={'#'}>Terms of Service</Link> and acknowledge you’ve read our  <Link href={'#'}>Privacy Policy.</Link> </p> */}
+                <AuthTabs iamPasswordRegistrationEnabled={solidSettingsData?.data?.iamPasswordRegistrationEnabled} iamPasswordLessRegistrationEnabled={solidSettingsData?.data?.iamPasswordLessRegistrationEnabled} />
+                {solidSettingsData?.data?.iamGoogleOAuthEnabled &&
+                    <>
+                        <Divider align="center">
+                            <div className="inline-flex align-items-center">
+                                or
+                            </div>
+                        </Divider>
+                        <SocialMediaLogin />
+                    </>
+                }
+            </div>
+            <div className="text-center mt-4">
+                <div className="text-sm text-400 secondary-dark-color">
+                    Already have an account ? <Link className="font-bold" href="/auth/login">Sign In</Link>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SolidRegister;

package/dist/components/auth/SolidResetPassword.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { AppTitle } from "@/helpers/AppTitle";
+import { useConfirmForgotPasswordMutation } from "@/redux/api/authApi";
+import { useLazyGetAuthSettingsQuery } from "@/redux/api/solidSettingsApi";
+import { useFormik } from "formik";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Button } from "primereact/button";
+import { Message } from "primereact/message";
+import { Password } from "primereact/password";
+import { Toast } from "primereact/toast";
+import { classNames } from "primereact/utils";
+import { useEffect, useRef } from "react";
+import * as Yup from "yup";
+import SolidLogo from '../../resources/images/SS-Logo.png'
+
+const SolidResetPassword = () => {
+    const searchParams = useSearchParams();
+    const verificationToken = searchParams.get('token');
+    const decodedUsername = searchParams.get('username');
+    const username = decodedUsername ? decodeURIComponent(decodedUsername) : '';
+    const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery();
+    useEffect(() => {
+        trigger("")
+    }, [trigger])
+    const toast = useRef<Toast>(null);
+    const router = useRouter();
+
+    const [confirmForgotPassword] = useConfirmForgotPasswordMutation();
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            life: 3000,
+        });
+    };
+
+    const validationSchema = Yup.object({
+        password: Yup.string().min(6, 'Password must be at least 6 characters').required('Password is required'),
+        confirmPassword: Yup.string().oneOf([Yup.ref('password')], 'Passwords must match').required('Confirm password is required'),
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            username: username,
+            password: "",
+            confirmPassword: "",
+            verificationToken: verificationToken,
+        },
+        validationSchema,
+        onSubmit: async (values) => {
+            try {
+                const payload = {
+                    username: values.username,
+                    password: values.password,
+                    verificationToken: values.verificationToken,
+                };
+                console.log("Paylod", payload);
+                const response = await confirmForgotPassword(payload).unwrap();
+                if (response?.statusCode === 200) {
+                    showToast("success", "Login Successfull", "Password Updated Successfully")
+                    router.push('/auth/login');
+                } else (
+                    showToast("error", "Login Error", response.error)
+                )
+            } catch (err: any) {
+                console.log("Error", err);
+                showToast("error", "Login Error", err?.data ? err?.data?.message : "Something Went Wrong");
+            }
+        },
+    });
+
+    const isFormFieldValid = (formik: any, fieldName: string) =>
+        formik.touched[fieldName] && formik.errors[fieldName];
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <div className={`auth-container ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'center' : 'side'}`}>
+                {solidSettingsData?.data?.authPagesLayout === 'center' &&
+                    <div className="flex justify-content-center">
+                        <div className="solid-logo flex align-items-center gap-3">
+                            <Image
+                                alt="solid logo"
+                                src={SolidLogo}
+                                className="relative"
+                                fill
+                            />
+                            <AppTitle title={solidSettingsData} />
+                        </div>
+                    </div>
+                }
+                <h2 className={`solid-auth-title ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'text-center' : 'text-left'}`}>Create New Password</h2>
+                {/* <p className="solid-auth-subtitle text-sm">By continuing, you agree to the <Link href={'#'}>Terms of Service</Link> and acknowledge you’ve read our  <Link href={'#'}>Privacy Policy.</Link> </p> */}
+                <form onSubmit={formik.handleSubmit}>
+                    <div className="flex flex-column gap-2">
+                        <label htmlFor="password" className="solid-auth-input-label">New Password</label>
+                        <Password
+                            id="password"
+                            name="password"
+                            placeholder="***************"
+                            value={formik.values.password}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            toggleMask
+                            className={classNames("", {
+                                "p-invalid": isFormFieldValid(formik, "password"),
+                            })}
+                            inputClassName="w-full"
+                            feedback={false}
+                        />
+                        {isFormFieldValid(formik, "password") && <Message
+                            className="text-red-500 text-sm"
+                            severity="error"
+                            text={formik?.errors?.password?.toString()}
+                        />}
+                    </div>
+                    <div className="flex flex-column gap-1 mt-4" style={{}}>
+                        <label htmlFor="password" className="solid-auth-input-label">Confirm Password</label>
+                        <Password
+                            id="confirmPassword"
+                            name="confirmPassword"
+                            placeholder="***************"
+                            value={formik.values.confirmPassword}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            toggleMask
+                            className={classNames("", {
+                                "p-invalid": isFormFieldValid(formik, "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 className="flex align-items-center mt-4">
+                                        <Checkbox inputId="remember" onChange={(e: any) => setChecked(e.checked)} checked={checked} />
+                                        <label htmlFor="remember" className="ml-2">Remember me</label>
+                                    </div> */}
+                    <div className="mt-4">
+                        <Button className="w-full font-light auth-submit-button" label="Reset Password" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
+                        <Button type="button" label="Back" className="w-full auth-back-button text-center mt-1" link onClick={() => (window.location.href = '/auth/login')} />
+                    </div>
+                </form>
+            </div>
+            {/* <div className="text-center mt-5">
+                <div className="text-sm text-400 secondary-dark-color">
+                    {'<'} Back to <Link className="font-bold" href="/auth/login">Sign In</Link>
+                </div>
+            </div> */}
+        </>
+    );
+};
+
+export default SolidResetPassword;

package/dist/components/common/AuthBanner.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+const AuthBanner = () => {
+  return (
+    <div
+      style={{
+        position: "relative",
+        width: "100%",
+        height: "calc(100vh)",
+        background: 'url(/images/loginhero.png)',
+        // background: 'url(/images/LoginBanner.png)',
+        backgroundSize: 'cover',
+        marginTop: process.env.ENABLE_CUSTOM_HEADER_FOOTER === "true" ? 70 : 0
+      }}
+      className="flex align-items-center"
+    >
+      <div className="grid m-0">
+        <div className="col-8 mx-auto">
+          <div className="text-5xl text-white font-semibold line-height-3">
+            {process.env.SOLID_APP_TITLE}
+          </div>
+          <div className="text-sm text-white line-height-3">
+            {process.env.NEXT_PUBLIC_SOLID_APP_DESCRIPTION}
+          </div>
+          <div className="mt-5">
+            {/* <AvatarGroup>
+              <Avatar image="/images/AvatarDemo.png" size="large" shape="circle" />
+              <Avatar image="/images/AvatarDemo.png" size="large" shape="circle" />
+              <Avatar image="/images/AvatarDemo.png" size="large" shape="circle" />
+              <Avatar image="/images/AvatarDemo.png" size="large" shape="circle" />
+              <Avatar image="/images/AvatarDemo.png" size="large" shape="circle" />
+              <Avatar label="60k+" shape="circle" size="large" className="text-sm text-bold" style={{ color: '#191866', backgroundColor: '#fff' }} />
+            </AvatarGroup> */}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AuthBanner;

package/dist/components/common/AutoCompleteField.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { AutoComplete } from "primereact/autocomplete";
+import { useEffect, useState } from "react";
+
+
+
+export const AutoCompleteField = ({ multiple, isFormFieldValid, formik, fieldName, searchData, existingData, existingDataTitle, existingDataId, onBlur }: any) => {
+
+
+
+
+    const [selectedItem, setSelectedItem] = useState(existingData);
+    const [filteredItem, setFilteredItem] = useState([]);
+    useEffect(() => {
+        if (existingData) {
+            setSelectedItem(existingData)
+            // formik.setFieldValue(fieldName, existingData);
+
+        }
+    }, [existingData])
+    const searchItems = async (event: any) => {
+        const data = await searchData(event);
+        setFilteredItem(data);
+    };
+
+
+
+    return (
+
+        <AutoComplete
+            value={selectedItem}
+            multiple={multiple ? multiple : false}
+            suggestions={filteredItem}
+            invalid={isFormFieldValid(formik, fieldName)}
+            completeMethod={searchItems}
+            virtualScrollerOptions={{ itemSize: 38 }}
+            className="solid-standard-autocomplete w-full"
+            // style={{
+            //     maxHeight: 39.67
+            // }}
+            field="label"
+            dropdown
+            onBlur={onBlur}
+            onChange={(e) => {
+                let data = {};
+
+              
+                if (typeof (e.value) == "string") {
+                    data = e.value
+                } else {
+                    if (multiple === true) {
+                        data = e.value.map((m: any) =>
+                        ({
+                            label: m.label,
+                            name: m.label,
+                            value: m.value,
+                            id: m.value,
+                        }))
+                    } else {
+                        data = {
+                            label: e.value.label,
+                            name: e.value.label,
+                            value: e.value.value,
+                            id: e.value.value,
+                        }
+                    }
+                }
+
+
+                setSelectedItem(data);
+                formik.setFieldValue(fieldName, data);
+            }}
+        />
+    )
+}

package/dist/components/common/BackButton.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { useRouter } from 'next/navigation';
+import { usePathname } from 'next/navigation';
+import { Button } from 'primereact/button';
+export const BackButton = () => {
+    const router = useRouter();
+    const pathname = usePathname();
+
+    const handleGoBack = () => {
+        const segments = pathname.split('/').filter(Boolean);
+        if (segments.length > 1) {
+            router.back()
+        }
+    };
+    return (
+        <Button
+            text
+            icon='pi pi-arrow-left'
+            size="small"
+            type="button"
+            aria-label="Back"
+            onClick={handleGoBack}
+            className='max-w-2rem bg-primary-reverse text-color'
+        />
+    )
+}