Add PolicyNew page.

src/allPages.ts

@@ -23,6 +23,7 @@ import { NewTransitKeyPage } from "./pages/Secrets/Transit/NewTransitKey";
 import { Page } from "./types/Page";
 import { PoliciesHomePage } from "./pages/Policies/PoliciesHome";
 import { PolicyDeletePage } from "./pages/Policies/PolicyDelete";
+import { PolicyNewPage } from "./pages/Policies/PolicyNew";
 import { PolicyViewPage } from "./pages/Policies/PolicyView";
 import { PwGenPage } from "./pages/PwGen";
 import { SecretsHomePage } from "./pages/Secrets/SecretsHome";
@@ -59,6 +60,7 @@ export const allPages: pagesList = {
 
   POLICIES_HOME: new PoliciesHomePage(),
   POLICY_VIEW: new PolicyViewPage(),
+  POLICY_NEW: new PolicyNewPage(),
   POLICY_DELETE: new PolicyDeletePage(),
 
   ACCESS_HOME: new AccessHomePage(),

src/api/sys/policies/createOrUpdatePolicy.ts

@@ -0,0 +1,27 @@
+import { appendAPIURL, getHeaders } from "../../apiUtils";
+
+type OptionalErrors = { errors?: string[] };
+
+export async function createOrUpdatePolicy(name: string, policy_data: string): Promise<void> {
+  const request = new Request(appendAPIURL("/v1/sys/policies/acl/" + name), {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      ...getHeaders(),
+    },
+    body: JSON.stringify({ policy: policy_data }, null, 0),
+  });
+
+  const response = await fetch(request);
+  let data: OptionalErrors = {};
+
+  try {
+    data = (await response.json()) as OptionalErrors;
+  } catch {
+    // Do Nothing
+  }
+
+  if ("errors" in data) {
+    throw new Error(data.errors[0]);
+  }
+}

src/pages/Policies/PoliciesHome.tsx

@@ -1,7 +1,7 @@
 import { Margin } from "../../elements/Margin";
 import { Page } from "../../types/Page";
 import { getPolicies } from "../../api/sys/policies/getPolicies";
-import { notImplemented, prePageChecks } from "../../pageUtils";
+import { prePageChecks } from "../../pageUtils";
 import { render } from "preact";
 import i18next from "i18next";
 
@@ -25,7 +25,12 @@ export class PoliciesHomePage extends Page {
     render(
       <div>
         <p>
-          <button class="uk-button uk-button-primary" onClick={notImplemented}>
+          <button
+            class="uk-button uk-button-primary"
+            onClick={async () => {
+              await this.router.changePage("POLICY_NEW");
+            }}
+          >
             {i18next.t("policies_home_new_btn")}
           </button>
         </p>

src/pages/Policies/PolicyNew.tsx

@@ -0,0 +1,59 @@
+import { Form } from "../../elements/Form";
+import { Margin } from "../../elements/Margin";
+import { Page } from "../../types/Page";
+import { createOrUpdatePolicy } from "../../api/sys/policies/createOrUpdatePolicy";
+import { getPolicies } from "../../api/sys/policies/getPolicies";
+import { render } from "preact";
+import { setErrorText } from "../../pageUtils";
+import i18next from "i18next";
+
+export class PolicyNewPage extends Page {
+  constructor() {
+    super();
+  }
+  async goBack(): Promise<void> {
+    await this.router.changePage("POLICIES_HOME");
+  }
+  async render(): Promise<void> {
+    render(
+      <div>
+        <Form
+          onSubmit={async (formData) => {
+            const name = formData.get("name") as string;
+            if ((await getPolicies()).includes(name)) {
+              setErrorText(i18next.t("policy_new_already_exists"));
+              return;
+            }
+
+            try {
+              await createOrUpdatePolicy(name, " ");
+              this.state.policyItem = name;
+              await this.router.changePage("POLICY_VIEW");
+            } catch (e: unknown) {
+              const error = e as Error;
+              setErrorText(error.message);
+            }
+          }}
+        >
+          <Margin>
+            <input
+              class="uk-input uk-form-width-medium"
+              name="name"
+              placeholder={i18next.t("policy_new_name_placeholder")}
+              required
+            />
+          </Margin>
+          <p class="uk-text-danger" id="errorText" />
+          <button class="uk-button uk-button-primary" type="submit">
+            {i18next.t("policy_new_create_btn")}
+          </button>
+        </Form>
+      </div>,
+      this.router.pageContentElement,
+    );
+  }
+
+  get name(): string {
+    return i18next.t("policy_new_title");
+  }
+}

src/translations/en.js

@@ -303,4 +303,10 @@ module.exports = {
   policy_delete_text:
     "Are you sure you want to delete this policy? It can't be reversed and there is a chance that all permissions will break.",
   policy_delete_btn: "Delete Policy",
+
+  // Policy New
+  policy_new_title: "Create New Policy",
+  policy_new_name_placeholder: "Policy Name",
+  policy_new_create_btn: "Create",
+  policy_new_already_exists: "This policy already exists.",
 };