Implement frontend UI

amitmohleji · amitmohleji · commit 3fdd277a292d · 2025-03-11T03:27:00.000Z
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -0,0 +1,6 @@
+FROM node:18-alpine
+WORKDIR /app
+COPY package.json ./
+RUN npm install
+COPY . .
+CMD ["node", "server.js"]
diff --git a/frontend/package.json b/frontend/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "frontend",
+  "version": "1.0.0",
+  "dependencies": {
+    "express": "^4.18.2",
+    "node-fetch": "^2.6.7"
+  }
+}
diff --git a/frontend/public/app.js b/frontend/public/app.js
@@ -0,0 +1,33 @@
+let token = null;
+
+async function login() {
+  const username = document.getElementById("username").value;
+  const password = document.getElementById("password").value;
+
+  const res = await fetch("/api/login", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ username, password }),
+  });
+
+  const data = await res.json();
+  token = data.token;
+  document.getElementById("output").textContent = "Logged in!";
+}
+
+async function placeOrder() {
+  const productId = document.getElementById("product").value;
+  const quantity = parseInt(document.getElementById("quantity").value);
+
+  const res = await fetch("/api/orders", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": "Bearer " + token
+    },
+    body: JSON.stringify({ productId, quantity }),
+  });
+
+  const text = await res.text();
+  document.getElementById("output").textContent = text;
+}
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Demo Shop</title>
+  <script defer src="app.js"></script>
+</head>
+<body>
+  <h1>Login</h1>
+  <input id="username" placeholder="Username" />
+  <input id="password" type="password" />
+  <button onclick="login()">Login</button>
+
+  <h1>Order</h1>
+  <input id="product" placeholder="Product ID" />
+  <input id="quantity" type="number" value="1" />
+  <button onclick="placeOrder()">Place Order</button>
+
+  <pre id="output"></pre>
+</body>
+</html>
diff --git a/frontend/server.js b/frontend/server.js
@@ -0,0 +1,37 @@
+const express = require("express");
+const fetch = require("node-fetch");
+const app = express();
+
+const AUTH_URL   = process.env.AUTH_URL   || "http://auth-python:8000";
+const ORDERS_URL = process.env.ORDERS_URL || "http://orders-java:8080";
+
+app.use(express.static("public"));
+app.use(express.json());
+
+app.post("/api/login", async (req, res) => {
+  const response = await fetch(`${AUTH_URL}/auth/login`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(req.body),
+  });
+
+  const data = await response.json();
+  res.json(data);
+});
+
+app.post("/api/orders", async (req, res) => {
+  const token = req.headers["authorization"];
+  const response = await fetch(`${ORDERS_URL}/orders`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": token,
+    },
+    body: JSON.stringify(req.body),
+  });
+
+  const text = await response.text();
+  res.status(response.status).send(text);
+});
+
+app.listen(3000, () => console.log("Frontend on :3000"));
