mirror of
https://github.com/YunoHost/yunohost-admin.git
synced 2024-09-03 20:06:15 +02:00
Add BasicForm helper component and reflect changes
This commit is contained in:
Axolotle
parent
62ba2f1a1f
commit
8de6f1070d
4 changed files with 297 additions and 282 deletions
38
app/src/components/BasicForm.vue
Normal file
38
app/src/components/BasicForm.vue
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
<template>
|
||||||
|
<b-card :header="header" header-tag="h2" class="basic-form">
|
||||||
|
<b-form :id="id" @submit="$emit('submit', $event)">
|
||||||
|
<slot />
|
||||||
|
</b-form>
|
||||||
|
|
||||||
|
<template v-slot:footer>
|
||||||
|
<slot name="buttons">
|
||||||
|
<b-button type="submit" :form="id" variant="success">
|
||||||
|
{{ submit ? submit : $t('save') }}
|
||||||
|
</b-button>
|
||||||
|
</slot>
|
||||||
|
</template>
|
||||||
|
</b-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'BasicForm',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
header: { type: String, required: true },
|
||||||
|
id: { type: String, default: 'ynh-form' },
|
||||||
|
submit: { type: String, default: null }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.basic-form .card-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
& > *:not(:first-child) {
|
||||||
|
margin-left: .5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,37 +1,27 @@
|
||||||
<template lang="html">
|
<template lang="html">
|
||||||
<div class="group-create">
|
<basic-form :header="$t('group_new')" @submit.prevent="onSubmit">
|
||||||
<b-card :header="$t('group_new')" header-tag="h2">
|
<!-- GROUP NAME -->
|
||||||
<b-form id="group-create" @submit.prevent="onSubmit">
|
<b-form-group
|
||||||
<!-- GROUP NAME -->
|
label-cols="auto"
|
||||||
<b-form-group
|
:label="$t('group_name')" label-for="input-groupname"
|
||||||
label-cols="auto"
|
:description="$t('group_format_name_help')"
|
||||||
:label="$t('group_name')" label-for="input-groupname"
|
>
|
||||||
:description="$t('group_format_name_help')"
|
<b-input
|
||||||
>
|
id="input-groupname" :placeholder="$t('placeholder.groupname')"
|
||||||
<b-input
|
aria-describedby="groupname-feedback" required
|
||||||
id="input-groupname" :placeholder="$t('placeholder.groupname')"
|
v-model="form.groupname" :state="isValid.groupname"
|
||||||
aria-describedby="groupname-feedback" required
|
@input="validateGroupname"
|
||||||
v-model="form.groupname" :state="isValid.groupname"
|
/>
|
||||||
@input="validateGroupname"
|
<b-form-invalid-feedback id="groupname-feedback" :state="isValid.groupname">
|
||||||
/>
|
{{ this.error.groupname }}
|
||||||
<b-form-invalid-feedback id="groupname-feedback" :state="isValid.groupname">
|
</b-form-invalid-feedback>
|
||||||
{{ this.error.groupname }}
|
</b-form-group>
|
||||||
</b-form-invalid-feedback>
|
</basic-form>
|
||||||
</b-form-group>
|
|
||||||
</b-form>
|
|
||||||
|
|
||||||
<template v-slot:footer>
|
|
||||||
<div class="d-flex d-flex justify-content-end">
|
|
||||||
<b-button type="submit" form="group-create" variant="success">
|
|
||||||
{{ $t('save') }}
|
|
||||||
</b-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</b-card>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import BasicForm from '@/components/BasicForm'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'GroupCreate',
|
name: 'GroupCreate',
|
||||||
|
|
||||||
|
|
@ -75,6 +65,10 @@ export default {
|
||||||
this.error.groupname = error
|
this.error.groupname = error
|
||||||
this.isValid.groupname = error === '' ? null : false
|
this.isValid.groupname = error === '' ? null : false
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
components: {
|
||||||
|
BasicForm
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,129 +1,118 @@
|
||||||
<template lang="html">
|
<template lang="html">
|
||||||
<div class="user-create">
|
<basic-form :header="$t('users_new')" @submit.prevent="onSubmit">
|
||||||
<b-card :header="$t('users_new')" header-tag="h2">
|
<!-- USER NAME -->
|
||||||
<b-form id="user-create" @submit.prevent="onSubmit">
|
<b-form-group label-cols="auto" :label="$t('user_username')" label-for="input-username">
|
||||||
<!-- USER NAME -->
|
<b-input
|
||||||
<b-form-group label-cols="auto" :label="$t('user_username')" label-for="input-username">
|
id="input-username" :placeholder="$t('placeholder.username')"
|
||||||
<b-input
|
aria-describedby="username-feedback" required
|
||||||
id="input-username" :placeholder="$t('placeholder.username')"
|
v-model="form.username" :state="isValid.username"
|
||||||
aria-describedby="username-feedback" required
|
@input="validateUsername" @blur="populateEmail"
|
||||||
v-model="form.username" :state="isValid.username"
|
/>
|
||||||
@input="validateUsername" @blur="populateEmail"
|
<b-form-invalid-feedback id="username-feedback" :state="isValid.username">
|
||||||
/>
|
{{ this.error.username }}
|
||||||
<b-form-invalid-feedback id="username-feedback" :state="isValid.username">
|
</b-form-invalid-feedback>
|
||||||
{{ this.error.username }}
|
</b-form-group>
|
||||||
</b-form-invalid-feedback>
|
|
||||||
</b-form-group>
|
|
||||||
|
|
||||||
<!-- USER FULLNAME -->
|
<!-- USER FULLNAME -->
|
||||||
<b-form-group label-cols="auto">
|
<b-form-group label-cols="auto">
|
||||||
<template v-slot:label aria-hidden="true">
|
<template v-slot:label aria-hidden="true">
|
||||||
{{ $t('user_fullname') }}
|
{{ $t('user_fullname') }}
|
||||||
</template>
|
|
||||||
|
|
||||||
<div class="input-double">
|
|
||||||
<b-input-group>
|
|
||||||
<b-input-group-prepend
|
|
||||||
tag="label" class="ssr-only" is-text
|
|
||||||
for="input-firstname"
|
|
||||||
>
|
|
||||||
{{ $t('common.firstname') }}
|
|
||||||
</b-input-group-prepend>
|
|
||||||
|
|
||||||
<b-input
|
|
||||||
id="input-firstname" :placeholder="$t('placeholder.firstname')"
|
|
||||||
v-model="form.firstname" required
|
|
||||||
/>
|
|
||||||
</b-input-group>
|
|
||||||
|
|
||||||
<b-input-group>
|
|
||||||
<b-input-group-prepend
|
|
||||||
tag="label" class="ssr-only" is-text
|
|
||||||
for="input-lastname"
|
|
||||||
>
|
|
||||||
{{ $t('common.lastname') }}
|
|
||||||
</b-input-group-prepend>
|
|
||||||
|
|
||||||
<b-input
|
|
||||||
id="input-firstname" :placeholder="$t('placeholder.lastname')"
|
|
||||||
v-model="form.lastname" required
|
|
||||||
/>
|
|
||||||
</b-input-group>
|
|
||||||
</div>
|
|
||||||
</b-form-group>
|
|
||||||
|
|
||||||
<!-- USER EMAIL -->
|
|
||||||
<b-form-group label-cols="auto" :label="$t('user_email')" label-for="input-email">
|
|
||||||
<splitted-mail-input
|
|
||||||
id="input-email" feedback="email-feedback"
|
|
||||||
v-model="form.mail" :domains="domains"
|
|
||||||
:state="isValid.mail" @input="validateEmail"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<b-form-invalid-feedback id="email-feedback" :state="isValid.mail">
|
|
||||||
{{ this.error.mail }}
|
|
||||||
</b-form-invalid-feedback>
|
|
||||||
</b-form-group>
|
|
||||||
|
|
||||||
<!-- MAILBOX QUOTA -->
|
|
||||||
<b-form-group
|
|
||||||
label-cols="auto" :label="$t('user_mailbox_quota')" label-for="input-mailbox-quota"
|
|
||||||
:description="$t('mailbox_quota_description')"
|
|
||||||
>
|
|
||||||
<b-input-group append="M">
|
|
||||||
<b-input
|
|
||||||
id="input-mailbox-quota" :placeholder="$t('mailbox_quota_placeholder')"
|
|
||||||
v-model="form.mailbox_quota" type="number" min="0"
|
|
||||||
/>
|
|
||||||
</b-input-group>
|
|
||||||
</b-form-group>
|
|
||||||
|
|
||||||
<!-- USER PASSWORD -->
|
|
||||||
<b-form-group label-cols="auto" :label="$t('password')" label-for="input-password">
|
|
||||||
<b-input
|
|
||||||
id="input-password" placeholder="••••••••"
|
|
||||||
aria-describedby="password-feedback" required
|
|
||||||
v-model="form.password" type="password"
|
|
||||||
:state="isValid.password" @input="validatePassword"
|
|
||||||
/>
|
|
||||||
<b-form-invalid-feedback id="password-feedback" :state="isValid.password">
|
|
||||||
{{ $t('passwords_too_short') }}
|
|
||||||
</b-form-invalid-feedback>
|
|
||||||
</b-form-group>
|
|
||||||
|
|
||||||
<!-- USER PASSWORD CONFIRMATION -->
|
|
||||||
<b-form-group
|
|
||||||
label-cols="auto" :label="$t('password_confirmation')" label-for="input-confirmation"
|
|
||||||
:description="$t('good_practices_about_user_password')"
|
|
||||||
>
|
|
||||||
<b-input
|
|
||||||
id="input-confirmation" placeholder="••••••••"
|
|
||||||
aria-describedby="confirmation-feedback" required
|
|
||||||
v-model="form.confirmation" type="password"
|
|
||||||
:state="isValid.confirmation" @input="validatePassword"
|
|
||||||
/>
|
|
||||||
<b-form-invalid-feedback id="confirmation-feedback" :state="isValid.confirmation">
|
|
||||||
{{ $t('passwords_dont_match') }}
|
|
||||||
</b-form-invalid-feedback>
|
|
||||||
</b-form-group>
|
|
||||||
|
|
||||||
<b-form-invalid-feedback id="global-feedback" :state="server.isValid">
|
|
||||||
{{ this.server.error }}
|
|
||||||
</b-form-invalid-feedback>
|
|
||||||
</b-form>
|
|
||||||
|
|
||||||
<template v-slot:footer>
|
|
||||||
<div class="d-flex d-flex justify-content-end">
|
|
||||||
<b-button type="submit" form="user-create" variant="success">
|
|
||||||
{{ $t('save') }}
|
|
||||||
</b-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</b-card>
|
|
||||||
</div>
|
<div class="input-double">
|
||||||
|
<b-input-group>
|
||||||
|
<b-input-group-prepend
|
||||||
|
tag="label" class="ssr-only" is-text
|
||||||
|
for="input-firstname"
|
||||||
|
>
|
||||||
|
{{ $t('common.firstname') }}
|
||||||
|
</b-input-group-prepend>
|
||||||
|
|
||||||
|
<b-input
|
||||||
|
id="input-firstname" :placeholder="$t('placeholder.firstname')"
|
||||||
|
v-model="form.firstname" required
|
||||||
|
/>
|
||||||
|
</b-input-group>
|
||||||
|
|
||||||
|
<b-input-group>
|
||||||
|
<b-input-group-prepend
|
||||||
|
tag="label" class="ssr-only" is-text
|
||||||
|
for="input-lastname"
|
||||||
|
>
|
||||||
|
{{ $t('common.lastname') }}
|
||||||
|
</b-input-group-prepend>
|
||||||
|
|
||||||
|
<b-input
|
||||||
|
id="input-firstname" :placeholder="$t('placeholder.lastname')"
|
||||||
|
v-model="form.lastname" required
|
||||||
|
/>
|
||||||
|
</b-input-group>
|
||||||
|
</div>
|
||||||
|
</b-form-group>
|
||||||
|
|
||||||
|
<!-- USER EMAIL -->
|
||||||
|
<b-form-group label-cols="auto" :label="$t('user_email')" label-for="input-email">
|
||||||
|
<splitted-mail-input
|
||||||
|
id="input-email" feedback="email-feedback"
|
||||||
|
v-model="form.mail" :domains="domains"
|
||||||
|
:state="isValid.mail" @input="validateEmail"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<b-form-invalid-feedback id="email-feedback" :state="isValid.mail">
|
||||||
|
{{ this.error.mail }}
|
||||||
|
</b-form-invalid-feedback>
|
||||||
|
</b-form-group>
|
||||||
|
|
||||||
|
<!-- MAILBOX QUOTA -->
|
||||||
|
<b-form-group
|
||||||
|
label-cols="auto" :label="$t('user_mailbox_quota')" label-for="input-mailbox-quota"
|
||||||
|
:description="$t('mailbox_quota_description')"
|
||||||
|
>
|
||||||
|
<b-input-group append="M">
|
||||||
|
<b-input
|
||||||
|
id="input-mailbox-quota" :placeholder="$t('mailbox_quota_placeholder')"
|
||||||
|
v-model="form.mailbox_quota" type="number" min="0"
|
||||||
|
/>
|
||||||
|
</b-input-group>
|
||||||
|
</b-form-group>
|
||||||
|
|
||||||
|
<!-- USER PASSWORD -->
|
||||||
|
<b-form-group label-cols="auto" :label="$t('password')" label-for="input-password">
|
||||||
|
<b-input
|
||||||
|
id="input-password" placeholder="••••••••"
|
||||||
|
aria-describedby="password-feedback" required
|
||||||
|
v-model="form.password" type="password"
|
||||||
|
:state="isValid.password" @input="validatePassword"
|
||||||
|
/>
|
||||||
|
<b-form-invalid-feedback id="password-feedback" :state="isValid.password">
|
||||||
|
{{ $t('passwords_too_short') }}
|
||||||
|
</b-form-invalid-feedback>
|
||||||
|
</b-form-group>
|
||||||
|
|
||||||
|
<!-- USER PASSWORD CONFIRMATION -->
|
||||||
|
<b-form-group
|
||||||
|
label-cols="auto" :label="$t('password_confirmation')" label-for="input-confirmation"
|
||||||
|
:description="$t('good_practices_about_user_password')"
|
||||||
|
>
|
||||||
|
<b-input
|
||||||
|
id="input-confirmation" placeholder="••••••••"
|
||||||
|
aria-describedby="confirmation-feedback" required
|
||||||
|
v-model="form.confirmation" type="password"
|
||||||
|
:state="isValid.confirmation" @input="validatePassword"
|
||||||
|
/>
|
||||||
|
<b-form-invalid-feedback id="confirmation-feedback" :state="isValid.confirmation">
|
||||||
|
{{ $t('passwords_dont_match') }}
|
||||||
|
</b-form-invalid-feedback>
|
||||||
|
</b-form-group>
|
||||||
|
|
||||||
|
<b-form-invalid-feedback id="global-feedback" :state="server.isValid">
|
||||||
|
{{ this.server.error }}
|
||||||
|
</b-form-invalid-feedback>
|
||||||
|
</basic-form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import BasicForm from '@/components/BasicForm'
|
||||||
import SplittedMailInput from '@/components/SplittedMailInput'
|
import SplittedMailInput from '@/components/SplittedMailInput'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -220,7 +209,8 @@ export default {
|
||||||
this.$store.dispatch('FETCH_ALL', [{ uri: 'domains' }, { uri: 'users' }])
|
this.$store.dispatch('FETCH_ALL', [{ uri: 'domains' }, { uri: 'users' }])
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
SplittedMailInput
|
SplittedMailInput,
|
||||||
|
BasicForm
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,138 +1,130 @@
|
||||||
<template lang="html">
|
<template lang="html">
|
||||||
<div class="user-edit">
|
<basic-form
|
||||||
<b-card v-if="this.form.firstname" :header="user ? $t('user_username_edit', { name: user.username }) : ''" header-tag="h2">
|
v-if="user" :header="$t('user_username_edit', { name: user.username })"
|
||||||
<b-form id="user-edit" @submit.prevent="onSubmit">
|
@submit.prevent="onSubmit"
|
||||||
<!-- USER FULLNAME -->
|
>
|
||||||
<b-form-group label-cols="auto">
|
<!-- USER FULLNAME -->
|
||||||
<template v-slot:label aria-hidden="true">
|
<b-form-group label-cols="auto">
|
||||||
{{ $t('user_fullname') }}
|
<template v-slot:label aria-hidden="true">
|
||||||
</template>
|
{{ $t('user_fullname') }}
|
||||||
|
|
||||||
<div class="input-double">
|
|
||||||
<b-input-group>
|
|
||||||
<b-input-group-prepend
|
|
||||||
tag="label" class="ssr-only" is-text
|
|
||||||
for="input-firstname"
|
|
||||||
>
|
|
||||||
{{ $t('common.firstname') }}
|
|
||||||
</b-input-group-prepend>
|
|
||||||
|
|
||||||
<b-input
|
|
||||||
id="input-firstname" :placeholder="$t('placeholder.firstname')"
|
|
||||||
v-model="form.firstname"
|
|
||||||
/>
|
|
||||||
</b-input-group>
|
|
||||||
|
|
||||||
<b-input-group>
|
|
||||||
<b-input-group-prepend
|
|
||||||
tag="label" class="ssr-only" is-text
|
|
||||||
for="input-lastname"
|
|
||||||
>
|
|
||||||
{{ $t('common.lastname') }}
|
|
||||||
</b-input-group-prepend>
|
|
||||||
|
|
||||||
<b-input
|
|
||||||
id="input-firstname" :placeholder="$t('placeholder.lastname')"
|
|
||||||
v-model="form.lastname"
|
|
||||||
/>
|
|
||||||
</b-input-group>
|
|
||||||
</div>
|
|
||||||
</b-form-group>
|
|
||||||
|
|
||||||
<!-- USER EMAIL -->
|
|
||||||
<b-form-group label-cols="auto" :label="$t('user_email')" label-for="input-email">
|
|
||||||
<splitted-mail-input
|
|
||||||
id="input-email" feedback="email-feedback"
|
|
||||||
v-model="form.mail" :domains="domains"
|
|
||||||
:state="isValid.mail" @input="validateEmail"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<b-form-invalid-feedback id="email-feedback" :state="isValid.mail">
|
|
||||||
{{ this.error.mail }}
|
|
||||||
</b-form-invalid-feedback>
|
|
||||||
</b-form-group>
|
|
||||||
|
|
||||||
<!-- MAILBOX QUOTA -->
|
|
||||||
<hr>
|
|
||||||
<b-form-group
|
|
||||||
label-cols="auto" :label="$t('user_mailbox_quota')" label-for="input-mailbox-quota"
|
|
||||||
:description="$t('mailbox_quota_description')"
|
|
||||||
>
|
|
||||||
<b-input-group append="M">
|
|
||||||
<b-input
|
|
||||||
id="input-mailbox-quota" :placeholder="$t('mailbox_quota_placeholder')"
|
|
||||||
v-model="form['mailbox-quota']" type="number" min="0"
|
|
||||||
/>
|
|
||||||
</b-input-group>
|
|
||||||
</b-form-group>
|
|
||||||
|
|
||||||
<!-- MAIL ALIASES -->
|
|
||||||
<hr>
|
|
||||||
<b-form-group label-cols="auto" :label="$t('user_emailaliases')" class="mail-list">
|
|
||||||
<splitted-mail-input
|
|
||||||
v-for="(alias, index) in form['mail-aliases']" :key="index"
|
|
||||||
feedback="mail-aliases-feedback"
|
|
||||||
v-model="form['mail-aliases'][index]" :domains="domains"
|
|
||||||
/>
|
|
||||||
</b-form-group>
|
|
||||||
|
|
||||||
<!-- MAIL FORWARD -->
|
|
||||||
<hr>
|
|
||||||
<b-form-group label-cols="auto" :label="$t('user_emailforward')" class="mail-list">
|
|
||||||
<b-input
|
|
||||||
v-for="(forward, index) in form['mail-forward']" :key="index"
|
|
||||||
id="input-mailbox-quota" :placeholder="$t('user_new_forward')"
|
|
||||||
v-model="form['mail-forward'][index]" type="email"
|
|
||||||
/>
|
|
||||||
</b-form-group>
|
|
||||||
|
|
||||||
<!-- USER PASSWORD -->
|
|
||||||
<hr>
|
|
||||||
<b-form-group label-cols="auto" :label="$t('password')" label-for="input-password">
|
|
||||||
<b-input
|
|
||||||
id="input-password" placeholder="••••••••"
|
|
||||||
aria-describedby="password-feedback"
|
|
||||||
v-model="form.password" type="password"
|
|
||||||
:state="isValid.password" @input="validatePassword"
|
|
||||||
/>
|
|
||||||
<b-form-invalid-feedback id="password-feedback" :state="isValid.password">
|
|
||||||
{{ $t('passwords_too_short') }}
|
|
||||||
</b-form-invalid-feedback>
|
|
||||||
</b-form-group>
|
|
||||||
|
|
||||||
<!-- USER PASSWORD CONFIRMATION -->
|
|
||||||
<b-form-group
|
|
||||||
label-cols="auto" :label="$t('password_confirmation')" label-for="input-confirmation"
|
|
||||||
:description="$t('good_practices_about_user_password')"
|
|
||||||
>
|
|
||||||
<b-input
|
|
||||||
id="input-confirmation" placeholder="••••••••"
|
|
||||||
aria-describedby="confirmation-feedback"
|
|
||||||
v-model="form.confirmation" type="password"
|
|
||||||
:state="isValid.confirmation" @input="validatePassword"
|
|
||||||
/>
|
|
||||||
<b-form-invalid-feedback id="confirmation-feedback" :state="isValid.confirmation">
|
|
||||||
{{ $t('passwords_dont_match') }}
|
|
||||||
</b-form-invalid-feedback>
|
|
||||||
</b-form-group>
|
|
||||||
|
|
||||||
<b-form-invalid-feedback id="global-feedback" :state="server.isValid">
|
|
||||||
{{ this.server.error }}
|
|
||||||
</b-form-invalid-feedback>
|
|
||||||
</b-form>
|
|
||||||
|
|
||||||
<template v-slot:footer>
|
|
||||||
<div class="d-flex d-flex justify-content-end">
|
|
||||||
<b-button type="submit" form="user-edit" variant="success">
|
|
||||||
{{ $t('save') }}
|
|
||||||
</b-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</b-card>
|
|
||||||
</div>
|
<div class="input-double">
|
||||||
|
<b-input-group>
|
||||||
|
<b-input-group-prepend
|
||||||
|
tag="label" class="ssr-only" is-text
|
||||||
|
for="input-firstname"
|
||||||
|
>
|
||||||
|
{{ $t('common.firstname') }}
|
||||||
|
</b-input-group-prepend>
|
||||||
|
|
||||||
|
<b-input
|
||||||
|
id="input-firstname" :placeholder="$t('placeholder.firstname')"
|
||||||
|
v-model="form.firstname"
|
||||||
|
/>
|
||||||
|
</b-input-group>
|
||||||
|
|
||||||
|
<b-input-group>
|
||||||
|
<b-input-group-prepend
|
||||||
|
tag="label" class="ssr-only" is-text
|
||||||
|
for="input-lastname"
|
||||||
|
>
|
||||||
|
{{ $t('common.lastname') }}
|
||||||
|
</b-input-group-prepend>
|
||||||
|
|
||||||
|
<b-input
|
||||||
|
id="input-firstname" :placeholder="$t('placeholder.lastname')"
|
||||||
|
v-model="form.lastname"
|
||||||
|
/>
|
||||||
|
</b-input-group>
|
||||||
|
</div>
|
||||||
|
</b-form-group>
|
||||||
|
|
||||||
|
<!-- USER EMAIL -->
|
||||||
|
<b-form-group label-cols="auto" :label="$t('user_email')" label-for="input-email">
|
||||||
|
<splitted-mail-input
|
||||||
|
id="input-email" feedback="email-feedback"
|
||||||
|
v-model="form.mail" :domains="domains"
|
||||||
|
:state="isValid.mail" @input="validateEmail"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<b-form-invalid-feedback id="email-feedback" :state="isValid.mail">
|
||||||
|
{{ this.error.mail }}
|
||||||
|
</b-form-invalid-feedback>
|
||||||
|
</b-form-group>
|
||||||
|
|
||||||
|
<!-- MAILBOX QUOTA -->
|
||||||
|
<hr>
|
||||||
|
<b-form-group
|
||||||
|
label-cols="auto" :label="$t('user_mailbox_quota')" label-for="input-mailbox-quota"
|
||||||
|
:description="$t('mailbox_quota_description')"
|
||||||
|
>
|
||||||
|
<b-input-group append="M">
|
||||||
|
<b-input
|
||||||
|
id="input-mailbox-quota" :placeholder="$t('mailbox_quota_placeholder')"
|
||||||
|
v-model="form['mailbox-quota']" type="number" min="0"
|
||||||
|
/>
|
||||||
|
</b-input-group>
|
||||||
|
</b-form-group>
|
||||||
|
|
||||||
|
<!-- MAIL ALIASES -->
|
||||||
|
<hr>
|
||||||
|
<b-form-group label-cols="auto" :label="$t('user_emailaliases')" class="mail-list">
|
||||||
|
<splitted-mail-input
|
||||||
|
v-for="(alias, index) in form['mail-aliases']" :key="index"
|
||||||
|
feedback="mail-aliases-feedback"
|
||||||
|
v-model="form['mail-aliases'][index]" :domains="domains"
|
||||||
|
/>
|
||||||
|
</b-form-group>
|
||||||
|
|
||||||
|
<!-- MAIL FORWARD -->
|
||||||
|
<hr>
|
||||||
|
<b-form-group label-cols="auto" :label="$t('user_emailforward')" class="mail-list">
|
||||||
|
<b-input
|
||||||
|
v-for="(forward, index) in form['mail-forward']" :key="index"
|
||||||
|
id="input-mailbox-quota" :placeholder="$t('user_new_forward')"
|
||||||
|
v-model="form['mail-forward'][index]" type="email"
|
||||||
|
/>
|
||||||
|
</b-form-group>
|
||||||
|
|
||||||
|
<!-- USER PASSWORD -->
|
||||||
|
<hr>
|
||||||
|
<b-form-group label-cols="auto" :label="$t('password')" label-for="input-password">
|
||||||
|
<b-input
|
||||||
|
id="input-password" placeholder="••••••••"
|
||||||
|
aria-describedby="password-feedback"
|
||||||
|
v-model="form.password" type="password"
|
||||||
|
:state="isValid.password" @input="validatePassword"
|
||||||
|
/>
|
||||||
|
<b-form-invalid-feedback id="password-feedback" :state="isValid.password">
|
||||||
|
{{ $t('passwords_too_short') }}
|
||||||
|
</b-form-invalid-feedback>
|
||||||
|
</b-form-group>
|
||||||
|
|
||||||
|
<!-- USER PASSWORD CONFIRMATION -->
|
||||||
|
<b-form-group
|
||||||
|
label-cols="auto" :label="$t('password_confirmation')" label-for="input-confirmation"
|
||||||
|
:description="$t('good_practices_about_user_password')"
|
||||||
|
>
|
||||||
|
<b-input
|
||||||
|
id="input-confirmation" placeholder="••••••••"
|
||||||
|
aria-describedby="confirmation-feedback"
|
||||||
|
v-model="form.confirmation" type="password"
|
||||||
|
:state="isValid.confirmation" @input="validatePassword"
|
||||||
|
/>
|
||||||
|
<b-form-invalid-feedback id="confirmation-feedback" :state="isValid.confirmation">
|
||||||
|
{{ $t('passwords_dont_match') }}
|
||||||
|
</b-form-invalid-feedback>
|
||||||
|
</b-form-group>
|
||||||
|
|
||||||
|
<b-form-invalid-feedback id="global-feedback" :state="server.isValid">
|
||||||
|
{{ this.server.error }}
|
||||||
|
</b-form-invalid-feedback>
|
||||||
|
</basic-form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import BasicForm from '@/components/BasicForm'
|
||||||
import SplittedMailInput from '@/components/SplittedMailInput'
|
import SplittedMailInput from '@/components/SplittedMailInput'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -249,7 +241,8 @@ export default {
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
SplittedMailInput
|
SplittedMailInput,
|
||||||
|
BasicForm
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue