mirror of
https://github.com/YunoHost/yunohost-admin.git
synced 2024-09-03 20:06:15 +02:00
add base structure for UserCreate view
This commit is contained in:
Axolotle
parent
144706a4ab
commit
55fe70ab33
8 changed files with 205 additions and 12 deletions
|
|
@ -116,7 +116,7 @@ export default {
|
|||
@import '@/scss/main.scss';
|
||||
|
||||
#app > header {
|
||||
border-bottom: 1px solid #eee;
|
||||
border-bottom: $thin-border;
|
||||
padding-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
|
|
|
|||
|
|
@ -47,6 +47,10 @@
|
|||
"catalog": "Catalog",
|
||||
"check": "Check",
|
||||
"close": "Close",
|
||||
"common": {
|
||||
"firstname": "First name",
|
||||
"lastname": "Last name"
|
||||
},
|
||||
"configuration": "Configuration",
|
||||
"confirm_app_change_url": "Are you sure you want to change the app access URL?",
|
||||
"confirm_app_default": "Are you sure you want to make this app default?",
|
||||
|
|
@ -211,6 +215,11 @@
|
|||
"passwords_dont_match": "Passwords don't match",
|
||||
"passwords_too_short": "Password is too short",
|
||||
"path": "Path",
|
||||
"placeholder": {
|
||||
"username": "johndoe",
|
||||
"firstname": "John",
|
||||
"lastname": "Doe"
|
||||
},
|
||||
"logs": "Logs",
|
||||
"logs_operation": "Operations made on system with YunoHost",
|
||||
"logs_history": "History of command run on system",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import Home from './views/Home'
|
||||
import Login from './views/Login'
|
||||
import { UserList, User } from './views/user'
|
||||
import { UserList, UserCreate, User } from './views/user'
|
||||
|
||||
const routes = [
|
||||
{ name: 'home', path: '/', component: Home },
|
||||
|
|
@ -13,9 +13,20 @@ const routes = [
|
|||
component: UserList,
|
||||
meta: { breadcrumb: [{ name: 'user-list', trad: 'users' }] }
|
||||
},
|
||||
{
|
||||
name: 'user-create',
|
||||
path: '/users/create',
|
||||
component: UserCreate,
|
||||
meta: {
|
||||
breadcrumb: [
|
||||
{ name: 'user-list', trad: 'users' },
|
||||
{ name: 'user-create', trad: 'users_new' }
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'user-info',
|
||||
path: '/user/:name',
|
||||
path: '/users/:name',
|
||||
component: User,
|
||||
props: true,
|
||||
meta: {
|
||||
|
|
|
|||
|
|
@ -37,4 +37,6 @@ $fa-font-size-base: 1rem;
|
|||
|
||||
|
||||
|
||||
$thin-border: 1px solid #eee;
|
||||
|
||||
$skeleton-color: #eaeaea;
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@
|
|||
{{ alias }}
|
||||
</li>
|
||||
</ul>
|
||||
<template v-else-if="user[mailType]">
|
||||
{{ user[mailType] }}
|
||||
<template v-else-if="user[mailType][0]">
|
||||
{{ user[mailType][0] }}
|
||||
</template>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
|
|
|||
172
app/src/views/user/UserCreate.vue
Normal file
172
app/src/views/user/UserCreate.vue
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
<template lang="html">
|
||||
<div class="user-create">
|
||||
<breadcrumb />
|
||||
|
||||
<b-card :header="$t('users_new')" header-tag="h2">
|
||||
<b-form id="user-create" @submit="onSubmit">
|
||||
<b-form-group
|
||||
label-cols-sm="5" label-cols-lg="4" label-cols-xl="3"
|
||||
:label="$t('user_username')" label-for="input-username" label-class="test"
|
||||
>
|
||||
<b-input id="input-username" :placeholder="$t('placeholder.username')"
|
||||
v-model="form.username" required
|
||||
/>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group label-cols-sm="5" label-cols-lg="4" label-cols-xl="3">
|
||||
<template v-slot:label aria-hidden="true">
|
||||
{{ $t('user_fullname') }}
|
||||
</template>
|
||||
|
||||
<div class="input-double" id="group-fullname">
|
||||
<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>
|
||||
|
||||
<b-form-group
|
||||
label-cols-sm="5" label-cols-lg="4" label-cols-xl="3"
|
||||
:label="$t('user_email')" label-for="input-mail"
|
||||
>
|
||||
<b-input-group>
|
||||
<b-input
|
||||
id="input-mail" :placeholder="$t('placeholder.username')"
|
||||
v-model="form.email" required
|
||||
/>
|
||||
|
||||
<b-input-group-append>
|
||||
<b-input-group-text>@</b-input-group-text>
|
||||
</b-input-group-append>
|
||||
|
||||
<b-input-group-append>
|
||||
<b-select v-model="form.domain" :options="domains" required />
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
label-cols-sm="5" label-cols-lg="4" label-cols-xl="3"
|
||||
: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>
|
||||
|
||||
<b-form-group
|
||||
label-cols-sm="5" label-cols-lg="4" label-cols-xl="3"
|
||||
:label="$t('password')" label-for="input-password"
|
||||
>
|
||||
<b-input
|
||||
id="input-password" placeholder="••••••••"
|
||||
v-model="form.password" type="password" required
|
||||
/>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
label-cols-sm="5" label-cols-lg="4" label-cols-xl="3"
|
||||
:label="$t('password_confirmation')" label-for="input-confirmation"
|
||||
:description="$t('good_practices_about_user_password')"
|
||||
>
|
||||
<b-input
|
||||
id="input-confirmation" placeholder="••••••••"
|
||||
v-model="form.confirmation" type="password" required
|
||||
/>
|
||||
</b-form-group>
|
||||
</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>
|
||||
</b-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
form: {
|
||||
username: '',
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
email: '',
|
||||
domain: '',
|
||||
mailbox_quota: '',
|
||||
password: '',
|
||||
confirmation: ''
|
||||
},
|
||||
domains: ['f']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit (e) {
|
||||
console.log('submit', this.form)
|
||||
e.preventDefault()
|
||||
const data = this.form
|
||||
const quota = data.mailbox_quota
|
||||
data.mailbox_quota = parseInt(quota) ? quota + 'M' : 0
|
||||
data.mail = `${data.email}@${data.domain}`
|
||||
// TODO post data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include media-breakpoint-down(xs) {
|
||||
.form-group + .form-group {
|
||||
padding-top: .5rem;
|
||||
border-top: $thin-border;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.input-double {
|
||||
display: flex;
|
||||
.input-group + .input-group {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
select {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,12 +4,10 @@
|
|||
|
||||
<div class="actions">
|
||||
<b-input-group>
|
||||
<template v-slot:prepend>
|
||||
<b-input-group-text>
|
||||
<label class="sr-only" for="search-user">{{ $t('user.search') }}</label>
|
||||
<icon iname="search" />
|
||||
</b-input-group-text>
|
||||
</template>
|
||||
<b-input-group-prepend is-text>
|
||||
<label class="sr-only" for="search-user">{{ $t('user.search') }}</label>
|
||||
<icon iname="search" />
|
||||
</b-input-group-prepend>
|
||||
<b-form-input id="search-user" v-model="search" :placeholder="$t('user.search')" />
|
||||
</b-input-group>
|
||||
<div class="buttons">
|
||||
|
|
|
|||
|
|
@ -1,2 +1,3 @@
|
|||
export { default as User } from './User'
|
||||
export { default as UserList } from './UserList'
|
||||
export { default as UserCreate } from './UserCreate'
|
||||
export { default as User } from './User'
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue