Merge branch 'feat/initial-components' of https://github.com/RADAR-ba…

…se/radar-self-enrolment-ui into feat/consent-module

.github/workflows/test.yml

@@ -59,4 +59,4 @@ jobs:
           npm run start &
           npm run test
         env:
-          ORY_KRATOS_URL: http://localhost:4455
+          ORY_KRATOS_URL: http://localhost:4433

cypress/integration/pages.spec.js

@@ -15,20 +15,10 @@ context("Ory Kratos pages", () => {
     cy.get('[name="method"]').should("exist")
   })
 
-  it("can load the registration page", () => {
+  it("can load the registration page if eligibile", () => {
+    sessionStorage.setItem("eligible", "")
     cy.visit("/registration")
-    cy.get('[name="traits.email"]').type(email)
-    cy.get('[name="password"]').type(password)
-    cy.get('[name="method"]').click()
-    cy.location("pathname").should("eq", "/verification")
-
-    cy.visit("/")
-    cy.get('[data-testid="logout"]').should(
-      "have.attr",
-      "aria-disabled",
-      "false",
-    )
-    cy.get('[data-testid="session-content"]').should("contain.text", email)
+    cy.get('[name="traits.email"]').should("exist")
   })
 
   it("can load the verification page", () => {

data/eligibility-questionnaire.ts

@@ -1,87 +1,86 @@
 export const eligibilityQuestions = [
-    {
-      field_name: "age",
-      form_name: "eligibility",
-      section_header: "",
-      field_type: "text",
-      field_label: "How old are you?",
-      select_choices_or_calculations: "",
-      field_note: "",
-      text_validation_type_or_show_slider_number: "",
-      text_validation_min: "",
-      text_validation_max: "",
-      identifier: "",
-      branching_logic: "",
-      required_field: "yes",
-      custom_alignment: "",
-      question_number: "",
-      matrix_group_name: "",
-      matrix_ranking: "",
-      field_annotation: "",
-      evaluated_logic: ""
-    },
-    {
-      field_name: "city",
-      form_name: "eligibility",
-      section_header: "",
-      field_type: "text",
-      field_label: "What city do you live in?",
-      select_choices_or_calculations: "",
-      field_note: "",
-      text_validation_type_or_show_slider_number: "",
-      text_validation_min: "",
-      text_validation_max: "",
-      identifier: "",
-      branching_logic: "",
-      required_field: "yes",
-      custom_alignment: "",
-      question_number: "",
-      matrix_group_name: "",
-      matrix_ranking: "",
-      field_annotation: "",
-      evaluated_logic: ""
-    },
-    {
-      field_name: "has_fitbit",
-      form_name: "eligibility",
-      section_header: "",
-      field_type: "text",
-      field_label: "Do you have a Fitbit?",
-      select_choices_or_calculations: "",
-      field_note: "",
-      text_validation_type_or_show_slider_number: "",
-      text_validation_min: "",
-      text_validation_max: "",
-      identifier: "",
-      branching_logic: "",
-      required_field: "yes",
-      custom_alignment: "",
-      question_number: "",
-      matrix_group_name: "",
-      matrix_ranking: "",
-      field_annotation: "",
-      evaluated_logic: ""
-    },
-    {
-      field_name: "is_eligible",
-      form_name: "eligibility",
-      section_header: "",
-      field_type: "text",
-      field_label: "Eligible",
-      select_choices_or_calculations: "",
-      field_note: "",
-      text_validation_type_or_show_slider_number: "",
-      text_validation_min: "",
-      text_validation_max: "",
-      identifier: "",
-      branching_logic: "",
-      required_field: "",
-      custom_alignment: "",
-      question_number: "",
-      matrix_group_name: "",
-      matrix_ranking: "",
-      field_annotation: "",
-      evaluated_logic: ""
-    }
-  ]
-
+  {
+    field_name: "age",
+    form_name: "eligibility",
+    section_header: "",
+    field_type: "text",
+    field_label: "How old are you?",
+    select_choices_or_calculations: "",
+    field_note: "",
+    text_validation_type_or_show_slider_number: "",
+    text_validation_min: "",
+    text_validation_max: "",
+    identifier: "",
+    branching_logic: "",
+    required_field: "yes",
+    custom_alignment: "",
+    question_number: "",
+    matrix_group_name: "",
+    matrix_ranking: "",
+    field_annotation: "",
+    evaluated_logic: "",
+  },
+  {
+    field_name: "city",
+    form_name: "eligibility",
+    section_header: "",
+    field_type: "text",
+    field_label: "What city do you live in?",
+    select_choices_or_calculations: "",
+    field_note: "",
+    text_validation_type_or_show_slider_number: "",
+    text_validation_min: "",
+    text_validation_max: "",
+    identifier: "",
+    branching_logic: "",
+    required_field: "yes",
+    custom_alignment: "",
+    question_number: "",
+    matrix_group_name: "",
+    matrix_ranking: "",
+    field_annotation: "",
+    evaluated_logic: "",
+  },
+  {
+    field_name: "has_fitbit",
+    form_name: "eligibility",
+    section_header: "",
+    field_type: "text",
+    field_label: "Do you have a Fitbit?",
+    select_choices_or_calculations: "",
+    field_note: "",
+    text_validation_type_or_show_slider_number: "",
+    text_validation_min: "",
+    text_validation_max: "",
+    identifier: "",
+    branching_logic: "",
+    required_field: "yes",
+    custom_alignment: "",
+    question_number: "",
+    matrix_group_name: "",
+    matrix_ranking: "",
+    field_annotation: "",
+    evaluated_logic: "",
+  },
+  {
+    field_name: "is_eligible",
+    form_name: "eligibility",
+    section_header: "",
+    field_type: "text",
+    field_label: "Eligible",
+    select_choices_or_calculations: "",
+    field_note: "",
+    text_validation_type_or_show_slider_number: "",
+    text_validation_min: "",
+    text_validation_max: "",
+    identifier: "",
+    branching_logic: "",
+    required_field: "",
+    custom_alignment: "",
+    question_number: "",
+    matrix_group_name: "",
+    matrix_ranking: "",
+    field_annotation: "",
+    evaluated_logic: "",
+  },
+]

pages/eligibility.tsx

@@ -5,16 +5,21 @@ import Head from "next/head"
 import { useRouter } from "next/router"
 import { useEffect, useState } from "react"
 import { toast } from "react-toastify"
-import { eligibilityQuestions } from "../data/eligibility-questionnaire"
 
+import { eligibilityQuestions } from "../data/eligibility-questionnaire"
 // Import render helpers
 import { MarginCard, CardTitle, TextCenterButton } from "../pkg"
 
+interface EligibilityFormProps {
+  questions: any[]
+  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
+}
+
 // Renders the eligibility page
 const Eligibility: NextPage = () => {
   const IS_ELIGIBLE = "yes"
   const router = useRouter()
-  const [eligibility, setEligibility] = useState(null)
+  const [eligibility, setEligibility] = useState<boolean>()
   const questions: any[] = eligibilityQuestions
 
   const checkEligibility = async (values: any) => {
@@ -69,7 +74,10 @@ const NotEligibleMessage = () => (
   </MarginCard>
 )
 
-const EligibilityForm = ({ questions, onSubmit }) => (
+const EligibilityForm: React.FC<EligibilityFormProps> = ({
+  questions,
+  onSubmit,
+}) => (
   <MarginCard>
     <CardTitle>Eligibility Screening</CardTitle>
     <form method="POST" onSubmit={onSubmit}>

pages/index.tsx

@@ -127,7 +127,11 @@ const Home: NextPage = () => {
                 Below you will find the decoded Ory Session if you are logged
                 in.
               </P>
-              <CodeBox data-testid="session-content" code={session} className="codebox"/>
+              <CodeBox
+                data-testid="session-content"
+                code={session}
+                className="codebox"
+              />
             </div>
           </div>
         </div>

pages/login.tsx

@@ -94,7 +94,7 @@ const Login: NextPage = () => {
             // If the previous handler did not catch the error it's most likely a form validation error
             if (err.response?.status === 400) {
               // Yup, it is!
-              setFlow(err.response?.data)
+              setFlow(err.response?.data as LoginFlow)
               return
             }
 

pages/profile.tsx

@@ -1,12 +1,17 @@
-import { SettingsFlow } from "@ory/client"
+import {
+  SettingsFlow,
+  UiNode,
+  UiNodeInputAttributes,
+  UpdateSettingsFlowBody,
+} from "@ory/client"
 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 { profileQuestions } from "../data/profile-questionnaire"
 
+import { profileQuestions } from "../data/profile-questionnaire"
 import {
   ActionCard,
   CenterLink,
@@ -24,12 +29,19 @@ interface Props {
   only?: Methods
 }
 
-function ProfileCard({
-  flow,
-  only,
-  children,
-}: Props & { children: ReactNode }) {
-  return <ActionCard wide>{children}</ActionCard>
+interface ProfileFormProps {
+  questions: any[]
+  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
+  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+  profile: any
+}
+
+function ProfileCard({ children }: Props & { children: ReactNode }) {
+  return (
+    <ActionCard wide className="cardMargin">
+      {children}
+    </ActionCard>
+  )
 }
 
 const Profile: NextPage = () => {
@@ -66,9 +78,11 @@ const Profile: NextPage = () => {
       })
       .then(({ data }) => {
         setFlow(data)
-        const csrfTokenFromHeaders = data.ui.nodes.find(
-          (node: any) => node.attributes.name === "csrf_token",
-        )?.attributes.value
+        const csrfTokenFromHeaders = (
+          data.ui.nodes.find(
+            (node: any) => node.attributes.name === "csrf_token",
+          )?.attributes as UiNodeInputAttributes
+        ).value
         const traits = data.identity.traits
         setCsrfToken(csrfTokenFromHeaders || "")
         setTraits(traits)
@@ -86,7 +100,7 @@ const Profile: NextPage = () => {
 
   const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault()
-    const updatedValues = {
+    const updatedValues: UpdateSettingsFlowBody = {
       csrf_token: csrfToken,
       method: "profile",
       traits: {
@@ -115,12 +129,12 @@ const Profile: NextPage = () => {
                 return
               }
             })
-            .catch(handleFlowError(router, "profile", setFlow))
+            .catch(handleFlowError(router, "settings", setFlow))
             .catch(async (err: AxiosError) => {
               // If the previous handler did not catch the error it's most likely a form validation error
               if (err.response?.status === 400) {
                 // Yup, it is!
-                setFlow(err.response?.data)
+                setFlow(err.response?.data as SettingsFlow)
                 return
               }
 
@@ -136,8 +150,7 @@ const Profile: NextPage = () => {
         <title>Profile Page</title>
         <meta name="description" content="NextJS + React + Vercel + Ory" />
       </Head>
-      <CardTitle style={{ marginTop: 80 }}></CardTitle>
-      <ProfileCard only="profile" flow={flow}>
+      <ProfileCard>
         <CardTitle>User Information</CardTitle>
         <ProfileForm
           questions={profileQuestions}
@@ -155,7 +168,7 @@ const Profile: NextPage = () => {
   )
 }
 
-const ProfileForm: React.FC<any> = ({
+const ProfileForm: React.FC<ProfileFormProps> = ({
   questions,
   onSubmit,
   handleChange,

pages/recovery.tsx

@@ -47,7 +47,7 @@ const Recovery: NextPage = () => {
         // If the previous handler did not catch the error it's most likely a form validation error
         if (err.response?.status === 400) {
           // Yup, it is!
-          setFlow(err.response?.data)
+          setFlow(err.response?.data as RecoveryFlow)
           return
         }
 
@@ -75,7 +75,7 @@ const Recovery: NextPage = () => {
             switch (err.response?.status) {
               case 400:
                 // Status code 400 implies the form validation had an error
-                setFlow(err.response?.data)
+                setFlow(err.response?.data as RecoveryFlow)
                 return
             }