@solidstarters/solid-core-ui 1.1.211 → 1.1.212

package/dist/components/auth/AuthLayout.tsx

@@ -0,0 +1,223 @@
+"use client"
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import SolidLogo from '../../resources/images/SolidXLogo.svg'
+import { Divider } from "primereact/divider";
+import AuthScreenRightBackgroundImage from '../../resources/images/auth/solid-left-layout-bg.png';
+import AuthScreenLeftBackgroundImage from '../../resources/images/auth/solid-right-layout-bg.png';
+import AuthScreenCenterBackgroundImage from '../../resources/images/auth/solid-login-light.png';
+import { useLazyGetAuthSettingsQuery } from "../../redux/api/solidSettingsApi";
+
+
+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 && pathname === "/auth/register") {
+        console.log(`AuthLayout returning null because allowRegistration is null for register route`);
+        return null;
+    }
+
+    const authChildren = allowRegistration || pathname !== "/auth/register" ? children : null;
+    const handleRegistration = () => {
+        router.push("/auth/login");
+        setIsRestricted(false);
+    }
+
+    const solidSideBanner = () => {
+        const layout = solidSettingsData?.data?.authPagesLayout;
+
+        let src = '';
+
+        if (layout === 'left') {
+            src = solidSettingsData?.data?.authScreenLeftBackgroundImage || (AuthScreenLeftBackgroundImage as any).src || AuthScreenLeftBackgroundImage;
+        } else if (layout === 'right') {
+            src = solidSettingsData?.data?.authScreenRightBackgroundImage || (AuthScreenRightBackgroundImage as any).src || AuthScreenRightBackgroundImage;
+        } else if (layout === 'center') {
+            src = solidSettingsData?.data?.authScreenCenterBackgroundImage || (AuthScreenCenterBackgroundImage as any).src || AuthScreenCenterBackgroundImage;
+        }
+
+        // Normalize image path if coming from API
+        const isBlobOrAbsolute = src?.startsWith("blob:") || src?.startsWith("http");
+        if (!isBlobOrAbsolute && !src?.startsWith("/")) {
+            src = `${process.env.API_URL}/${src}`;
+        }
+
+        return src;
+    };
+
+    return (
+        <div className={`solid-auth-theme-wrapper ${solidSettingsData?.data?.authPagesLayout || 'center'}`}
+            style={
+                solidSettingsData?.data?.authPagesLayout === 'center' ? { backgroundImage: `url(${solidSettingsData?.data?.authScreenCenterBackgroundImage || (AuthScreenCenterBackgroundImage as any)?.src || AuthScreenCenterBackgroundImage})` } : {}
+            }
+        >
+            <div className={`${solidSettingsData?.data?.authPagesLayout !== 'center' ? 'grid w-full h-full m-0' : ''}`}>
+                {solidSettingsData?.data?.authPagesLayout === 'left' &&
+                    <div className='col-12 lg:col-7 xl:col-6  flex align-items-center justify-content-center solid-login-dark-bg'>
+                        <div className="w-full">
+                            {solidSettingsData?.data?.appLogoPosition === "in_form_view" &&
+                                <div className="flex justify-content-center">
+                                    <div className={`solid-logo flex align-items-center ${solidSettingsData?.data?.appLogoPosition}`}>
+                                        <Image
+                                            alt="solid logo"
+                                            src={solidSettingsData?.data?.appLogo || SolidLogo}
+                                            className="relative"
+                                            fill
+                                        />
+                                    </div>
+                                </div>
+                            }
+                            {authChildren}
+                        </div>
+                    </div>
+                }
+
+                <div
+                    className={`hidden lg:flex ${solidSettingsData?.data?.authPagesLayout !== 'center' ? 'col-5 xl:col-6 position-relative' : ''} 
+                                ${solidSettingsData?.data?.authPagesLayout === 'left' ? 'solid-left-layout' : ''} 
+                                ${solidSettingsData?.data?.authPagesLayout === 'right' ? 'solid-right-layout' : ''}`.trim()}
+                    style={{ backgroundImage: `url(${solidSideBanner()})` }}
+                >
+                    {solidSettingsData?.data?.appLogoPosition === "in_image_view" && solidSettingsData?.data?.authPagesLayout !== 'center' &&
+                        <div className={`solid-logo flex align-items-center gap-3 ${solidSettingsData?.data?.appLogoPosition}`}>
+                            <Image
+                                alt="solid logo"
+                                src={solidSettingsData?.data?.appLogo || SolidLogo}
+                                className="relative"
+                                fill
+                            />
+                        </div>
+                    }
+                    {solidSettingsData?.data?.showAuthContent && solidSettingsData?.data?.authPagesLayout !== 'center' &&
+                        <div className="w-full" style={{ zIndex: 1 }}>
+                            <div className="grid">
+                                <div className="col-8 mx-auto">
+                                    {solidSettingsData?.data?.appSubtitle && <h1 className="solid-auth-image-subtitle m-0">{solidSettingsData?.data?.appSubtitle}</h1>}
+                                    {solidSettingsData?.data?.appTitle && <h1 className="solid-auth-image-title mt-0">{solidSettingsData?.data?.appTitle}</h1>}
+                                    {solidSettingsData?.data?.appDescription && <p className="solid-auth-image-helper-text">{solidSettingsData?.data?.appDescription}</p>}
+                                </div>
+                            </div>
+                        </div>
+                    }
+                </div>
+                {solidSettingsData?.data?.authPagesLayout === 'center' && <div className="solid-center-layout">
+                    {authChildren}
+                </div>}
+                {solidSettingsData?.data?.authPagesLayout === 'right' &&
+                    <div className='col-12 lg:col-7 xl:col-6 flex align-items-center justify-content-center solid-login-dark-bg'>
+                        <div className="w-full">
+                            {solidSettingsData?.data?.appLogoPosition === "in_form_view" &&
+                                <div className="flex justify-content-center">
+                                    <div className={`solid-logo flex align-items-center gap-3 ${solidSettingsData?.data?.appLogoPosition}`}>
+                                        <Image
+                                            alt="solid logo"
+                                            src={solidSettingsData?.data?.appLogo || SolidLogo}
+                                            className="relative"
+                                            fill
+                                        />
+                                    </div>
+                                </div>
+                            }
+                            {authChildren}
+                        </div>
+                    </div>
+                }
+            </div>
+            {/* {solidSettingsData?.data?.showLegalLinks === true && */}
+            <div className={`absolute hidden md:flex ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'solid-auth-footer flex flex-column sm:flex-row align-items-center justify-content-between' : 'solid-auth-footer-2 grid'}`}>
+                {solidSettingsData?.data?.authPagesLayout !== 'left' &&
+                    <div className={solidSettingsData?.data?.authPagesLayout !== 'center' ? 'col-6 lg:col-5  xl:col-6 flex justify-content-center' : ''}>
+                        {solidSettingsData?.data?.showLegalLinks === true &&
+                            <p className={`solid-auth-input-label text-sm m-0 ${solidSettingsData?.data?.authPagesLayout}`}>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" strokeLinecap="round" strokeLinejoin="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' : ''}>
+                    {solidSettingsData?.data?.showLegalLinks === true && <div className={`flex flex-column sm:flex-row align-items-center gap-1 sm:gap-5 solid-auth-subtitle mr-3 ${solidSettingsData?.data?.authPagesLayout === 'left' ? 'left' : ''}`}>
+                        {solidSettingsData?.data?.appTnc !== "" && <p className="m-0 "> <Link className="text-sm no-underline font-normal" href={solidSettingsData?.data?.appTnc}>Terms of Service</Link></p>}
+                        {solidSettingsData?.data?.appPrivacyPolicy !== "" && <p className="m-0 "> <Link className="text-sm no-underline font-normal" href={solidSettingsData?.data?.appPrivacyPolicy}>Privacy Policy.</Link></p>}
+                    </div>
+                    }
+                    {solidSettingsData?.data?.copyright !== "" &&
+                        <div className="mt-1">
+                            <p className="m-0 text-sm font-normal">{solidSettingsData?.data?.copyright}</p>
+                        </div>
+                    }
+                </div>
+                {
+                    solidSettingsData?.data?.authPagesLayout === 'left' &&
+                    <div className={solidSettingsData?.data?.authPagesLayout !== 'center' ? 'col-6 lg:col-5 xl:col-6  flex justify-content-center' : ''}>
+                        {solidSettingsData?.data?.showLegalLinks === true &&
+                            <p className={`solid-auth-input-label text-sm m-0 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" strokeLinecap="round" strokeLinejoin="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 >
+
+            {/* } */}
+            < Dialog
+                visible={isRestricted}
+                onHide={handleRegistration}
+                header="Access Restricted"
+                headerClassName="py-2" contentClassName="px-0 pb-0"
+                className="solid-confirm-dialog "
+                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,33 @@
+"use client"
+
+import { useLazyGetAuthSettingsQuery } from "../../redux/api/solidSettingsApi";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+
+
+export const ForgotPasswordThankYou = () => {
+    const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery()
+
+    useEffect(() => {
+        trigger("") // Fetch settings on mount
+    }, [trigger])
+
+    const searchParams = useSearchParams();
+    const email = searchParams.get('email');
+    const decodedEmail = email ? decodeURIComponent(email) : '';
+    return (
+        <div>
+            <div className={`auth-container ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'center' : 'side'}`}>
+                <h5 className='text-center font-bold'>We have sent an email to your registered 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,63 @@
+"use client"
+import { ERROR_MESSAGES } from '../../constants/error-messages';
+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,
+            ...(severity === "error"
+            ? { sticky: true }            // stays until user closes
+            : { 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", ERROR_MESSAGES.LOGIN_ERROR, response.error);
+                    setError(ERROR_MESSAGES.AUTHENICATION__FAILED)
+                } else {
+                    showToast("success", ERROR_MESSAGES.LOGIN_SUCCESS, ERROR_MESSAGES.DASHBOARD_REDIRECTING);
+                    router.push(`${process.env.NEXT_PUBLIC_LOGIN_REDIRECT_URL}`);
+                }
+            } catch (err: any) {
+                showToast("error", ERROR_MESSAGES.LOGIN_ERROR, err?.data?.message || ERROR_MESSAGES.AUTHENICATION__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/SolidChangeForcePassword.tsx

@@ -0,0 +1,222 @@
+"use client"
+import { ERROR_MESSAGES } from '../../constants/error-messages';
+import { useChangePasswordMutation } from '../../redux/api/authApi';
+import { useFormik } from 'formik';
+import { signOut, useSession } from 'next-auth/react';
+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 { useRef } from 'react';
+import * as Yup from 'yup';
+const SolidChangeForcePassword = () => {
+    const toast = useRef<Toast>(null);
+    const [changePassword] = useChangePasswordMutation();
+
+    const session: any = useSession();
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            ...(severity === "error"
+            ? { sticky: true }            // stays until user closes
+            : { life: 3000 }),
+        });
+    };
+
+    const envPasswordRegex = process.env.NEXT_PUBLIC_PASSWORD_REGEX;
+    const envPasswordHelperText = process.env.NEXT_PUBLIC_PASSWORD_COMPLEXITY_DESC;
+    let passwordRegex: RegExp | null = null;
+    try {
+        if (envPasswordRegex) {
+            const unescaped = JSON.parse(`"${envPasswordRegex}"`);
+            passwordRegex = new RegExp(unescaped);
+        }
+    } catch (error) {
+        console.error(ERROR_MESSAGES.INVALID_PASSWORD_REGX, error);
+    }
+
+    const newPasswordValidation = passwordRegex
+        ? Yup.string()
+            .matches(passwordRegex, ERROR_MESSAGES.PASSWORD_DO_NOT_MEET)
+            .required(ERROR_MESSAGES.FIELD_REUQIRED('New password'))        
+        : Yup.string().min(6, ERROR_MESSAGES.PASSWORD_CHARACTER(6))
+            .required(ERROR_MESSAGES.FIELD_REUQIRED('New password'));
+
+    const validationSchema = Yup.object({
+        email: Yup.string().email(ERROR_MESSAGES.FIELD_INAVLID_FORMAT('email')).required(ERROR_MESSAGES.FIELD_REUQIRED('Email')),
+        currentPassword: Yup.string().min(6, ERROR_MESSAGES.PASSWORD_CHARACTER(6)).required(ERROR_MESSAGES.FIELD_REUQIRED('Current password')),
+        newPassword: newPasswordValidation,
+        confirmPassword: Yup.string()
+            .oneOf([Yup.ref('newPassword')], ERROR_MESSAGES.MUST_MATCH)
+            .required(ERROR_MESSAGES.FIELD_REUQIRED('Confirm password')),
+        id: Yup.number().required(ERROR_MESSAGES.FIELD_REUQIRED('User ID')),
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            email: session?.data?.user?.user?.email,
+            currentPassword: "",
+            newPassword: "",
+            confirmPassword: "",
+            id: session?.data?.user?.user?.id,
+        },
+        validationSchema,
+        onSubmit: async (values, { setErrors }) => {
+            try {
+                const payload = {
+                    id: values.id,
+                    email: session?.data?.user?.user?.email,
+                    currentPassword: values.currentPassword,
+                    newPassword: values.newPassword,
+                };
+
+                // Call the mutation and handle the response
+                const response = await changePassword(payload).unwrap(); // Await the API call and unwrap to handle errors.
+                if (response?.error) {
+                    showToast("error", ERROR_MESSAGES.ERROR, response.error)
+                    setErrors({
+                        currentPassword: ERROR_MESSAGES.INCORRECT_CURRENT,
+                        newPassword: ERROR_MESSAGES.MUST_MATCH,
+                        confirmPassword: ERROR_MESSAGES.MUST_MATCH,
+                    })
+                } else {
+                    showToast("success", ERROR_MESSAGES.FORCE_PASSWORD_CHANGE, ERROR_MESSAGES.PASSWORD_CHANGE);
+                    signOut({ callbackUrl: "/auth/login" })
+                }
+            } catch (err: any) {
+                showToast("error",ERROR_MESSAGES.LOGIN_ERROR, err?.data?.message);
+                // setErrors({
+                //     currentPassword: "Incorrect Current Password",
+                // })
+            }
+        },
+    });
+    const isFormFieldValid = (formik: any, fieldName: string) =>
+        formik.touched[fieldName] && formik.errors[fieldName];
+
+    const passwordPolicies = [
+        {
+            policy: "8 characters minimum."
+        },
+        {
+            policy: "No Spaces Allowed"
+        },
+        {
+            policy: "One uppercase letter"
+        },
+        {
+            policy: "One lowercase letter"
+        },
+        {
+            policy: "One numeric digit"
+        },
+        {
+            policy: "One special character(!, @, #, $)"
+        },
+    ]
+
+    return (
+        <>
+            <Toast ref={toast} />
+
+            <form onSubmit={formik.handleSubmit} className='d-flex flex-column gap-3 auth-form'>
+                <div className="flex flex-column gap-2 mt-2" style={{}}>
+                    <label htmlFor="currentPassword" className="solid-auth-input-label">Current Password</label>
+                    <Password
+                        id="currentPassword"
+                        name="currentPassword"
+                        value={formik.values.currentPassword}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        toggleMask
+                        invalid={!!formik.errors.currentPassword}
+                        inputClassName="w-full"
+                        feedback={false}
+                    />
+                    {isFormFieldValid(formik, "currentPassword") && <Message
+                        className="text-red-500 text-sm"
+                        severity="error"
+                        text={formik?.errors?.currentPassword?.toString()}
+                    />}
+                </div>
+                <div className="flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4" style={{}}>
+                    <label htmlFor="password" className="solid-auth-input-label">New Password</label>
+                    <Password
+                        id="newPassword"
+                        name="newPassword"
+                        value={formik.values.newPassword}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        toggleMask
+                        invalid={!!formik.errors.newPassword}
+                        inputClassName="w-full"
+                        feedback={false}
+                    />
+                    {isFormFieldValid(formik, "newPassword") && <Message
+                        className="text-red-500 text-sm"
+                        severity="error"
+                        text={formik?.errors?.newPassword?.toString()}
+                    />}
+                </div>
+                <div className="flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4" style={{}}>
+                    <label htmlFor="password" className="solid-auth-input-label">Confirm Password</label>
+                    <Password
+                        id="confirmPassword"
+                        name="confirmPassword"
+                        value={formik.values.confirmPassword}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        toggleMask
+                        invalid={!!formik.errors.confirmPassword}
+                        inputClassName="w-full"
+                        feedback={false}
+                    />
+                    {isFormFieldValid(formik, "confirmPassword") && <Message
+                        className="text-red-500 text-sm"
+                        severity="error"
+                        text={formik?.errors?.confirmPassword?.toString()}
+                    />}
+                </div>
+                {/* <div className='mt-4'>
+                    <div className='grid'>
+                        {passwordPolicies.map((policy, index) => {
+                            return (
+                                <div key={index} className='col-6'>
+                                    <p className="solid-auth-input-label flex align-items-center gap-2">
+                                        <div className='flex align-items-center justify-content-center' style={{ height: 14, width: 14, borderRadius: '50%', backgroundColor: '#A4A4A4' }}>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+                                                <path d="M4.86813 8.72999L2.28979 6.15166L2.91396 5.52749L4.86813 7.48166L9.08563 3.26416L9.7098 3.88833L4.86813 8.72999Z" fill="#E8EAED" />
+                                            </svg>
+                                        </div>
+                                        {policy.policy}
+                                    </p>
+                                </div>
+                            )
+                        })}
+                    </div>
+                </div> */}
+                {envPasswordHelperText && (
+                    <div className="mt-4">
+                        <div className="grid">
+                            {envPasswordHelperText
+                                .split('\\n')
+                                .map((text, idx) => (
+                                    <div key={idx} className="col-6 pt-0">
+                                        <div className='flex gap-2'><span>•</span><span>{text}</span></div>
+                                    </div>
+                                ))}
+                        </div>
+                    </div>
+                )}
+                <div className="mt-4">
+                    <Button className="w-full font-light auth-submit-button" label="Change Password" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
+                </div>
+            </form>
+        </>
+    )
+}
+export default SolidChangeForcePassword