Add app login page

.dockerignore

@@ -1,4 +1,33 @@
-node_modules/
-.github/
-.idea/
-.vscode/
+# Node modules
+node_modules
+npm-debug.log
+
+# Build artifacts
+.next
+out
+
+# Local environment files
+.env
+
+# Logs
+logs
+*.log
+
+# IDE and editor files
+.vscode
+.idea
+*.swp
+*.swo
+
+# Operating system files
+.DS_Store
+Thumbs.db
+
+# Git files
+.git
+.gitignore
+
+# Other files you may want to ignore
+coverage
+test-results
+*.tgz

.env.template

@@ -0,0 +1,5 @@
+ORY_SDK_URL=http://localhost:4433
+HYDRA_ADMIN_URL=http://localhost:4445
+HYDRA_PUBLIC_URL=http://localhost:4444
+BASE_PATH=/kratos-ui
+NEXT_PUBLIC_KRATOS_PUBLIC_URL=http://localhost:3000/kratos-ui

.gitignore

@@ -38,4 +38,5 @@ dist/
 cypress/videos
 cypress/screenshots
 
-.idea
+.idea
+.env

Dockerfile

@@ -15,7 +15,13 @@ RUN npm install
 
 COPY . .
 
-RUN npm run build 
+RUN npm run build
+
+# Copy the env substitution script and ensure it is executable
+COPY docker/30-env-subst.sh /docker-entrypoint.d/30-env-subst.sh
+RUN chmod +x /docker-entrypoint.d/30-env-subst.sh
+
+ENTRYPOINT ["/bin/sh", "-c", "/docker-entrypoint.d/30-env-subst.sh && exec \"$@\"", "--"]
 
 EXPOSE 3000
 

cypress.json

@@ -1,3 +1,3 @@
 {
-  "baseUrl": "http://localhost:3000"
+  "baseUrl": "http://localhost:3000/kratos-ui"
 }

docker/30-env-subst.sh

@@ -0,0 +1,19 @@
+#!/bin/sh
+
+# Log that the script is running
+echo "Running docker-entrypoint.sh."
+
+# Replace placeholder with actual environment variable values
+if [ -n "$BASE_PATH" ]; then
+  echo "Replacing BASE_PATH in env.template.js with ${BASE_PATH}"
+  sed -i "s|/__BASE_PATH__|${BASE_PATH}|g" /app/env.js
+else
+  echo "BASE_PATH is not set."
+fi
+
+# Log the contents of env.template.js after modification
+echo "Contents of env.template.js after replacement:"
+cat /app/env.js
+
+# Start the application
+echo "Starting the application..."

env.js

@@ -0,0 +1,6 @@
+module.exports = {
+  basePath: "/kratos-ui",
+  restSourceBackendEndpoint: "",
+  restSourceFrontendEndpoint: "",
+  hydraPublicUrl: "",
+}

next.config.js

@@ -1,4 +1,21 @@
-/** @type {import('next').NextConfig} */
+const envConfig = require("./env.js") // Load the generated config
+
 module.exports = {
   reactStrictMode: true,
+
+  // Set basePath and assetPrefix dynamically
+  basePath: envConfig.basePath || "",
+  assetPrefix: `${envConfig.basePath}/` || "",
+  restSourceBackendEndpoint: `${envConfig.restSourceBackendEndpoint}/` || "",
+  restSourceFrontendEndpoint: `${envConfig.restSourceFrontendEndpoint}/` || "",
+  hydraPublicUrl: `${envConfig.hydraPublicUrl}/` || "",
+
+  publicRuntimeConfig: {
+    basePath: envConfig.basePath || "",
+    frontEndClientId: "SEP",
+    frontEndClientSecret: "secret",
+    restSourceBackendEndpoint: envConfig.restSourceBackendEndpoint,
+    restSourceFrontendEndpoint: envConfig.restSourceFrontendEndpoint,
+    hydraPublicUrl: envConfig.hydraPublicUrl,
+  },
 }

package.json

@@ -27,9 +27,11 @@
     "next": "12.1.6",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-qr-code": "^2.0.15",
     "react-toastify": "^8.0.3",
     "styled-components": "^5.3.1",
-    "typescript": "^4.4.2"
+    "typescript": "^4.4.2",
+    "uuid": "^10.0.0"
   },
   "peerDependencies": {
     "next": "12.1.6",
@@ -42,6 +44,7 @@
     "@types/react": "~17.0.19",
     "@types/request": "^2.48.7",
     "@types/styled-components": "^5.1.13",
+    "@types/uuid": "^10.0.0",
     "cypress": "^8.7.0",
     "eslint": "7.32.0",
     "eslint-config-next": "12.0.3",

pages/_app.tsx

@@ -1,6 +1,7 @@
 import "../styles/globals.css"
 import { theme, globalStyles, ThemeProps } from "@ory/themes"
 import type { AppProps } from "next/app"
+import Head from "next/head"
 import { ToastContainer } from "react-toastify"
 import "react-toastify/dist/ReactToastify.css"
 import { ThemeProvider } from "styled-components"