Allow to register new user accounts

Closes #17 (closed)

src/views/users/components/NewAccountDialog.vue

@@ -3,15 +3,16 @@
     :visible.sync="isVisible"
     :show-close="false"
     :title="$t('users.createAccount')"
+    custom-class="create-user-dialog"
     @open="resetForm">
-    <el-form ref="form" :model="form" :rules="rules" status-icon label-width="120px">
-      <el-form-item :label="$t('users.username')" prop="nickname">
+    <el-form ref="form" :model="form" :rules="rules" :label-width="getLabelWidth" status-icon>
+      <el-form-item :label="$t('users.username')" prop="nickname" class="create-account-form-item">
         <el-input v-model="form.nickname" name="nickname" autofocus/>
       </el-form-item>
-      <el-form-item :label="$t('users.email')" prop="email">
+      <el-form-item :label="$t('users.email')" prop="email" class="create-account-form-item">
         <el-input v-model="form.email" name="email" type="email"/>
       </el-form-item>
-      <el-form-item :label="$t('users.password')" prop="password">
+      <el-form-item :label="$t('users.password')" prop="password" class="create-account-form-item">
         <el-input v-model="form.password" type="password" name="password" autocomplete="off"/>
       </el-form-item>
     </el-form>
@@ -54,6 +55,9 @@ export default {
     }
   },
   computed: {
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
     isVisible: {
       get() {
         return this.$props.dialogFormVisible
@@ -61,6 +65,9 @@ export default {
       set() {
         this.closeDialogWindow()
       }
+    },
+    getLabelWidth() {
+      return this.isDesktop ? '120px' : '80px'
     }
   },
   methods: {
@@ -126,3 +133,19 @@ export default {
   }
 }
 </script>
+
+<style rel='stylesheet/scss' lang='scss'>
+@media
+only screen and (max-width: 760px),
+(min-device-width: 768px) and (max-device-width: 1024px) {
+  .create-user-dialog {
+    width: 80%
+  }
+  .create-account-form-item {
+    margin-bottom: 30px;
+  }
+  .el-dialog__body {
+    padding: 20px 20px 0 20px
+  }
+}
+</style>