123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112 |
- <template>
- <v-layout justify-center align-center>
- <v-flex xs12 sm5>
- <v-card>
- <v-container fluid fill-height>
- <v-layout column align-center>
- <v-card-title class="headline d-block text-md-center font-weight-bold">Host configuration</v-card-title>
- <v-card-text>
- <v-slide-y-transition mode="out-in">
- <loader v-if="loadingMessage" :message="loadingMessage" />
- <v-form v-else ref="form">
- <v-flex xs3>
- <v-select
- v-model="config.ssl"
- :items="[false, true]"
- label="SSL"
- />
- </v-flex>
- <v-text-field
- v-model="config.host"
- label="Host IP address or hostname"
- :rules="[v => !!v || 'Host is required']"
- required
- />
- <v-text-field
- v-model="config.port"
- label="Port"
- type="number"
- :rules="[v => !!v || 'Port is required']"
- required
- />
- <v-btn color="error" @click="reset">Reset Form</v-btn>
- <v-btn color="success" @click="validate">Submit</v-btn>
- <v-slide-y-transition mode="out-in">
- <v-alert v-if="configErrorMessage" :value="true" type="error" v-text="configErrorMessage" />
- </v-slide-y-transition>
- </v-form>
- </v-slide-y-transition>
- </v-card-text>
- </v-layout>
- </v-container>
- </v-card>
- </v-flex>
- </v-layout>
- </template>
- <script>
- import Loader from '@/components/Loader.vue'
- import { mapActions } from 'vuex'
- export default {
- name: 'HostConfig',
- components: {
- Loader
- },
- data() {
- return {
- config: {
- ssl: false,
- host: 'diran.univ-littoral.fr',
- port: '80'
- },
- loadingMessage: null,
- configErrorMessage: null
- }
- },
- watch: {
- 'config.ssl'(newValue) {
- if (newValue === true) this.config.port = 443
- }
- },
- methods: {
- ...mapActions(['setHostConfig']),
- reset() {
- this.config.ssl = true
- this.config.host = ''
- this.config.port = null
- this.configErrorMessage = null
- this.$refs.form.reset()
- },
- async validate() {
- if (!this.$refs.form.validate()) return
- this.loadingMessage = 'Checking host configuration...'
- this.configErrorMessage = null
- try {
- await this.setHostConfig(this.config)
- }
- catch (err) {
- console.error(err)
- this.configErrorMessage = err.message
- return
- }
- finally {
- this.loadingMessage = null
- }
- // Success while configuring the project's host
- }
- }
- }
- </script>
|