*: implement new organization

Add dropdown in the main navbar with an option to create a new organization.
Implement new organization component and related route

src/App.vue

@@ -22,6 +22,18 @@
         <div class="navbar-menu">
           <div class="navbar-start"></div>
           <div class="navbar-end">
+            <div
+              v-if="user"
+              class="navbar-item has-dropdown"
+              v-bind:class="{ 'is-active': createDropdownActive }"
+            >
+              <a class="navbar-link" @click="toggleCreateDropdown()">
+                <i class="mdi mdi-plus-box mdi-24px"/>
+              </a>
+              <div class="navbar-dropdown">
+                <router-link class="navbar-item" to="/neworganization">New Organization</router-link>
+              </div>
+            </div>
             <div
               v-if="user"
               class="navbar-item has-dropdown"
@@ -85,7 +97,8 @@ export default {
   data() {
     return {
       routerActive: true,
-      userDropdownActive: false
+      userDropdownActive: false,
+      createDropdownActive: false
     };
   },
   watch: {
@@ -99,6 +112,7 @@ export default {
     },
     $route: function() {
       this.userDropdownActive = false;
+      this.createDropdownActive = false;
     }
   },
   // method to reload current view from https://github.com/vuejs/vue-router/issues/296#issuecomment-356530037
@@ -110,6 +124,9 @@ export default {
     },
     toggleUserDropdown() {
       this.userDropdownActive = !this.userDropdownActive;
+    },
+    toggleCreateDropdown() {
+      this.createDropdownActive = !this.createDropdownActive;
     }
   }
 };

src/components/createorganization.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <h4 class="title is-4">New Organization</h4>
+    <div class="field">
+      <div class="control">
+        <input class="input" type="text" placeholder="Organization name" v-model="orgName">
+      </div>
+    </div>
+    <div class="field">
+      <div class="control">
+        <label class="checkbox">
+          <input type="checkbox" v-model="orgIsPrivate">
+          Private
+        </label>
+      </div>
+    </div>
+    <div class="field is-grouped">
+      <div class="control">
+        <button class="button is-primary" @click="createOrg()">Create Organization</button>
+      </div>
+    </div>
+    <div v-if="createOrgError" class="message is-danger">
+      <div class="message-body">{{ createOrgError }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { createOrganization } from "@/util/data.js";
+
+import { ownerLink } from "@/util/link.js";
+
+export default {
+  components: {},
+  name: "createorganization",
+  props: {},
+  data() {
+    return {
+      createOrgError: null,
+      orgIsPrivate: false,
+      orgName: null
+    };
+  },
+  methods: {
+    resetErrors() {
+      this.createOrgError = null;
+    },
+    async createOrg() {
+      this.resetErrors();
+
+      let visibility = "public";
+      if (this.orgIsPrivate) {
+        visibility = "private";
+      }
+
+      let { error } = await createOrganization(this.orgName, visibility);
+      if (error) {
+        this.createOrgError = error;
+        return;
+      }
+
+      this.$router.push(ownerLink("org", this.orgName));
+    }
+  },
+  created: async function() {}
+};
+</script>
+
+<style scoped lang="scss">
+@import "@/css/_variables.scss";
+</style>
+
+

src/router.js

@@ -11,6 +11,7 @@ import projectsettings from "./components/projectsettings.vue";
 import projectgroupsettings from "./components/projectgroupsettings.vue";
 import createproject from "./components/createproject.vue";
 import createprojectgroup from "./components/createprojectgroup.vue";
+import createorganization from "./components/createorganization.vue";
 import runs from "./components/runs.vue";
 import run from "./components/run.vue";
 import task from "./components/task.vue";
@@ -53,6 +54,10 @@ const router = new VueRouter({
       name: "home",
       component: Home
     },
+    {
+      path: "/neworganization",
+      component: createorganization,
+    },
     {
       path: "/user/:username",
       component: User,

src/util/data.js

@@ -105,6 +105,18 @@ export async function fetchVariables(ownertype, ref, all) {
     return await fetch(apiurl(path));
 }
 
+export async function createOrganization(orgname, visibility) {
+    let path = "/orgs"
+    let init = {
+        method: "POST",
+        body: JSON.stringify({
+            name: orgname,
+            visibility: visibility,
+        })
+    }
+    return await fetch(apiurl(path), init)
+}
+
 export async function createUserToken(username, tokenname) {
     let path = "/users/" + username + "/tokens"
     let init = {