@solidstarters/solid-core-ui 1.1.2 → 1.1.4

package/src/components/auth/SolidForgotPassword.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import { Form, Formik } from "formik";
-import { signIn } from "next-auth/react";
+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, useRef, useState } from "react";
+import { useContext, useRef } from "react";
 import * as Yup from "yup";
 import { LayoutContext } from "../layout/context/layoutcontext";
 
@@ -18,17 +18,6 @@ const SolidForgotPassword = () => {
     const { authLayout } = layoutConfig;
     const toast = useRef<Toast>(null);
     const router = useRouter();
-
-    const [password, setPassword] = useState('');
-    const [checked, setChecked] = useState<boolean>(false);
-
-    const validationSchema = Yup.object({
-        email: Yup.string()
-            .email("Invalid email address")
-            .required("Email is required"),
-        password: Yup.string().required("Password is required"),
-    });
-
     const showToast = (severity: "success" | "error", summary: string, detail: string) => {
         toast.current?.show({
             severity,
@@ -37,6 +26,43 @@ const SolidForgotPassword = () => {
             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) {
+                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];
@@ -45,72 +71,45 @@ const SolidForgotPassword = () => {
         <>
             <Toast ref={toast} />
             <div className={`auth-container ${authLayout === 'Center' ? 'center' : 'side'}`}>
-                <div className="flex justify-content-center">
-                    <div className="solid-logo flex align-items-center gap-3">
-                        <img
-                            alt="solid logo"
-                            src={'/images/SS-Logo-1 1.png'}
-                            className="position-relative img-fluid"
-                        />
-                        <div>
-                            <p className="solid-logo-title">
-                                Solid<br />Starters
-                            </p>
+                {authLayout === 'Center' &&
+                    <div className="flex justify-content-center">
+                        <div className="solid-logo flex align-items-center gap-3">
+                            <img
+                                alt="solid logo"
+                                src={'/images/SS-Logo-1 1.png'}
+                                className="position-relative img-fluid"
+                            />
+                            <div>
+                                <p className="solid-logo-title">
+                                    Solid<br />Starters
+                                </p>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <h2 className="solid-auth-title text-center">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>
-                <>
-                    <Formik
-                        initialValues={{
-                            email: "",
-                            password: "",
-                        }}
-                        validationSchema={validationSchema}
-                        onSubmit={async (values) => {
-                            // Handle form submission
-                            const email = values.email;
-                            const password = values.password;
-
-                            const response = await signIn("credentials", {
-                                redirect: false,
-                                email,
-                                password,
-                            });
-                            if (response?.error) {
-                                showToast("error", "Login Error", response.error);
-                            } else {
-                                showToast("success", "Login Success", "Redirecting to dashboard...");
-                                router.push("/admin/core/solid-core/user/list");
-                            }
-
-                        }}
-                    >
-                        {(formik) => (
-                            <Form>
-                                <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"
-                                        onChange={formik.handleChange}
-                                        value={formik.values.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" label="Send OTP" />
-                                </div>
-                            </Form>
-                        )}
-                    </Formik>
-                </>
+                }
+                <h2 className={`solid-auth-title ${authLayout === '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} />
+                    </div>
+                </form>
             </div>
             <div className="text-center mt-5">
                 <div className="text-sm text-400 secondary-dark-color">

package/src/components/auth/SolidLogin.tsx

@@ -5,13 +5,16 @@ import { signIn } from "next-auth/react";
 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 { useContext, useRef, useState } from "react";
 import * as Yup from "yup";
+import { SocialMediaLogin } from "../common/SocialMediaLogin";
 import { LayoutContext } from "../layout/context/layoutcontext";
 
 
@@ -22,7 +25,6 @@ const SolidLogin = () => {
     const router = useRouter();
 
     const [password, setPassword] = useState('');
-    const [checked, setChecked] = useState<boolean>(false);
 
     const validationSchema = Yup.object({
         email: Yup.string()
@@ -47,108 +49,123 @@ const SolidLogin = () => {
         <div className="">
             <Toast ref={toast} />
             <div className={`auth-container ${authLayout === 'Center' ? 'center' : 'side'}`}>
-                <div className="flex justify-content-center">
-                    <div className="solid-logo flex align-items-center gap-3">
-                        <img
-                            alt="solid logo"
-                            src={'/images/SS-Logo-1 1.png'}
-                            className="position-relative img-fluid"
-                        />
-                        <div>
-                            <p className="solid-logo-title">
-                                Solid<br />Starters
-                            </p>
+                {authLayout === 'Center' &&
+                    <div className="flex justify-content-center">
+                        <div className="solid-logo flex align-items-center gap-3">
+                            <img
+                                alt="solid logo"
+                                src={'/images/SS-Logo-1 1.png'}
+                                className="position-relative img-fluid"
+                            />
+                            <div>
+                                <p className="solid-logo-title">
+                                    Solid<br />Starters
+                                </p>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <h2 className="solid-auth-title text-center">Sign In To Your Account</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>
-                <>
-                    <Formik
-                        initialValues={{
-                            email: "",
-                            password: "",
-                        }}
-                        validationSchema={validationSchema}
-                        onSubmit={async (values) => {
-                            // Handle form submission
-                            const email = values.email;
-                            const password = values.password;
+                }
+                <h2 className={`solid-auth-title ${authLayout === 'Center' ? 'text-center' : 'text-left'}`}>Sign In To Your Account</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> */}
 
-                            const response = await signIn("credentials", {
-                                redirect: false,
-                                email,
-                                password,
-                            });
-                            if (response?.error) {
-                                showToast("error", "Login Error", response.error);
-                            } else {
-                                showToast("success", "Login Success", "Redirecting to dashboard...");
-                                router.push("/admin/core/solid-core/user/list");
-                            }
+                <TabView>
+                    <TabPanel header="Login With Password">
+                        <Formik
+                            initialValues={{
+                                email: "",
+                                password: "",
+                            }}
+                            validationSchema={validationSchema}
+                            onSubmit={async (values, { setSubmitting }) => {
+                                try {
+                                    const response = await signIn("credentials", {
+                                        redirect: false,
+                                        email: values.email,
+                                        password: values.password,
+                                    });
 
-                        }}
-                    >
-                        {(formik) => (
-                            <Form>
-                                <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"
-                                        onChange={formik.handleChange}
-                                        value={formik.values.email}
-                                    />
-                                    {isFormFieldValid(formik, "email") && <Message
-                                        className="text-red-500 text-sm"
-                                        severity="error"
-                                        text={formik?.errors?.email?.toString()}
-                                    />}
-                                </div>
-                                <div className="flex flex-column gap-2 mt-4" style={{}}>
-                                    <label htmlFor="password" className="solid-auth-input-label">Password</label>
-                                    <Password
-                                        id="password"
-                                        placeholder="***************"
-                                        value={password}
-                                        onChange={(e) => {
-                                            setPassword(e.target.value);
-                                            formik.setFieldValue("password", e.target.value);
-                                        }}
-                                        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 align-items-center mt-4">
+                                    if (response?.error) {
+                                        showToast("error", "Login Error", response.error);
+                                    } else {
+                                        showToast("success", "Login Success", "Redirecting to dashboard...");
+                                        router.push("http://localhost:3001/admin/core/solid-core/user/list");
+                                    }
+                                } catch (error) {
+                                    showToast("error", "Login Failed", "Something went wrong");
+                                } finally {
+                                    setSubmitting(false); // Re-enable the button after submission
+                                }
+                            }}
+                        >
+                            {(formik) => (
+                                <Form>
+                                    <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"
+                                            onChange={formik.handleChange}
+                                            value={formik.values.email}
+                                        />
+                                        {isFormFieldValid(formik, "email") && <Message
+                                            className="text-red-500 text-sm"
+                                            severity="error"
+                                            text={formik?.errors?.email?.toString()}
+                                        />}
+                                    </div>
+                                    <div className="flex flex-column gap-2 mt-4" style={{}}>
+                                        <label htmlFor="password" className="solid-auth-input-label">Password</label>
+                                        <Password
+                                            id="password"
+                                            placeholder="***************"
+                                            value={password}
+                                            onChange={(e) => {
+                                                setPassword(e.target.value);
+                                                formik.setFieldValue("password", e.target.value);
+                                            }}
+                                            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 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 text-right">
-                                    <Link href={"/auth/forgot-password"} className="solid-auth-input-label">Forgot Password?</Link>
-                                </div>
-                                <div className="mt-4">
-                                    <Button className="w-full font-light" label="Sign In" />
-                                </div>
-                            </Form>
-                        )}
-                    </Formik>
-                </>
+                                    <div className="mt-4 text-right">
+                                        <Link href={"/auth/initiate-forgot-password"} className="solid-auth-input-label">Forgot Password?</Link>
+                                    </div>
+                                    <div className="mt-4">
+                                        <Button className="w-full font-light auth-submit-button" label="Sign In" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
+                                    </div>
+                                </Form>
+                            )}
+                        </Formik>
+                    </TabPanel>
+                    <TabPanel header="Login Without Password">
+                    </TabPanel>
+                </TabView>
+                <Divider align="center">
+                    <div className="inline-flex align-items-center">
+                        or
+                    </div>
+                </Divider>
+                <SocialMediaLogin />
             </div>
-            <div className="text-center mt-5">
-                <div className="text-sm text-400 secondary-dark-color">
+            {/* <div className=" mt-5">
+                <div className="text-sm text-center text-400 secondary-dark-color">
                     Don’t have an account ? <Link className="font-bold" href="/auth/register">Sign Up</Link>
                 </div>
-            </div>
+            </div> */}
         </div>
     );
 };

package/src/components/auth/SolidOTPVerify.tsx

@@ -46,21 +46,23 @@ const SolidOTPVerify = () => {
         <>
             <Toast ref={toast} />
             <div className={`auth-container ${authLayout === 'Center' ? 'center' : 'side'}`} style={{ minWidth: 480 }}>
-                <div className="flex justify-content-center">
-                    <div className="solid-logo flex align-items-center gap-3">
-                        <img
-                            alt="solid logo"
-                            src={'/images/SS-Logo-1 1.png'}
-                            className="position-relative img-fluid"
-                        />
-                        <div>
-                            <p className="solid-logo-title">
-                                Solid<br />Starters
-                            </p>
+            {authLayout === 'Center' &&
+                    <div className="flex justify-content-center">
+                        <div className="solid-logo flex align-items-center gap-3">
+                            <img
+                                alt="solid logo"
+                                src={'/images/SS-Logo-1 1.png'}
+                                className="position-relative img-fluid"
+                            />
+                            <div>
+                                <p className="solid-logo-title">
+                                    Solid<br />Starters
+                                </p>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <h2 className="solid-auth-title text-center">OTP Verification</h2>
+                }
+                <h2 className={`solid-auth-title ${authLayout === '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>
@@ -108,7 +110,7 @@ const SolidOTPVerify = () => {
                                     </div>
                                 </div>
                                 <div className="mt-4">
-                                    <Button type="submit" className="w-full font-light" label="Verify" />
+                                    <Button type="submit" className="w-full font-light auth-submit-button" label="Verify"  disabled={formik.isSubmitting} loading={formik.isSubmitting}/>
                                 </div>
                             </Form>
                         )}

package/src/components/auth/SolidRegister.tsx

@@ -6,6 +6,7 @@ import { useFormik } 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";
@@ -13,6 +14,7 @@ import { Toast } from "primereact/toast";
 import { classNames } from "primereact/utils";
 import { ChangeEventHandler, useContext, useEffect, useRef, useState } from "react";
 import * as Yup from "yup";
+import { SocialMediaLogin } from "../common/SocialMediaLogin";
 import { LayoutContext } from "../layout/context/layoutcontext";
 
 const SolidRegister = () => {
@@ -113,25 +115,27 @@ const SolidRegister = () => {
         <>
             <Toast ref={toast} />
             <div className={`auth-container ${authLayout === 'Center' ? 'center' : 'side'}`}>
-                <div className="flex justify-content-center">
-                    <div className="solid-logo flex align-items-center gap-3">
-                        <img
-                            alt="solid logo"
-                            src={'/images/SS-Logo-1 1.png'}
-                            className="position-relative img-fluid"
-                        />
-                        <div>
-                            <p className="solid-logo-title">
-                                Solid<br />Starters
-                            </p>
+                {authLayout === 'Center' &&
+                    <div className="flex justify-content-center">
+                        <div className="solid-logo flex align-items-center gap-3">
+                            <img
+                                alt="solid logo"
+                                src={'/images/SS-Logo-1 1.png'}
+                                className="position-relative img-fluid"
+                            />
+                            <div>
+                                <p className="solid-logo-title">
+                                    Solid<br />Starters
+                                </p>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <h2 className="solid-auth-title text-center">Sign Up To Your Account</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>
+                }
+                <h2 className={`solid-auth-title ${authLayout === 'Center' ? 'text-center' : 'text-left'}`}>Sign Up To Your Account</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="grid">
+                        {/* <div className="grid">
                             <div className="col-6">
                                 <div className="flex flex-column gap-2">
                                     <label htmlFor="email" className="solid-auth-input-label">First Name</label>
@@ -166,6 +170,21 @@ const SolidRegister = () => {
                                     />}
                                 </div>
                             </div>
+                        </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}
+                            />
+                            {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>
@@ -204,10 +223,16 @@ const SolidRegister = () => {
                             />}
                         </div>
                         <div className="mt-4">
-                            <Button className="w-full font-light" label="Sign Up" />
+                            <Button className="w-full font-light auth-submit-button" label="Sign Up"  disabled={formik.isSubmitting} loading={formik.isSubmitting} />
                         </div>
                     </form>
                 </>
+                <Divider align="center">
+                    <div className="inline-flex align-items-center">
+                        or
+                    </div>
+                </Divider>
+                <SocialMediaLogin />
             </div>
             <div className="text-center mt-5">
                 <div className="text-sm text-400 secondary-dark-color">