@solidstarters/solid-core-ui 1.1.73 → 1.1.75

package/src/components/auth/SolidForgotPassword.tsx

@@ -1,125 +0,0 @@
-"use client";
-
-import { useInitiateChangePasswordMutation } from "@/redux/api/authApi";
-import { useFormik } from "formik";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { Button } from "primereact/button";
-import { InputText } from "primereact/inputtext";
-import { Message } from "primereact/message";
-import { Toast } from "primereact/toast";
-import { useContext, useEffect, useRef } from "react";
-import * as Yup from "yup";
-import { LayoutContext } from "../layout/context/layoutcontext";
-import { useLazyGetAuthSettingsQuery } from "@/redux/api/solidSettingsApi";
-import { AppTitle } from "@/helpers/AppTitle";
-import Image from "next/image";
-import SolidLogo from '../../resources/images/SS-Logo.png'
-
-const SolidForgotPassword = () => {
-    const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery()
-    useEffect(() => {
-        trigger("") // Fetch settings on mount
-    }, [trigger])
-    const toast = useRef<Toast>(null);
-    const router = useRouter();
-    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
-        toast.current?.show({
-            severity,
-            summary,
-            detail,
-            life: 3000,
-        });
-    };
-    const [initiateChangePassword] = useInitiateChangePasswordMutation();
-    const validationSchema = Yup.object({
-        email: Yup.string()
-            .email('Invalid email format')
-            .required('Email is required'),
-    });
-    function maskEmail(email: string) {
-        const [localPart, domain] = email.split('@');
-        const maskedLocal = localPart.slice(0, 3) + '*'.repeat(localPart.length - 3);
-        const maskedDomain = domain.slice(-8).padStart(domain.length, '*');
-        return `${maskedLocal}@${maskedDomain}`;
-    }
-
-    const formik = useFormik({
-        initialValues: {
-            email: "",
-        },
-        validationSchema,
-        onSubmit: async (values) => {
-            try {
-                const payload = {
-                    email: values.email,
-                };
-                const response = await initiateChangePassword(payload).unwrap();
-                if (response?.statusCode === 200) {
-                    const email = response?.data?.data?.user?.email;
-                    const maskedEmail = maskEmail(email);
-                    router.push(`/auth/initiate-forgot-password-thank-you?email=${maskedEmail}`)
-                } else (
-                    showToast("error", "Login Error", response.error)
-                )
-            } catch (err: any) {
-                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'}`}>Forgot 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="email" className="solid-auth-input-label">Username or Email</label>
-                        <InputText
-                            id="email"
-                            name="email"
-                            placeholder="Email ID"
-                            value={formik.values.email}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                        />
-                        {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="Send OTP" 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 SolidForgotPassword;

package/src/components/auth/SolidInitialLoginOtp.tsx

@@ -1,152 +0,0 @@
-"use client";
-
-import { AppTitle } from "@/helpers/AppTitle";
-import { useConfirmOtpLoginMutation } from "@/redux/api/authApi";
-import { useLazyGetAuthSettingsQuery } from "@/redux/api/solidSettingsApi";
-import { Form, Formik } from "formik";
-import Image from "next/image";
-import Link from "next/link";
-import { useRouter, useSearchParams } from "next/navigation";
-import { Button } from "primereact/button";
-import { InputOtp } from "primereact/inputotp";
-import { Message } from "primereact/message";
-import { Toast } from "primereact/toast";
-import { useEffect, useRef } from "react";
-import * as Yup from "yup";
-import SolidLogo from '../../resources/images/SS-Logo.png'
-import { signIn } from "next-auth/react";
-
-const SolidInitialLoginOtp = () => {
-    const searchParams = useSearchParams();
-    const tempEmail = searchParams.get('email');
-    const email = tempEmail ? decodeURIComponent(tempEmail) : '';
-    const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery();
-    useEffect(() => {
-        trigger("")
-    }, [trigger])
-    const [initiateOtpLogin] = useConfirmOtpLoginMutation();
-
-    const toast = useRef<Toast>(null);
-    const router = useRouter();
-
-    const validationSchema = Yup.object({
-        otp: Yup.string()
-            .matches(/^\d{6}$/, "OTP must be a 6-digit number")
-            .required("OTP is required"),
-    });
-
-    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
-        toast.current?.show({
-            severity,
-            summary,
-            detail,
-            life: 3000,
-        });
-    };
-
-    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'}`} style={{ minWidth: 480 }}>
-                {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'}`}>OTP Verification</h2>
-                <p className="solid-auth-subtitle text-sm">
-                    Please enter the OTP sent to your email to complete verification
-                </p>
-                <>
-                    <Formik
-                        initialValues={{
-                            otp: "",
-                        }}
-                        validationSchema={validationSchema}
-                        onSubmit={async (values, { setSubmitting, setErrors }) => {
-                            try {
-                                const payload = {
-                                    type: "email",
-                                    identifier: email,
-                                    otp: values.otp
-                                };
-
-                                const response = await initiateOtpLogin(payload).unwrap(); // Call mutation trigger
-
-                                if (response?.statusCode === 200) {
-                                    const otpResponse = await signIn("credentials", {
-                                        redirect: false,
-                                        accessToken: response?.data?.accessToken,
-                                        email: response?.data?.user?.email,
-                                    });
-
-                                    if (otpResponse?.error) {
-                                        showToast("error", "Login Error", otpResponse.error);
-                                    } else {
-                                        showToast("success", "Login Success", "Redirecting to dashboard...");
-                                        router.push(`${process.env.NEXT_PUBLIC_LOGIN_REDIRECT_URL}`);
-                                    }
-                                } else {
-                                    showToast("error", "Invalid OTP", response.error);
-                                    setErrors({
-                                        otp: "Invalid OTP",
-                                    });
-                                }
-                            } 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">
-                                    <label htmlFor="otp" className="solid-auth-input-label">Enter OTP</label>
-                                    <InputOtp
-                                        value={formik.values.otp}
-                                        onChange={(e) => formik.setFieldValue("otp", e.value)}
-                                        length={6}
-                                        style={{ width: '100%' }}
-                                        invalid={!!formik.errors.otp}
-                                    />
-                                    {isFormFieldValid(formik, "otp") && (
-                                        <Message className="text-red-500 text-sm" severity="error" text={formik.errors.otp?.toString()} />
-                                    )}
-                                    <div className="flex align-items-center justify-content-between">
-                                        <Button type="button" icon='pi pi-refresh' iconPos="left" link label="Resend Code" className="px-0 text-sm font-normal" />
-                                        <p className="m-0 text-sm text-color">
-                                            Time left: 00:28
-                                        </p>
-                                    </div>
-                                </div>
-                                <div className="mt-4">
-                                    <Button type="submit" className="w-full font-light auth-submit-button" label="Verify" 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>
-                        )}
-                    </Formik>
-                </>
-            </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">Back</Link>
-                </div>
-            </div> */}
-        </>
-    );
-};
-
-export default SolidInitialLoginOtp;

package/src/components/auth/SolidInitiateRegisterOtp.tsx

@@ -1,141 +0,0 @@
-"use client";
-
-import { AppTitle } from "@/helpers/AppTitle";
-import { useConfirmOtpRegisterMutation } from "@/redux/api/authApi";
-import { useLazyGetAuthSettingsQuery } from "@/redux/api/solidSettingsApi";
-import { Form, Formik } from "formik";
-import Image from "next/image";
-import Link from "next/link";
-import { useRouter, useSearchParams } from "next/navigation";
-import { Button } from "primereact/button";
-import { InputOtp } from "primereact/inputotp";
-import { Message } from "primereact/message";
-import { Toast } from "primereact/toast";
-import { useEffect, useRef } from "react";
-import * as Yup from "yup";
-import SolidLogo from '../../resources/images/SS-Logo.png'
-
-const SolidInitiateRegisterOtp = () => {
-    const searchParams = useSearchParams();
-    const tempEmail = searchParams.get('email');
-    const email = tempEmail ? decodeURIComponent(tempEmail) : '';
-    const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery();
-    useEffect(() => {
-        trigger("")
-    }, [trigger])
-    const [initiateOtpRegister] = useConfirmOtpRegisterMutation();
-
-    const toast = useRef<Toast>(null);
-    const router = useRouter();
-
-    const validationSchema = Yup.object({
-        otp: Yup.string()
-            .matches(/^\d{6}$/, "OTP must be a 6-digit number")
-            .required("OTP is required"),
-    });
-
-    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
-        toast.current?.show({
-            severity,
-            summary,
-            detail,
-            life: 3000,
-        });
-    };
-
-    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'}`} style={{ minWidth: 480 }}>
-                {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'}`}>OTP Verification</h2>
-                <p className="solid-auth-subtitle text-sm">
-                    Please enter the OTP sent to your email to complete verification
-                </p>
-                <>
-                    <Formik
-                        initialValues={{
-                            otp: "",
-                        }}
-                        validationSchema={validationSchema}
-                        onSubmit={async (values, { setSubmitting, setErrors }) => {
-                            try {
-                                const payload = {
-                                    type: "email",
-                                    identifier: email,
-                                    otp: values.otp
-                                };
-
-                                const response = await initiateOtpRegister(payload).unwrap(); // Call mutation trigger
-
-                                if (response?.statusCode === 200) {
-                                    showToast("success", "Login Successfully", "Login");
-                                    router.push(`/auth/login`);
-                                } else {
-                                    showToast("error", "Invalid OTP", response.error);
-                                    setErrors({
-                                        otp: "Invalid OTP",
-                                    });
-                                }
-                            } 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">
-                                    <label htmlFor="otp" className="solid-auth-input-label">Enter OTP</label>
-                                    <InputOtp
-                                        value={formik.values.otp}
-                                        onChange={(e) => formik.setFieldValue("otp", e.value)}
-                                        length={6}
-                                        style={{ width: '100%' }}
-                                        invalid={!!formik.errors.otp}
-                                    />
-                                    {isFormFieldValid(formik, "otp") && (
-                                        <Message className="text-red-500 text-sm" severity="error" text={formik.errors.otp?.toString()} />
-                                    )}
-                                    <div className="flex align-items-center justify-content-between">
-                                        <Button type="button" icon='pi pi-refresh' iconPos="left" link label="Resend Code" className="px-0 text-sm font-normal" />
-                                        <p className="m-0 text-sm text-color">
-                                            Time left: 00:28
-                                        </p>
-                                    </div>
-                                </div>
-                                <div className="mt-4">
-                                    <Button type="submit" className="w-full font-light auth-submit-button" label="Verify" 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>
-                        )}
-                    </Formik>
-                </>
-            </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 SolidInitiateRegisterOtp;