@solidstarters/solid-core-ui 1.1.70 → 1.1.72

package/dist/components/auth/AuthLayout.tsx

@@ -0,0 +1,140 @@
+"use client"
+import { AppTitle } from "@/helpers/AppTitle";
+import { useLazyGetAuthSettingsQuery } from "@/redux/api/solidSettingsApi";
+import { toggleTheme } from "@/redux/features/themeSlice";
+import { LayoutConfig } from "@/types";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { PrimeReactContext } from "primereact/api";
+import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
+import { useContext, useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import { LayoutContext } from "../layout/context/layoutcontext";
+import Image from "next/image";
+import SolidLogo from '../../resources/images/SS-Logo.png'
+import { Divider } from "primereact/divider";
+
+export const AuthLayout = ({ children }: { children: React.ReactNode }) => {
+    const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery()
+    const [allowRegistration, setAllowRegistration] = useState<boolean | null>(null);
+    const [isRestricted, setIsRestricted] = useState(false);
+    const pathname = usePathname();
+    const router = useRouter();
+
+    const { changeTheme } = useContext(PrimeReactContext);
+    const { layoutConfig, setLayoutConfig } = useContext(LayoutContext);
+    const dispatch = useDispatch();
+    const _changeTheme = (theme: string, colorScheme: string) => {
+        changeTheme?.(layoutConfig.theme, theme, 'theme-css', () => {
+            setLayoutConfig((prevState: LayoutConfig) => ({ ...prevState, theme, colorScheme }));
+        });
+    };
+    useEffect(() => {
+        const theme = solidSettingsData?.data?.authPagesTheme; // 'dark' or 'light'
+        if (theme) {
+            dispatch(toggleTheme()); // Dispatch Redux action
+            _changeTheme(
+                theme === "dark" ? "solid-dark-purple" : "solid-light-purple",
+                theme
+            );
+        }
+    }, [solidSettingsData]);
+    useEffect(() => {
+        // Fetch settings if not already available
+        trigger("");
+
+        const allowPublicRegistration = solidSettingsData?.data?.allowPublicRegistration;
+
+        if (allowPublicRegistration === false) {
+            setAllowRegistration(false);
+            if (pathname === "/auth/register") {
+                setIsRestricted(true);
+            } else {
+                setIsRestricted(false);
+            }
+        } else if (allowPublicRegistration === true) {
+            setAllowRegistration(true);
+            setIsRestricted(false);
+        }
+    }, [solidSettingsData, pathname, trigger]);
+
+
+    if (allowRegistration === null) return null;
+
+    const authChildren = allowRegistration || pathname !== "/auth/register" ? children : null;
+    const handleRegistration = () => {
+        router.push("/auth/login");
+        setIsRestricted(false);
+    }
+    return (
+        <div className={`solid-auth-theme-wrapper ${solidSettingsData?.data?.authPagesLayout || 'center'}`}>
+            <div className={`${solidSettingsData?.data?.authPagesLayout !== 'center' ? 'grid w-full h-full m-0' : ''}`}>
+                {solidSettingsData?.data?.authPagesLayout === 'left' &&
+                    <div className='col-6 flex align-items-center justify-content-center solid-login-dark-bg'>
+                        <div className="w-full">
+                            {authChildren}
+                        </div>
+                    </div>
+                }
+
+                <div
+                    className={`${solidSettingsData?.data?.authPagesLayout !== 'center' ? 'col-6 position-relative' : ''} 
+                                ${solidSettingsData?.data?.authPagesLayout === 'left' ? 'solid-left-layout' : ''} 
+                                ${solidSettingsData?.data?.authPagesLayout === 'right' ? 'solid-right-layout' : ''}`.trim()}
+                >
+                    {solidSettingsData?.data?.authPagesLayout !== '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>
+
+                {solidSettingsData?.data?.authPagesLayout === 'center' && <div className="solid-center-layout">
+                    {authChildren}
+                </div>}
+                {solidSettingsData?.data?.authPagesLayout === 'right' &&
+                    <div className='col-6 flex align-items-center justify-content-center solid-login-dark-bg'>
+                        <div className="w-full">
+                            {authChildren}
+                        </div>
+                    </div>
+                }
+            </div>
+            <div className={`absolute  ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'solid-auth-footer flex align-items-center justify-content-between' : 'solid-auth-footer-2 grid'}`}>
+                <div className={solidSettingsData?.data?.authPagesLayout !== 'center' ? 'col-6 flex justify-content-center' : ''}>
+                    <p className={`solid-auth-input-label text-sm m-0 ${solidSettingsData?.data?.authPagesLayout === 'right' ? 'right' : ''}`}>Made with <svg className="mx-1" width="12px" height="12px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M1.24264 8.24264L8 15L14.7574 8.24264C15.553 7.44699 16 6.36786 16 5.24264V5.05234C16 2.8143 14.1857 1 11.9477 1C10.7166 1 9.55233 1.55959 8.78331 2.52086L8 3.5L7.21669 2.52086C6.44767 1.55959 5.28338 1 4.05234 1C1.8143 1 0 2.8143 0 5.05234V5.24264C0 6.36786 0.44699 7.44699 1.24264 8.24264Z" fill="#ff0000"></path> </g></svg> in Mumbai</p>
+                </div>
+                <div className={solidSettingsData?.data?.authPagesLayout !== 'center' ? 'col-6 flex justify-content-center' : ''}>
+                    <div className={`flex align-items-center gap-5 solid-auth-subtitle ${solidSettingsData?.data?.authPagesLayout === 'left' ? 'left' : ''}`}>
+                        <p className="m-0 "> <Link className="text-sm no-underline font-normal" href={solidSettingsData ? solidSettingsData?.data?.appTnc : "#"}>Terms of Service</Link></p>
+                        <p className="m-0 "> <Link className="text-sm no-underline font-normal" href={solidSettingsData ? solidSettingsData?.data?.appPrivacyPolicy : "#"}>Privacy Policy.</Link></p>
+                    </div>
+                </div>
+            </div>
+            <Dialog
+                visible={isRestricted}
+                onHide={handleRegistration}
+                header="Access Restricted"
+                headerClassName="py-2" contentClassName="px-0 pb-0"
+                footer={
+                    <div className="flex align-items-center justify-content-start">
+                        <Button label="Close" onClick={handleRegistration} size="small" />
+                    </div>
+                }
+                draggable={false}
+            >
+                <Divider className="m-0" />
+                <div className="p-4">
+                    <p>Sign-up is not available. Please contact the admin.</p>
+                </div>
+            </Dialog>
+        </div>
+    )
+}

package/dist/components/auth/ForgotPasswordThankYou.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { useContext } from "react";
+import { LayoutContext } from "../layout/context/layoutcontext";
+import Image from "next/image";
+import SolidLogo from '../../resources/images/SS-Logo.png'
+
+
+export const ForgotPasswordThankYou = () => {
+    const { layoutConfig } = useContext(LayoutContext);
+    const { authLayout } = layoutConfig;
+    const searchParams = useSearchParams();
+    const email = searchParams.get('email');
+    const decodedEmail = email ? decodeURIComponent(email) : '';
+    return (
+        <div>
+            <div className={`auth-container ${authLayout === 'Center' ? 'center' : 'side'}`}>
+                {authLayout === '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
+                            />
+                            <div>
+                                <p className="solid-logo-title">
+                                    Solid<br />Starters
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                }
+                <h5 className='text-center font-bold'>We have sent an email to yourregistered email address</h5>
+                <p className='font-bold text-center'>{decodedEmail}</p>
+                <p className='text-center'>
+                    Please follow the instructions in the email
+                </p>
+                <div className='text-center'>
+                    <Link href={"/"} className='btn'>Back to Home</Link>
+                </div>
+            </div>
+        </div>
+    )
+}

package/dist/components/auth/GoogleAuthChecking.tsx

@@ -0,0 +1,60 @@
+"use client"
+import { signIn } from 'next-auth/react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { ProgressSpinner } from 'primereact/progressspinner';
+import { Toast } from 'primereact/toast';
+import React, { useEffect, useRef, useState } from 'react'
+export const GoogleAuthChecking = () => {
+    const searchParams = useSearchParams();
+    const accessCode = searchParams.get("accessCode");
+
+    const router = useRouter();
+    const [error, setError] = useState<string | null>(null);
+    const toast = useRef<Toast>(null);
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            life: 3000,
+        });
+    };
+    useEffect(() => {
+        const handleOAuthAuthentication = async () => {
+            try {
+                const response = await signIn("credentials", {
+                    redirect: false,
+                    accessCode: accessCode
+                    // accessToken: accessToken?.accessToken,
+                    // refreshToken: accessToken?.refreshToken
+                });
+
+                if (response?.error) {
+                    showToast("error", "Login Error", response.error);
+                    setError("Authentication failed.")
+                } else {
+                    showToast("success", "Login Success", "Redirecting to dashboard...");
+                    router.push(`${process.env.NEXT_PUBLIC_LOGIN_REDIRECT_URL}`);
+                }
+            } catch (err: any) {
+                showToast("error", "Login Error", err?.data?.message || "Authentication failed.");
+            }
+        };
+
+        handleOAuthAuthentication();
+    }, [router]);
+
+    if (error) {
+        return (
+            <div className="flex items-center justify-center min-h-screen">
+                <h2 className="text-red-500 text-xl font-semibold">{error}</h2>
+            </div>
+        );
+    }
+    return (
+        <div>
+            <Toast ref={toast} />
+            <ProgressSpinner />
+        </div>
+    )
+}

package/dist/components/auth/Login.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { Form, Formik } from "formik";
+import { signIn, useSession } from "next-auth/react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Button } from "primereact/button";
+import { Checkbox } from "primereact/checkbox";
+import { Divider } from "primereact/divider";
+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 { useRef, useState } from "react";
+import * as Yup from "yup";
+import AuthBanner from "../common/AuthBanner";
+import { SocialMediaLogin } from "../common/SocialMediaLogin";
+
+
+const Login = () => {
+    const toast = useRef<Toast>(null);
+    const router = useRouter();
+
+    const [password, setPassword] = useState('');
+    const [checked, setChecked] = useState<boolean>(false);
+    const session = useSession();
+
+    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="h-screen">
+            <Toast ref={toast} />
+            <div className="grid m-0 h-full">
+                <div className="col-12 md:col-12 lg:col-6">
+                    <div className="flex justify-content-center align-items-center h-full">
+                        <div className="col-12 sm:col-8">
+                            <h2 className="text-4xl text-semibold text-start secondary-color">Sign in to {process.env.SOLID_APP_TITLE}</h2>
+                            {/* <p className="signup-desc text-center">Create your account</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="text-color-secondary">Email</label>
+                                                <InputText
+                                                    id="email"
+                                                    name="email"
+                                                    placeholder="Your Email"
+                                                    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="text-color-secondary">Password</label>
+                                                <Password
+                                                    id="password"
+                                                    value={password}
+                                                    onChange={(e) => {
+                                                        setPassword(e.target.value);
+                                                        formik.setFieldValue("password", e.target.value);
+                                                    }}
+                                                    toggleMask
+                                                    className={classNames("p-inputtext-sm w-full s-password-input", {
+                                                        "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">
+                                                <Button className="w-full secondary-bg-color" label="Sign in" style={{ borderColor: 'currentcolor' }} />
+                                            </div>
+                                        </Form>
+                                    )}
+                                </Formik>
+                                <Divider align="center">
+                                    <div className="inline-flex align-items-center text-400">
+                                        or continue with
+                                    </div>
+                                </Divider>
+                                <div className="text-center">
+                                    <div className="text-sm text-400">
+                                        Don’t have an account ? <Link href="/auth/register">Sign up</Link>
+                                    </div>
+                                </div>
+                                <SocialMediaLogin />
+                            </>
+                        </div>
+                    </div>
+                </div>
+                <div className="col-12 md:col-12 lg:col-6 hidden lg:block p-0">
+                    <AuthBanner></AuthBanner>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Login;

package/dist/components/auth/Register.tsx

@@ -0,0 +1,239 @@
+"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 { Checkbox } from "primereact/checkbox";
+import { Divider } from "primereact/divider";
+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, useEffect, useRef, useState } from "react";
+import * as Yup from "yup";
+import AuthBanner from "../common/AuthBanner";
+import { SocialMediaLogin } from "../common/SocialMediaLogin";
+
+const Register = () => {
+  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 (
+    <div className="h-screen">
+      <Toast ref={toast} />
+      <div className="grid m-0 h-full">
+        <div className="col-12 md:col-12 lg:col-6">
+          <div className="flex justify-content-center align-items-center h-full">
+            <div className="col-12 sm:col-8">
+              <h2 className="text-4xl text-semibold text-start secondary-color mb-0">
+                Sign up to Radix Solutions
+              </h2>
+              <p className="text-sm">Create your account</p>
+                  <form onSubmit={formik.handleSubmit}>
+                    <div className="flex flex-column gap-2">
+                      <label
+                        htmlFor="username"
+                        className="text-color-secondary"
+                      >
+                        Username
+                      </label>
+                      <InputText
+                        id="username"
+                        name="username"
+                        placeholder="username"
+                        onChange={formik.handleChange}
+                        value={formik.values.username}
+                        className={classNames("p-inputtext-sm w-full", {
+                          "p-invalid": isFormFieldValid(formik, "name"),
+                        })}
+                      />
+                      {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-4">
+                      <label htmlFor="email" className="text-color-secondary">
+                        Email
+                      </label>
+                      {/* <img
+                                                                style={{ cursor: "pointer" }}
+                                                                src={`/images/mail-icon.png`}
+                                                                alt="Solid"
+                                                            /> */}
+                      <InputText
+                        id="email"
+                        name="email"
+                        placeholder="Yourgmail@123.com"
+                        onChange={formik.handleChange}
+                        value={formik.values.email}
+                        className={classNames("p-inputtext-sm w-full", {
+                          "p-invalid": isFormFieldValid(formik, "name"),
+                        })}
+                      />
+                      {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="text-color-secondary"
+                      >
+                        Password
+                      </label>
+                      <Password
+                        id="password"
+                        name="password"
+                        value={formik.values.password}
+                        onChange={formik.handleChange}
+                        // value={formik.values.password}}
+                        toggleMask
+                        inputClassName="w-full"
+                        className={classNames("p-inputtext-sm w-full s-password-input", {
+                          "p-invalid": isFormFieldValid(formik, "password"),
+                        })}
+                      />
+                      {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">
+                      <Button
+                        className="w-full secondary-bg-color"
+                        label="Create your account"
+                        style={{ borderColor: "currentcolor" }}
+                        type="submit"
+                      />
+                    </div>
+                  </form>
+              <Divider align="center">
+                <div className="inline-flex align-items-center text-400">
+                  or continue with
+                </div>
+              </Divider>
+              <div className="text-center">
+                <div className="text-sm text-400">
+                  Don’t have an account ?{" "}
+                  <Link href="/auth/login">Sign in</Link>
+                </div>
+              </div>
+              <SocialMediaLogin />
+            </div>
+          </div>
+        </div>
+        <div className="col-12 md:col-12 lg:col-6 hidden lg:block p-0">
+          <AuthBanner></AuthBanner>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Register;