feat: add back button to settings screen (#175)

examples/nextjs-spa/src/pages/settings.tsx

@@ -117,7 +117,7 @@ const Settings: NextPageWithLayout = () => {
           key={index}
           // we always need to pass the component the flow since it contains the form fields, error messages and csrf token
           flow={flow}
-          flowType={flowType}
+          method={flowType}
           // include scripts for webauthn support
           includeScripts={true}
           // submit the form data the user provides to Ory

examples/preact-spa/src/settings.tsx

@@ -83,7 +83,7 @@ export const Settings = () => {
         <UserSettingsCard
           key={index}
           flow={flow}
-          flowType={flowType}
+          method={flowType}
           includeScripts={true}
           onSubmit={({ body }) => onSubmit(body)}
         />

examples/react-spa/src/Settings.tsx

@@ -89,7 +89,7 @@ export const Settings = () => {
           key={index}
           // we always need to pass the component the flow since it contains the form fields, error messages and csrf token
           flow={flow}
-          flowType={flowType}
+          method={flowType}
           // include scripts for webauthn support
           includeScripts={true}
           // submit the form data the user provides to Ory

src/locales/de.json

@@ -150,6 +150,7 @@
   "registration.login-label": "Sie haben bereits ein Konto?",
   "registration.subtitle-oauth2": "Zur Authentifizierung bei {clientName}",
   "registration.title": "Konto registrieren",
+  "settings.navigation-back-button": "Zurück",
   "settings.navigation-backup-codes": "2FA-Backup-Codes",
   "settings.navigation-logout": "Abmelden",
   "settings.navigation-oidc": "Soziale Medien",

src/locales/en.json

@@ -150,6 +150,7 @@
   "registration.login-label": "Already have an account?",
   "registration.subtitle-oauth2": "To authenticate {clientName}",
   "registration.title": "Register an account",
+  "settings.navigation-back-button": "Back",
   "settings.navigation-backup-codes": "2FA Backup Codes",
   "settings.navigation-logout": "Logout",
   "settings.navigation-oidc": "Social Sign In",

src/locales/es.json

@@ -150,6 +150,7 @@
   "registration.login-label": "¿Ya tiene una cuenta?",
   "registration.subtitle-oauth2": "Para autenticar a {clientName}",
   "registration.title": "Registrar una cuenta",
+  "settings.navigation-back-button": "Regresar",
   "settings.navigation-backup-codes": "Códigos de Respaldo de 2FA",
   "settings.navigation-logout": "Cerrar sesión",
   "settings.navigation-oidc": "Inicio de Sesión Social",

src/locales/fr.json

@@ -150,6 +150,7 @@
   "registration.login-label": "Vous avez déjà un compte ?",
   "registration.subtitle-oauth2": "Pour vous authentifier sur {clientName}",
   "registration.title": "Créer un compte",
+  "settings.navigation-back-button": "Revenir en arrière",
   "settings.navigation-backup-codes": "Codes de secours 2FA",
   "settings.navigation-logout": "Déconnexion",
   "settings.navigation-oidc": "Connexion sociale",

src/locales/nl.json

@@ -150,6 +150,7 @@
   "registration.login-label": "Heb je al een account?",
   "registration.subtitle-oauth2": "Om te authenticeren bij {clientName}",
   "registration.title": "Registreer een account",
+  "settings.navigation-back-button": "Ga terug",
   "settings.navigation-backup-codes": "2FA Backupcodes",
   "settings.navigation-logout": "Uitloggen",
   "settings.navigation-oidc": "Sociaal Inloggen",

src/locales/pl.json

@@ -150,6 +150,7 @@
   "registration.login-label": "Posiadasz już konto?",
   "registration.subtitle-oauth2": "Do autentykacji {clientName}",
   "registration.title": "Zarejestruj konto",
+  "settings.navigation-back-button": "Cofnij",
   "settings.navigation-backup-codes": "Kody zapasowe 2FA",
   "settings.navigation-logout": "Wyloguj",
   "settings.navigation-oidc": "Zewnętrzne logowanie",

src/locales/pt.json

@@ -150,6 +150,7 @@
   "registration.login-label": "Já tem uma conta?",
   "registration.subtitle-oauth2": "Para autenticar {clientName}",
   "registration.title": "Registar uma conta",
+  "settings.navigation-back-button": "Voltar",
   "settings.navigation-backup-codes": "Códigos de Backup de 2FA",
   "settings.navigation-logout": "Sair",
   "settings.navigation-oidc": "login social",

src/locales/se.json

@@ -150,6 +150,7 @@
   "registration.login-label": "Har du redan ett konto?",
   "registration.subtitle-oauth2": "Att autentisera {clientName}",
   "registration.title": "Skapa ett konto",
+  "settings.navigation-back-button": "Tillbaka",
   "settings.navigation-backup-codes": "2FA backupkoder",
   "settings.navigation-logout": "Logga ut",
   "settings.navigation-oidc": "Social Inloggning",

src/markup-components/components.ts

@@ -36,6 +36,7 @@ import {
   PasswordSettingsSection as passwordSettingsSection,
   ProfileSettingsProps,
   ProfileSettingsSection as profileSettingsSection,
+  SettingScreenNavigationProps,
   ThemeProvider as themeProvider,
   ThemeProviderProps,
   TOTPSettingsProps,
@@ -136,10 +137,15 @@ export const UserSettingsCard = (
 
 export const UserSettingsScreen = (
   props: UserSettingsScreenProps,
+  navProps: SettingScreenNavigationProps,
   context: Context = {},
 ) => {
   return {
-    Nav: ComponentWrapper(userSettingsScreen.Nav, props, context),
+    Nav: ComponentWrapper(
+      userSettingsScreen.Nav,
+      { ...props, ...navProps },
+      context,
+    ),
     Body: ComponentWrapper(userSettingsScreen.Body, props, context),
   }
 }

src/react-components/ory/user-settings-card.tsx

@@ -22,6 +22,7 @@ import { ProfileSettingsSection } from "./sections/profile-settings-section"
 import { TOTPSettingsSection } from "./sections/totp-settings-section"
 import { WebAuthnSettingsSection } from "./sections/webauthn-settings-section"
 import { useIntl } from "react-intl"
+import { Divider } from "../divider"
 
 export type UserSettingsFlowType =
   | "profile"
@@ -33,19 +34,21 @@ export type UserSettingsFlowType =
 
 export type UserSettingsCardProps = {
   flow: SettingsFlow
-  flowType: UserSettingsFlowType
+  method: UserSettingsFlowType
   title?: string
   includeScripts?: boolean
   className?: string
+  dividerClassName?: string
 } & UserAuthFormAdditionalProps
 
 export const UserSettingsCard = ({
   flow,
-  flowType,
+  method,
   title,
   includeScripts,
   onSubmit,
   className,
+  dividerClassName,
 }: UserSettingsCardProps): JSX.Element | null => {
   const intl = useIntl()
 
@@ -57,7 +60,7 @@ export const UserSettingsCard = ({
   let $flow: JSX.Element | null = null
   let cardTitle = ""
 
-  switch (flowType) {
+  switch (method) {
     case "profile":
       hasFlow = true
       cardTitle =
@@ -133,25 +136,28 @@ export const UserSettingsCard = ({
   }
 
   return hasFlow ? (
-    <div className={gridStyle({ gap: 32 })}>
-      {cardTitle && (
-        <h3
-          className={cn(
-            typographyStyle({ size: "headline26", type: "regular" }),
-            colorSprinkle({ color: "foregroundDefault" }),
-          )}
+    <>
+      <div className={gridStyle({ gap: 32 })}>
+        {cardTitle && (
+          <h3
+            className={cn(
+              typographyStyle({ size: "headline26", type: "regular" }),
+              colorSprinkle({ color: "foregroundDefault" }),
+            )}
+          >
+            {cardTitle}
+          </h3>
+        )}
+        <UserAuthForm
+          flow={flow}
+          onSubmit={onSubmit}
+          className={className}
+          data-testid={`${method}-settings-card`}
         >
-          {cardTitle}
-        </h3>
-      )}
-      <UserAuthForm
-        flow={flow}
-        onSubmit={onSubmit}
-        className={className}
-        data-testid={`${flowType}-settings-card`}
-      >
-        {$flow}
-      </UserAuthForm>
-    </div>
+          {$flow}
+        </UserAuthForm>
+      </div>
+      <Divider fullWidth={false} className={dividerClassName} />
+    </>
   ) : null
 }

src/react-components/ory/user-settings-screen.tsx

@@ -32,11 +32,19 @@ export interface UserSettingsScreenProps {
   logoutUrl: string
 }
 
-const nav = ({
+export interface SettingScreenNavigationProps {
+  navClassName?: string
+  flow: SettingsFlow
+  logoutUrl: string
+  backUrl?: string
+}
+
+const SettingScreenNavigation = ({
   navClassName,
   flow,
   logoutUrl,
-}: Pick<UserSettingsScreenProps, "navClassName" | "flow" | "logoutUrl">) => {
+  backUrl,
+}: SettingScreenNavigationProps) => {
   const intl = useIntl()
   return (
     <Nav
@@ -46,6 +54,23 @@ const nav = ({
         defaultMessage: "Account Settings",
       })}
       navSections={[
+        ...(backUrl
+          ? [
+              {
+                links: [
+                  {
+                    name: intl.formatMessage({
+                      id: "settings.navigation-back-button",
+                      defaultMessage: "Back",
+                    }),
+                    href: backUrl,
+                    iconLeft: "arrow-left",
+                    testId: "profile",
+                  },
+                ],
+              },
+            ]
+          : []),
         {
           links: [
             {
@@ -122,7 +147,16 @@ const nav = ({
   )
 }
 
-const body = ({
+const settingsScreenMethods: UserSettingsFlowType[] = [
+  "profile",
+  "password",
+  "oidc",
+  "lookupSecret",
+  "webauthn",
+  "totp",
+]
+
+const SettingsScreenBody = ({
   headerContainerClassName,
   dividerClassName,
   settingsCardContainerClassName,
@@ -146,35 +180,21 @@ const body = ({
       <Divider fullWidth={false} className={dividerClassName} />
     </div>
 
-    {(
-      [
-        "profile",
-        "password",
-        "oidc",
-        "lookupSecret",
-        "webauthn",
-        "totp",
-      ] as UserSettingsFlowType[]
-    ).map((flowType) => {
-      const $card = <UserSettingsCard flowType={flowType} flow={flow} />
-      if (!$card) {
-        return null
-      }
+    {settingsScreenMethods.map((method) => {
       return (
         <div
           className={settingsCardContainerClassName}
-          id={flowType}
-          key={flowType}
+          id={method}
+          key={method}
         >
-          {$card}
-          <Divider fullWidth={false} className={dividerClassName} />
+          <UserSettingsCard method={method} flow={flow} />
         </div>
       )
     })}
   </>
 )
 
 export const UserSettingsScreen = {
-  Nav: nav,
-  Body: body,
+  Nav: SettingScreenNavigation,
+  Body: SettingsScreenBody,
 }

src/stories/Ory/AuthSettings.stories.tsx

@@ -22,55 +22,55 @@ const Template: Story<UserSettingsCardProps> = (
 export const UserSettingsProfileCard = Template.bind({})
 
 UserSettingsProfileCard.args = {
-  flowType: "profile",
+  method: "profile",
   flow: settingsFlow,
 }
 
 export const UserSettingsPasswordCard = Template.bind({})
 
 UserSettingsPasswordCard.args = {
-  flowType: "password",
+  method: "password",
   flow: settingsFlow,
 }
 
 export const UserSettingsWebauthnCard = Template.bind({})
 
 UserSettingsWebauthnCard.args = {
-  flowType: "webauthn",
+  method: "webauthn",
   flow: settingsFlow,
 }
 
 export const UserSettingsUnlinkWebauthnCard = Template.bind({})
 
 UserSettingsUnlinkWebauthnCard.args = {
-  flowType: "webauthn",
+  method: "webauthn",
   flow: settingsUnlinkFlow,
 }
 
 export const UserSettingsTotpCard = Template.bind({})
 
 UserSettingsTotpCard.args = {
-  flowType: "totp",
+  method: "totp",
   flow: settingsFlow,
 }
 
 export const UserSettingsUnlinkTotpCard = Template.bind({})
 
 UserSettingsUnlinkTotpCard.args = {
-  flowType: "totp",
+  method: "totp",
   flow: settingsUnlinkFlow,
 }
 
 export const UserSettingsOidcCard = Template.bind({})
 
 UserSettingsOidcCard.args = {
-  flowType: "oidc",
+  method: "oidc",
   flow: settingsFlow,
 }
 
 export const UserSettingsUnlinkOidcCard = Template.bind({})
 
 UserSettingsUnlinkOidcCard.args = {
-  flowType: "oidc",
+  method: "oidc",
   flow: settingsUnlinkFlow,
 }

src/stories/Ory/SettingsScreen.stories.tsx

@@ -11,7 +11,7 @@ import { settingsFlow } from "./settings-data"
 
 const Screen = (props: UserSettingsScreenProps) => (
   <div style={{ display: "flex", flexDirection: "row" }}>
-    <UserSettingsScreen.Nav {...props} />
+    <UserSettingsScreen.Nav {...props} backUrl="#back" />
     <div style={{ margin: "4rem" }}>
       <UserSettingsScreen.Body {...props} />
     </div>