projectsettings: add delete project

src/components/projectsettings.vue

@@ -1,11 +1,45 @@
 <template>
   <div>
     <projectvars :variables="variables" :allvariables="allvariables"/>
+    <hr>
+    <div>
+      <h4 class="title is-4">Delete This Project</h4>
+
+      <div class="message is-danger">
+        <div class="message-body">
+          This operation
+          <strong>CANNOT</strong> be undone.
+          This operation will remove
+          <strong>{{projectPath}}</strong>
+        </div>
+      </div>
+      <label class="label">
+        Please type the project name for confirmation:
+        <span
+          class="has-text-danger"
+        >{{ projectName }}</span>
+      </label>
+      <div class="field">
+        <input
+          v-model="projectNameToDelete"
+          class="input"
+          type="email"
+          placeholder="Project name to delete"
+        >
+      </div>
+      <button
+        class="button is-danger"
+        @click="deleteProject()"
+        :disabled="!deleteButtonEnabled"
+      >Delete Project</button>
+    </div>
   </div>
 </template>
 
 <script>
-import { fetchVariables } from "@/util/data.js";
+import { fetchVariables, deleteProject } from "@/util/data.js";
+
+import { projectGroupLink } from "@/util/link.js";
 
 import projectvars from "@/components/projectvars";
 
@@ -20,9 +54,41 @@ export default {
   data() {
     return {
       variables: [],
-      allvariables: []
+      allvariables: [],
+      projectNameToDelete: ""
     };
   },
+  computed: {
+    projectName: function() {
+      return this.projectref[this.projectref.length - 1];
+    },
+    projectPath: function() {
+      return ["", this.ownertype, this.ownername, ...this.projectref].join("/");
+    },
+    deleteButtonEnabled: function() {
+      return this.projectNameToDelete == this.projectName;
+    }
+  },
+  methods: {
+    async deleteProject() {
+      let projectref = [
+        this.ownertype,
+        this.ownername,
+        ...this.projectref
+      ].join("/");
+
+      if (this.projectNameToDelete == this.projectName) {
+        let res = await deleteProject(projectref);
+        this.$router.push(
+          projectGroupLink(
+            this.ownertype,
+            this.ownername,
+            this.projectref.slice(0, -1)
+          )
+        );
+      }
+    }
+  },
   created: async function() {
     this.variables = await fetchVariables(
       "project",

src/util/data.js

@@ -149,4 +149,13 @@ export async function createProject(parentref, name, remotesourcename, remoterep
     }
     let res = await fetch(apiurl(path), init)
     return res.json();
+}
+
+export async function deleteProject(projectref) {
+    let path = "/projects/" + encodeURIComponent(projectref)
+    let init = {
+        method: "DELETE",
+    }
+    let res = await fetch(apiurl(path), init)
+    return res.text();
 }