From f19cdbba6f94abfe49d477ceabea5cae6d54c25f Mon Sep 17 00:00:00 2001
From: Julien Calixte <jcalixte@isep.fr>
Date: Thu, 22 Aug 2019 12:13:28 +0200
Subject: [PATCH] style: change new account design

---
 src/components/AccountUserNew.vue |  1 -
 src/components/UserNew.vue        | 10 ++++++++--
 src/views/accounts/AccountNew.vue | 32 +++++++++++++++----------------
 3 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/components/AccountUserNew.vue b/src/components/AccountUserNew.vue
index c18abdc..e39207f 100644
--- a/src/components/AccountUserNew.vue
+++ b/src/components/AccountUserNew.vue
@@ -3,7 +3,6 @@
     <h3 class="subtitle is-3">{{ $tc('account.friends', localeUsers.length, { count: localeUsers.length }) }}</h3>
     <user-new v-if="user" v-model="user" />
     <div v-for="(user, k) in localeUsers" :key="k">
-      <hr />
       <user-new v-model="localeUsers[k]" @remove="() => remove(k)" />
     </div>
     <br />
diff --git a/src/components/UserNew.vue b/src/components/UserNew.vue
index 3c6fbc3..67ed3e3 100644
--- a/src/components/UserNew.vue
+++ b/src/components/UserNew.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="user-new columns">
+  <div class="user-new box columns">
     <div class="column is-5" v-if="user">
       <div class="field is-horizontal">
         <div class="field-label is-normal">
@@ -22,7 +22,7 @@
         <div class="field-body">
           <div class="field">
             <p class="control">
-              <input required class="input" type="text" maxlength="20" v-model="newUser.alias" />
+              <input required class="input" type="text" maxlength="20" v-model="newUser.alias" :placeholder="newUser.userId" />
             </p>
             <p class="help is-info">Nom utilisé dans ce compte</p>
             <p
@@ -70,3 +70,9 @@ export default class UserNew extends Vue {
   }
 }
 </script>
+
+<style>
+.user-new {
+  margin: 5px 0;
+}
+</style>
diff --git a/src/views/accounts/AccountNew.vue b/src/views/accounts/AccountNew.vue
index 403a20e..abef36d 100644
--- a/src/views/accounts/AccountNew.vue
+++ b/src/views/accounts/AccountNew.vue
@@ -33,6 +33,21 @@
         </div>
       </div>
       <div class="columns">
+        <div class="column">
+          <h3 class="subtitle is-3">Compte privé / public</h3>
+          <div class="field">
+            <input
+              id="is-public"
+              type="checkbox"
+              name="is-public"
+              class="switch"
+              v-model="isPublic"
+            />
+            <label for="is-public">Compte {{ isPublic ? 'public' : 'privé' }}</label>
+            <p class="help is-danger" v-if="isPublic" v-t="'account.publicInformation'"></p>
+            <p class="help is-info" v-else v-t="'account.privateInformation'"></p>
+          </div>
+        </div>
         <div class="column">
           <account-user-new v-model="users" />
         </div>
@@ -67,23 +82,6 @@
           </transition>
         </div>
       </div>
-      <div class="columns">
-        <div class="column">
-          <h3 class="subtitle is-3">Compte privé / public</h3>
-          <div class="field">
-            <input
-              id="is-public"
-              type="checkbox"
-              name="is-public"
-              class="switch"
-              v-model="isPublic"
-            />
-            <label for="is-public">Compte {{ isPublic ? 'public' : 'privé' }}</label>
-            <p class="help is-danger" v-if="isPublic" v-t="'account.publicInformation'"></p>
-            <p class="help is-info" v-else v-t="'account.privateInformation'"></p>
-          </div>
-        </div>
-      </div>
       <div class="columns is-centered">
         <div class="column is-one-third">
           <button type="submit" class="button is-primary is-fullwidth is-large">