From 64c9a807c7581c0be8d6beafd2698de0390e1f7f Mon Sep 17 00:00:00 2001
From: Paulo <pauloeduardo2709@gmail.com>
Date: Wed, 14 Jul 2021 08:56:11 -0300
Subject: [PATCH] feat: add create remote source form

---
 src/components/createsourceform.vue | 151 ++++++++++++++++++++++++++++
 src/router.js                       |   8 +-
 src/util/auth.js                    |   6 +-
 src/util/data.js                    |  32 +++++-
 src/views/CreateSource.vue          |  61 +++++++++++
 src/views/Login.vue                 |   8 ++
 src/views/Register.vue              |   8 ++
 7 files changed, 268 insertions(+), 6 deletions(-)
 create mode 100644 src/components/createsourceform.vue
 create mode 100644 src/views/CreateSource.vue

diff --git a/src/components/createsourceform.vue b/src/components/createsourceform.vue
new file mode 100644
index 0000000..3e27d64
--- /dev/null
+++ b/src/components/createsourceform.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="w-6/12">
+    <h1>
+      If you need more advanced options or a little help,
+      <a 
+        class="text-blue-600"
+        rel="noopener noreferrer nofollow"
+        href="https://agola.io/tryit/#test-using-a-local-gitea-instance"
+      >
+        take a look at the documentation
+      </a>
+    </h1>
+    <form
+      class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
+      @submit.prevent="$emit('createSource', { token, name, type, clientId, clientSecret, url, skipVerify, sshHostKey, skipSshHostKeyCheck })"
+    >
+      <div class="mb-4">
+        <label class="block text-sm font-bold mb-2" for="token">Agola Admin token</label>
+        <input
+          class="appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+          id="token"
+          type="password"
+          placeholder="Agola Admin token"
+          v-model="token"
+        >
+      </div>
+      <div class="mb-4">
+        <label class="block text-sm font-bold mb-2" for="type">Type</label>
+        <select
+          class="border bg-white rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+          id="type"
+          v-model="type"
+        >
+          <option value="gitea">Gitea</option>
+          <option value="gitlab">GitLab</option>
+          <option value="github">GitHub</option>
+        </select>
+      </div>
+      <div class="mb-4">
+        <label class="block text-sm font-bold mb-2" for="name">Source name</label>
+        <input
+          class="appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+          id="name"
+          pattern="^[a-zA-Z][a-zA-Z0-9]*([-]?[a-zA-Z0-9]+)+$"
+          type="text"
+          placeholder="Source name (only numbers, letters and -)"
+          v-model="name"
+        >
+      </div>
+      <div class="mb-4">
+        <label class="block text-sm font-bold mb-2" for="url">Source API URL</label>
+        <input
+          class="appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+          id="url"
+          type="text"
+          placeholder="API URL"
+          v-model="url"
+        >
+      </div>
+      <div class="mb-4 flex flex-row">
+        <input
+          id="skip_verify"
+          type="checkbox"
+          class="h-6 w-6 border border-gray-300 rounded-md checked:bg-blue-600 checked:border-transparent focus:outline-none"
+          v-model="skipVerify"
+        >
+        <label class="text-sm mt-auto font-bold mx-2" for="skip_verify">Skip TLS certificate validation</label>
+      </div>
+      <div class="mb-4">
+        <label class="block text-sm font-bold mb-2" for="ssh_key">Source Public SSH Key</label>
+        <input
+          class="appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+          id="ssh_key"
+          type="text"
+          autocomplete="off"
+          placeholder="Public SSH key"
+          v-model="sshHostKey"
+        >
+      </div>
+      <div class="mb-4 flex flex-row">
+        <input
+          id="skip_ssh_key_check"
+          type="checkbox"
+          class="h-6 w-6 border border-gray-300 rounded-md checked:bg-blue-600 checked:border-transparent focus:outline-none"
+          v-model="skipSshHostKeyCheck"
+        >
+        <label class="text-sm mt-auto font-bold mx-2" for="skip_ssh_key_check">Skip SSH host key check</label>
+      </div>
+      <div class="mb-4">
+        <label class="block text-sm font-bold mb-2" for="client_id">Source client ID</label>
+        <input
+          class="appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+          id="client_id"
+          type="text"
+          placeholder="Client ID"
+          v-model="clientId"
+        >
+      </div>
+      <div class="mb-4">
+        <label class="block text-sm font-bold mb-2" for="client_secret">Source client secret</label>
+        <input
+          class="appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+          id="client_secret"
+          type="password"
+          placeholder="Client secret"
+          v-model="clientSecret"
+        >
+      </div>
+      <div class="flex justify-center">
+        <button
+          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+          type="submit"
+        >Create</button>
+      </div>
+    </form>
+  </div>
+</template>
+
+
+<script>
+import { GITHUB_SSH_KEY, GITHUB_API_URL } from "@/util/data"
+
+export default {
+  name: "CreateSourceForm",
+  data: function() {
+    return {
+      name: null,
+      token: null,
+      url: null,
+      sshHostKey: null,
+      skipVerify: false,
+      skipSshHostKeyCheck: false,
+      type: 'gitea', // default value for select
+      clientId: null,
+      clientSecret: null,
+    };
+  },
+  watch: {
+    type: function(value) {
+      if (value === "github") {
+        this.url = GITHUB_API_URL;
+        this.sshHostKey = GITHUB_SSH_KEY;
+        this.skipVerify = false; 
+        this.skipSshHostKeyCheck = false; 
+      }
+    },
+  },
+};
+</script>
+
+
diff --git a/src/router.js b/src/router.js
index be0fcc5..1afa28e 100644
--- a/src/router.js
+++ b/src/router.js
@@ -21,6 +21,7 @@ import Oauth2 from "./views/Oauth2.vue";
 import Register from "./views/Register.vue";
 import Login from "./views/Login.vue";
 import Logout from "./views/Logout.vue";
+import CreateSource from "./views/CreateSource.vue";
 
 import { parseRef, projectRunLink } from "@/util/link.js";
 import { fetchProject } from "@/util/data.js";
@@ -37,6 +38,11 @@ const router = new VueRouter({
       name: "register",
       component: Register,
     },
+    {
+      path: "/newsource",
+      name: "newsource",
+      component: CreateSource,
+    },
     {
       path: "/login",
       name: "login",
@@ -383,4 +389,4 @@ router.beforeEach(async (to, from, next) => {
   next()
 })
 
-export default router
\ No newline at end of file
+export default router
diff --git a/src/util/auth.js b/src/util/auth.js
index 0020321..1ffe81e 100644
--- a/src/util/auth.js
+++ b/src/util/auth.js
@@ -64,7 +64,7 @@ export async function registerapi(init) {
   return await window.fetch(registerurl(), init);
 }
 
-export async function fetch(url, init, signal) {
+export async function fetch(url, init, signal, token, tokenType = "bearer") {
   if (!init) {
     init = {};
   }
@@ -74,9 +74,9 @@ export async function fetch(url, init, signal) {
   if (signal) {
     init["signal"] = signal;
   }
-  let idToken = getIdToken();
+  let idToken = token || getIdToken();
   if (idToken) {
-    init.headers["Authorization"] = "bearer " + idToken;
+    init.headers["Authorization"] = tokenType + " " + idToken;
   }
 
   return await window.fetch(url, init);
diff --git a/src/util/data.js b/src/util/data.js
index a388e8e..d006e39 100644
--- a/src/util/data.js
+++ b/src/util/data.js
@@ -1,9 +1,12 @@
 import router from "@/router";
 import { apiurl, fetch as authfetch, loginapi, registerapi } from "@/util/auth";
 
-export async function fetch(url, init, signal) {
+export const GITHUB_API_URL = "https://api.github.com";
+export const GITHUB_SSH_KEY = "github.com ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAq2A7hRGmdnm9tUDbO9IDSwBK6TbQa+PXYPCPy6rbTrTtw7PHkccKrpp0yVhp5HdEIcKr6pLlVDBfOLX9QUsyCOV0wzfjIJNlGEYsdlLJizHhbn2mUjvSAHQqZETYP81eFzLQNnPHt4EVVUh7VfDESU84KezmD5QlWpXLmvU31/yMf+Se8xhHTvKSCZIFImWwoG6mbUoWf9nzpIoaSjB+weqqUUmpaaasXVal72J+UX2B+2RPW3RcT0eOzQgqlJL3RKrTJvdsjE3JEAvGq3lGHSZXy28G3skua2SmVi/w4yCE6gbODqnTWlg7+wC604ydGXA8VJiS5ap43JXiUFFAaQ==";
+
+export async function fetch(url, init, signal, token, tokenType) {
   try {
-    let res = await authfetch(url, init, signal);
+    let res = await authfetch(url, init, signal, token, tokenType);
     if (!res.ok) {
       if (res.status === 401) {
         router.push({
@@ -186,6 +189,30 @@ export async function fetchVariables(ownertype, ref, all, signal) {
   return await fetch(apiurl(path), null, signal);
 }
 
+export async function createRemoteSource(
+  token, type, name, clientID, clientSecret, apiURL, authType, skipVerify,
+  sshHostKey, skipSshHostKeyCheck, registrationEnabled, loginEnabled, signal,
+) {
+  let path = "/remotesources";
+  let init = {
+    method: "POST",
+    body: JSON.stringify({
+      name,
+      apiurl: apiURL,
+      type,
+      auth_type: authType,
+      skip_verify: skipVerify,
+      ssh_host_key: sshHostKey,
+      skip_ssh_host_key_check: skipSshHostKeyCheck,
+      oauth_2_client_id: clientID,
+      oauth_2_client_secret: clientSecret,
+      registration_enabled: registrationEnabled,
+      login_enabled: loginEnabled,
+    })
+  };
+  return await fetch(apiurl(path), init, signal, token, "token");
+}
+
 export async function createOrganization(orgname, visibility, signal) {
   let path = "/orgs";
   let init = {
@@ -390,3 +417,4 @@ export async function deleteProjectGroup(projectgroupref, signal) {
   };
   return await fetch(apiurl(path), init, signal);
 }
+
diff --git a/src/views/CreateSource.vue b/src/views/CreateSource.vue
new file mode 100644
index 0000000..68b8572
--- /dev/null
+++ b/src/views/CreateSource.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <div
+      v-if="error"
+      class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+      role="alert"
+    >
+      <span class="block sm:inline">{{ error }}</span>
+    </div>
+    <div>
+      <div >
+        <div
+          class="flex justify-center items-center w-max"
+        >
+          <CreateSourceForm
+            v-on:createSource="createSource($event)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import CreateSourceForm from "@/components/createsourceform";
+import { createRemoteSource } from "@/util/data.js";
+import router from "@/router";
+
+export default {
+  name: "CreateSource",
+  components: {
+    CreateSourceForm
+  },
+  data: function() {
+    return {
+      error: null,
+    };
+  },
+  methods: {
+    async createSource({ 
+      token, name, type, clientId, clientSecret, url, skipVerify, sshHostKey, 
+      skipSshHostKeyCheck,
+    }) {
+      const res = await createRemoteSource(
+        token, type, name, clientId, clientSecret, url, "oauth2", skipVerify,
+        sshHostKey, skipSshHostKeyCheck, true, true, undefined,
+      );
+      if (res.error) 
+        this.$store.dispatch("setError", res.error);
+      else
+        router.push({name: "login"});
+    }
+  },
+  mounted: function() {
+    this.$store.dispatch("setError", null);
+  },
+};
+</script>
+
+
diff --git a/src/views/Login.vue b/src/views/Login.vue
index bb4c90a..c857fe4 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -13,6 +13,14 @@
         class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
       >
         No remote sources defined
+      <router-link
+        class="underline text-blue-600 block"
+        to="/newsource"
+      >
+        <button class="btn btn-blue">
+          Create one
+        </button>
+      </router-link>
       </div>
       <div
         v-else-if="!hasLoginRemoteSources"
diff --git a/src/views/Register.vue b/src/views/Register.vue
index 8f15a95..485afb4 100644
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -28,6 +28,14 @@
       class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
     >
       No remote sources defined
+      <router-link
+        class="underline text-blue-600 block"
+        to="/newsource"
+      >
+        <button class="btn btn-blue">
+          Create one
+        </button>
+      </router-link>
     </div>
     <div
       v-else-if="!hasRegisterRemoteSources"