# CORE-THEME
CORE-THEME 1

## Local setup and commit checks

After cloning the repo, run:

```bash
npm run setup
```

This installs dependencies with `npm ci` and configures Git to use the shared
`.githooks/pre-commit` hook. The hook runs impacted component tests before each
commit.

If dependencies are already installed, run:

```bash
npm run install:hooks
```

`npm run dev`, `npm test`, and `npm run build` also refresh the hook setup
automatically. Git hooks are local machine settings, so CI and branch protection
remain the final enforcement.

## Auth handling for pages (built in)

When a page from this library (e.g. `AdminPage`, `JobsListPage`, …) is opened
**without a logged-in session**, the data APIs reject with a 401 and the page
would otherwise render empty ("no module") with no explanation.

This is handled **inside the package** — every exported page is already wrapped
with an auth guard. A host app does **nothing**: just route to the page, and if
it's opened without a session the user sees a clear *"You haven't logged into
this session. Please login to access the data."* screen with a **Login** button.

```jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { AdminPage } from '@realtek/core-theme';
import '@realtek/core-theme/style.css';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* opened without login → shows the "not logged in" screen automatically */}
        <Route path="/admin" element={<AdminPage />} />
      </Routes>
    </BrowserRouter>
  );
}
```

### Guarding your own pages (optional)

The same guard is exported for any custom page the host app builds:

```jsx
import { AuthGuard, withAuthGuard } from '@realtek/core-theme';

// wrap inline…
<AuthGuard><MyPage /></AuthGuard>

// …or bake it into your own component, like the library does:
const MyGuardedPage = withAuthGuard(MyPage);
```

### Customizing the screen (`AuthGuard` / `withAuthGuard` props, all optional)

| Prop         | Default                                                              | Purpose                                            |
| ------------ | ------------------------------------------------------------------- | -------------------------------------------------- |
| `title`      | `"You're not logged in"`                                            | Heading on the error screen.                       |
| `message`    | `"You haven't logged into this session. Please login to access the data."` | Sub-text.                                  |
| `loginPath`  | `"/login"`                                                          | Where the Login button sends the user.             |
| `loginLabel` | `"Go to Login"`                                                     | Login button text.                                 |
| `onLogin`    | —                                                                   | Custom handler for the Login button (overrides `loginPath`). |
| `fallback`   | —                                                                   | Render your own screen instead of the default one. |

The guard re-checks the session live on login, logout, tab focus and
cross-tab `storage` changes, so it reveals/hides content without a reload.