From 55fe70ab33c5cab32857a99b667843b8f5615b13 Mon Sep 17 00:00:00 2001
From: Axolotle <nchesnais@mailoo.org>
Date: Thu, 16 Jul 2020 14:49:34 +0200
Subject: [PATCH] add base structure for UserCreate view

---
 app/src/App.vue                   |   2 +-
 app/src/locales/en.json           |   9 ++
 app/src/routes.js                 |  15 ++-
 app/src/scss/_variables.scss      |   2 +
 app/src/views/user/User.vue       |   4 +-
 app/src/views/user/UserCreate.vue | 172 ++++++++++++++++++++++++++++++
 app/src/views/user/UserList.vue   |  10 +-
 app/src/views/user/index.js       |   3 +-
 8 files changed, 205 insertions(+), 12 deletions(-)
 create mode 100644 app/src/views/user/UserCreate.vue

diff --git a/app/src/App.vue b/app/src/App.vue
index 17ad4278..44a40b75 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -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;
 
diff --git a/app/src/locales/en.json b/app/src/locales/en.json
index c89bbbc2..136a57c5 100644
--- a/app/src/locales/en.json
+++ b/app/src/locales/en.json
@@ -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",
diff --git a/app/src/routes.js b/app/src/routes.js
index 4d87d6c8..f3cbf058 100644
--- a/app/src/routes.js
+++ b/app/src/routes.js
@@ -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: {
diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss
index 36497368..25ec649d 100644
--- a/app/src/scss/_variables.scss
+++ b/app/src/scss/_variables.scss
@@ -37,4 +37,6 @@ $fa-font-size-base: 1rem;
 
 
 
+$thin-border: 1px solid #eee;
+
 $skeleton-color: #eaeaea;
diff --git a/app/src/views/user/User.vue b/app/src/views/user/User.vue
index 89dc75f6..9603d8e8 100644
--- a/app/src/views/user/User.vue
+++ b/app/src/views/user/User.vue
@@ -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>
diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
new file mode 100644
index 00000000..393b64b7
--- /dev/null
+++ b/app/src/views/user/UserCreate.vue
@@ -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>
diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index a2f6db3c..3df1a479 100644
--- a/app/src/views/user/UserList.vue
+++ b/app/src/views/user/UserList.vue
@@ -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">
diff --git a/app/src/views/user/index.js b/app/src/views/user/index.js
index 8eb01e83..31a7644b 100644
--- a/app/src/views/user/index.js
+++ b/app/src/views/user/index.js
@@ -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'