@solidstarters/solid-core-ui 1.0.2 → 1.1.0

package/src/components/auth/SolidForgotPassword.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { Form, Formik } from "formik";
+import { signIn } from "next-auth/react";
+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 * as Yup from "yup";
+import { LayoutContext } from "../layout/context/layoutcontext";
+
+
+const SolidForgotPassword = () => {
+    const { layoutConfig } = useContext(LayoutContext);
+    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,
+            summary,
+            detail,
+            life: 3000,
+        });
+    };
+
+    const isFormFieldValid = (formik: any, fieldName: string) =>
+        formik.touched[fieldName] && formik.errors[fieldName];
+
+    return (
+        <>
+            <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>
+                        </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>
+                </>
+            </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/SolidLogin.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { Form, Formik } from "formik";
+import { signIn } from "next-auth/react";
+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 { Password } from "primereact/password";
+import { Toast } from "primereact/toast";
+import { classNames } from "primereact/utils";
+import { useContext, useRef, useState } from "react";
+import * as Yup from "yup";
+import { LayoutContext } from "../layout/context/layoutcontext";
+
+
+const SolidLogin = () => {
+    const { layoutConfig } = useContext(LayoutContext);
+    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,
+            summary,
+            detail,
+            life: 3000,
+        });
+    };
+
+    const isFormFieldValid = (formik: any, fieldName: string) =>
+        formik.touched[fieldName] && formik.errors[fieldName];
+
+    return (
+        <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>
+                        </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;
+
+                            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="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>
+            <div className="text-center mt-5">
+                <div className="text-sm text-400 secondary-dark-color">
+                    Don’t have an account ? <Link className="font-bold" href="/auth/register">Sign Up</Link>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SolidLogin;

package/src/components/auth/SolidOTPVerify.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { Form, Formik } from "formik";
+import { signIn } from "next-auth/react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Button } from "primereact/button";
+import { InputOtp } from "primereact/inputotp";
+import { Message } from "primereact/message";
+import { Toast } from "primereact/toast";
+import { useContext, useRef, useState } from "react";
+import * as Yup from "yup";
+import { LayoutContext } from "../layout/context/layoutcontext";
+
+
+const SolidOTPVerify = () => {
+    const { layoutConfig } = useContext(LayoutContext);
+    const { authLayout } = layoutConfig;
+    const [otp, setOTP] = useState<number | any>();
+
+    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"),
+    });
+
+    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 ${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>
+                        </div>
+                    </div>
+                </div>
+                <h2 className="solid-auth-title text-center">OTP Verification</h2>
+                <p className="solid-auth-subtitle text-sm">
+                    Please enter the OTP sent to your email to complete verification
+                </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 px-3">
+                                    <label htmlFor="email" className="solid-auth-input-label">Enter OTP</label>
+                                    <InputOtp value={otp} onChange={(e) => setOTP(e.value)} length={6} style={{ width: '100%' }} />
+                                    {isFormFieldValid(formik, "email") && <Message
+                                        className="text-red-500 text-sm"
+                                        severity="error"
+                                        text={formik?.errors?.email?.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" label="Verify" />
+                                </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 SolidOTPVerify;

package/src/components/auth/SolidRegister.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import { useRegisterMutation } from "@/redux/api/authApi";
+import { FetchBaseQueryError } from "@reduxjs/toolkit/query/react";
+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 { Password } from "primereact/password";
+import { Toast } from "primereact/toast";
+import { classNames } from "primereact/utils";
+import { ChangeEventHandler, useContext, useEffect, useRef, useState } from "react";
+import * as Yup from "yup";
+import { LayoutContext } from "../layout/context/layoutcontext";
+
+const SolidRegister = () => {
+    const { layoutConfig } = useContext(LayoutContext);
+    const { authLayout } = layoutConfig;
+    const toast = useRef<Toast>(null);
+    const [password, setPassword] = useState("");
+    const [checked, setChecked] = useState<boolean>(false);
+    const [showPassword, setShowPassword] = useState(false);
+    const [user, setUser] = useState({
+        name: "",
+        email: "",
+        password: "",
+    });
+
+    const 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"),
+    });
+
+    const router = useRouter();
+
+    const isFormFieldValid = (formik: any, fieldName: string) =>
+        formik.touched[fieldName] && formik.errors[fieldName];
+
+    const [register, { isLoading, error, isSuccess, data }] = useRegisterMutation();
+
+    const onChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+        setUser({ ...user, [e.target.name]: e.target.value });
+    };
+
+    const initialValues = {
+        username: "",
+        email: "",
+        password: "",
+    }
+
+    const formik = useFormik({
+        initialValues,
+        validationSchema,
+        enableReinitialize: true,
+        onSubmit: async (values) => {
+            try {
+                const userData = {
+                    username: values.username,
+                    email: values.email,
+                    password: values.password,
+                };
+
+                await register(userData);
+            } catch (err) {
+                console.log('inside', err);
+            }
+        }
+    });
+
+    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])
+    return (
+        <>
+            <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>
+                        </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>
+                <>
+                    <form onSubmit={formik.handleSubmit}>
+                        <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>
+                                    <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>
+                            <div className="col-6">
+                                <div className="flex flex-column gap-2">
+                                    <label htmlFor="email" className="solid-auth-input-label">Last Name</label>
+                                    <InputText
+                                        id="email"
+                                        name="email"
+                                        placeholder="Yourgmail@123.com"
+                                        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>
+                        </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}
+                            />
+                            {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-3">
+                            <label htmlFor="password" className="solid-auth-input-label">Password</label>
+                            <Password
+                                id="password"
+                                name="password"
+                                value={formik.values.password}
+                                onChange={formik.handleChange}
+                                placeholder="***************"
+                                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="mt-4">
+                            <Button className="w-full font-light" label="Sign Up" />
+                        </div>
+                    </form>
+                </>
+            </div>
+            <div className="text-center mt-5">
+                <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>
+        </>
+    );
+};
+
+export default SolidRegister;