WIP. Initial view has been replicated in Vue28996-convert-pages-domain-edit-form-to-vue

11 files changed, 262 insertions, 18 deletions

diff --git a/app/assets/javascripts/gitlab_pages/domains/components/app.vue b/app/assets/javascripts/gitlab_pages/domains/components/app.vue
new file mode 100644
index 00000000000..c58fa6620be
--- /dev/null
+++ b/app/assets/javascripts/gitlab_pages/domains/components/app.vue
@@ -0,0 +1,118 @@
+<script>
+import { mapActions, mapState } from 'vuex';
+import { GlLoadingIcon, GlButton } from '@gitlab/ui';
+import createStore from '../store';
+
+export default {
+  name: 'PagesDomainApp',
+  store: createStore(),
+  components: {
+    GlLoadingIcon,
+    GlButton,
+  },
+  props: {
+    domainEndpoint: {
+      type: String,
+      required: true,
+    },
+    domainName: {
+      type: String,
+      required: true,
+    },
+
+    // TODO: this property be passed through the API
+    // with the rest of the domain info once
+    // the field has been exposed
+    domainKey: {
+      type: String,
+      required: true,
+    },
+  },
+  created() {
+    // TODO: figure out the correct endpoint to use
+    // this.setDomainEndpoint(this.domainEndpoint);
+    this.setDomainEndpoint('/api/v4/projects/24/pages/domains/my-domain.example.com');
+
+    this.setDomainName(this.domainName);
+  },
+  mounted() {
+    this.fetchDomain();
+  },
+  computed: {
+    ...mapState(['isLoading', 'domain']),
+
+    shouldRenderContent() {
+      return !this.isLoading && !this.hasError;
+    },
+  },
+  methods: {
+    ...mapActions(['setDomainEndpoint', 'setDomainName', 'fetchDomain']),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <h3 class="page-title">{{ domainName }}</h3>
+    <hr />
+
+    <gl-loading-icon
+      v-if="isLoading"
+      :size="2"
+      class="js-job-loading qa-loading-animation prepend-top-20"
+    />
+
+    <div v-if="shouldRenderContent" class="form">
+      <div class="form-group row">
+        <label for="pages_domain_domain" class="col-form-label col-sm-2">Domain</label>
+        <div class="col-sm-10">
+          <input
+            v-model="domain.domain"
+            type="text"
+            class="form-control"
+            required="required"
+            autocomplete="off"
+            disabled="disabled"
+            name="pages_domain[domain]"
+            id="pages_domain_domain"
+          />
+        </div>
+      </div>
+      <div class="form-group row">
+        <label for="pages_domain_certificate" class="col-form-label col-sm-2"
+          >Certificate (PEM)</label
+        >
+        <div class="col-sm-10">
+          <textarea
+            v-model="domain.certificate.certificate"
+            rows="5"
+            class="form-control"
+            name="pages_domain[certificate]"
+            id="pages_domain_certificate"
+          />
+          <span class="help-inline">
+            Upload a certificate for your domain with all intermediates
+          </span>
+        </div>
+      </div>
+      <div class="form-group row">
+        <label for="pages_domain_key" class="col-form-label col-sm-2">Key (PEM)</label>
+        <div class="col-sm-10">
+          <textarea
+            v-model="domainKey"
+            rows="5"
+            class="form-control"
+            name="pages_domain[key]"
+            id="pages_domain_key"
+          />
+          <span class="help-inline">
+            Upload a private key for your certificate
+          </span>
+        </div>
+      </div>
+      <div class="form-actions">
+        <gl-button name="commit" variant="success">Save Changes</gl-button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/gitlab_pages/domains/index.js b/app/assets/javascripts/gitlab_pages/domains/index.js
new file mode 100644
index 00000000000..1e846c52cbe
--- /dev/null
+++ b/app/assets/javascripts/gitlab_pages/domains/index.js
@@ -0,0 +1,27 @@
+import Vue from 'vue';
+import PagesDomainApp from './components/app.vue';
+
+export default () => {
+  const el = document.querySelector('.js-pages-domain-app');
+
+  new Vue({
+    el,
+    components: {
+      PagesDomainApp,
+    },
+    render(createElement) {
+      console.log(el);
+
+      return createElement('pages-domain-app', {
+        props: {
+          example: el.dataset.example,
+          domainEndpoint: el.dataset.domainEndpoint,
+          domainName: el.dataset.domainName,
+
+          // TODO: pass this info through the API instead
+          domainKey: el.dataset.domainKey,
+        },
+      });
+    },
+  });
+};
diff --git a/app/assets/javascripts/gitlab_pages/domains/store/actions.js b/app/assets/javascripts/gitlab_pages/domains/store/actions.js
new file mode 100644
index 00000000000..8e73918e9d6
--- /dev/null
+++ b/app/assets/javascripts/gitlab_pages/domains/store/actions.js
@@ -0,0 +1,29 @@
+import axios from '~/lib/utils/axios_utils';
+import * as types from './mutation_types';
+import flash from '~/flash';
+import { __ } from '~/locale';
+
+export const setDomainEndpoint = ({ commit }, endpoint) =>
+  commit(types.SET_DOMAIN_ENDPOINT, endpoint);
+
+export const setDomainName = ({ commit }, name) => commit(types.SET_DOMAIN_NAME, name);
+
+export const requestDomain = ({ commit }) => commit(types.REQUEST_DOMAIN);
+
+export const fetchDomain = ({ state, dispatch }) => {
+  dispatch('requestDomain');
+
+  return axios
+    .get(state.domainEndpoint)
+    .then(({ data }) => dispatch('receiveDomainSuccess', data))
+    .catch(() => dispatch('receiveDomainError'));
+};
+
+export const receiveDomainSuccess = ({ commit }, data = {}) => {
+  commit(types.RECEIVE_DOMAIN_SUCCESS, data);
+};
+
+export const receiveDomainError = ({ commit }) => {
+  commit(types.RECEIVE_DOMAIN_ERROR);
+  flash(__('An error occurred while fetching the domain details.'));
+};
diff --git a/app/assets/javascripts/gitlab_pages/domains/store/index.js b/app/assets/javascripts/gitlab_pages/domains/store/index.js
new file mode 100644
index 00000000000..968b94f0e0d
--- /dev/null
+++ b/app/assets/javascripts/gitlab_pages/domains/store/index.js
@@ -0,0 +1,14 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import state from './state';
+import * as actions from './actions';
+import mutations from './mutations';
+
+Vue.use(Vuex);
+
+export default () =>
+  new Vuex.Store({
+    actions,
+    mutations,
+    state: state(),
+  });
diff --git a/app/assets/javascripts/gitlab_pages/domains/store/mutation_types.js b/app/assets/javascripts/gitlab_pages/domains/store/mutation_types.js
new file mode 100644
index 00000000000..0d6c89de4e3
--- /dev/null
+++ b/app/assets/javascripts/gitlab_pages/domains/store/mutation_types.js
@@ -0,0 +1,6 @@
+export const SET_DOMAIN_ENDPOINT = 'SET_DOMAIN_ENDPOINT';
+export const SET_DOMAIN_NAME = 'SET_DOMAIN_NAME';
+
+export const REQUEST_DOMAIN = 'REQUEST_DOMAIN';
+export const RECEIVE_DOMAIN_SUCCESS = 'RECEIVE_DOMAIN_SUCCESS';
+export const RECEIVE_DOMAIN_ERROR = 'RECEIVE_DOMAIN_ERROR';
diff --git a/app/assets/javascripts/gitlab_pages/domains/store/mutations.js b/app/assets/javascripts/gitlab_pages/domains/store/mutations.js
new file mode 100644
index 00000000000..b19cbb70c4d
--- /dev/null
+++ b/app/assets/javascripts/gitlab_pages/domains/store/mutations.js
@@ -0,0 +1,29 @@
+import * as types from './mutation_types';
+
+export default {
+  [types.SET_DOMAIN_ENDPOINT](state, endpoint) {
+    state.domainEndpoint = endpoint;
+  },
+
+  [types.SET_DOMAIN_NAME](state, name) {
+    state.domainName = name;
+  },
+
+  [types.REQUEST_DOMAIN](state) {
+    state.isLoading = true;
+  },
+
+  [types.RECEIVE_DOMAIN_SUCCESS](state, domain) {
+    state.isLoading = false;
+    state.hasError = false;
+    state.domain = domain;
+
+    console.log(domain);
+  },
+
+  [types.RECEIVE_DOMAIN_ERROR](state) {
+    state.isLoading = false;
+    state.hasError = true;
+    state.domain = {};
+  },
+};
diff --git a/app/assets/javascripts/gitlab_pages/domains/store/state.js b/app/assets/javascripts/gitlab_pages/domains/store/state.js
new file mode 100644
index 00000000000..c93be36b9d3
--- /dev/null
+++ b/app/assets/javascripts/gitlab_pages/domains/store/state.js
@@ -0,0 +1,7 @@
+export default () => ({
+  domainEndpoint: null,
+  domainName: null,
+  isLoading: true,
+  hasError: false,
+  domain: {},
+});
diff --git a/app/assets/javascripts/pages/projects/pages_domains/edit/index.js b/app/assets/javascripts/pages/projects/pages_domains/edit/index.js
new file mode 100644
index 00000000000..1ddf4a4d496
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/pages_domains/edit/index.js
@@ -0,0 +1,3 @@
+import initPagesDomain from '~/gitlab_pages/domains';
+
+document.addEventListener('DOMContentLoaded', initPagesDomain);
diff --git a/app/assets/javascripts/pages/projects/pages_domains/new/index.js b/app/assets/javascripts/pages/projects/pages_domains/new/index.js
new file mode 100644
index 00000000000..1ddf4a4d496
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/pages_domains/new/index.js
@@ -0,0 +1,3 @@
+import initPagesDomain from '~/gitlab_pages/domains';
+
+document.addEventListener('DOMContentLoaded', initPagesDomain);
diff --git a/app/views/projects/pages_domains/edit.html.haml b/app/views/projects/pages_domains/edit.html.haml
index e11387ae742..40eda1a8a23 100644
--- a/app/views/projects/pages_domains/edit.html.haml
+++ b/app/views/projects/pages_domains/edit.html.haml
@@ -1,11 +1,15 @@
 - add_to_breadcrumbs _("Pages"), project_pages_path(@project)
 - breadcrumb_title @domain.domain
 - page_title @domain.domain
-%h3.page-title
-  = @domain.domain
-%hr.clearfix
-%div
-  = form_for [@project.namespace.becomes(Namespace), @project, @domain], html: { class: 'fieldset-form' } do |f|
-    = render 'form', { f: f }
-    .form-actions
-      = f.submit _('Save Changes'), class: "btn btn-success"
+
+- if Feature.enabled?(:pages_lets_encrypt)
+  .js-pages-domain-app{ data: { domain_name: @domain.domain, domain_endpoint: project_pages_domain_path(@project, @domain, format: :json), domain_key: @domain.key } }
+- else
+  %h3.page-title
+    = @domain.domain
+  %hr.clearfix
+  %div
+    = form_for [@project.namespace.becomes(Namespace), @project, @domain], html: { class: 'fieldset-form' } do |f|
+      = render 'form', { f: f }
+      .form-actions
+        = f.submit _('Save Changes'), class: "btn btn-success"
diff --git a/app/views/projects/pages_domains/new.html.haml b/app/views/projects/pages_domains/new.html.haml
index c7cefa87c76..73c6296a50f 100644
--- a/app/views/projects/pages_domains/new.html.haml
+++ b/app/views/projects/pages_domains/new.html.haml
@@ -1,12 +1,16 @@
 - add_to_breadcrumbs _("Pages"), project_pages_path(@project)
 - page_title _('New Pages Domain')
-%h3.page-title
-  = _("New Pages Domain")
-%hr.clearfix
-%div
-  = form_for [@project.namespace.becomes(Namespace), @project, @domain], html: { class: 'fieldset-form' } do |f|
-    = render 'form', { f: f }
-    .form-actions
-      = f.submit _('Create New Domain'), class: "btn btn-success"
-      .float-right
-        = link_to _('Cancel'), project_pages_path(@project), class: 'btn btn-cancel'
+
+- if Feature.enabled?(:pages_lets_encrypt)
+  .js-pages-domain-app{ data: { } }
+- else
+  %h3.page-title
+    = _("New Pages Domain")
+  %hr.clearfix
+  %div
+    = form_for [@project.namespace.becomes(Namespace), @project, @domain], html: { class: 'fieldset-form' } do |f|
+      = render 'form', { f: f }
+      .form-actions
+        = f.submit _('Create New Domain'), class: "btn btn-success"
+        .float-right
+          = link_to _('Cancel'), project_pages_path(@project), class: 'btn btn-cancel'