mirror of
https://github.com/Tria-plc/emaui.git
synced 2026-08-26 19:12:50 +00:00
Refactor imports and improve LoginPage validation logic
This commit is contained in:
Estifo77
@@ -15,6 +15,7 @@ import {
|
||||
Select,
|
||||
NumberInput,
|
||||
Textarea,
|
||||
Table,
|
||||
} from '@mantine/core';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
@@ -26,7 +27,7 @@ import {
|
||||
IconSend,
|
||||
IconGavel,
|
||||
} from '@tabler/icons-react';
|
||||
import { notify } from '@ema-platform/ui';
|
||||
import { AdvancedColumn, ModalFooter, notify } from '@ema-platform/ui';
|
||||
import { extractErrorMessage } from '@ema-platform/api';
|
||||
import { useGetCertificationsQuery } from '../../certification/api/certification-api';
|
||||
import {
|
||||
|
||||
@@ -1,79 +1,91 @@
|
||||
import { createBrowserRouter, Navigate } from 'react-router-dom';
|
||||
import { I18nextProvider } from 'react-i18next';
|
||||
import { i18n } from './i18n/config';
|
||||
import { PortalLayout } from './layouts/PortalLayout';
|
||||
import { ProtectedRoute } from './components/ProtectedRoute';
|
||||
import { createBrowserRouter, Navigate } from "react-router-dom";
|
||||
import { I18nextProvider } from "react-i18next";
|
||||
import { i18n } from "./i18n/config";
|
||||
import { PortalLayout } from "./layouts/PortalLayout";
|
||||
import { ProtectedRoute } from "./components/ProtectedRoute";
|
||||
|
||||
// Auth (standalone pages, no portal chrome)
|
||||
import { LoginPage, SignupPage, OTPVerificationPage, ForgotPasswordPage, SetPasswordPage } from '@ema-platform/auth';
|
||||
import {
|
||||
LoginPage,
|
||||
SignupPage,
|
||||
OTPVerificationPage,
|
||||
ForgotPasswordPage,
|
||||
SetPasswordPage,
|
||||
} from "@ema-platform/auth";
|
||||
|
||||
// Portal feature pages
|
||||
import { DashboardPage } from './features/dashboard/pages/DashboardPage';
|
||||
import { RequireOperations } from './features/onboarding/components/RequireOperations';
|
||||
import { OperationsOnboardingPage } from './features/onboarding/pages/OperationsOnboardingPage';
|
||||
import { ProfilePage } from './features/profile/pages/ProfilePage';
|
||||
import { SupportPage } from './features/support/pages/SupportPage';
|
||||
import { SeafarerRegistrationPage } from './features/seafarer/pages/SeafarerRegistrationPage';
|
||||
import { MySeaRecordsPage } from './features/seafarer/pages/MySeaRecordsPage';
|
||||
import { VerifyCertificatePage } from './features/verify/pages/VerifyCertificatePage';
|
||||
import { ExamsPage } from './features/exams/pages/ExamsPage';
|
||||
import { DashboardPage } from "./features/dashboard/pages/DashboardPage";
|
||||
import { RequireOperations } from "./features/onboarding/components/RequireOperations";
|
||||
import { OperationsOnboardingPage } from "./features/onboarding/pages/OperationsOnboardingPage";
|
||||
import { ProfilePage } from "./features/profile/pages/ProfilePage";
|
||||
import { SupportPage } from "./features/support/pages/SupportPage";
|
||||
import { SeafarerRegistrationPage } from "./features/seafarer/pages/SeafarerRegistrationPage";
|
||||
import { MySeaRecordsPage } from "./features/seafarer/pages/MySeaRecordsPage";
|
||||
import { VerifyCertificatePage } from "./features/verify/pages/VerifyCertificatePage";
|
||||
import { ExamsPage } from "./features/exams/pages/ExamsPage";
|
||||
|
||||
// Phase 1 pages
|
||||
import { DocumentVaultPage } from './features/documents/pages/DocumentVaultPage';
|
||||
import { SeamanBookPage } from './features/seaman-book/pages/SeamanBookPage';
|
||||
import { SeamanBookApplicationPage } from './features/seaman-book/pages/SeamanBookApplicationPage';
|
||||
import { NotificationsPage } from './features/notifications/pages/NotificationsPage';
|
||||
import { DocumentVaultPage } from "./features/documents/pages/DocumentVaultPage";
|
||||
import { SeamanBookPage } from "./features/seaman-book/pages/SeamanBookPage";
|
||||
import { SeamanBookApplicationPage } from "./features/seaman-book/pages/SeamanBookApplicationPage";
|
||||
import { NotificationsPage } from "./features/notifications/pages/NotificationsPage";
|
||||
|
||||
// Phase 2 — CoC / CoP
|
||||
import { CertificatesPage } from './features/certificates/pages/CertificatesPage';
|
||||
import { CoCApplicationPage } from './features/certificates/pages/CoCApplicationPage';
|
||||
import { CertificatesPage } from "./features/certificates/pages/CertificatesPage";
|
||||
import { CoCApplicationPage } from "./features/certificates/pages/CoCApplicationPage";
|
||||
|
||||
// Phase 3 — Endorsement
|
||||
import { EndorsementPage } from './features/endorsement/pages/EndorsementPage';
|
||||
import { VesselRegistrationPage } from './features/vessel-registration/pages/VesselRegistrationPage';
|
||||
import { OwnershipTransferPage } from './features/vessel-registration/pages/OwnershipTransferPage';
|
||||
import { MyApplicationsPage } from './features/licensing/pages/MyApplicationsPage';
|
||||
import { PaymentCheckPage } from './features/payments/pages/PaymentCheckPage';
|
||||
import { PaymentSuccessPage } from './features/payments/pages/PaymentSuccessPage';
|
||||
import { PaymentFailurePage } from './features/payments/pages/PaymentFailurePage';
|
||||
import { LicenseApplicationPage } from './features/licensing/pages/LicenseApplicationPage';
|
||||
import { ApplicationRedirectPage } from './features/licensing/pages/ApplicationRedirectPage';
|
||||
import { WaiverPage } from './features/waiver/pages/WaiverPage';
|
||||
|
||||
import { EndorsementPage } from "./features/endorsement/pages/EndorsementPage";
|
||||
import { VesselRegistrationPage } from "./features/vessel-registration/pages/VesselRegistrationPage";
|
||||
import { OwnershipTransferPage } from "./features/vessel-registration/pages/OwnershipTransferPage";
|
||||
import { MyApplicationsPage } from "./features/licensing/pages/MyApplicationsPage";
|
||||
import { PaymentCheckPage } from "./features/payments/pages/PaymentCheckPage";
|
||||
import { PaymentSuccessPage } from "./features/payments/pages/PaymentSuccessPage";
|
||||
import { PaymentFailurePage } from "./features/payments/pages/PaymentFailurePage";
|
||||
import { LicenseApplicationPage } from "./features/licensing/pages/LicenseApplicationPage";
|
||||
import { ApplicationRedirectPage } from "./features/licensing/pages/ApplicationRedirectPage";
|
||||
import { WaiverPage } from "./features/waiver/pages/WaiverPage";
|
||||
|
||||
import { VesselRegistrationStatusPage } from "./features/vessel-registration/pages/VesselRegistrationStatusPage";
|
||||
|
||||
|
||||
export const router = createBrowserRouter([
|
||||
// Public auth pages
|
||||
{ path: '/login', element: <LoginPage /> },
|
||||
{ path: '/signup', element: <SignupPage /> },
|
||||
{ path: "/login", element: <LoginPage /> },
|
||||
{ path: "/signup", element: <SignupPage /> },
|
||||
|
||||
// Public certificate verification — the target of every printed QR code.
|
||||
// No auth: a verifier scanning a certificate has no portal account.
|
||||
{ path: '/verify', element: <VerifyCertificatePage /> },
|
||||
{ path: '/verify/:code', element: <VerifyCertificatePage /> },
|
||||
{ path: "/verify", element: <VerifyCertificatePage /> },
|
||||
{ path: "/verify/:code", element: <VerifyCertificatePage /> },
|
||||
|
||||
// Completes the forgot-password flow; the reset message links here. The
|
||||
// IAM package generates `/reset-password` links, `/set-password` is the
|
||||
// first-time-credential variant — one page serves both.
|
||||
{ path: '/set-password', element: <SetPasswordPage /> },
|
||||
{ path: '/reset-password', element: <SetPasswordPage /> },
|
||||
{ path: "/set-password", element: <SetPasswordPage /> },
|
||||
{ path: "/reset-password", element: <SetPasswordPage /> },
|
||||
|
||||
// Protected auth pages
|
||||
{
|
||||
element: <ProtectedRoute><OTPVerificationPage /></ProtectedRoute>,
|
||||
path: '/otp-verify',
|
||||
element: (
|
||||
<ProtectedRoute>
|
||||
<OTPVerificationPage />
|
||||
</ProtectedRoute>
|
||||
),
|
||||
path: "/otp-verify",
|
||||
},
|
||||
{
|
||||
element: <ProtectedRoute><ForgotPasswordPage /></ProtectedRoute>,
|
||||
path: '/forgot-password',
|
||||
element: (
|
||||
<ProtectedRoute>
|
||||
<ForgotPasswordPage />
|
||||
</ProtectedRoute>
|
||||
),
|
||||
path: "/forgot-password",
|
||||
},
|
||||
// The two-step setup wizard is gone. Signing up lands on the dashboard, and
|
||||
// profile details are collected where they are actually needed: on /profile,
|
||||
// via the dashboard nudge, or inline in an application flow. The path stays
|
||||
// as a redirect so existing bookmarks and emailed links do not 404.
|
||||
{ path: '/profile-setup', element: <Navigate to="/profile" replace /> },
|
||||
{ path: "/profile-setup", element: <Navigate to="/profile" replace /> },
|
||||
|
||||
// Portal — protected.
|
||||
{
|
||||
@@ -89,83 +101,159 @@ export const router = createBrowserRouter([
|
||||
</ProtectedRoute>
|
||||
),
|
||||
children: [
|
||||
{ path: '/', element: <Navigate to="/dashboard" replace /> },
|
||||
{ path: '/dashboard', element: <DashboardPage /> },
|
||||
{ path: '/onboarding/operations', element: <OperationsOnboardingPage /> },
|
||||
{ path: "/", element: <Navigate to="/dashboard" replace /> },
|
||||
{ path: "/dashboard", element: <DashboardPage /> },
|
||||
{ path: "/onboarding/operations", element: <OperationsOnboardingPage /> },
|
||||
|
||||
// Config-driven licensing: one set of pages serves every licence type.
|
||||
{ path: '/licensing/applications', element: <MyApplicationsPage /> },
|
||||
{ path: "/licensing/applications", element: <MyApplicationsPage /> },
|
||||
|
||||
// Telebirr returns the applicant to these.
|
||||
{ path: '/payments/check', element: <PaymentCheckPage /> },
|
||||
{ path: '/payments/success', element: <PaymentSuccessPage /> },
|
||||
{ path: '/payments/failure', element: <PaymentFailurePage /> },
|
||||
{ path: '/licensing/:typeCode/apply', element: <LicenseApplicationPage /> },
|
||||
{ path: "/payments/check", element: <PaymentCheckPage /> },
|
||||
{ path: "/payments/success", element: <PaymentSuccessPage /> },
|
||||
{ path: "/payments/failure", element: <PaymentFailurePage /> },
|
||||
{
|
||||
path: '/licensing/:typeCode/applications/:applicationId',
|
||||
path: "/licensing/:typeCode/apply",
|
||||
element: <LicenseApplicationPage />,
|
||||
},
|
||||
{
|
||||
path: "/licensing/:typeCode/applications/:applicationId",
|
||||
element: <LicenseApplicationPage />,
|
||||
},
|
||||
// Notification / email deep links arrive as /applications/<id>; resolve the
|
||||
// licence type and forward to the canonical route.
|
||||
{ path: '/applications/:applicationId', element: <ApplicationRedirectPage /> },
|
||||
{
|
||||
path: "/applications/:applicationId",
|
||||
element: <ApplicationRedirectPage />,
|
||||
},
|
||||
|
||||
// Seafarer
|
||||
{ path: '/seafarer-registration', element: <SeafarerRegistrationPage /> },
|
||||
{ path: '/seafarer/records', element: <MySeaRecordsPage /> },
|
||||
{ path: '/exams', element: <ExamsPage /> },
|
||||
{ path: "/seafarer-registration", element: <SeafarerRegistrationPage /> },
|
||||
{ path: "/seafarer/records", element: <MySeaRecordsPage /> },
|
||||
{ path: "/exams", element: <ExamsPage /> },
|
||||
// The public-facing registry was a hardcoded mock and does not belong in
|
||||
// the applicant portal; officers browse seafarers in the backoffice.
|
||||
{ path: '/seafarer-registry', element: <Navigate to="/seafarer-registration" replace /> },
|
||||
{ path: '/seafarer-registry/:id', element: <Navigate to="/seafarer-registration" replace /> },
|
||||
{
|
||||
path: "/seafarer-registry",
|
||||
element: <Navigate to="/seafarer-registration" replace />,
|
||||
},
|
||||
{
|
||||
path: "/seafarer-registry/:id",
|
||||
element: <Navigate to="/seafarer-registration" replace />,
|
||||
},
|
||||
|
||||
// Phase 1
|
||||
{ path: '/documents', element: <DocumentVaultPage /> },
|
||||
{ path: '/seaman-book', element: <SeamanBookPage /> },
|
||||
{ path: '/seaman-book/apply', element: <SeamanBookApplicationPage /> },
|
||||
{ path: '/notifications', element: <NotificationsPage /> },
|
||||
{ path: "/documents", element: <DocumentVaultPage /> },
|
||||
{ path: "/seaman-book", element: <SeamanBookPage /> },
|
||||
{ path: "/seaman-book/apply", element: <SeamanBookApplicationPage /> },
|
||||
{ path: "/notifications", element: <NotificationsPage /> },
|
||||
|
||||
// Phase 2 — CoC / CoP
|
||||
{ path: '/certificates', element: <CertificatesPage /> },
|
||||
{ path: '/certificates/apply', element: <CoCApplicationPage /> },
|
||||
{ path: "/certificates", element: <CertificatesPage /> },
|
||||
{ path: "/certificates/apply", element: <CoCApplicationPage /> },
|
||||
|
||||
// Phase 3 — Endorsement
|
||||
{ path: '/endorsements', element: <EndorsementPage /> },
|
||||
{ path: '/vessel-registration', element: <VesselRegistrationPage /> },
|
||||
{ path: "/endorsements", element: <EndorsementPage /> },
|
||||
{ path: "/vessel-registration", element: <VesselRegistrationPage /> },
|
||||
// The registration wizard is the config-driven licensing flow; the old
|
||||
// standalone wizard posted to endpoints that never existed.
|
||||
{ path: '/vessel-registration/apply', element: <Navigate to="/licensing/VESSEL_REGISTRATION/apply" replace /> },
|
||||
{ path: '/vessel-registration-dashboard', element: <Navigate to="/vessel-registration" replace /> },
|
||||
{ path: '/vessel-registration/transfer', element: <OwnershipTransferPage /> },
|
||||
{
|
||||
path: "/vessel-registration/apply",
|
||||
element: <Navigate to="/licensing/VESSEL_REGISTRATION/apply" replace />,
|
||||
},
|
||||
{
|
||||
path: "/vessel-registration-dashboard",
|
||||
element: <Navigate to="/vessel-registration" replace />,
|
||||
},
|
||||
{
|
||||
path: "/vessel-registration/transfer",
|
||||
element: <OwnershipTransferPage />,
|
||||
},
|
||||
// Legacy per-licence-type URLs. Each once had its own hand-written page
|
||||
// that posted to a `/logistics-licenses/*` endpoint the API never had,
|
||||
// and dropped every uploaded document on the floor. They are kept as
|
||||
// redirects so old bookmarks land somewhere real; the config-driven
|
||||
// wizard below serves every licence type from one place.
|
||||
{ path: '/logistics-dashboard', element: <Navigate to="/dashboard" replace /> },
|
||||
{ path: '/freight-forwarder-license', element: <Navigate to="/licensing/applications" replace /> },
|
||||
{ path: '/freight-forwarder-license/apply', element: <Navigate to="/licensing/FREIGHT_FORWARDER/apply" replace /> },
|
||||
{ path: '/freight-forwarder-license/:id/renew', element: <Navigate to="/licensing/applications" replace /> },
|
||||
{ path: '/shipping-agent-license', element: <Navigate to="/licensing/applications" replace /> },
|
||||
{ path: '/shipping-agent-license/apply', element: <Navigate to="/licensing/SHIPPING_AGENT/apply" replace /> },
|
||||
{ path: '/shipping-agent-license/:id/renew', element: <Navigate to="/licensing/applications" replace /> },
|
||||
{ path: '/combined-license', element: <Navigate to="/licensing/applications" replace /> },
|
||||
{ path: '/combined-license/apply', element: <Navigate to="/licensing/COMBINED_SA_FF/apply" replace /> },
|
||||
{ path: '/combined-license/:id/renew', element: <Navigate to="/licensing/applications" replace /> },
|
||||
{ path: '/joint-investment-license', element: <Navigate to="/licensing/applications" replace /> },
|
||||
{ path: '/joint-investment-license/apply', element: <Navigate to="/licensing/JOINT_INVESTOR/apply" replace /> },
|
||||
{ path: '/joint-investment-license/:id/renew', element: <Navigate to="/licensing/applications" replace /> },
|
||||
{ path: '/mto-license', element: <Navigate to="/licensing/applications" replace /> },
|
||||
{ path: '/mto-license/apply', element: <Navigate to="/licensing/MULTIMODAL_TRANSPORT_OPERATOR/apply" replace /> },
|
||||
{ path: '/mto-license/:id/renew', element: <Navigate to="/licensing/applications" replace /> },
|
||||
{
|
||||
path: "/logistics-dashboard",
|
||||
element: <Navigate to="/dashboard" replace />,
|
||||
},
|
||||
{
|
||||
path: "/freight-forwarder-license",
|
||||
element: <Navigate to="/licensing/applications" replace />,
|
||||
},
|
||||
{
|
||||
path: "/freight-forwarder-license/apply",
|
||||
element: <Navigate to="/licensing/FREIGHT_FORWARDER/apply" replace />,
|
||||
},
|
||||
{
|
||||
path: "/freight-forwarder-license/:id/renew",
|
||||
element: <Navigate to="/licensing/applications" replace />,
|
||||
},
|
||||
{
|
||||
path: "/shipping-agent-license",
|
||||
element: <Navigate to="/licensing/applications" replace />,
|
||||
},
|
||||
{
|
||||
path: "/shipping-agent-license/apply",
|
||||
element: <Navigate to="/licensing/SHIPPING_AGENT/apply" replace />,
|
||||
},
|
||||
{
|
||||
path: "/shipping-agent-license/:id/renew",
|
||||
element: <Navigate to="/licensing/applications" replace />,
|
||||
},
|
||||
{
|
||||
path: "/combined-license",
|
||||
element: <Navigate to="/licensing/applications" replace />,
|
||||
},
|
||||
{
|
||||
path: "/combined-license/apply",
|
||||
element: <Navigate to="/licensing/COMBINED_SA_FF/apply" replace />,
|
||||
},
|
||||
{
|
||||
path: "/combined-license/:id/renew",
|
||||
element: <Navigate to="/licensing/applications" replace />,
|
||||
},
|
||||
{
|
||||
path: "/joint-investment-license",
|
||||
element: <Navigate to="/licensing/applications" replace />,
|
||||
},
|
||||
{
|
||||
path: "/joint-investment-license/apply",
|
||||
element: <Navigate to="/licensing/JOINT_INVESTOR/apply" replace />,
|
||||
},
|
||||
{
|
||||
path: "/joint-investment-license/:id/renew",
|
||||
element: <Navigate to="/licensing/applications" replace />,
|
||||
},
|
||||
{
|
||||
path: "/mto-license",
|
||||
element: <Navigate to="/licensing/applications" replace />,
|
||||
},
|
||||
{
|
||||
path: "/mto-license/apply",
|
||||
element: (
|
||||
<Navigate
|
||||
to="/licensing/MULTIMODAL_TRANSPORT_OPERATOR/apply"
|
||||
replace
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/mto-license/:id/renew",
|
||||
element: <Navigate to="/licensing/applications" replace />,
|
||||
},
|
||||
// Waiver has no backend yet, so it says so rather than pretending.
|
||||
{ path: '/waiver', element: <WaiverPage /> },
|
||||
{ path: '/waiver/apply', element: <Navigate to="/waiver" replace /> },
|
||||
{ path: "/waiver", element: <WaiverPage /> },
|
||||
{ path: "/waiver/apply", element: <Navigate to="/waiver" replace /> },
|
||||
|
||||
// Vessel Registration
|
||||
{ path: '/vessel-registrations', element: <VesselRegistrationPage /> },
|
||||
{ path: '/vessel-registrations/apply', element: <VesselRegistrationApplicationPage /> },
|
||||
{ path: '/vessel-registrations/:id', element: <VesselRegistrationStatusPage /> },
|
||||
|
||||
{ path: "/vessel-registrations", element: <VesselRegistrationPage /> },
|
||||
// { path: '/vessel-registrations/apply', element: <VesselRegistrationPage /> },
|
||||
{
|
||||
path: "/vessel-registrations/:id",
|
||||
element: <VesselRegistrationStatusPage />,
|
||||
},
|
||||
|
||||
// General
|
||||
{ path: "/profile", element: <ProfilePage /> },
|
||||
@@ -175,12 +263,27 @@ export const router = createBrowserRouter([
|
||||
|
||||
// The separate vessel-owner login/portal was mock-only and called auth
|
||||
// endpoints that never existed; vessel owners are ordinary portal users.
|
||||
{ path: '/vessel-owner/login', element: <Navigate to="/login" replace /> },
|
||||
{ path: '/vessel-owner/register', element: <Navigate to="/signup" replace /> },
|
||||
{ path: '/vessel-owner/dashboard', element: <Navigate to="/vessel-registration" replace /> },
|
||||
{ path: '/vessel-owner/registration', element: <Navigate to="/vessel-registration" replace /> },
|
||||
{ path: '/vessel-owner/registration/apply', element: <Navigate to="/licensing/VESSEL_REGISTRATION/apply" replace /> },
|
||||
{ path: '/vessel-owner/registration/transfer', element: <Navigate to="/vessel-registration/transfer" replace /> },
|
||||
{ path: "/vessel-owner/login", element: <Navigate to="/login" replace /> },
|
||||
{
|
||||
path: "/vessel-owner/register",
|
||||
element: <Navigate to="/signup" replace />,
|
||||
},
|
||||
{
|
||||
path: "/vessel-owner/dashboard",
|
||||
element: <Navigate to="/vessel-registration" replace />,
|
||||
},
|
||||
{
|
||||
path: "/vessel-owner/registration",
|
||||
element: <Navigate to="/vessel-registration" replace />,
|
||||
},
|
||||
{
|
||||
path: "/vessel-owner/registration/apply",
|
||||
element: <Navigate to="/licensing/VESSEL_REGISTRATION/apply" replace />,
|
||||
},
|
||||
{
|
||||
path: "/vessel-owner/registration/transfer",
|
||||
element: <Navigate to="/vessel-registration/transfer" replace />,
|
||||
},
|
||||
|
||||
{ path: '*', element: <Navigate to="/" replace /> },
|
||||
{ path: "*", element: <Navigate to="/" replace /> },
|
||||
]);
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { configureStore } from "@reduxjs/toolkit";
|
||||
import { baseApi, configureTokenRefresh } from "@ema-platform/api";
|
||||
import { setToken } from "@ema-platform/auth";
|
||||
import {
|
||||
authReducer,
|
||||
signupReducer,
|
||||
@@ -8,6 +7,7 @@ import {
|
||||
authStorage,
|
||||
refreshAccessToken,
|
||||
logout,
|
||||
setToken,
|
||||
} from "@ema-platform/auth";
|
||||
import type { AuthUser, CurrentProfile } from "@ema-platform/auth";
|
||||
|
||||
|
||||
@@ -1,17 +1,31 @@
|
||||
export { AuthConfigProvider, useAuthConfig } from './lib/AuthConfig';
|
||||
export type { AuthConfigValue } from './lib/AuthConfig';
|
||||
export { AuthShell, BrandMark } from './lib/components/AuthShell';
|
||||
export { ProtectedRoute } from './lib/components/ProtectedRoute';
|
||||
export { AuthBootstrap } from './lib/components/AuthBootstrap';
|
||||
export { LoginPage } from './lib/pages/LoginPage';
|
||||
export { SignupPage } from './lib/pages/SignupPage';
|
||||
export { ForgotPasswordPage } from './lib/pages/ForgotPasswordPage';
|
||||
export { SetPasswordPage } from './lib/pages/SetPasswordPage';
|
||||
export { OTPVerificationPage } from './lib/pages/OTPVerificationPage';
|
||||
export { authReducer, loginSuccess, setUser, setCurrentProfile, clearCurrentProfile, logout, hydrateAuth } from './lib/store/auth.slice';
|
||||
export { signupReducer, setSignupData, setSignupStep, resetSignup } from './lib/store/signup.slice';
|
||||
export { usePermissions } from './lib/hooks/usePermissions';
|
||||
export type { PermissionSet } from './lib/hooks/usePermissions';
|
||||
export { AuthConfigProvider, useAuthConfig } from "./lib/AuthConfig";
|
||||
export type { AuthConfigValue } from "./lib/AuthConfig";
|
||||
export { AuthShell, BrandMark } from "./lib/components/AuthShell";
|
||||
export { ProtectedRoute } from "./lib/components/ProtectedRoute";
|
||||
export { AuthBootstrap } from "./lib/components/AuthBootstrap";
|
||||
export { LoginPage } from "./lib/pages/LoginPage";
|
||||
export { SignupPage } from "./lib/pages/SignupPage";
|
||||
export { ForgotPasswordPage } from "./lib/pages/ForgotPasswordPage";
|
||||
export { SetPasswordPage } from "./lib/pages/SetPasswordPage";
|
||||
export { OTPVerificationPage } from "./lib/pages/OTPVerificationPage";
|
||||
export {
|
||||
authReducer,
|
||||
loginSuccess,
|
||||
setUser,
|
||||
setCurrentProfile,
|
||||
clearCurrentProfile,
|
||||
logout,
|
||||
hydrateAuth,
|
||||
setToken,
|
||||
} from "./lib/store/auth.slice";
|
||||
export {
|
||||
signupReducer,
|
||||
setSignupData,
|
||||
setSignupStep,
|
||||
resetSignup,
|
||||
} from "./lib/store/signup.slice";
|
||||
export { usePermissions } from "./lib/hooks/usePermissions";
|
||||
export type { PermissionSet } from "./lib/hooks/usePermissions";
|
||||
export {
|
||||
useCurrentProfile,
|
||||
useGetMyProfileQuery,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState } from 'react';
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Alert,
|
||||
Anchor,
|
||||
@@ -11,29 +11,56 @@ import {
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
} from '@mantine/core';
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconArrowRight,
|
||||
IconDeviceMobile,
|
||||
IconLock,
|
||||
IconMail,
|
||||
} from '@tabler/icons-react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import { useNavigate, Link } from 'react-router-dom';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { useApiMutation } from '@ema-platform/api';
|
||||
import { notify } from '@ema-platform/ui';
|
||||
import { AuthShell } from '../components/AuthShell';
|
||||
import { loginSuccess, setUser, setCurrentProfile } from '../store/auth.slice';
|
||||
import type { LoginPayload, AuthUser, CurrentProfile } from '../types/auth.types';
|
||||
import { useAuthConfig } from '../AuthConfig';
|
||||
import { authStorage } from '../utils/auth-storage';
|
||||
} from "@tabler/icons-react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import { useNavigate, Link } from "react-router-dom";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { useApiMutation } from "@ema-platform/api";
|
||||
import { notify, useErrorHandler } from "@ema-platform/ui";
|
||||
import { AuthShell } from "../components/AuthShell";
|
||||
import { loginSuccess, setUser, setCurrentProfile } from "../store/auth.slice";
|
||||
import type {
|
||||
LoginPayload,
|
||||
AuthUser,
|
||||
CurrentProfile,
|
||||
} from "../types/auth.types";
|
||||
import { useAuthConfig } from "../AuthConfig";
|
||||
import { authStorage } from "../utils/auth-storage";
|
||||
const emailOrPhone = z
|
||||
.string()
|
||||
.trim()
|
||||
.transform((value) => {
|
||||
// Convert 09xxxxxxxx -> +2519xxxxxxxx
|
||||
if (/^09\d{8}$/.test(value)) {
|
||||
return `+251${value.substring(1)}`;
|
||||
}
|
||||
|
||||
return value;
|
||||
})
|
||||
.refine(
|
||||
(value) => {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
const phoneRegex = /^\+2519\d{8}$/;
|
||||
|
||||
return emailRegex.test(value) || phoneRegex.test(value);
|
||||
},
|
||||
{
|
||||
message: "Enter a valid email or phone number (+2519xxxxxxxx)",
|
||||
},
|
||||
);
|
||||
const schema = z.object({
|
||||
email: z.string().email({ message: 'Enter a valid email' }),
|
||||
password: z.string().min(5, { message: 'Password must be at least 6 characters' }),
|
||||
email: emailOrPhone,
|
||||
password: z
|
||||
.string()
|
||||
.min(8, { message: "Password must be at least 8 characters" }),
|
||||
});
|
||||
|
||||
type FormValues = z.infer<typeof schema>;
|
||||
@@ -46,9 +73,7 @@ export function LoginPage() {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [rememberMe, setRememberMe] = useState(true);
|
||||
const [serverError, setServerError] = useState<string | null>(null);
|
||||
// MFA second step: set once /auth/login answers `mfaRequired` (US-IAM-006).
|
||||
const [mfaEmail, setMfaEmail] = useState<string | null>(null);
|
||||
const [mfaOtp, setMfaOtp] = useState('');
|
||||
const { handleError } = useErrorHandler();
|
||||
const [loginTrigger] = useApiMutation<LoginPayload>();
|
||||
const [meTrigger] = useApiMutation<AuthUser>();
|
||||
const [profileTrigger] = useApiMutation<{ profile: CurrentProfile | null }>();
|
||||
@@ -65,57 +90,15 @@ export function LoginPage() {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const data = await loginTrigger({
|
||||
url: '/auth/login',
|
||||
method: 'POST',
|
||||
url: "/auth/login",
|
||||
method: "POST",
|
||||
body: values,
|
||||
}).unwrap();
|
||||
|
||||
// MFA-enabled accounts get no tokens yet — an OTP has been sent, and
|
||||
// the session only exists once /auth/mfa-verify accepts it (US-IAM-006).
|
||||
if (data.mfaRequired) {
|
||||
setMfaEmail(values.email);
|
||||
notify.success('Enter the verification code we just sent you');
|
||||
return;
|
||||
}
|
||||
await completeSession(data);
|
||||
} catch (err: unknown) {
|
||||
const msg =
|
||||
(err as { data?: { message?: string } })?.data?.message ??
|
||||
(err instanceof Error ? err.message : 'Something went wrong');
|
||||
setServerError(msg);
|
||||
notify.error(msg);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const verifyMfa = async () => {
|
||||
if (!mfaEmail || !mfaOtp.trim()) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const data = await loginTrigger({
|
||||
url: '/auth/mfa-verify',
|
||||
method: 'POST',
|
||||
body: { email: mfaEmail, otp: mfaOtp.trim() },
|
||||
}).unwrap();
|
||||
// The second factor proves possession of the verified phone.
|
||||
await completeSession({ ...data, isPhoneNumberVerified: true });
|
||||
} catch (err: unknown) {
|
||||
const msg =
|
||||
(err as { data?: { message?: string } })?.data?.message ??
|
||||
'Verification failed';
|
||||
setServerError(msg === 'unable_to_log_in' ? 'Invalid or expired code' : msg);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const completeSession = async (data: LoginPayload) => {
|
||||
dispatch(loginSuccess(data));
|
||||
|
||||
const me = await meTrigger({
|
||||
url: '/auth/me',
|
||||
method: 'GET',
|
||||
url: "/auth/me",
|
||||
method: "GET",
|
||||
}).unwrap();
|
||||
dispatch(setUser(me));
|
||||
|
||||
@@ -126,8 +109,8 @@ export function LoginPage() {
|
||||
// `useCurrentProfile` resolves it again on demand.
|
||||
try {
|
||||
const { profile } = await profileTrigger({
|
||||
url: '/profiles/me',
|
||||
method: 'GET',
|
||||
url: "/profiles/me",
|
||||
method: "GET",
|
||||
}).unwrap();
|
||||
if (profile) {
|
||||
authStorage.setProfileId(profile.id);
|
||||
@@ -138,7 +121,7 @@ export function LoginPage() {
|
||||
}
|
||||
|
||||
if (!me.isPhoneNumberVerified) {
|
||||
navigate('/otp-verify', {
|
||||
navigate("/otp-verify", {
|
||||
state: {
|
||||
email: me.email,
|
||||
phoneNumber: me.phoneNumber,
|
||||
@@ -148,6 +131,12 @@ export function LoginPage() {
|
||||
}
|
||||
|
||||
navigate(loginRedirectPath);
|
||||
} catch (err: unknown) {
|
||||
setServerError(handleError(err));
|
||||
} finally {
|
||||
localStorage.setItem("rememberMe", String(rememberMe));
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -163,47 +152,16 @@ export function LoginPage() {
|
||||
</div>
|
||||
|
||||
{serverError && (
|
||||
<Alert variant="light" color="red" withCloseButton onClose={() => setServerError(null)}>
|
||||
<Alert
|
||||
variant="light"
|
||||
color="red"
|
||||
withCloseButton
|
||||
onClose={() => setServerError(null)}
|
||||
>
|
||||
{serverError}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{mfaEmail ? (
|
||||
<Stack gap="md">
|
||||
<Alert variant="light" color="blue" icon={<IconDeviceMobile size={18} />}>
|
||||
This account requires a second factor. Enter the code we sent to
|
||||
your registered phone.
|
||||
</Alert>
|
||||
<TextInput
|
||||
label="Verification code"
|
||||
placeholder="6-digit code"
|
||||
size="md"
|
||||
value={mfaOtp}
|
||||
onChange={(e) => setMfaOtp(e.currentTarget.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && verifyMfa()}
|
||||
/>
|
||||
<Button
|
||||
size="md"
|
||||
loading={isLoading}
|
||||
disabled={!mfaOtp.trim()}
|
||||
onClick={verifyMfa}
|
||||
rightSection={<IconArrowRight size={18} />}
|
||||
>
|
||||
Verify and sign in
|
||||
</Button>
|
||||
<Anchor
|
||||
size="sm"
|
||||
ta="center"
|
||||
onClick={() => {
|
||||
setMfaEmail(null);
|
||||
setMfaOtp('');
|
||||
setServerError(null);
|
||||
}}
|
||||
>
|
||||
Back to sign in
|
||||
</Anchor>
|
||||
</Stack>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
@@ -212,7 +170,7 @@ export function LoginPage() {
|
||||
size="md"
|
||||
leftSection={<IconMail size={18} />}
|
||||
error={errors.email?.message}
|
||||
{...register('email')}
|
||||
{...register("email")}
|
||||
/>
|
||||
<PasswordInput
|
||||
label="Password"
|
||||
@@ -220,7 +178,7 @@ export function LoginPage() {
|
||||
size="md"
|
||||
leftSection={<IconLock size={18} />}
|
||||
error={errors.password?.message}
|
||||
{...register('password')}
|
||||
{...register("password")}
|
||||
/>
|
||||
|
||||
<Group justify="space-between">
|
||||
@@ -253,23 +211,9 @@ export function LoginPage() {
|
||||
</Button>
|
||||
</Stack>
|
||||
</form>
|
||||
)}
|
||||
|
||||
<Divider label="or" labelPosition="center" />
|
||||
|
||||
<Button
|
||||
variant="default"
|
||||
fullWidth
|
||||
size="md"
|
||||
leftSection={<IconDeviceMobile size={18} />}
|
||||
onClick={() => notify.info('Phone sign-in is coming soon.')}
|
||||
>
|
||||
Sign in with phone number
|
||||
</Button>
|
||||
|
||||
{enableSignup && (
|
||||
<Text ta="center" size="sm" c="dimmed">
|
||||
Don't have an account?{' '}
|
||||
Don't have an account?{" "}
|
||||
<Anchor component={Link} to="/signup" fw={700}>
|
||||
Create one
|
||||
</Anchor>
|
||||
|
||||
Reference in New Issue
Block a user