+ {/* Left accent bar */}
+
+
+ {/* Icon */}
+
+ );
+};
diff --git a/src/components/NoopButton.tsx b/src/components/NoopButton.tsx
deleted file mode 100644
index 4bee846..0000000
--- a/src/components/NoopButton.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { ButtonHTMLAttributes } from 'react';
-import { useNoop } from '../hooks';
-
-export type NoopButtonProps = ButtonHTMLAttributesNo user data available.
; + } + + const isSuccess = toast.type === 'success'; + + return ( +
+ {/* TOAST POPUP (success + error) */}
+ {toast.open && (
+
+ );
+};
\ No newline at end of file
diff --git a/src/components/RequirePermissions.tsx b/src/components/RequirePermissions.tsx
new file mode 100644
index 0000000..2bb7c43
--- /dev/null
+++ b/src/components/RequirePermissions.tsx
@@ -0,0 +1,42 @@
+// src/components/auth/RequirePermissions.tsx
+import React from 'react';
+import { Navigate } from 'react-router'; // or useNavigate()
+import { useCan, useHasRole } from '../hooks/useAbility'; // your hooks
+
+interface Props {
+ /** list of permissions; *every* one must be present */
+ fallbackpermessions?: string[];
+ /** at least one of these must be present (optional) */
+ anyPermessions?: string[];
+ /** role(s) that always bypass the check (optional) */
+ fallbackRoles: string[];
+ /** where to redirect ("/dashboard" by default) */
+ redirectTo?: string;
+ children: React.ReactNode;
+}
+
+export const RequirePermissions: React.FC
+
+ )}
+
+
+ {isSuccess ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ {toast.title}
+
+ {toast.message && (
+ {toast.message}
+ )}
+
+
+
+
+ {/* Header */}
+
+
+
+
+ {/* Content */}
+
+
+
+
+
+ {!isEditing ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ {avatarInitial}
+
+
+ {/* Avatar pen (future) */}
+
+
+
+ My Profile
+Personal details
+
+
+
+
+
+ {isEditing && (
+
+ )}
+
+
+ setName(e.target.value)}
+ className={`w-full rounded-lg border px-3 py-2 text-sm outline-none ${
+ isEditing
+ ? 'border-gray-300 bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-100'
+ : 'border-gray-200 bg-gray-50 text-gray-700'
+ }`}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
,
+ document.body
+ );
+};
diff --git a/src/components/actions/InputField.tsx b/src/components/actions/InputField.tsx
new file mode 100644
index 0000000..d91d7dc
--- /dev/null
+++ b/src/components/actions/InputField.tsx
@@ -0,0 +1,46 @@
+// src/components/actions/InputField.tsx
+import * as React from "react";
+import { useT } from "@ciscode/ui-translate-core";
+import { InputFieldProps } from "../../models/Type";
+
+/**
+ * InputField:
+ * - Renders a label + input combination
+ * - Uses translation keys for both `label` and `placeholder`
+ * - Automatically flips text alignment in RTL
+ */
+export const InputField: React.FC
+
+ + {t('sessionExpired.title')} +
+ ++ {t('sessionExpired.message')} +
+ +
+
+
+
+ {label && (
+
+ )}
+ onChange?.(e.target.value)}
+ className={`
+ px-4 py-4 mt-3.5 text-sm font-light rounded-lg border border-solid w-full
+ ltr:text-left rtl:text-right
+ ${color}
+ `}
+ />
+
+ );
+};
diff --git a/src/components/actions/SocialButton.tsx b/src/components/actions/SocialButton.tsx
new file mode 100644
index 0000000..8e7c118
--- /dev/null
+++ b/src/components/actions/SocialButton.tsx
@@ -0,0 +1,24 @@
+// src/components/actions/SocialButton.tsx
+import * as React from "react";
+import { useT } from "@ciscode/ui-translate-core";
+import { SocialButtonProps } from "../../models/Type";
+
+export const SocialButton: React.FC
+ 
+ {label && (
+
+ );
+};
diff --git a/src/components/index.ts b/src/components/index.ts
deleted file mode 100644
index 52f8fa8..0000000
--- a/src/components/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// Example placeholder export — replace with real components later.
-export const __components_placeholder = true;
-
-export * from './NoopButton';
diff --git a/src/context/AuthConfigContext.ts b/src/context/AuthConfigContext.ts
new file mode 100644
index 0000000..38cf6ae
--- /dev/null
+++ b/src/context/AuthConfigContext.ts
@@ -0,0 +1,20 @@
+//src/contexts/AuthConfigContext.ts
+import React from "react";
+import { AuthConfigProps } from "../models/AuthConfig";
+
+/**
+ * The shape of your config context. We'll store the entire AuthConfig
+ * so that anywhere in your library can read it.
+ */
+export const AuthConfigContext = React.createContext
+ {t(label)}
+
+ )}
+
+ Finishing Google sign-in…
+
+ );
+};
\ No newline at end of file
diff --git a/src/pages/auth/SignInPage.tsx b/src/pages/auth/SignInPage.tsx
new file mode 100644
index 0000000..c4ab7d7
--- /dev/null
+++ b/src/pages/auth/SignInPage.tsx
@@ -0,0 +1,278 @@
+import React, { useState } from "react";
+import { InputField } from "../../components/actions/InputField";
+import { SocialButton } from "../../components/actions/SocialButton";
+import googleIcon from "../../assets/icons/google-icon-svgrepo-com.svg";
+import microsoftIcon from "../../assets/icons/microsoft-svgrepo-com.svg";
+import { toTailwindColorClasses } from "../../utils/colorHelpers";
+import { useAuthConfig } from "../../context/AuthConfigContext";
+import { useAuthState } from "../../context/AuthStateContext";
+import { InlineError } from "../../components/InlineError";
+import { AuthConfigProps } from "../../models/AuthConfig";
+import { useT } from "@ciscode/ui-translate-core";
+import { useNavigate, useLocation } from "react-router";
+
+export const SignInPage: React.FC
+
+ );
+};
\ No newline at end of file
diff --git a/src/pages/auth/SignUpPage.tsx b/src/pages/auth/SignUpPage.tsx
new file mode 100644
index 0000000..06be3ff
--- /dev/null
+++ b/src/pages/auth/SignUpPage.tsx
@@ -0,0 +1,320 @@
+import React, { useState } from "react";
+import { InputField } from "../../components/actions/InputField";
+import { SocialButton } from "../../components/actions/SocialButton";
+import googleIcon from "../../assets/icons/google-icon-svgrepo-com.svg";
+import microsoftIcon from "../../assets/icons/microsoft-svgrepo-com.svg";
+import { toTailwindColorClasses } from "../../utils/colorHelpers";
+import { useAuthConfig } from "../../context/AuthConfigContext";
+import { useAuthState } from "../../context/AuthStateContext";
+import { InlineError } from "../../components/InlineError";
+import { useT } from "@ciscode/ui-translate-core";
+import { useNavigate, useLocation } from "react-router";
+
+export const SignUpPage: React.FC = () => {
+ const t = useT("authLib");
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ const {
+ brandName = t("brandName", { defaultValue: "MyBrand" }),
+ colors = { bg: "bg-sky-500", text: "text-white", border: "border-sky-500" },
+ logoUrl,
+ oauthProviders = [],
+ illustrationUrl = t("community.illustrationUrl", {
+ defaultValue:
+ "https://cdn.builder.io/api/v1/image/assets/TEMP/35ba84b8335fda2819c3a14ea3d00321a0fd0e79e571caa31108468010868ca5?placeholderIfAbsent=true&apiKey=a460e9a46e514356ac1106eada03046c",
+ }),
+ communityContent = {
+ title: t("community.title"),
+ description: t("community.description"),
+ },
+ baseUrl, // IMPORTANT: used for OAuth redirect (same as SignIn)
+ } = useAuthConfig();
+
+ const { login, api } = useAuthState();
+
+ const [name, setName] = useState("");
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+ const [pending, setPending] = useState(false);
+ const [error, setError] = useState
+ {/* Left Illustration Panel */}
+
+
+
+
+ {/* Right Form Panel */}
+
+ {logoUrl ? (
+
+
+ 
+
+ ) : (
+ {brandName}
+{brandName}
+ )} +
+
+ {communityContent.title}
++ {communityContent.description} +
+
+
+
+ 
+
+
+
+
+ {/* Logo for small screens (hidden MD+) */}
+
+
+ {error &&
+ {logoUrl ? (
+
+ ) : (
+
+
+ {/* Welcome */}
+ {brandName}
+ )} +
+
+
+ {/* Sign-up prompt */}
+ + {t("SignInPage.welcome")}{" "} + + {brandName} + +
++ {t("SignInPage.signIn")} +
+
+ {t("SignInPage.noAccount")}
+
+ +
+ + +
+
+ );
+};
\ No newline at end of file
diff --git a/src/providers/AuthProvider.tsx b/src/providers/AuthProvider.tsx
new file mode 100644
index 0000000..426fdb3
--- /dev/null
+++ b/src/providers/AuthProvider.tsx
@@ -0,0 +1,217 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import axios from 'axios';
+
+import { AuthConfigContext } from '../context/AuthConfigContext';
+import { AuthStateCtx, useAuthState } from '../context/AuthStateContext';
+
+import type { AuthConfigProps } from '../models/AuthConfig';
+import type { UserProfile } from '../models/User';
+
+import { decodeToken } from '../utils/jwtHelpers';
+import { attachAuthInterceptor, resetSessionFlag } from '../utils/attachAuthInterceptor';
+import { SessionExpiredModal } from '../components/SessionExpiredModal';
+import { SignInPage } from '../pages/auth/SignInPage';
+import { SignUpPage } from '../pages/auth/SignUpPage';
+import { Routes, Route, Navigate, useLocation, useNavigate } from "react-router";
+import { GoogleCallbackPage } from "../pages/auth/GoogleCallbackPage";
+
+interface Props {
+ config: AuthConfigProps;
+ children: React.ReactNode;
+}
+
+/* ---------- tiny in-file route guard ----------------------- */
+const RequireAuth: React.FC<{ children: JSX.Element }> = ({ children }) => {
+ const { isAuthenticated } = useAuthState();
+ const location = useLocation();
+ return isAuthenticated
+ ? children
+ :
+ {/* Left Illustration Panel */}
+
+
+
+
+ {/* Right Form Panel */}
+
+ {logoUrl ? (
+
+
+
+
+ ) : (
+ + {brandName} +
+{brandName}
+ )} +
+
+ + {communityContent.title} +
++ {communityContent.description} +
+
+
+
+
+
+
+
+
+ {/* Logo for small screens */}
+
+
+ {error &&
+ {logoUrl ? (
+
+ ) : (
+
+
+ {/* Title / subtitle */}
+ {brandName}
+ )} +
+
+
+ {/* Sign-in prompt */}
+ + {t("SignUpPage.welcome", { defaultValue: "Join" })}{" "} + + {brandName} + +
++ {t("SignUpPage.signUp", { defaultValue: "Sign up" })} +
+
+ {t("SignUpPage.alreadyHaveAccount", {
+ defaultValue: "Already have an account?",
+ })}
+
+ +
+ + +