WIP

package.json

@@ -13,6 +13,7 @@
   "license": "Apache-2.0",
   "author": "Aeneas Rekkas",
   "main": "src/index.ts",
+  "prettier": "ory-prettier-styles",
   "files": [
     "lib/*",
     "views/*"
@@ -27,8 +28,9 @@
   },
   "dependencies": {
     "@ory/client": "1.1.50",
-    "@ory/elements-markup": "0.0.1-beta.13",
+    "@ory/elements-markup": "file:../elements/packages/markup",
     "@ory/integrations": "1.1.4",
+    "accept-language-parser": "1.5.0",
     "axios": "1.2.6",
     "body-parser": "1.20.2",
     "cookie-parser": "1.4.6",
@@ -42,6 +44,7 @@
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "4.0.0",
+    "@types/accept-language-parser": "^1.5.3",
     "@types/axios": "0.14.0",
     "@types/body-parser": "1.19.2",
     "@types/cookie-parser": "1.4.3",

src/index.ts

@@ -1,10 +1,5 @@
 // Copyright © 2022 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
-import cookieParser from "cookie-parser"
-import express, { Request, Response } from "express"
-import { engine } from "express-handlebars"
-import * as fs from "fs"
-import * as https from "https"
 import { handlebarsHelpers } from "./pkg"
 import { middleware as middlewareLogger } from "./pkg/logger"
 import {
@@ -23,6 +18,13 @@ import {
   registerVerificationRoute,
   registerWelcomeRoute,
 } from "./routes"
+import { locales } from "@ory/elements-markup"
+import { pick as pickLanguage } from "accept-language-parser"
+import cookieParser from "cookie-parser"
+import express, { Request, Response } from "express"
+import { engine } from "express-handlebars"
+import * as fs from "fs"
+import * as https from "https"
 
 const baseUrl = process.env.BASE_PATH || "/"
 
@@ -31,6 +33,13 @@ const router = express.Router()
 
 app.use(middlewareLogger)
 app.use(cookieParser())
+app.use((req, res, next) => {
+  res.locals.lang = pickLanguage(
+    Object.keys(locales),
+    req.header("Accept-Language") || "en",
+  )
+  next()
+})
 app.set("view engine", "hbs")
 
 app.engine(

src/pkg/index.ts

@@ -54,6 +54,7 @@ const isErrorAuthenticatorAssuranceLevel = (
 export const redirectOnSoftError =
   (res: Response, next: NextFunction, redirectTo: string) =>
   (err: AxiosError) => {
+  console.log("redirectOnSoftError", err)
     if (!err.response) {
       next(err)
       return

src/routes/consent.ts

@@ -247,6 +247,7 @@ export const registerConsentRoute: RouteRegistrator = function (
     console.log("found HYDRA_ADMIN_URL")
     return app.get(
       "/consent",
+      // @ts-ignore
       csrfProtection,
       createConsentRoute(createHelpers),
     )
@@ -263,6 +264,7 @@ export const registerConsentPostRoute: RouteRegistrator = function (
     return app.post(
       "/consent",
       parseForm,
+      // @ts-ignore
       csrfProtection,
       createConsentPostRoute(createHelpers),
     )

src/routes/error.ts

@@ -78,7 +78,6 @@ export const createErrorRoute: RouteCreator =
         card: UserErrorCard({
           error,
           cardImage: logoUrl,
-          title: "An error occurred",
           backUrl: req.header("Referer") || "welcome",
         }),
       })

src/routes/login.ts

@@ -1,7 +1,7 @@
 // Copyright © 2022 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 import { LoginFlow, UiNodeInputAttributes } from "@ory/client"
-import { SelfServiceFlow, UserAuthCard } from "@ory/elements-markup"
+import { UserAuthCard } from "@ory/elements-markup"
 import {
   filterNodesByGroups,
   isUiNodeInputAttributes,
@@ -182,26 +182,17 @@ export const createLoginRoute: RouteCreator =
             })
             .filter((c) => c !== undefined),
           card: UserAuthCard({
-            title: flow.refresh
-              ? "Confirm it's you"
-              : flow.requested_aal === "aal2"
-              ? "Two-Factor Authentication"
-              : "Sign In",
-            ...(flow.oauth2_login_request && {
-              subtitle: `To authenticate ${
-                flow.oauth2_login_request.client?.client_name ||
-                flow.oauth2_login_request.client?.client_id
-              }`,
-            }),
-            flow: flow as SelfServiceFlow,
+            flow,
             flowType: "login",
             cardImage: logoUrl,
             additionalProps: {
               forgotPasswordURL: initRecoveryUrl,
               signupURL: initRegistrationUrl,
               logoutURL: logoutUrl,
             },
-          }),
+          },
+            { locale: res.locals.lang },
+          ),
         })
       })
       .catch(redirectOnSoftError(res, next, initFlowUrl))

src/routes/recovery.ts

@@ -1,6 +1,5 @@
 // Copyright © 2022 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
-import { SelfServiceFlow, UserAuthCard } from "@ory/elements-markup"
 import {
   defaultConfig,
   getUrlForFlow,
@@ -11,6 +10,7 @@ import {
   RouteCreator,
   RouteRegistrator,
 } from "../pkg"
+import { UserAuthCard } from "@ory/elements-markup"
 
 export const createRecoveryRoute: RouteCreator =
   (createHelpers) => (req, res, next) => {
@@ -47,15 +47,19 @@ export const createRecoveryRoute: RouteCreator =
         )
 
         res.render("recovery", {
-          card: UserAuthCard({
-            title: "Recover your account",
-            flow: flow as SelfServiceFlow,
-            flowType: "recovery",
-            cardImage: logoUrl,
-            additionalProps: {
-              loginURL: initLoginUrl,
+          card: UserAuthCard(
+            {
+              flow,
+              flowType: "recovery",
+              cardImage: logoUrl,
+              additionalProps: {
+                loginURL: initLoginUrl,
+              },
             },
-          }),
+            {
+              locale: res.locals.lang,
+            },
+          ),
         })
       })
       .catch(redirectOnSoftError(res, next, initFlowUrl))

src/routes/registration.ts

@@ -87,14 +87,7 @@ export const createRegistrationRoute: RouteCreator =
             })
             .filter((onClickAction) => !!onClickAction),
           card: UserAuthCard({
-            title: "Register an account",
-            flow: flow,
-            ...(flow.oauth2_login_request && {
-              subtitle: `To authenticate ${
-                flow.oauth2_login_request.client?.client_name ||
-                flow.oauth2_login_request.client?.client_id
-              }`,
-            }),
+            flow,
             flowType: "registration",
             cardImage: logoUrl,
             additionalProps: {
@@ -104,7 +97,9 @@ export const createRegistrationRoute: RouteCreator =
                 initLoginQuery,
               ),
             },
-          }),
+          },
+            { locale: res.locals.lang },
+          ),
         })
       })
       .catch(redirectOnSoftError(res, next, initFlowUrl))

src/routes/sessions.ts

@@ -44,7 +44,7 @@ export const createSessionsRoute: RouteCreator =
         id: session?.identity.id,
         // sometimes the identity schema could contain recursive objects
         // for this use case we will just stringify the object instead of recursively flatten the object
-        ...Object.entries(session?.identity.traits).reduce<any>(
+        ...Object.entries(session?.identity.traits).reduce<Record<string, any>>(
           (traits, [key, value]) => {
             traits[key] =
               typeof value === "object" ? JSON.stringify(value) : value