Update styles of existing pages and update home page navigation

RADAR-base · Jul 18, 2024 · 237606c · 237606c
1 parent f26e737
commit 237606c
Show file tree

Hide file tree

Showing 11 changed files with 229 additions and 108 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,11 +1,11 @@
-import { Card, CardTitle, P, H2, H3, CodeBox } from "@ory/themes"
+import { Card, P, H2, H3, CodeBox } from "@ory/themes"
 import { AxiosError } from "axios"
 import type { NextPage } from "next"
 import Head from "next/head"
 import { useRouter } from "next/router"
 import { useEffect, useState } from "react"
 
-import { DocsButton, MarginCard, LogoutLink } from "../pkg"
+import { DocsButton, MarginCard, LogoutLink, CardTitle } from "../pkg"
 import ory from "../pkg/sdk"
 
 const Home: NextPage = () => {
@@ -51,47 +51,65 @@ const Home: NextPage = () => {
       </Head>
 
       <MarginCard wide>
-        <CardTitle>Welcome to Ory!</CardTitle>
-        <P>
-          Welcome to the Ory Managed UI. This UI implements a run-of-the-mill
-          user interface for all self-service flows (login, registration,
-          recovery, verification, settings). The purpose of this UI is to help
-          you get started quickly. In the long run, you probably want to
-          implement your own custom user interface.
-        </P>
+        <CardTitle>RADAR Base Ory!</CardTitle>
+        <P>Welcome to the RADAR Base self-enrolment portal.</P>
         <div className="row">
           <div className="col-md-4 col-xs-12">
             <div className="box">
-              <H3>Documentation</H3>
-              <P>
-                Here are some useful documentation pieces that help you get
-                started.
-              </P>
+              <H3>Pages</H3>
               <div className="row">
                 <DocsButton
-                  title="Get Started"
-                  href="https://www.ory.sh/docs/get-started"
-                  testid="get-started"
+                  testid="study"
+                  href="/study"
+                  disabled={hasSession}
+                  title={"Study"}
+                />
+                <DocsButton
+                  testid="eligibility"
+                  href="/eligibility"
+                  disabled={hasSession}
+                  title={"Eligibility"}
+                />
+                <DocsButton
+                  testid="login"
+                  href="/login"
+                  disabled={hasSession}
+                  title={"Login"}
                 />
                 <DocsButton
-                  title="User Flows"
-                  href="https://www.ory.sh/docs/concepts/self-service"
-                  testid="user-flows"
+                  testid="sign-up"
+                  href="/registration"
+                  disabled={hasSession}
+                  title={"Sign Up"}
                 />
                 <DocsButton
-                  title="Identities"
-                  href="https://www.ory.sh/docs/concepts/identity"
-                  testid="identities"
+                  testid="recover-account"
+                  href="/recovery"
+                  disabled={hasSession}
+                  title="Recover Account"
                 />
                 <DocsButton
-                  title="Sessions"
-                  href="https://www.ory.sh/docs/concepts/session"
-                  testid="sessions"
+                  testid="verify-account"
+                  href="/verification"
+                  title="Verify Account"
                 />
                 <DocsButton
-                  title="Bring Your Own UI"
-                  href="https://www.ory.sh/docs/guides/bring-your-user-interface"
-                  testid="customize-ui"
+                  testid="consent"
+                  href="/consent"
+                  title="Study Consent"
+                  disabled={!hasSession}
+                />
+                <DocsButton
+                  testid="account-settings"
+                  href="/settings"
+                  disabled={!hasSession}
+                  title={"Account Settings"}
+                />
+                <DocsButton
+                  testid="logout"
+                  onClick={onLogout}
+                  disabled={!hasSession}
+                  title={"Logout"}
                 />
               </div>
             </div>
@@ -108,53 +126,6 @@ const Home: NextPage = () => {
           </div>
         </div>
       </MarginCard>
-
-      <Card wide>
-        <H2>Other User Interface Screens</H2>
-        <div className={"row"}>
-          <DocsButton
-            unresponsive
-            testid="login"
-            href="/login"
-            disabled={hasSession}
-            title={"Login"}
-          />
-          <DocsButton
-            unresponsive
-            testid="sign-up"
-            href="/registration"
-            disabled={hasSession}
-            title={"Sign Up"}
-          />
-          <DocsButton
-            unresponsive
-            testid="recover-account"
-            href="/recovery"
-            disabled={hasSession}
-            title="Recover Account"
-          />
-          <DocsButton
-            unresponsive
-            testid="verify-account"
-            href="/verification"
-            title="Verify Account"
-          />
-          <DocsButton
-            unresponsive
-            testid="account-settings"
-            href="/settings"
-            disabled={!hasSession}
-            title={"Account Settings"}
-          />
-          <DocsButton
-            unresponsive
-            testid="logout"
-            onClick={onLogout}
-            disabled={!hasSession}
-            title={"Logout"}
-          />
-        </div>
-      </Card>
     </div>
   )
 }

diff --git a/pages/login.tsx b/pages/login.tsx
@@ -1,13 +1,19 @@
 import { LoginFlow, UpdateLoginFlowBody } from "@ory/client"
-import { CardTitle } from "@ory/themes"
 import { AxiosError } from "axios"
 import type { NextPage } from "next"
 import Head from "next/head"
 import Link from "next/link"
 import { useRouter } from "next/router"
 import { useEffect, useState } from "react"
 
-import { ActionCard, CenterLink, LogoutLink, Flow, MarginCard } from "../pkg"
+import {
+  ActionCard,
+  CenterLink,
+  LogoutLink,
+  Flow,
+  MarginCard,
+  CardTitle,
+} from "../pkg"
 import { handleGetFlowError, handleFlowError } from "../pkg/errors"
 import ory from "../pkg/sdk"
 

diff --git a/pages/recovery.tsx b/pages/recovery.tsx
@@ -1,13 +1,12 @@
 import { RecoveryFlow, UpdateRecoveryFlowBody } from "@ory/client"
-import { CardTitle } from "@ory/themes"
 import { AxiosError } from "axios"
 import type { NextPage } from "next"
 import Head from "next/head"
 import Link from "next/link"
 import { useRouter } from "next/router"
 import { useEffect, useState } from "react"
 
-import { Flow, ActionCard, CenterLink, MarginCard } from "../pkg"
+import { Flow, ActionCard, CenterLink, MarginCard, CardTitle } from "../pkg"
 import { handleFlowError } from "../pkg/errors"
 import ory from "../pkg/sdk"
 

diff --git a/pages/registration.tsx b/pages/registration.tsx
@@ -1,13 +1,12 @@
 import { RegistrationFlow, UpdateRegistrationFlowBody } from "@ory/client"
-import { CardTitle } from "@ory/themes"
 import { AxiosError } from "axios"
 import type { NextPage } from "next"
 import Head from "next/head"
 import { useRouter } from "next/router"
 import { useEffect, useState } from "react"
 
 // Import render helpers
-import { ActionCard, CenterLink, Flow, MarginCard } from "../pkg"
+import { ActionCard, CenterLink, Flow, MarginCard, CardTitle } from "../pkg"
 import { handleFlowError } from "../pkg/errors"
 // Import the SDK
 import ory from "../pkg/sdk"
@@ -101,18 +100,12 @@ const Registration: NextPage = () => {
   return (
     <>
       <Head>
-        <title>Create account - Ory NextJS Integration Example</title>
-        <meta name="description" content="NextJS + React + Vercel + Ory" />
+        <title>Create account</title>
       </Head>
       <MarginCard>
-        <CardTitle>Create account</CardTitle>
+        <CardTitle>Create Your Account</CardTitle>
         <Flow onSubmit={onSubmit} flow={flow} />
       </MarginCard>
-      <ActionCard>
-        <CenterLink data-testid="cta-link" href="/login">
-          Sign in
-        </CenterLink>
-      </ActionCard>
     </>
   )
 }

diff --git a/pages/settings.tsx b/pages/settings.tsx
@@ -1,13 +1,24 @@
-import { SettingsFlow, UpdateSettingsFlowBody } from "@ory/client"
-import { CardTitle, H3, P } from "@ory/themes"
+import {
+  SettingsFlow,
+  UpdateSettingsFlowBody,
+  UpdateSettingsFlowWithProfileMethod,
+} from "@ory/client"
+import { H3, P } from "@ory/themes"
 import { AxiosError } from "axios"
 import type { NextPage } from "next"
 import Head from "next/head"
 import Link from "next/link"
 import { useRouter } from "next/router"
 import { ReactNode, useEffect, useState } from "react"
 
-import { ActionCard, CenterLink, Flow, Messages, Methods } from "../pkg"
+import {
+  ActionCard,
+  CenterLink,
+  Flow,
+  Messages,
+  Methods,
+  CardTitle,
+} from "../pkg"
 import { handleFlowError } from "../pkg/errors"
 import ory from "../pkg/sdk"
 
@@ -42,6 +53,7 @@ const Settings: NextPage = () => {
   // Get ?flow=... from the URL
   const router = useRouter()
   const { flow: flowId, return_to: returnTo } = router.query
+  const [email, setEmail] = useState("")
 
   useEffect(() => {
     // If the router is not ready yet, or we already have a flow, do nothing.
@@ -66,12 +78,13 @@ const Settings: NextPage = () => {
         returnTo: String(returnTo || ""),
       })
       .then(({ data }) => {
+        setEmail(data.identity.traits.email)
         setFlow(data)
       })
       .catch(handleFlowError(router, "settings", setFlow))
   }, [flowId, router, router.isReady, returnTo, flow])
 
-  const onSubmit = (values: UpdateSettingsFlowBody) =>
+  const onSubmit = (values: UpdateSettingsFlowWithProfileMethod) =>
     router
       // On submission, add the flow ID to the URL but do not navigate. This prevents the user loosing
       // his data when she/he reloads the page.
@@ -129,18 +142,26 @@ const Settings: NextPage = () => {
         Profile Management and Security Settings
       </CardTitle>
       <SettingsCard only="profile" flow={flow}>
-        <H3>Profile Settings</H3>
-        <Messages messages={flow?.ui.messages} />
-        <Flow
-          hideGlobalMessages
-          onSubmit={onSubmit}
-          only="profile"
-          flow={flow}
-        />
+        <div>
+          <H3>Profile Settings</H3>
+          <form onSubmit={onSubmit}>
+            <div>
+              <label className="inputLabel">
+                Email:
+                <input
+                  name="traits.email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                />
+              </label>
+            </div>
+            <button type="submit">Save</button>
+          </form>
+        </div>
       </SettingsCard>
       <SettingsCard only="password" flow={flow}>
         <H3>Change Password</H3>
-
         <Messages messages={flow?.ui.messages} />
         <Flow
           hideGlobalMessages
@@ -151,7 +172,6 @@ const Settings: NextPage = () => {
       </SettingsCard>
       <SettingsCard only="oidc" flow={flow}>
         <H3>Manage Social Sign In</H3>
-
         <Messages messages={flow?.ui.messages} />
         <Flow hideGlobalMessages onSubmit={onSubmit} only="oidc" flow={flow} />
       </SettingsCard>

diff --git a/pages/verification.tsx b/pages/verification.tsx
@@ -1,13 +1,12 @@
 import { VerificationFlow, UpdateVerificationFlowBody } from "@ory/client"
-import { CardTitle } from "@ory/themes"
 import { AxiosError } from "axios"
 import type { NextPage } from "next"
 import Head from "next/head"
 import Link from "next/link"
 import { useRouter } from "next/router"
 import { useEffect, useState } from "react"
 
-import { Flow, ActionCard, CenterLink, MarginCard } from "../pkg"
+import { Flow, ActionCard, CenterLink, MarginCard, CardTitle } from "../pkg"
 import ory from "../pkg/sdk"
 
 const Verification: NextPage = () => {