@llmnative/react 2.1.0 → 2.2.1

package/templates/_shared/conf/access.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { MenuConfig } from '@llmnative/react';
+import SignUpPage from '../pages/access/SignUpPage';
+import ForgotPasswordPage from '../pages/access/ForgotPasswordPage';
+import ResetPasswordPage from '../pages/access/ResetPasswordPage';
+import VerifyEmailPage from '../pages/access/VerifyEmailPage';
+import { ACCESS_PATHS } from '../pages/access/paths';
+
+/** The pages of access take the whole screen: no header, no menu. */
+const Bare = ({ children }: { children?: React.ReactNode }) => <>{children}</>;
+
+/**
+ * The pages open without a session (`public`): the sign-in itself has no page, the gate of
+ * `index.tsx` shows it in place of any other page. No title: they are never entries of a menu.
+ */
+export const accessMenu: MenuConfig = {
+    access: [
+        { path: ACCESS_PATHS.signUp, page: SignUpPage, layout: Bare, public: true },
+        { path: ACCESS_PATHS.forgotPassword, page: ForgotPasswordPage, layout: Bare, public: true },
+        { path: ACCESS_PATHS.resetPassword, page: ResetPasswordPage, layout: Bare, public: true },
+        { path: ACCESS_PATHS.verifyEmail, page: VerifyEmailPage, layout: Bare, public: true },
+    ],
+};

package/templates/_shared/pages/access/ForgotPasswordPage.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { Brand, ForgotPassword, useAuthFlows } from '@llmnative/react';
+import { ACCESS_FLOWS } from './paths';
+
+/** Sends the link to choose a new password; the link opens `/reset-password`. */
+export default function ForgotPasswordPage() {
+    const flows = useAuthFlows(undefined, ACCESS_FLOWS);
+
+    if (!flows.forgotPassword) return <Navigate to="/" replace />;
+
+    return <ForgotPassword {...flows.forgotPassword} brand={<Brand label="[projectname]" />} signInLink="/" />;
+}

package/templates/_shared/pages/access/ResetPasswordPage.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { Brand, ResetPassword, linkCode, useAuthFlows } from '@llmnative/react';
+import { ACCESS_FLOWS, ACCESS_PATHS } from './paths';
+
+/** Opened by the link of the email: the code of the link sets the new password. */
+export default function ResetPasswordPage() {
+    const flows = useAuthFlows(undefined, ACCESS_FLOWS);
+    const code = linkCode(useLocation().search);
+
+    return (
+        <ResetPassword
+            {...flows.resetPassword(code)}
+            brand={<Brand label="[projectname]" />}
+            signInLink="/"
+            requestNewLink={ACCESS_PATHS.forgotPassword}
+        />
+    );
+}

package/templates/_shared/pages/access/SignInPage.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Brand, SignIn, useAuthFlows } from '@llmnative/react';
+import { ACCESS_FLOWS, ACCESS_PATHS } from './paths';
+
+/**
+ * The sign-in, shown by the gate of `index.tsx` in place of any page opened without a session:
+ * the address does not change, and once signed in the page appears.
+ */
+export default function SignInPage() {
+    const flows = useAuthFlows(undefined, ACCESS_FLOWS);
+
+    return (
+        <SignIn
+            {...flows.signIn}
+            appName="[projectname]"
+            brand={<Brand label="[projectname]" />}
+            signUpLink={flows.signUp ? ACCESS_PATHS.signUp : undefined}
+            forgotPasswordLink={flows.forgotPassword ? ACCESS_PATHS.forgotPassword : undefined}
+        />
+    );
+}

package/templates/_shared/pages/access/SignUpPage.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Navigate, useNavigate } from 'react-router-dom';
+import { Brand, SignUp, useAuthFlows } from '@llmnative/react';
+import { ACCESS_FLOWS } from './paths';
+
+/** Creates an account; the confirmation link of the email opens `/verify-email`. */
+export default function SignUpPage() {
+    const flows = useAuthFlows(undefined, ACCESS_FLOWS);
+    const navigate = useNavigate();
+
+    // A provider without accounts of its own (Google, GitHub): its sign-in creates them.
+    if (!flows.signUp) return <Navigate to="/" replace />;
+
+    return (
+        <SignUp
+            {...flows.signUp}
+            terms
+            brand={<Brand label="[projectname]" />}
+            signInLink="/"
+            onSignedUp={() => navigate('/')}
+        />
+    );
+}

package/templates/_shared/pages/access/VerifyEmailPage.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { Brand, VerifyEmail, linkCode, useAuthFlows } from '@llmnative/react';
+import { ACCESS_FLOWS } from './paths';
+
+/** Opened by the confirmation link of a new account: it activates the account at once. */
+export default function VerifyEmailPage() {
+    const flows = useAuthFlows(undefined, ACCESS_FLOWS);
+    const code = linkCode(useLocation().search);
+
+    return (
+        <VerifyEmail
+            {...flows.verifyEmail}
+            code={code}
+            brand={<Brand label="[projectname]" />}
+            continueLink="/"
+            signInLink="/"
+        />
+    );
+}

package/templates/_shared/pages/access/paths.ts

@@ -0,0 +1,12 @@
+// The pages the links of the access emails open: the provider puts them in the emails it sends.
+export const ACCESS_PATHS = {
+    signUp: '/sign-up',
+    forgotPassword: '/forgot-password',
+    resetPassword: '/reset-password',
+    verifyEmail: '/verify-email',
+};
+
+export const ACCESS_FLOWS = {
+    verifyEmailPath: ACCESS_PATHS.verifyEmail,
+    resetPasswordPath: ACCESS_PATHS.resetPassword,
+};

package/templates/_shared/sections/Footer.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-
-export default function Footer() {
-    return (
-        <footer className="shrink-0 border-t border-footer-border bg-footer px-4 py-1.5 text-end text-xs text-footer-foreground">
-            Powered by [projectname]
-        </footer>
-    );
-}
+import React from 'react';
+
+export default function Footer() {
+    return (
+        <footer className="shrink-0 border-t border-footer-border bg-footer px-4 py-1.5 text-end text-xs text-footer-foreground">
+            © {new Date().getFullYear()} [projectname]
+        </footer>
+    );
+}

package/templates/_shared/sections/Header.tsx

@@ -1,24 +1,26 @@
-import React from 'react';
-import { ActionButton, AuthButton, Brand } from '@llmnative/react';
-
-type HeaderProps = {
-    onMenuToggle: () => void;
-};
-
-export default function Header({ onMenuToggle }: HeaderProps) {
-    return (
-        <header className="flex h-14 shrink-0 items-center gap-3 border-b border-header-border bg-header px-4 text-header-foreground">
-            <ActionButton
-                icon="menu"
-                ariaLabel="Toggle navigation"
-                variant="link"
-                wrapperClassName="lg:hidden"
-                onClick={onMenuToggle}
-            />
-            <Brand url="/" label="[projectname]" />
-            <div className="ms-auto">
-                <AuthButton />
-            </div>
-        </header>
-    );
-}
+import React from 'react';
+import { ActionButton, AuthButton, Brand, useI18n } from '@llmnative/react';
+
+type HeaderProps = {
+    onMenuToggle: () => void;
+};
+
+export default function Header({ onMenuToggle }: HeaderProps) {
+    const common = useI18n('common');
+
+    return (
+        <header className="flex h-14 shrink-0 items-center gap-3 border-b border-header-border bg-header px-4 text-header-foreground">
+            <ActionButton
+                icon="menu"
+                ariaLabel={common.openNavigation}
+                variant="link"
+                wrapperClassName="lg:hidden"
+                onClick={onMenuToggle}
+            />
+            <Brand url="/" label="[projectname]" />
+            <div className="ms-auto">
+                <AuthButton aspect="avatar" />
+            </div>
+        </header>
+    );
+}