agola-web/src/components/createsourceform.vue

<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>