@raketa-cloud/admin 0.0.1

package/biome.json

@@ -0,0 +1,6 @@
+{
+  "extends": ["../../biome.json"],
+  "files": {
+    "ignore": ["src/lib/logger.tsx"]
+  }
+}

package/jest.config.js

@@ -0,0 +1,15 @@
+const { pathsToModuleNameMapper } = require("ts-jest");
+const { compilerOptions } = require("./tsconfig.json");
+
+module.exports = {
+  clearMocks: true,
+  preset: "ts-jest",
+  testEnvironment: "node",
+  globalSetup: "./tests/support/setup.js",
+  transform: {
+    "^.+\\.ts?$": "ts-jest",
+  },
+  roots: ["."],
+  modulePaths: [compilerOptions.baseUrl],
+  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths),
+};

package/package.json

@@ -0,0 +1,31 @@
+{
+	"name": "@raketa-cloud/admin",
+	"version": "0.0.1",
+	"private": false,
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"scripts": {
+		"build": "tsup src/index.ts --format cjs --loader \".js=jsx\"",
+		"dev": "tsup src/index.ts --format cjs --loader \".js=jsx\" --watch",
+		"lint": "biome lint --apply .",
+		"test": "jest --verbose",
+		"format": "prettier --write ."
+	},
+	"devDependencies": {
+		"@jest/globals": "^29.7.0",
+		"@repo/typescript-config": "*",
+		"@turbo/gen": "^1.11.3",
+		"@types/jest": "^29.5.8",
+		"@types/node": "^20.10.6",
+		"jest": "^29.7.0",
+		"ts-jest": "^29.1.1",
+		"tsup": "6.5.0",
+		"typescript": "^5.3.3"
+	},
+	"dependencies": {
+		"@biomejs/biome": "1.5.3",
+		"graphql-request": "^6.1.0",
+		"hono": "^3.12.3",
+		"prettier": "^3.2.4"
+	}
+}

package/src/app.tsx

@@ -0,0 +1,19 @@
+import { Hono } from "hono";
+import logger from "src/middleware/logger";
+import httpLogger from "src/middleware/http_logger";
+import auth from "src/middleware/authentication";
+
+import tagsApp from "src/crud/tags";
+import loginApp from "src/crud/login";
+import logoutApp from "src/crud/logout";
+
+const app = new Hono();
+app.use("*", logger);
+app.use("*", httpLogger);
+app.use("*", auth);
+
+app.route("/", tagsApp);
+app.route("/", loginApp);
+app.route("/", logoutApp);
+
+export default app;

package/src/crud/login.tsx

@@ -0,0 +1,99 @@
+import { Hono } from "hono";
+import type { FC } from "hono/jsx";
+import Layout from "src/shared/Layout";
+import login from "src/lib/gateway/login";
+import { setCookie, deleteCookie } from "hono/cookie";
+import { decode } from "hono/jwt";
+import { CookieOptions } from "hono/utils/cookie";
+
+const app = new Hono();
+
+// Login part
+const LoginForm: FC = ({ login = {}, errors = {} }) => {
+  return (
+    <div class="container mx-auto py-16">
+      <h1 class="mb-8 text-2xl font-bold">Login</h1>
+
+      {errors.general && (
+        <p>
+          <span>{errors.general}</span>
+        </p>
+      )}
+
+      <form method="POST" action="/login">
+        <div class="flex gap-2">
+          <label>Email</label>
+          <input type="email" value={login.email} name="email" class="border" />
+          {errors.email && <span>{errors.email}</span>}
+        </div>
+
+        <div class="flex gap-2">
+          <label>Password</label>
+          <input type="password" value="" name="password" class="border" />
+        </div>
+
+        <div class="flex gap-4">
+          <button type="submit">Login</button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+app.get("/login", async (c) => {
+  const errors = {};
+
+  if (c.req.query().reason === "inactive") {
+    (errors as any).general =
+      "Your user is not activated. Please contact your administrator for more information";
+  }
+
+  return c.html(
+    <Layout context={c}>
+      <LoginForm errors={errors} />
+    </Layout>,
+  );
+});
+
+app.post("/login", async (c) => {
+  const body = await c.req.parseBody();
+
+  const email = body.email as string;
+  const password = body.password as string;
+
+  const resp = await login.create(email, password, c);
+
+  if ((resp as any).login.errors) {
+    const errors = {};
+
+    (resp as any).login.errors.forEach((error: any) => {
+      const key = error.key;
+
+      (errors as any)[key] = [(errors as any)[key] || "", error.message]
+        .filter(Boolean)
+        .join("; ");
+    });
+
+    deleteCookie(c, "authToken");
+    return c.html(
+      <Layout context={c}>
+        <LoginForm login={{ email }} errors={errors} />
+      </Layout>,
+    );
+  }
+
+  const token = (resp as any).login.accessToken;
+  const expiration =
+    (decode(token) as any).payload.exp ||
+    (new Date().getTime() / 1000).toFixed(0);
+
+  const opts = {
+    expires: new Date(expiration * 1000),
+  } as CookieOptions;
+
+  setCookie(c, "authToken", token, opts);
+
+  return c.redirect("/tags", 301);
+});
+
+export default app;

package/src/crud/logout.tsx

@@ -0,0 +1,14 @@
+import { Hono } from "hono";
+import { deleteCookie } from "hono/cookie";
+
+const app = new Hono();
+
+app.delete("/logout", async (c) => {
+  deleteCookie(c, "authToken");
+
+  c.header("HX-Redirect", "/login");
+  c.status(201);
+  return c.json({ message: "Bye" });
+});
+
+export default app;

package/src/crud/tags.tsx

@@ -0,0 +1,235 @@
+import type { FC } from "hono/jsx";
+import { Hono } from "hono";
+import tags from "src/lib/dxp/private/tags";
+import Layout from "src/shared/Layout";
+
+const TagsList: FC = ({ data }) => {
+  // TODO: Pagination!
+  const list = data?.tags?.list || [];
+
+  const results = list.map((tag: any) => (
+    <tr class="bg-transparent hover:bg-yellow-50 transition">
+      <td class="p-4 border-b">
+        <a
+          href={`/tags/${tag.id}/edit`}
+          class="underline font-semibold hover:no-underline"
+        >
+          {tag.name}
+        </a>
+      </td>
+      <td class="p-4 border-b">{tag.slug}</td>
+    </tr>
+  ));
+
+  return (
+    <>
+      {results.length > 0 && results}
+      {results.length === 0 && (
+        <tr>
+          <td colspan={2} class="p-4">
+            Not found.
+          </td>
+        </tr>
+      )}
+    </>
+  );
+};
+
+const Tags: FC = ({ data }) => {
+  return (
+    <div class="container mx-auto py-16">
+      <h1 class="mb-8 text-2xl font-bold">Tags</h1>
+
+      <a href="/tags/new">New</a>
+
+      <table class="w-full">
+        <thead>
+          <tr>
+            <th class="p-4 border-b text-left">Name</th>
+            <th class="p-4 border-b text-left">URL</th>
+          </tr>
+        </thead>
+        <TagsList data={data} />
+      </table>
+    </div>
+  );
+};
+
+const Form: FC = ({ action, tag, errors = {} }) => {
+  return (
+    <form method="POST" action={action}>
+      <div class="flex gap-2">
+        <label>Name</label>
+        <input type="text" value={tag.name} name="name" class="border" />
+        {errors.name && <span>{errors.name}</span>}
+      </div>
+
+      <div class="flex gap-2">
+        <label>URL</label>
+        <input type="text" value={tag.slug} name="slug" class="border" />
+        {errors.slug && <span>{errors.slug}</span>}
+      </div>
+
+      <div class="flex gap-4">
+        <button type="submit">Save</button>
+        <a href="/tags">Back</a>
+        {tag.id && (
+          <button
+            type="button"
+            hx-delete={`/tags/${tag.id}`}
+            hx-confirm="Are you sure you wish to delete this tag?"
+          >
+            DELETE
+          </button>
+        )}
+      </div>
+    </form>
+  );
+};
+
+const EditForm: FC = ({ tag, errors = {} }) => {
+  return (
+    <div class="container mx-auto py-16">
+      <h1 class="mb-8 text-2xl font-bold">Tags</h1>
+
+      <Form action={`/tags/${tag.id}`} tag={tag} errors={errors} />
+    </div>
+  );
+};
+
+const NewForm: FC = ({ tag = {}, errors = {} }) => {
+  return (
+    <div class="container mx-auto py-16">
+      <h1 class="mb-8 text-2xl font-bold">Tags</h1>
+
+      <Form action="/tags" tag={tag} errors={errors} />
+    </div>
+  );
+};
+
+const app = new Hono();
+
+app.get("/tags", async (c) => {
+  const data = await tags.list({ input: { locale: "en" } }, c);
+
+  return c.html(
+    <Layout context={c}>
+      <Tags data={data} />
+    </Layout>,
+  );
+});
+
+app.get("/tags/new", (c) => c.html(<NewForm />));
+
+app.get("/tags/:id/edit", async (c) => {
+  const { tag }: any = await tags.find(parseInt(c.req.param().id, 10), "en", c);
+
+  return c.html(
+    <Layout context={c}>
+      <EditForm tag={tag} />
+    </Layout>,
+  );
+});
+
+app.delete("/tags/:id", async (c) => {
+  const { tag }: any = await tags.find(parseInt(c.req.param().id, 10), "en", c);
+  const resp = await tags.delete(tag.id, "en", c);
+  const deleteTag = (resp as any).deleteTag;
+
+  if (deleteTag.errors) {
+    throw `ERROR: ${deleteTag.errors}`;
+  }
+
+  c.header("HX-Redirect", "/tags");
+  c.status(201);
+
+  return c.json(deleteTag.tag);
+});
+
+app.post("/tags/:id", async (c) => {
+  const body = await c.req.parseBody();
+
+  const { tag }: any = await tags.find(parseInt(c.req.param().id, 10), "en", c);
+
+  const resp = await tags.update(
+    {
+      input: {
+        locale: "en",
+        id: tag.id,
+        tag: {
+          name: body.name as string,
+          slug: body.slug as string,
+        },
+      },
+    },
+    c,
+  );
+
+  if ((resp as any).updateTag.errors) {
+    const errors = {};
+
+    (resp as any).updateTag.errors.forEach((error: any) => {
+      const key = error.key;
+
+      (errors as any)[key] = [(errors as any)[key] || "", error.message]
+        .filter(Boolean)
+        .join("; ");
+    });
+
+    return c.html(
+      <Layout context={c}>
+        <EditForm
+          tag={{
+            id: tag.id,
+            name: body.name as string,
+            slug: body.slug as string,
+          }}
+          errors={errors}
+        />
+      </Layout>,
+    );
+  }
+
+  return c.redirect("/tags", 301);
+});
+
+app.post("/tags", async (c) => {
+  const body = await c.req.parseBody();
+
+  const tag = {
+    name: body.name as string,
+    slug: body.slug as string,
+  };
+
+  const resp = await tags.create(
+    {
+      input: {
+        locale: "en",
+        tag,
+      },
+    },
+    c,
+  );
+
+  if ((resp as any).createTag.errors) {
+    const errors = {};
+
+    (resp as any).createTag.errors.forEach((error: any) => {
+      const key = error.key;
+
+      (errors as any)[key] = [(errors as any)[key] || "", error.message]
+        .filter(Boolean)
+        .join("; ");
+    });
+
+    return c.html(
+      <Layout context={c}>
+        <NewForm tag={tag} errors={errors} />
+      </Layout>,
+    );
+  }
+
+  return c.redirect("/tags", 301);
+});
+
+export default app;

package/src/index.ts

@@ -0,0 +1 @@
+export { default as adminApp } from "./app";

package/src/lib/dxp/private/tags.ts

@@ -0,0 +1,106 @@
+import { Context } from "hono";
+import { dxpPrivateRequest } from "../protocol";
+import { gql } from "../../gqlEngine";
+
+const TagsDocument = gql`
+  query Tags($input: TagsInput!) {
+    tags(input: $input) {
+      list {
+        id
+        name
+        slug
+      }
+      pagination {
+        currentPage
+        pagesCount
+        entriesCount
+        pageSize
+      }
+    }
+  }
+`;
+
+const CreateTagDocument = gql`
+  mutation CreateTag($input: CreateTagInput!) {
+    createTag(input: $input) {
+      tag {
+        id
+        slug
+        name
+      }
+      errors {
+        key
+        message
+        codes {
+          key
+          placeholders
+        }
+      }
+    }
+  }
+`;
+
+const UpdateTagDocument = gql`
+  mutation UpdateTag($input: UpdateTagInput!) {
+    updateTag(input: $input) {
+      tag {
+        id
+        slug
+        name
+      }
+      errors {
+        key
+        message
+        codes {
+          key
+          placeholders
+        }
+      }
+    }
+  }
+`;
+
+const DeleteTagDocument = gql`
+  mutation DeleteTag($input: IdInput!) {
+    deleteTag(input: $input) {
+      tag {
+        id
+        slug
+        name
+      }
+      errors {
+        key
+        message
+        codes {
+          key
+          placeholders
+        }
+      }
+    }
+  }
+`;
+
+const TagByIdDocument = gql`
+  query TagByID($input: IdInput!) {
+    tag(input: $input) {
+      id
+      slug
+      name
+    }
+  }
+`;
+
+const tags = {
+  list: async (variables: any, honoCtx: Context) =>
+    dxpPrivateRequest(TagsDocument, variables, honoCtx),
+  find: async (id: number, locale: string, honoCtx: Context) =>
+    dxpPrivateRequest(TagByIdDocument, { input: { id, locale } }, honoCtx),
+  create: async (variables: any, honoCtx: Context) =>
+    dxpPrivateRequest(CreateTagDocument, variables, honoCtx),
+  update: async (variables: any, honoCtx: Context) =>
+    dxpPrivateRequest(UpdateTagDocument, variables, honoCtx),
+  delete: async (id: number, locale: string, honoCtx: Context) =>
+    dxpPrivateRequest(DeleteTagDocument, { input: { id, locale } }, honoCtx),
+};
+
+export default tags;

package/src/lib/dxp/protocol.ts

@@ -0,0 +1,32 @@
+import { getCookie } from "hono/cookie";
+import { env } from "hono/adapter";
+import { gqlRequest } from "../gqlEngine";
+
+export function dxpPublicRequest(query: string, variables: any, honoCtx: any) {
+  const {
+    RAKETA_GATEWAY_DISPATCH_URL,
+    RAKETA_GATEWAY_PROJECT,
+    RAKETA_DXP_PRIVATE_SERVICE,
+  } = env(honoCtx);
+
+  return gqlRequest(RAKETA_GATEWAY_DISPATCH_URL, query, variables, {
+    "x-raketa-project": RAKETA_GATEWAY_PROJECT,
+    "x-raketa-service": RAKETA_DXP_PRIVATE_SERVICE,
+  });
+}
+
+export function dxpPrivateRequest(query: string, variables: any, honoCtx: any) {
+  const token = getCookie(honoCtx, "authToken");
+
+  const {
+    RAKETA_GATEWAY_DISPATCH_URL,
+    RAKETA_GATEWAY_PROJECT,
+    RAKETA_DXP_PRIVATE_SERVICE,
+  } = env(honoCtx);
+
+  return gqlRequest(RAKETA_GATEWAY_DISPATCH_URL, query, variables, {
+    "x-raketa-project": RAKETA_GATEWAY_PROJECT,
+    "x-raketa-service": RAKETA_DXP_PRIVATE_SERVICE,
+    "x-raketa-identity": token,
+  });
+}

package/src/lib/gateway/login.ts

@@ -0,0 +1,44 @@
+import { Context } from "hono";
+import { env } from "hono/adapter";
+import { gql } from "../gqlEngine";
+import { gatewayRequest } from "./protocol";
+
+const LoginDocument = gql`
+  mutation Login($input: LoginInput!) {
+    login(input: $input) {
+      accessToken
+      errors {
+        key
+        message
+      }
+    }
+  }
+`;
+
+const login = {
+  create: async (email: string, password: string, honoCtx: Context) => {
+    const {
+      RAKETA_GATEWAY_PRIMARY_USER_POOL,
+      RAKETA_GATEWAY_SECONDARY_USER_POOL,
+      RAKETA_GATEWAY_PROJECT,
+    } = env(honoCtx);
+
+    return gatewayRequest(
+      LoginDocument,
+      {
+        input: {
+          email,
+          password,
+          userPools: [
+            RAKETA_GATEWAY_PRIMARY_USER_POOL,
+            RAKETA_GATEWAY_SECONDARY_USER_POOL,
+          ].filter(Boolean),
+          project: RAKETA_GATEWAY_PROJECT,
+        },
+      },
+      honoCtx,
+    );
+  },
+};
+
+export default login;

package/src/lib/gateway/protocol.ts

@@ -0,0 +1,8 @@
+import { env } from "hono/adapter";
+import { gqlRequest } from "../gqlEngine";
+
+export function gatewayRequest(query: string, variables: any, honoCtx: any) {
+  const { RAKETA_GATEWAY_AUTH_URL } = env(honoCtx);
+
+  return gqlRequest(RAKETA_GATEWAY_AUTH_URL, query, variables);
+}

package/src/lib/gqlEngine.ts

@@ -0,0 +1,17 @@
+import { request, gql } from "graphql-request";
+
+export function gqlRequest(
+  url: string,
+  query: string,
+  variables = {},
+  headers = {},
+) {
+  return request({
+    url,
+    document: query,
+    variables: variables,
+    requestHeaders: headers,
+  });
+}
+
+export { gql };