style: change new account design

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 />

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>

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">