diff --git a/frontend/package.json b/frontend/package.json index e2e67f5a0..67f05ce4c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,6 +11,7 @@ "dependencies": { "core-js": "^3.6.5", "js-cookie": "^2.2.1", + "vee-validate": "^3.4.5", "vue": "^2.6.11", "vue-cookie": "^1.1.4", "vue-gettext": "^2.1.10", diff --git a/frontend/src/components/domains/DomainCreationForm.vue b/frontend/src/components/domains/DomainCreationForm.vue index c50d37f93..3533593eb 100644 --- a/frontend/src/components/domains/DomainCreationForm.vue +++ b/frontend/src/components/domains/DomainCreationForm.vue @@ -18,25 +18,43 @@ Options + + Summary + mdi-close - + - - - + + + + + + + + +
Next @@ -55,11 +73,10 @@
+ + + + + + + + +
+ + Back + + + Next + +
+ + + + + + + + + + +
+ + Back + + + Next + +
+ + +
Summary
+
+ General +
+ + Name + {{ domain.name }} + + + Type + {{ domain.type }} + + + Enabled + {{ domain.enabled }} + +
+ DNS +
+ + Enable DNS checks + {{ domain.enable_dns_checks }} + + + Enable DKIM signing + {{ domain.enable_dkim }} + + + DKIM key selector + {{ domain.dkim_key_selector }} + + + DKIM key length + {{ domain.dkim_key_length }} + +
+ Limitations +
+ + Quota + {{ domain.quota }} + + + Default mailbox quota + {{ domain.default_mailbox_quota }} + + + Message sending limit + {{ domain.message_sending_limit }} + +
+ Options +
+ + Create a domain administrator + {{ createAdmin }} + +
+ + Administrator name + {{ domain.dom_admin_username }} + + + Random password + {{ domain.dom_admin_random_password }} + + + With mailbox + {{ domain.dom_admin_with_mailbox }} + + + Create aliases + {{ domain.dom_admin_create_aliases }} + +
+
+ + Confirm and create + +
+ @@ -91,6 +286,7 @@ export default { }, data () { return { + createAdmin: false, domain: {}, domainTypes: [ { @@ -122,13 +318,41 @@ export default { step: 1 } }, + mounted () { + this.initDomain() + }, methods: { + initDomain () { + this.domain = { + type: 'domain', + enabled: true, + enable_dns_checks: true, + enable_dkim: false, + dkim_key_selector: 'modoboa', + quota: 0, + default_mailbox_quota: 0, + dom_admin_username: 'admin', + dom_admin_random_password: false, + dom_admin_with_mailbox: false, + dom_admin_create_aliases: false + } + }, close () { this.$emit('close') + this.initDomain() this.step = 1 }, - selectType (value) { - this.$set(this.domain, 'type', value) + async goToNextStep (current, next) { + const valid = await this.$refs[`observer_${current}`].validate() + if (!valid) { + return + } + this.step = next + }, + submit () { + this.$store.dispatch('domains/createDomain', this.domain).then(resp => { + this.close() + }) } } } @@ -141,6 +365,10 @@ export default { } .v-stepper { height: 100%; - width: 60%; + width: 70%; +} +.subtitle { + color: #000; + border-bottom: 1px solid #DBDDDF; } diff --git a/frontend/src/components/tools/ChoiceField.vue b/frontend/src/components/tools/ChoiceField.vue index dd0820c43..b37d96e24 100644 --- a/frontend/src/components/tools/ChoiceField.vue +++ b/frontend/src/components/tools/ChoiceField.vue @@ -7,7 +7,7 @@ class="choice rounded pa-10 mr-4 text-center" :class="{ 'choice--selected': currentChoice === choice.value }" @click="selectChoice(choice.value)"> - {{ choice.icon }} + {{ choice.icon }} {{ choice.label }} @@ -23,6 +23,9 @@ export default { } }, methods: { + iconColor (value) { + return (value === this.currentChoice) ? 'primary' : '' + }, selectChoice (value) { this.currentChoice = value this.$emit('input', value) diff --git a/frontend/src/main.js b/frontend/src/main.js index e26e367a6..ed0d8331c 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -1,5 +1,6 @@ import Vue from 'vue' import './plugins/axios' +import './plugins/vee-validate' import './plugins/vue-cookie' import './plugins/vue-gettext' import App from './App.vue' diff --git a/frontend/src/plugins/vee-validate.js b/frontend/src/plugins/vee-validate.js new file mode 100644 index 000000000..7171ed09c --- /dev/null +++ b/frontend/src/plugins/vee-validate.js @@ -0,0 +1,22 @@ +import Vue from 'vue' +import { ValidationObserver, ValidationProvider, extend } from 'vee-validate' +import { numeric, required } from 'vee-validate/dist/rules' +import { translate } from 'vue-gettext' + +const { gettext: $gettext } = translate + +// Declare builtin rules here +extend('numeric', { + ...numeric, + message: () => $gettext('This field must be a valid number') +}) +extend('required', { + ...required, + message: () => $gettext('This field is required') +}) + +// Add custom rules here + +// Register components globally +Vue.component('ValidationObserver', ValidationObserver) +Vue.component('ValidationProvider', ValidationProvider) diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js index 4e62dfec3..ccec58e70 100644 --- a/frontend/src/plugins/vuetify.js +++ b/frontend/src/plugins/vuetify.js @@ -1,6 +1,8 @@ import Vue from 'vue' import Vuetify from 'vuetify/lib' +import DomainIcon from '@/components/icons/DomainIcon' + Vue.use(Vuetify) export default new Vuetify({ @@ -11,5 +13,12 @@ export default new Vuetify({ secondary: '#F18429' } } + }, + icons: { + values: { + domain: { + component: DomainIcon + } + } } }) diff --git a/frontend/yarn.lock b/frontend/yarn.lock index b64fd34d6..399fc72e3 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -9588,6 +9588,11 @@ vary@~1.1.2: resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw= +vee-validate@^3.4.5: + version "3.4.5" + resolved "https://registry.yarnpkg.com/vee-validate/-/vee-validate-3.4.5.tgz#96a456c309f7bdb2cce62c3b554f96d893e9f6ae" + integrity sha512-ZEcLqOAZzSkMhDvPcTx0xcwVOijFnMW9J+BA20j+rDmo24T8RCCqVQyRwwrDrcWJZV2dRYl/yYNa2GB6UCoBvg== + vendors@^1.0.0: version "1.0.4" resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"