Generate invite tokens from admin-fe

This MR allows to create invite tokens, list them on a separate tab, invite users via email. It also updates error handling and allows to generate tokens for resetting password.

Closes #28 (closed)

src/views/invites/index.vue

@@ -19,15 +19,21 @@
       :visible.sync="createTokenDialogVisible"
       :show-close="false"
       :title="$t('invites.createInviteToken')"
+      :width="isDesktop ? '40%' : '85%'"
       custom-class="create-new-token-dialog">
       <el-form ref="newTokenForm" :model="newTokenForm" :label-width="getLabelWidth" status-icon>
         <el-form-item :label="$t('invites.maxUse')">
-          <el-input-number v-model="newTokenForm.maxUse" :min="0" name="maxUse"/>
+          <el-input-number
+            v-model="newTokenForm.maxUse"
+            :min="0"
+            :size="isDesktop ? 'medium' : 'small'"
+            name="maxUse"/>
         </el-form-item>
         <el-form-item :label="$t('invites.expiresAt')">
           <el-date-picker
             v-model="newTokenForm.expiresAt"
             :placeholder="$t('invites.pickDate')"
+            class="pick-date"
             type="date"
             name="date"
             value-format="yyyy-MM-dd"/>
@@ -50,18 +56,19 @@
       :visible.sync="inviteUserDialogVisible"
       :show-close="false"
       :title="$t('invites.sendRegistration')"
+      :width="isDesktop ? '50%' : '85%'"
       custom-class="invite-via-email-dialog">
-      <el-form ref="inviteUserForm" :model="inviteUserForm" :rules="rules" :label-width="getLabelWidth" status-icon>
-        <el-form-item>
-          <p class="info">{{ $t('invites.inviteViaEmailAlert') }}</p>
-        </el-form-item>
-        <el-form-item :label="$t('invites.email')" prop="email">
-          <el-input v-model="inviteUserForm.email" name="email" type="email" autofocus/>
-        </el-form-item>
-        <el-form-item :label="$t('invites.name')" prop="name">
-          <el-input v-model="inviteUserForm.name" name="name"/>
-        </el-form-item>
-      </el-form>
+      <div>
+        <p class="info">{{ $t('invites.inviteViaEmailAlert') }}</p>
+        <el-form ref="inviteUserForm" :model="inviteUserForm" :rules="rules" :label-width="getLabelWidth" status-icon>
+          <el-form-item :label="$t('invites.email')" prop="email">
+            <el-input v-model="inviteUserForm.email" name="email" type="email" autofocus/>
+          </el-form-item>
+          <el-form-item :label="$t('invites.name')" prop="name">
+            <el-input v-model="inviteUserForm.name" name="name"/>
+          </el-form-item>
+        </el-form>
+      </div>
       <span slot="footer">
         <el-button @click="closeDialogWindow">{{ $t('invites.cancel') }}</el-button>
         <el-button type="primary" @click="inviteUserViaEmail">{{ $t('invites.create') }}</el-button>
@@ -73,15 +80,17 @@
       :default-sort = "{prop: 'used', order: 'ascending'}"
       class="invite-token-table">
       <el-table-column
+        v-if="isDesktop"
         :label="$t('invites.id')"
         min-width="60"
         prop="id"
         sortable/>
       <el-table-column
         :label="$t('invites.token')"
-        min-width="350"
+        :min-width="isDesktop ? 350 : 125"
         prop="token"/>
       <el-table-column
+        v-if="isDesktop"
         :label="$t('invites.expiresAt')"
         align="center"
         header-align="center"
@@ -96,6 +105,7 @@
         prop="max_use"
         sortable/>
       <el-table-column
+        v-if="isDesktop"
         :label="$t('invites.uses')"
         align="center"
         header-align="center"
@@ -103,9 +113,9 @@
         prop="uses"/>
       <el-table-column
         :label="$t('invites.used')"
+        :min-width="isDesktop ? 60 : 50"
         align="center"
         header-align="center"
-        min-width="60"
         prop="used"
         sortable>
         <template slot-scope="scope">
@@ -116,9 +126,9 @@
       </el-table-column>
       <el-table-column
         :label="$t('invites.actions')"
+        :min-width="isDesktop ? 100 : 50"
         align="center"
-        header-align="center"
-        min-width="100">
+        header-align="center">
         <template slot-scope="scope">
           <el-button type="text" size="small" @click.native="revokeInviteToken(scope.row.token)">
             {{ $t('invites.revoke') }}
@@ -246,7 +256,7 @@ export default {
     color: #666666;
     font-size: 13px;
     line-height: 22px;
-    margin: 5px 0 0 0;
+    margin: 0 0 10px 0;
   }
   .invite-via-email {
     text-align: left;
@@ -267,9 +277,42 @@ export default {
 only screen and (max-width: 760px),
 (min-device-width: 768px) and (max-device-width: 1024px) {
   .invites-container {
+    .actions-container {
+      display: flex;
+      height: 82px;
+      flex-direction: column;
+      align-items: center;
+      margin: 15px 10px 7px 10px;
+    }
+    .el-date-editor {
+      width: 150px;
+    }
+    .el-dialog__body {
+      padding: 5px 15px 0 15px
+    }
+    .create-invite-token {
+      width: 100%;
+    }
+    .invite-via-email {
+      width: 100%;
+      margin: 10px 0 0 0;
+    }
+    .info {
+      margin: 0 0 10px 5px;
+    }
     h1 {
       margin: 7px 10px 15px 10px;
     }
+    .invite-token-table {
+      width: 100%;
+      margin: 0;
+    }
+  }
+  .create-invite-token {
+    width: 100%
+  }
+  .invite-via-email {
+    width: 100%
   }
 }
 </style>