@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.4

package/dist/components/auth/SolidLogin.tsx

@@ -2,27 +2,22 @@ import { Form, Formik } from "formik";
 import { signIn } from "../../adapters/auth/index";
 import Link from "../common/Link";
 import { useRouter } from "../../hooks/useRouter";
-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 { useEffect, useState } from "react";
-import { useDispatch } from 'react-redux';
 import * as Yup from "yup";
 import { SocialMediaLogin } from "../common/SocialMediaLogin";
 import { useInitateLoginMutation } from "../../redux/api/authApi";
-import Image from "../common/Image";
-import SolidLogo from '../../resources/images/SolidXLogo.svg'
 import { formatTimeLeft } from "../../helpers/resendOtpHelper";
 import { ERROR_MESSAGES } from "../../constants/error-messages";
-import { RadioButton } from "primereact/radiobutton";
 import { useLazyGetAuthSettingsQuery } from "../../redux/api/solidSettingsApi";
 import { env } from "../../adapters/env";
 import { showToast } from "../../redux/features/toastSlice";
+import { AuthTabs } from "./AuthTabs";
+import { loadSession } from "../../adapters/auth/storage";
+import { hasAnyRole } from "../../helpers/rolesHelper";
+import { useDispatch } from "react-redux";
+import { SolidButton, SolidDivider, SolidInput, SolidMessage, SolidPasswordInput, SolidRadioGroup } from "../shad-cn-ui";
 
-interface AuthTabsProps {
+interface AuthModesProps {
     passwordBasedAuth: boolean;
     passwordLessAuth: boolean;
 }
@@ -94,7 +89,10 @@ const SolidLogin = ({ signInValidatorLabel, signInValidatorPlaceholder }: any) =
                             });
                         } else {
                             dispatch(showToast({ severity: "success", summary: ERROR_MESSAGES.LOGIN_SUCCESS, detail: ERROR_MESSAGES.DASHBOARD_REDIRECTING }));
-                            const redirectUrl = env("NEXT_PUBLIC_LOGIN_REDIRECT_URL") || "/admin";
+                            const session = loadSession();
+                            const isAdmin = hasAnyRole(session?.user?.roles, ["Admin"]);
+                            const isDev = env("VITE_SOLIDX_ENV") === "dev";
+                            const redirectUrl = isAdmin && isDev ? "/studio" : (env("NEXT_PUBLIC_LOGIN_REDIRECT_URL") || "/admin");
                             router.push(redirectUrl);
                         }
                     } catch (error: any) {
@@ -108,58 +106,58 @@ const SolidLogin = ({ signInValidatorLabel, signInValidatorPlaceholder }: any) =
                     <Form>
                         <div className="flex flex-column gap-2 mt-3">
                             <label htmlFor="email" className="solid-auth-input-label">{signInValidatorLabel ? signInValidatorLabel : "Username or Email"}</label>
-                            <InputText
+                            <SolidInput
                                 id="identifier"
                                 name="identifier"
                                 placeholder={signInValidatorPlaceholder ? signInValidatorPlaceholder : "Email or Username"}
                                 onChange={formik.handleChange}
                                 value={formik.values.identifier}
-                                invalid={!!formik.errors.identifier}
                                 onBlur={formik.handleBlur}
+                                aria-invalid={!!isFormFieldValid(formik, "identifier")}
+                                className="w-full"
                             />
-                            {isFormFieldValid(formik, "identifier") && <Message
-                                className="text-red-500 text-sm"
-                                severity="error"
-                                text={formik?.errors?.identifier?.toString()}
-                            />}
+                            {isFormFieldValid(formik, "identifier") && (
+                                <SolidMessage
+                                    className="text-red-500 text-sm"
+                                    severity="error"
+                                    text={formik?.errors?.identifier?.toString()}
+                                />
+                            )}
                         </div>
                         <div className="flex flex-column gap-1 mt-4" style={{}}>
-                            <label htmlFor="password" className="solid-auth-input-label">Password</label>
-                            <Password
+                            <div className="flex align-items-center justify-content-between">
+                                <label htmlFor="password" className="solid-auth-input-label">Password</label>
+                                <Link href={"/auth/initiate-forgot-password"} className="solid-auth-inline-link">Forgot your password?</Link>
+                            </div>
+                            <SolidPasswordInput
                                 id="password"
                                 name="password"
                                 value={formik.values.password}
                                 onChange={formik.handleChange}
-                                toggleMask
-                                invalid={!!formik.errors.password}
-                                inputClassName="w-full"
-                                feedback={false}
+                                toggle
+                                className="w-full"
+                                aria-invalid={!!isFormFieldValid(formik, "password")}
                             />
-                            {isFormFieldValid(formik, "password") && <Message
-                                className="text-red-500 text-sm"
-                                severity="error"
-                                text={formik?.errors?.password?.toString()}
-                            />}
+                            {isFormFieldValid(formik, "password") && (
+                                <SolidMessage
+                                    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 flex align-items-center justify-content-between">
-                            {/* <div className="flex align-items-center gap-2">
-                                <Checkbox
-                                    inputId="rememberMe"
-                                    name="rememberMe"
-                                    checked={formik.values.rememberMe}
-                                    onChange={formik.handleChange}
-                                />
-                                <label htmlFor="rememberMe" className="solid-auth-input-label">Remember me</label>
-                            </div> */}
-                            <div></div>
-                            <Link href={"/auth/initiate-forgot-password"} className="solid-auth-input-label font-bold">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} />
+                            <SolidButton
+                                type="submit"
+                                className="w-full font-light auth-submit-button"
+                                label="Sign In"
+                                disabled={formik.isSubmitting}
+                                loading={formik.isSubmitting}
+                            />
                         </div>
                     </Form>
                 )}
@@ -291,57 +289,49 @@ const SolidLogin = ({ signInValidatorLabel, signInValidatorPlaceholder }: any) =
                         {validationType === "selectable" && (
                             <div className="flex flex-column gap-3 mt-3">
                                 <label className="solid-auth-input-label">Select Authentication Method</label>
-                                <div className="flex gap-4">
-                                    <div className="flex align-items-center">
-                                        <RadioButton
-                                            inputId="auth-email"
-                                            name="authMethod"
-                                            value="email"
-                                            checked={selectedAuthMethod === "email"}
-                                            onChange={(e) => {
-                                                setSelectedAuthMethod("email");
-                                                formik.setFieldValue("identifier", "");
-                                            }}
-                                            className="mr-2"
-                                        />
-                                        <label htmlFor="auth-email" className="solid-auth-input-label cursor-pointer">Email / Username</label>
-                                    </div>
-                                    <div className="flex align-items-center">
-                                        <RadioButton
-                                            inputId="auth-mobile"
-                                            name="authMethod"
-                                            value="mobile"
-                                            checked={selectedAuthMethod === "mobile"}
-                                            onChange={(e) => {
-                                                setSelectedAuthMethod("mobile");
-                                                formik.setFieldValue("identifier", "");
-                                            }}
-                                            className="mr-2"
-                                        />
-                                        <label htmlFor="auth-mobile" className="solid-auth-input-label cursor-pointer">Mobile / Username</label>
-                                    </div>
-                                </div>
+                                <SolidRadioGroup
+                                    name="authMethod"
+                                    value={selectedAuthMethod}
+                                    options={[
+                                        { label: "Email / Username", value: "email" },
+                                        { label: "Mobile / Username", value: "mobile" },
+                                    ]}
+                                    onChange={(value) => {
+                                        setSelectedAuthMethod(value);
+                                        formik.setFieldValue("identifier", "");
+                                    }}
+                                    className="solid-auth-radio-options flex gap-4 flex-wrap"
+                                />
                             </div>
                         )}
                         <div className="flex flex-column gap-2 mt-3">
                             <label htmlFor="identifier" className="solid-auth-input-label">{fieldConfig.label}</label>
-                            <InputText
+                            <SolidInput
                                 id="identifier"
                                 name="identifier"
                                 placeholder={fieldConfig.placeholder}
                                 onChange={formik.handleChange}
                                 value={formik.values.identifier}
-                                invalid={!!formik.errors.identifier}
                                 onBlur={formik.handleBlur}
+                                aria-invalid={!!isFormFieldValid(formik, "identifier")}
+                                className="w-full"
                             />
-                            {isFormFieldValid(formik, "identifier") && <Message
-                                className="text-red-500 text-sm"
-                                severity="error"
-                                text={formik?.errors?.identifier?.toString()}
-                            />}
+                            {isFormFieldValid(formik, "identifier") && (
+                                <SolidMessage
+                                    className="text-red-500 text-sm"
+                                    severity="error"
+                                    text={formik?.errors?.identifier?.toString()}
+                                />
+                            )}
                         </div>
                         <div className="mt-4">
-                            <Button className="w-full font-light auth-submit-button" label="Sign In" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
+                            <SolidButton
+                                type="submit"
+                                className="w-full font-light auth-submit-button"
+                                label="Sign In"
+                                disabled={formik.isSubmitting}
+                                loading={formik.isSubmitting}
+                            />
                         </div>
                     </Form>
                 )}
@@ -349,20 +339,17 @@ const SolidLogin = ({ signInValidatorLabel, signInValidatorPlaceholder }: any) =
         )
     }
 
-    const AuthTabs: React.FC<AuthTabsProps> = ({ passwordBasedAuth, passwordLessAuth }) => {
+    const RenderAuthModes: React.FC<AuthModesProps> = ({ passwordBasedAuth, passwordLessAuth }) => {
         if (passwordBasedAuth && passwordLessAuth) {
             return (
-                <TabView className="solid-auth-tabview"
+                <AuthTabs
                     activeIndex={activeIndex}
-                    onTabChange={(e) => setActiveIndex(e.index)}
-                >
-                    <TabPanel header="With Password">
-                        <PasswordLogin />
-                    </TabPanel>
-                    <TabPanel header="Without Password">
-                        <PasswordLessLogin />
-                    </TabPanel>
-                </TabView>
+                    onChange={setActiveIndex}
+                    tabs={[
+                        { key: "with-password", label: "With Password", content: <PasswordLogin /> },
+                        { key: "without-password", label: "Without Password", content: <PasswordLessLogin /> },
+                    ]}
+                />
             );
         } else if (passwordBasedAuth) {
             return <PasswordLogin />;
@@ -376,32 +363,20 @@ const SolidLogin = ({ signInValidatorLabel, signInValidatorPlaceholder }: any) =
     return (
         <div className="">
             <div className={`auth-container ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'center' : 'side'}`}>
-                {solidSettingsData?.data?.authPagesLayout === 'center' &&
-                    <div className="flex justify-content-center">
-                        <div className={`solid-logo flex align-items-center ${solidSettingsData?.data?.appLogoPosition}`}>
-                            <Image
-                                alt="solid logo"
-                                src={solidSettingsData?.data?.appLogo || SolidLogo}
-                                className="relative"
-                                fill
-                            />
-                        </div>
-                    </div>
-                }
-                <h2 className={`solid-auth-title ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'text-center mt-2 md:mt-4' : '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> */}
+                <h2 className="solid-auth-title">Login to your account</h2>
+                <p className="solid-auth-helper">Enter your credentials below to login to your account</p>
 
-                <AuthTabs passwordBasedAuth={solidSettingsData?.data?.passwordBasedAuth} passwordLessAuth={solidSettingsData?.data?.passwordLessAuth} />
-                {solidSettingsData?.data?.iamGoogleOAuthEnabled &&
+                <RenderAuthModes passwordBasedAuth={solidSettingsData?.data?.passwordBasedAuth} passwordLessAuth={solidSettingsData?.data?.passwordLessAuth} />
+                {solidSettingsData?.data?.iamGoogleOAuthEnabled && (
                     <>
-                        <Divider align="center">
-                            <div className="inline-flex align-items-center">
-                                OR
-                            </div>
-                        </Divider>
+                        <div className="solid-auth-divider flex align-items-center gap-2 my-4">
+                            <SolidDivider className="flex-1" />
+                            <span className="text-sm text-500">Or continue with</span>
+                            <SolidDivider className="flex-1" />
+                        </div>
                         <SocialMediaLogin />
                     </>
-                }
+                )}
             </div>
             {solidSettingsData?.data?.allowPublicRegistration && <div className="mt-3 md:mt-5">
                 <div className="text-sm text-center text-400 secondary-dark-color">

package/dist/components/auth/SolidRegister.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidRegister.d.ts","sourceRoot":"","sources":["../../../src/components/auth/SolidRegister.tsx"],"names":[],"mappings":"AA8BA,QAAA,MAAM,aAAa,+CAoZlB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SolidRegister.d.ts","sourceRoot":"","sources":["../../../src/components/auth/SolidRegister.tsx"],"names":[],"mappings":"AAuBA,QAAA,MAAM,aAAa,+CAyYlB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/auth/SolidRegister.js

@@ -50,39 +50,32 @@ import { useInitateRegisterMutation, useRegisterMutation } from "../../redux/api
 import { Form, Formik } from "formik";
 import Link from "../common/Link";
 import { useRouter } from "../../hooks/useRouter";
-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 { useEffect, useState } from "react";
-import { useDispatch } from 'react-redux';
 import * as Yup from "yup";
 import { SocialMediaLogin } from "../common/SocialMediaLogin";
-import Image from "../common/Image";
-import SolidLogo from '../../resources/images/SolidXLogo.svg';
 import { formatTimeLeft } from "../../helpers/resendOtpHelper";
-import { ProgressSpinner } from "primereact/progressspinner";
 import { ERROR_MESSAGES } from "../../constants/error-messages";
 import { useLazyGetAuthSettingsQuery } from "../../redux/api/solidSettingsApi";
 import { env } from "../../adapters/env";
 import { showToast } from "../../redux/features/toastSlice";
+import { AuthTabs } from "./AuthTabs";
+import { useDispatch } from "react-redux";
+import { SolidButton, SolidDivider, SolidInput, SolidMessage, SolidPasswordInput, SolidSpinner } from "../shad-cn-ui";
 var SolidRegister = function () {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e;
     var envPasswordHelperText = env("NEXT_PUBLIC_PASSWORD_COMPLEXITY_DESC");
-    var _k = useState(0), activeIndex = _k[0], setActiveIndex = _k[1];
-    var _l = useLazyGetAuthSettingsQuery(), trigger = _l[0], solidSettingsData = _l[1].data;
+    var _f = useState(0), activeIndex = _f[0], setActiveIndex = _f[1];
+    var _g = useLazyGetAuthSettingsQuery(), trigger = _g[0], solidSettingsData = _g[1].data;
     useEffect(function () {
         trigger(""); // Fetch settings on mount
     }, [trigger]);
-    var _m = useState(false), showOverlay = _m[0], setShowOverlay = _m[1];
+    var _h = useState(false), showOverlay = _h[0], setShowOverlay = _h[1];
     var dispatch = useDispatch();
     var router = useRouter();
     var isFormFieldValid = function (formik, fieldName) {
         return formik.touched[fieldName] && formik.errors[fieldName];
     };
-    var _o = useRegisterMutation(), register = _o[0], _p = _o[1], isLoading = _p.isLoading, error = _p.error, isSuccess = _p.isSuccess, data = _p.data;
+    var _j = useRegisterMutation(), register = _j[0], _k = _j[1], isLoading = _k.isLoading, error = _k.error, isSuccess = _k.isSuccess, data = _k.data;
     var initiateRegister = useInitateRegisterMutation()[0];
     var showError = function () {
         var _a, _b, _c;
@@ -197,10 +190,10 @@ var SolidRegister = function () {
                 });
             }, children: function (formik) {
                 var _a, _b, _c, _d, _e;
-                return (_jsxs(Form, { children: [showNameFieldsForRegistration ? (_jsx(_Fragment, { children: _jsxs("div", { className: "flex gap-2 mt-3", children: [_jsxs("div", { className: "flex flex-column w-full gap-2", children: [_jsx("label", { className: "solid-auth-input-label", children: "First Name" }), _jsx(InputText, { id: "firstName", name: "firstName", placeholder: "First Name", onChange: formik.handleChange, value: formik.values.firstName, invalid: !!formik.errors.firstName }), isFormFieldValid(formik, "firstName") && (_jsx(Message, { severity: "error", text: (_a = formik.errors.firstName) === null || _a === void 0 ? void 0 : _a.toString() }))] }), _jsxs("div", { className: "flex flex-column w-full gap-2", children: [_jsx("label", { className: "solid-auth-input-label", children: "Last Name" }), _jsx(InputText, { id: "lastName", name: "lastName", placeholder: "Last Name", onChange: formik.handleChange, value: formik.values.lastName, invalid: !!formik.errors.lastName }), isFormFieldValid(formik, "lastName") && (_jsx(Message, { severity: "error", text: (_b = formik.errors.lastName) === null || _b === void 0 ? void 0 : _b.toString() }))] })] }) })) : (_jsx(_Fragment, { children: _jsxs("div", { children: [_jsxs("div", { className: "flex flex-column gap-2 mt-3", children: [_jsx("label", { className: "solid-auth-input-label", children: "Username" }), _jsx(InputText, { id: "username", name: "username", placeholder: "username", onChange: formik.handleChange, value: formik.values.username, invalid: !!formik.errors.username })] }), isFormFieldValid(formik, "username") &&
-                                        _jsx(Message, { severity: "error", text: (_c = formik.errors.username) === null || _c === void 0 ? void 0 : _c.toString() })] }) })), _jsxs("div", { children: [_jsxs("div", { className: "flex flex-column gap-2 mt-3", children: [_jsx("label", { className: "solid-auth-input-label", children: "Email" }), _jsx(InputText, { id: "email", name: "email", placeholder: "Yourgmail@123.com", onChange: formik.handleChange, value: formik.values.email, invalid: !!formik.errors.email })] }), isFormFieldValid(formik, "email") &&
-                                    _jsx(Message, { severity: "error", text: (_d = formik.errors.email) === null || _d === void 0 ? void 0 : _d.toString() })] }), _jsxs("div", { children: [_jsxs("div", { className: "flex flex-column gap-2 mt-3", children: [_jsx("label", { className: "solid-auth-input-label", children: "Password" }), _jsx(Password, { id: "password", name: "password", value: formik.values.password, onChange: formik.handleChange, toggleMask: true, inputClassName: "w-full", feedback: false, invalid: !!formik.errors.password })] }), isFormFieldValid(formik, "password") &&
-                                    _jsx(Message, { severity: "error", text: (_e = formik.errors.password) === null || _e === void 0 ? void 0 : _e.toString() })] }), _jsx("div", { className: "mt-4", children: _jsx(Button, { className: "w-full font-light auth-submit-button", label: "Sign Up", disabled: formik.isSubmitting, loading: formik.isSubmitting }) })] }));
+                return (_jsxs(Form, { children: [showNameFieldsForRegistration ? (_jsx(_Fragment, { children: _jsxs("div", { className: "flex gap-2 mt-3", children: [_jsxs("div", { className: "flex flex-column w-full gap-2", children: [_jsx("label", { className: "solid-auth-input-label", children: "First Name" }), _jsx(SolidInput, { id: "firstName", name: "firstName", placeholder: "First Name", onChange: formik.handleChange, value: formik.values.firstName, "aria-invalid": !!formik.errors.firstName }), isFormFieldValid(formik, "firstName") && (_jsx(SolidMessage, { severity: "error", text: (_a = formik.errors.firstName) === null || _a === void 0 ? void 0 : _a.toString() }))] }), _jsxs("div", { className: "flex flex-column w-full gap-2", children: [_jsx("label", { className: "solid-auth-input-label", children: "Last Name" }), _jsx(SolidInput, { id: "lastName", name: "lastName", placeholder: "Last Name", onChange: formik.handleChange, value: formik.values.lastName, "aria-invalid": !!formik.errors.lastName }), isFormFieldValid(formik, "lastName") && (_jsx(SolidMessage, { severity: "error", text: (_b = formik.errors.lastName) === null || _b === void 0 ? void 0 : _b.toString() }))] })] }) })) : (_jsx(_Fragment, { children: _jsxs("div", { children: [_jsxs("div", { className: "flex flex-column gap-2 mt-3", children: [_jsx("label", { className: "solid-auth-input-label", children: "Username" }), _jsx(SolidInput, { id: "username", name: "username", placeholder: "username", onChange: formik.handleChange, value: formik.values.username, "aria-invalid": !!formik.errors.username })] }), isFormFieldValid(formik, "username") &&
+                                        _jsx(SolidMessage, { severity: "error", text: (_c = formik.errors.username) === null || _c === void 0 ? void 0 : _c.toString() })] }) })), _jsxs("div", { children: [_jsxs("div", { className: "flex flex-column gap-2 mt-3", children: [_jsx("label", { className: "solid-auth-input-label", children: "Email" }), _jsx(SolidInput, { id: "email", name: "email", placeholder: "Yourgmail@123.com", onChange: formik.handleChange, value: formik.values.email, "aria-invalid": !!formik.errors.email })] }), isFormFieldValid(formik, "email") &&
+                                    _jsx(SolidMessage, { severity: "error", text: (_d = formik.errors.email) === null || _d === void 0 ? void 0 : _d.toString() })] }), _jsxs("div", { children: [_jsxs("div", { className: "flex flex-column gap-2 mt-3", children: [_jsx("label", { className: "solid-auth-input-label", children: "Password" }), _jsx(SolidPasswordInput, { id: "password", name: "password", value: formik.values.password, onChange: formik.handleChange, toggle: true, className: "w-full", "aria-invalid": !!formik.errors.password })] }), isFormFieldValid(formik, "password") &&
+                                    _jsx(SolidMessage, { severity: "error", text: (_e = formik.errors.password) === null || _e === void 0 ? void 0 : _e.toString() })] }), _jsx("div", { className: "mt-4", children: _jsx(SolidButton, { className: "w-full font-light auth-submit-button", label: "Sign Up", disabled: formik.isSubmitting, loading: formik.isSubmitting, type: "submit" }) })] }));
             } }));
     };
     var PasswordLessSignup = function () {
@@ -268,13 +261,20 @@ var SolidRegister = function () {
                 });
             }, children: function (formik) {
                 var _a, _b, _c, _d;
-                return (_jsxs(Form, { children: [_jsxs("div", { className: "flex flex-column gap-2 mt-3", children: [_jsx("label", { htmlFor: "email", className: "solid-auth-input-label", children: "Username" }), _jsx(InputText, { id: "username", name: "username", placeholder: "username", onChange: formik.handleChange, value: formik.values.username, invalid: !!formik.errors.username }), isFormFieldValid(formik, "username") && _jsx(Message, { className: "text-red-500 text-sm", severity: "error", text: (_b = (_a = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _a === void 0 ? void 0 : _a.username) === null || _b === void 0 ? void 0 : _b.toString() })] }), _jsxs("div", { className: "flex flex-column gap-2 mt-3", children: [_jsx("label", { htmlFor: "email", className: "solid-auth-input-label", children: "Email" }), _jsx(InputText, { id: "email", name: "email", placeholder: "Yourgmail@123.com", onChange: formik.handleChange, value: formik.values.email, invalid: !!formik.errors.email }), isFormFieldValid(formik, "email") && _jsx(Message, { className: "text-red-500 text-sm", severity: "error", text: (_d = (_c = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _c === void 0 ? void 0 : _c.email) === null || _d === void 0 ? void 0 : _d.toString() })] }), _jsx("div", { className: "mt-4", children: _jsx(Button, { className: "w-full font-light auth-submit-button", label: "Sign Up", disabled: formik.isSubmitting, loading: formik.isSubmitting }) })] }));
+                return (_jsxs(Form, { children: [_jsxs("div", { className: "flex flex-column gap-2 mt-3", children: [_jsx("label", { htmlFor: "email", className: "solid-auth-input-label", children: "Username" }), _jsx(SolidInput, { id: "username", name: "username", placeholder: "username", onChange: formik.handleChange, value: formik.values.username, "aria-invalid": !!formik.errors.username }), isFormFieldValid(formik, "username") && _jsx(SolidMessage, { className: "text-red-500 text-sm", severity: "error", text: (_b = (_a = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _a === void 0 ? void 0 : _a.username) === null || _b === void 0 ? void 0 : _b.toString() })] }), _jsxs("div", { className: "flex flex-column gap-2 mt-3", children: [_jsx("label", { htmlFor: "email", className: "solid-auth-input-label", children: "Email" }), _jsx(SolidInput, { id: "email", name: "email", placeholder: "Yourgmail@123.com", onChange: formik.handleChange, value: formik.values.email, "aria-invalid": !!formik.errors.email }), isFormFieldValid(formik, "email") && _jsx(SolidMessage, { className: "text-red-500 text-sm", severity: "error", text: (_d = (_c = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _c === void 0 ? void 0 : _c.email) === null || _d === void 0 ? void 0 : _d.toString() })] }), _jsx("div", { className: "mt-4", children: _jsx(SolidButton, { className: "w-full font-light auth-submit-button", label: "Sign Up", disabled: formik.isSubmitting, loading: formik.isSubmitting, type: "submit" }) })] }));
             } }));
     };
-    var AuthTabs = function (_a) {
+    var RenderAuthModes = function (_a) {
         var passwordBasedAuth = _a.passwordBasedAuth, passwordLessAuth = _a.passwordLessAuth, showNameFieldsForRegistration = _a.showNameFieldsForRegistration;
         if (passwordBasedAuth && passwordLessAuth) {
-            return (_jsxs(TabView, { className: "solid-auth-tabview", activeIndex: activeIndex, onTabChange: function (e) { return setActiveIndex(e.index); }, children: [_jsx(TabPanel, { header: "With Password", children: _jsx(PasswordSignup, { showNameFieldsForRegistration: showNameFieldsForRegistration }) }), _jsx(TabPanel, { header: "Without Password", children: _jsx(PasswordLessSignup, {}) })] }));
+            return (_jsx(AuthTabs, { activeIndex: activeIndex, onChange: setActiveIndex, tabs: [
+                    {
+                        key: "with-password",
+                        label: "With Password",
+                        content: _jsx(PasswordSignup, { showNameFieldsForRegistration: showNameFieldsForRegistration }),
+                    },
+                    { key: "without-password", label: "Without Password", content: _jsx(PasswordLessSignup, {}) },
+                ] }));
         }
         else if (passwordBasedAuth) {
             return _jsx(PasswordSignup, { showNameFieldsForRegistration: showNameFieldsForRegistration });
@@ -286,9 +286,7 @@ var SolidRegister = function () {
             return _jsx("p", { children: "No authentication method available" });
         }
     };
-    return (_jsxs("div", { className: "", children: [_jsxs("div", { className: "auth-container position-relative ".concat(((_a = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _a === void 0 ? void 0 : _a.authPagesLayout) === 'center' ? 'center' : 'side'), children: [showOverlay && (_jsx("div", { className: "absolute top-0 left-0 w-full h-full flex align-items-center justify-content-center register-success-popup", children: _jsxs("div", { className: "inline-flex flex-column align-items-center justify-content-center text-center", children: [_jsx(ProgressSpinner, { style: { width: '50px', height: '50px' }, strokeWidth: "4" }), _jsxs("p", { className: "mt-3 text-lg font-medium text-700", children: ["Registration successful,", _jsx("br", {}), "you will be redirected..."] })] }) })), ((_b = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _b === void 0 ? void 0 : _b.authPagesLayout) === 'center' &&
-                        _jsx("div", { className: "flex justify-content-center", children: _jsx("div", { className: "solid-logo flex align-items-center ".concat((_c = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _c === void 0 ? void 0 : _c.appLogoPosition), children: _jsx(Image, { alt: "solid logo", src: ((_d = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _d === void 0 ? void 0 : _d.appLogo) || SolidLogo, className: "relative", fill: true }) }) }), _jsx("h2", { className: "solid-auth-title ".concat(((_e = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _e === void 0 ? void 0 : _e.authPagesLayout) === 'center' ? 'text-center mt-2 md:mt-4' : 'text-left'), children: "Sign Up" }), _jsx(AuthTabs, { passwordBasedAuth: (_f = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _f === void 0 ? void 0 : _f.passwordBasedAuth, passwordLessAuth: (_g = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _g === void 0 ? void 0 : _g.passwordLessAuth, showNameFieldsForRegistration: (_h = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _h === void 0 ? void 0 : _h.showNameFieldsForRegistration }), ((_j = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _j === void 0 ? void 0 : _j.iamGoogleOAuthEnabled) &&
-                        _jsxs(_Fragment, { children: [_jsx(Divider, { align: "center", children: _jsx("div", { className: "inline-flex align-items-center", children: "or" }) }), _jsx(SocialMediaLogin, {})] })] }), _jsx("div", { className: "text-center mt-3 md:mt-4", children: _jsxs("div", { className: "text-sm text-400 secondary-dark-color", children: ["Already have an account ? ", _jsx(Link, { className: "font-bold", href: "/auth/login", children: "Sign In" })] }) })] }));
+    return (_jsxs("div", { className: "", children: [_jsxs("div", { className: "auth-container position-relative ".concat(((_a = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _a === void 0 ? void 0 : _a.authPagesLayout) === 'center' ? 'center' : 'side'), children: [showOverlay && (_jsx("div", { className: "absolute top-0 left-0 w-full h-full flex align-items-center justify-content-center register-success-popup", children: _jsxs("div", { className: "inline-flex flex-column align-items-center justify-content-center text-center", children: [_jsx(SolidSpinner, { className: "auth-success-spinner" }), _jsxs("p", { className: "mt-3 text-lg font-medium text-700", children: ["Registration successful,", _jsx("br", {}), "you will be redirected..."] })] }) })), _jsx("h2", { className: "solid-auth-title", children: "Create your account" }), _jsx("p", { className: "solid-auth-helper", children: "Enter your details below to create your account" }), _jsx(RenderAuthModes, { passwordBasedAuth: (_b = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _b === void 0 ? void 0 : _b.passwordBasedAuth, passwordLessAuth: (_c = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _c === void 0 ? void 0 : _c.passwordLessAuth, showNameFieldsForRegistration: (_d = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _d === void 0 ? void 0 : _d.showNameFieldsForRegistration }), ((_e = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _e === void 0 ? void 0 : _e.iamGoogleOAuthEnabled) && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "solid-auth-divider flex align-items-center gap-2 my-4", children: [_jsx(SolidDivider, { className: "flex-1" }), _jsx("span", { className: "text-sm text-500", children: "Or continue with" }), _jsx(SolidDivider, { className: "flex-1" })] }), _jsx(SocialMediaLogin, {})] }))] }), _jsx("div", { className: "text-center mt-3 md:mt-4", children: _jsxs("div", { className: "text-sm text-400 secondary-dark-color", children: ["Already have an account? ", _jsx(Link, { className: "font-bold", href: "/auth/login", children: "Sign In" })] }) })] }));
 };
 export default SolidRegister;
 //# sourceMappingURL=SolidRegister.js.map