✨ Add Developer categpry

Author: AnandChowdhary

components/Manage.vue

@@ -48,10 +48,27 @@
           <font-awesome-icon class="nav-icon" icon="database" fixed-width />
           <span>Data &amp; security</span>
         </nuxt-link>
-        <nuxt-link class="item" :to="`/manage/${$route.params.team}/api-keys`">
+        <nuxt-link
+          class="item item--type-parent"
+          :to="`/manage/${$route.params.team}/developer/api-keys`"
+        >
           <font-awesome-icon class="nav-icon" icon="code" fixed-width />
           <span>Developer</span>
         </nuxt-link>
+        <nav v-if="$route.path.includes('/developer/')" class="sub-nav">
+          <nuxt-link
+            class="sub-item"
+            :to="`/manage/${$route.params.team}/developer/api-keys`"
+          >
+            <span>API keys</span>
+          </nuxt-link>
+          <nuxt-link
+            class="sub-item"
+            :to="`/manage/${$route.params.team}/developer/webhooks`"
+          >
+            <span>Webhooks</span>
+          </nuxt-link>
+        </nav>
       </nav>
     </aside>
     <div class="card">

components/Navbar.vue

@@ -163,7 +163,7 @@ import { mapGetters } from "vuex";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import Trap from "vue-focus-lock";
-import Feeedback from "feeedback";
+// import Feeedback from "feeedback";
 import {
   faBell,
   faQuestionCircle,
@@ -172,14 +172,14 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import Notifications from "@/components/Notifications.vue";
 library.add(faBell, faQuestionCircle, faBars, faTimes);
-const feedback = new Feeedback({
-  onSubmit: result =>
-    new Promise((resolve, reject) => {
-      if (window.agastya && typeof window.agastya.secureTrack === "function")
-        window.agastya.secureTrack({ feedback: result });
-      resolve();
-    })
-});
+// const feedback = new Feeedback({
+//   onSubmit: result =>
+//     new Promise((resolve, reject) => {
+//       if (window.agastya && typeof window.agastya.secureTrack === "function")
+//         window.agastya.secureTrack({ feedback: result });
+//       resolve();
+//     })
+// });
 
 @Component({
   computed: mapGetters({
@@ -249,7 +249,7 @@ export default class Card extends Vue {
       });
   }
   private feedback() {
-    feedback.open();
+    // feedback.open();
   }
 }
 </script>

locales/en.ts

@@ -28,7 +28,11 @@ export default {
       "You don't have the permission to perform this action",
     "user-is-member-already": "This user is already a member",
     "invalid-2fa-token": "This 2FA verification code is incorrect",
-    "oauth-no-email": "We couldn't find an account with that email"
+    "oauth-no-email": "We couldn't find an account with that email",
+    "domain-missing-file": "We couldn't find the verification file",
+    "domain-missing-dns": "We didn't find the DNS record",
+    "domain-already-verified": "This domain is already verified",
+    "cannot-invite-domain": "You cannot invite a member from this domain"
   },
   securityEvents: {
     "user.created": "Created account",
@@ -76,11 +80,7 @@ export default {
     "billing-source-created": "Your payment method has been created",
     "billing-source-updated": "Your payment method has been updated",
     "billing-source-deleted": "Your payment method has been deleted",
-    "domain-unable-to-verify": "We weren't able to verify your domain",
-    "domain-missing-file": "We couldn't find the verification file",
-    "domain-missing-dns": "We didn't find the DNS record",
-    "domain-already-verified": "This domain is already verified",
-    "cannot-invite-domain": "You cannot invite a member from this domain"
+    "domain-unable-to-verify": "We weren't able to verify your domain"
   },
   membershipRoles: {
     1: "Owner",

pages/manage/_team/api-keys/_key.vue renamed to pages/manage/_team/developer/api-keys/_key.vue

@@ -28,7 +28,7 @@
       <div v-if="accessToken">
         <h2>Use access token</h2>
         <Input
-          label="access token"
+          label="Access token"
           :value="accessToken.jwtAccessToken"
           disabled
         />

pages/manage/_team/api-keys/index.vue renamed to pages/manage/_team/developer/api-keys/index.vue

@@ -18,7 +18,9 @@ export const state = (): RootState => ({
   apiKeys: {},
   apiKey: {},
   domains: {},
-  domain: {}
+  domain: {},
+  webhooks: {},
+  webhook: {}
 });
 
 export const mutations: MutationTree<RootState> = {
@@ -149,6 +151,26 @@ export const mutations: MutationTree<RootState> = {
     currentDomains[team][id] = { ...domain };
     Vue.set(state, "domain", currentDomains);
   },
+  setWebhooks(state: RootState, { team, webhooks, start, next }): void {
+    const currentWebhooks = state.webhooks;
+    currentWebhooks[team] = currentWebhooks[team] || emptyPagination;
+    if (start) {
+      currentWebhooks[team].data = [
+        ...currentWebhooks[team].data,
+        ...webhooks.data
+      ];
+    } else {
+      currentWebhooks[team].data = webhooks.data;
+    }
+    currentWebhooks[team].next = next;
+    Vue.set(state, "webhooks", currentWebhooks);
+  },
+  setWebhook(state: RootState, { team, webhook, id }): void {
+    const currentWebhooks = state.webhook;
+    currentWebhooks[team] = currentWebhooks[team] || {};
+    currentWebhooks[team][id] = { ...webhook };
+    Vue.set(state, "webhook", currentWebhooks);
+  },
   setPricingPlans(state: RootState, pricingPlans: any): void {
     Vue.set(state, "pricingPlans", pricingPlans);
   },
@@ -172,6 +194,8 @@ export const mutations: MutationTree<RootState> = {
     delete state.apiKey;
     delete state.domains;
     delete state.domain;
+    delete state.webhooks;
+    delete state.webhook;
   }
 };
 
@@ -413,6 +437,41 @@ export const actions: ActionTree<RootState, RootState> = {
       data
     );
     return dispatch("getDomain", context);
+  },async getWebhooks({ commit }, { team, start = 0 }) {
+    const webhooks: any = (await this.$axios.get(
+      `/organizations/${team}/webhooks?start=${start}`
+    )).data;
+    commit("setWebhooks", { team, webhooks, start, next: webhooks.next });
+    return webhooks;
+  },
+  async getWebhook({ commit }, { team, id }) {
+    const webhook: any = (await this.$axios.get(
+      `/organizations/${team}/webhooks/${id}`
+    )).data;
+    commit("setWebhook", { team, webhook, id });
+    return webhook;
+  },
+  async createWebhook({ dispatch }, context) {
+    const data = { ...context };
+    delete data.team;
+    await this.$axios.put(`/organizations/${context.team}/webhooks`, data);
+    return dispatch("getWebhooks", { team: context.team });
+  },
+  async deleteWebhook({ dispatch }, context) {
+    await this.$axios.delete(
+      `/organizations/${context.team}/webhooks/${context.id}`
+    );
+    return dispatch("getWebhooks", { team: context.team });
+  },
+  async updateWebhook({ dispatch }, context) {
+    const data = { ...context };
+    delete data.team;
+    delete data.id;
+    await this.$axios.patch(
+      `/organizations/${context.team}/webhooks/${context.id}`,
+      data
+    );
+    return dispatch("getWebhook", context);
   },
   async getEvents({ commit, rootGetters }) {
     const org = rootGetters["auth/activeOrganization"];

pages/users/_slug/access-tokens/_key.vue

@@ -158,7 +158,7 @@ export const actions: ActionTree<RootState, RootState> = {
   },
   async deleteMembership({ dispatch }, context) {
     await this.$axios.delete(
-      `/users/${context.slug}/memberships/${context.id}`
+      `/${context.slug}/memberships/${context.id}`
     );
     return dispatch("getMemberships", { slug: context.slug });
   },

store/manage.ts

@@ -15,7 +15,6 @@ export interface Membership extends IdRow {
 export interface ApiKey extends IdRow {
   jwtApiKey: string;
   scopes: string;
-  organizationId: number;
   ipRestrictions?: string;
   referrerRestrictions?: string;
 }
@@ -24,6 +23,13 @@ export interface Domain extends Row {
   verificationCode: string;
   isVerified: boolean;
 }
+export interface Webhook extends Row {
+  url: string;
+  event: string;
+  secret: string;
+  contentType: string;
+  isActive: boolean;
+}
 
 export interface Members extends Paginated {
   data: Membership[];
@@ -43,6 +49,9 @@ export interface ApiKeys extends Paginated {
 export interface Domains extends Paginated {
   data: Domain[];
 }
+export interface Webhooks extends Paginated {
+  data: Webhook[];
+}
 export interface Address {
   state: string;
   country: string;
@@ -82,6 +91,10 @@ export interface ApiKeysKV {
 export interface DomainsKV {
   [index: string]: Domains;
 }
+export interface WebhooksKV {
+  [index: string]: Webhooks;
+}
+
 export interface SingleSubscriptionKV {
   [index: string]: {
     [index: string]: subscriptions.ISubscription;
@@ -107,6 +120,11 @@ export interface SingleDomainKV {
     [index: string]: Domain;
   };
 }
+export interface SingleWebhookKV {
+  [index: string]: {
+    [index: string]: Webhook;
+  };
+}
 
 export interface RootState {
   membership?: Membership;
@@ -123,6 +141,8 @@ export interface RootState {
   apiKey: SingleApiKeyKV;
   domains: DomainsKV;
   domain: SingleDomainKV;
+  webhooks: WebhooksKV;
+  webhook: SingleWebhookKV;
   pricingPlans?: any;
   recentEvents?: any;
   isDownloading: boolean;