feat: improve user admin (#2777)

2024-11-19 10:33:57 +02:00
parent 8c5c455f1c
commit af568d0f31
22 changed files with 1167 additions and 655 deletions
@@ -0,0 +1,187 @@
+<div class="row q-mb-lg">
+  <div class="col">
+    <q-btn
+      icon="arrow_back_ios"
+      @click="backToUsersPage()"
+      :label="$t('back')"
+    ></q-btn>
+    <q-btn
+      v-if="activeUser.data.id"
+      @click="updateUser()"
+      color="primary"
+      :label="$t('update_account')"
+      class="q-ml-md"
+    ></q-btn>
+    <q-btn
+      v-else
+      @click="createUser()"
+      :label="$t('create_account')"
+      color="primary"
+      class="float-right"
+    ></q-btn>
+  </div>
+</div>
+<q-card v-if="activeUser.show" class="q-pa-md">
+  <q-card-section>
+    <div class="text-h6">
+      <span v-if="activeUser.data.id" v-text="$t('update_account')"></span>
+      <span v-else v-text="$t('create_account')"></span>
+    </div>
+  </q-card-section>
+  <q-card-section>
+    <q-input
+      v-if="activeUser.data.id"
+      v-model="activeUser.data.id"
+      :label="$t('user_id')"
+      filled
+      dense
+      readonly
+      :type="activeUser.data.showUserId ? 'text': 'password'"
+      class="q-mb-md"
+      ><q-btn
+        @click="activeUser.data.showUserId = !activeUser.data.showUserId"
+        dense
+        flat
+        :icon="activeUser.data.showUserId ? 'visibility_off' : 'visibility'"
+        color="grey"
+      ></q-btn>
+    </q-input>
+    <q-input
+      v-model="activeUser.data.username"
+      :label="$t('username')"
+      filled
+      dense
+      class="q-mb-md"
+    >
+    </q-input>
+    <q-toggle
+      size="xs"
+      v-if="!activeUser.data.id"
+      color="secondary"
+      :label="$t('set_password')"
+      v-model="activeUser.setPassword"
+    >
+      <q-tooltip>Toggle Admin</q-tooltip>
+    </q-toggle>
+
+    <q-input
+      v-if="activeUser.setPassword"
+      v-model="activeUser.data.password"
+      :type="activeUser.data.showPassword ? 'text': 'password'"
+      autocomplete="off"
+      :label="$t('password')"
+      filled
+      dense
+      :rules="[(val) => !val || val.length >= 8 || $t('invalid_password')]"
+    >
+      <q-btn
+        @click="activeUser.data.showPassword = !activeUser.data.showPassword"
+        dense
+        flat
+        :icon="activeUser.data.showPassword ? 'visibility_off' : 'visibility'"
+        color="grey"
+      ></q-btn>
+    </q-input>
+    <q-input
+      v-if="activeUser.setPassword"
+      v-model="activeUser.data.password_repeat"
+      :type="activeUser.data.showPassword ? 'text': 'password'"
+      type="password"
+      autocomplete="off"
+      :label="$t('password_repeat')"
+      filled
+      dense
+      class="q-mb-md"
+      :rules="[(val) => !val || val.length >= 8 || $t('invalid_password')]"
+    >
+      <q-btn
+        @click="activeUser.data.showPassword = !activeUser.data.showPassword"
+        dense
+        flat
+        :icon="activeUser.data.showPassword ? 'visibility_off' : 'visibility'"
+        color="grey"
+      ></q-btn>
+    </q-input>
+
+    <q-input
+      v-model="activeUser.data.pubkey"
+      :label="$t('pubkey')"
+      filled
+      dense
+      class="q-mb-md"
+    >
+    </q-input>
+    <q-input
+      v-model="activeUser.data.email"
+      :label="$t('email')"
+      filled
+      dense
+      class="q-mb-md"
+    >
+    </q-input>
+  </q-card-section>
+
+  <q-card-section v-if="activeUser.data.extra">
+    <q-input
+      v-model="activeUser.data.extra.first_name"
+      :label="$t('first_name')"
+      filled
+      dense
+      class="q-mb-md"
+    >
+    </q-input>
+    <q-input
+      v-model="activeUser.data.extra.last_name"
+      :label="$t('last_name')"
+      filled
+      dense
+      class="q-mb-md"
+    >
+    </q-input>
+    <q-input
+      v-model="activeUser.data.extra.provider"
+      :label="$t('auth_provider')"
+      filled
+      dense
+      class="q-mb-md"
+    >
+    </q-input>
+    <q-input
+      v-model="activeUser.data.extra.picture"
+      :label="$t('picture')"
+      filled
+      dense
+      class="q-mb-md"
+    >
+    </q-input>
+    <q-select
+      filled
+      dense
+      v-model="activeUser.data.extensions"
+      multiple
+      label="User extensions"
+      :options="g.extensions"
+    ></q-select>
+  </q-card-section>
+  <q-card-section v-if="activeUser.data.id">
+    <q-btn
+      @click="resetPassword(activeUser.data.id)"
+      :disable="activeUser.data.is_super_user"
+      :label="$t('reset_password')"
+      icon="refresh"
+      color="primary"
+    >
+      <q-tooltip>Generate and copy password reset url</q-tooltip>
+    </q-btn>
+    <q-btn
+      @click="deleteUser(activeUser.data.id)"
+      :disable="activeUser.data.is_super_user"
+      :label="$t('delete')"
+      icon="delete"
+      color="negative"
+      class="float-right"
+    >
+      <q-tooltip>Delete User</q-tooltip></q-btn
+    >
+  </q-card-section>
+</q-card>