+
+
+
+
+
+
+
+ Portal access
+
+
+
+ {title}
+
+
+ Sign in to the private workspace used for booking intake, guest coordination, and billing
+ follow-through.
+
-
-
- {registeredOrg ? (
-
-
-
-
-
- Your {registeredRole || 'customer'} account was created for {registeredOrg}.
-
- {registeredTenants.length ? (
-
-
Linked tenants
-
- {registeredTenants.map((tenantName) => (
-
- {tenantName}
-
- ))}
-
-
- ) : (
-
- No linked tenant is shown for that organization yet.
-
- )}
-
- Admin and Super Admin accounts are provisioned internally, not through self-signup.
-
+
+ {ACCESS_CHIPS.map((chip) => (
+
+ {chip}
+
+ ))}
+
+
+
+
+
+
+ Operator view
+
+
Multi-tenant workspace
+
+
+
+ Service posture
+
+
Calm, selective, precise
+
+
+
+ Execution model
+
+
Request to reservation to billing
+
+
+
+
+
+
+
+ Demo account access
+
+
+
+ {DEMO_ACCOUNTS.map((account) => {
+ const isSelected =
+ initialValues.email === account.email && initialValues.password === account.password;
+
+ return (
+
+ );
+ })}
+
+
+
+ The public experience stays polished and restrained. Operational depth appears only where it
+ belongs: inside the authenticated workspace.
+
+
+
+
+
+
+ {registeredMessage}
+
+
+
+
+
Member sign in
+
Welcome back
+
+ Enter your credentials to open the Gracey workspace.
+
+
+ {ACCESS_CHIPS.map((chip) => (
+
+ {chip}
+
+ ))}
+
+
+
+
+
+
+
+
+
© 2026 {title}. © All rights reserved
+
+
+ Privacy Policy
+
+
+ Terms of Use
+
+
+
+
-
-
-
© 2026 {title}. © All rights reserved
-
- Privacy Policy
-
-
-
+
+
+
+
);
}
diff --git a/frontend/src/pages/register.tsx b/frontend/src/pages/register.tsx
index 68ba80f..a955a16 100644
--- a/frontend/src/pages/register.tsx
+++ b/frontend/src/pages/register.tsx
@@ -1,20 +1,22 @@
import React from 'react';
import type { ReactElement } from 'react';
-import { ToastContainer, toast } from 'react-toastify';
import Head from 'next/head';
-import BaseButton from '../components/BaseButton';
-import CardBox from '../components/CardBox';
-import SectionFullScreen from '../components/SectionFullScreen';
-import LayoutGuest from '../layouts/Guest';
+import Link from 'next/link';
import { Field, Form, Formik } from 'formik';
-import FormField from '../components/FormField';
-import BaseDivider from '../components/BaseDivider';
-import BaseButtons from '../components/BaseButtons';
-import { useRouter } from 'next/router';
-import { getPageTitle } from '../config';
+import { ToastContainer, toast } from 'react-toastify';
import Select from 'react-select';
import axios from 'axios';
-import ConnectedEntityNotice from '../components/ConnectedEntityNotice';
+
+import BaseButton from '../components/BaseButton';
+import BaseButtons from '../components/BaseButtons';
+import BaseDivider from '../components/BaseDivider';
+import CardBox from '../components/CardBox';
+import FormField from '../components/FormField';
+import SectionFullScreen from '../components/SectionFullScreen';
+import LayoutGuest from '../layouts/Guest';
+import { getPageTitle } from '../config';
+import { useAppSelector } from '../stores/hooks';
+import { useRouter } from 'next/router';
type PublicTenantOption = {
id: string;
@@ -40,11 +42,23 @@ type OrganizationSelectOption = {
organization: PublicOrganizationOption;
};
+type RegisterValues = {
+ email: string;
+ password: string;
+ confirm: string;
+};
+
+const TITLE = 'Gracey Corporate Stay Portal';
+const REGISTER_CHIPS = ['Customer self-signup', 'Organization-linked access', 'Internal admin provisioning'];
+
+const AUTH_INPUT_CLASS = '!bg-white !text-stone-900 placeholder:!text-stone-400 dark:!bg-white dark:!text-stone-900 dark:placeholder:!text-stone-400';
+
export default function Register() {
const [loading, setLoading] = React.useState(false);
const [organizations, setOrganizations] = React.useState
([]);
const [selectedOrganization, setSelectedOrganization] = React.useState(null);
const router = useRouter();
+ const textColor = useAppSelector((state) => state.style.linkColor);
const notify = (type, msg) => toast(msg, { type, position: 'bottom-center' });
React.useEffect(() => {
@@ -69,7 +83,7 @@ export default function Register() {
const selectedOrganizationRecord = selectedOrganization?.organization || null;
const selectedTenants = selectedOrganizationRecord?.linkedTenants || [];
- const handleSubmit = async (value) => {
+ const handleSubmit = async (value: RegisterValues) => {
if (!selectedOrganization) {
notify('error', 'Please select your organization before creating the account.');
return;
@@ -114,87 +128,216 @@ export default function Register() {
{getPageTitle('Register')}
-
-
- handleSubmit(values)}
- >
-