:passport_controll: Done user auth and modify module

Author: csiszaralex

src/components/UI/BaseDialog.vue

@@ -2,7 +2,12 @@
   <teleport to="body">
     <div v-if="show" class="backdrop" @click="tryClose"></div>
     <transition name="dialog">
-      <dialog v-if="show" open class="m-0 mt-n5 p-0 overflow-hidden border-0">
+      <dialog
+        v-if="show"
+        open
+        class="m-0 mt-n5 p-0 overflow-hidden border-0"
+        :class="upper ? 'upper' : ''"
+      >
         <header class="w-100 p-3" :class="'bg-' + type">
           <slot name="header">
             <h2 class="m-0">{{ title }}</h2>
@@ -12,7 +17,7 @@
           <slot></slot>
         </section>
         <menu
-          v-if="!fixed"
+          v-if="!fixed && !footless"
           class="m-0 p-3 pt-0 d-flex"
           :class="[
             btn2Text === '' ? 'justify-content-end' : 'justify-content-between',
@@ -45,6 +50,8 @@ export default {
     btn2Text: { type: String, default: '' },
     btn2Type: { type: String, default: 'success' },
     reverse: { type: Boolean, required: false },
+    upper: { type: Boolean, required: false },
+    footless: { type: Boolean, required: false },
   },
   emits: ['close', 'send'],
   methods: {
@@ -84,6 +91,9 @@ dialog {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
   background-color: white;
 }
+.upper {
+  top: 10vh;
+}
 
 .dialog-enter-from,
 .dialog-leave-to {

src/components/UI/BaseTable.vue

@@ -41,6 +41,7 @@
       </tbody>
     </table>
   </div>
+  <div v-else>NINCS ADAT</div>
 </template>
 
 <script>

src/components/admin/AdminUser.vue

@@ -1,6 +1,9 @@
 <template>
-  <div>Felhasználói fiókok</div>
-  <div v-if="loading">Loading...</div>
+  <div class="h3 my-3">Felhasználói fiókok</div>
+  <base-dialog :show="!!selectedId" upper footless>
+    <profile :id="selectedId" imported @close="close"></profile>
+  </base-dialog>
+  <base-loader v-if="loading">Loading...</base-loader>
   <base-table
     v-else
     :data="users"
@@ -14,11 +17,15 @@
 
 <script>
 import { ref } from 'vue';
+import roleEnum from '@/config/role.enum';
 import axios from '@/config/axios.js';
 import moment from 'moment';
+import Profile from '../../views/Profile.vue';
 export default {
   name: 'AdminUser',
+  components: { Profile },
   setup() {
+    const selectedId = ref(0);
     const users = ref();
     const loading = ref(true);
 
@@ -30,10 +37,11 @@ export default {
             id: user.id,
             Név: user.name,
             'E-mail cím': user.email,
+            Jogosultság: user.role < 6 ? roleEnum[user.role] : user.role,
             'Létrehozás dátuma': moment(user.createdAt)
               .locale('hu')
               .format('ll'),
-            'Utolsó frissítés dátuma': moment(user.updatedAt)
+            'Utolsó belépés': moment(user.signedIn)
               .locale('hu')
               .format('YYYY MMM Do'),
           };
@@ -44,13 +52,19 @@ export default {
     fetchAll();
 
     function edit(id) {
-      console.log('EDIT', id);
+      selectedId.value = id.toString();
+    }
+    function close() {
+      selectedId.value = 0;
+      fetchAll();
     }
     function del(id) {
-      console.log('DELETE', id);
+      axios.delete('/users/' + id).then(() => {
+        fetchAll();
+      });
     }
 
-    return { users, loading, edit, del };
+    return { users, loading, edit, del, selectedId, close };
   },
 };
 </script>

src/config/role.enum.js

@@ -0,0 +1,10 @@
+// export default {
+//   Vendég: 0,
+//   Felhasználó: 1,
+//   Szerkesztő: 2,
+//   Moderátor: 3,
+//   Admin: 4,
+//   Superuser: 5,
+// };
+
+export default ['Vendég', 'Felhasználó', 'Szerkesztő', 'Moderátor', 'Admin', 'Superuser'];

src/router.js

@@ -11,7 +11,14 @@ const routes = [
   { path: '/', name: 'landing', component: Landing, meta: { title: 'Főoldal', role: 0 } },
   { path: '/auth', name: 'auth', component: Auth, meta: { title: 'Bejelentlkezés', role: 0 } },
   { path: '/home', name: 'home', component: Home, meta: { title: 'Főoldal', role: 1 } },
-  { path: '/profile', name: 'profile', component: Profile, meta: { title: 'Saját fiók', role: 1 } },
+  {
+    path: '/profile',
+    name: 'profile',
+    component: Profile,
+    meta: { title: 'Saját fiók', role: 1 },
+    props: true,
+    children: [{ path: ':id', name: 'profileId', component: Profile }],
+  },
   { path: '/admin', name: 'admin', component: Admin, meta: { title: 'Adminisztráció', role: 2 } },
   { path: '/:notFound(.*)', name: 'notfound', component: NotFound },
 ];

src/views/Auth.vue

@@ -1,10 +1,27 @@
 <template>
   <div>
-    <base-dialog :show="!!hiba" title="Hibás kitöltés" btn="info" type="danger" @close="bezar">
+    <base-dialog
+      :show="!!hiba"
+      :title="hiba === 'Tiltás' ? 'Jelenleg ki vagy tiltva az oldalról' : 'Hibás kitöltés'"
+      btn="info"
+      type="danger"
+      @close="bezar"
+    >
       <ul v-if="typeof hiba === 'object'" class="list-unstyled pb-3">
         <li v-for="h in hiba" :key="h" class="p-1">{{ h }}</li>
       </ul>
-      <p v-else class="p-1">{{ hiba }}</p>
+      <p v-else class="p-1">
+        <span v-if="hiba === 'Tiltás'">
+          A tiltást valószínűleg egy nem megengedett kihágásodnak köszönheted.
+          <br />
+          <br />
+          <small>
+            Ha úgy érzed a tiltásod nem szabályos kérjük vedd fel a kapcsolatot az
+            ügyfélszolgálattal!
+          </small>
+        </span>
+        <span v-else>{{ hiba }}</span>
+      </p>
     </base-dialog>
     <div
       v-if="mode"
@@ -91,6 +108,7 @@ export default {
       hiba.value = '';
     }
     //TODO Regisztrációhoz google reCaptcha
+    //TODO Google belépés
     const reg = reactive({
       fullName: '',
       userName: '',

src/views/Profile.vue

@@ -1,6 +1,18 @@
 <template>
-  <div class="flex-grow-1 mt-2 px-3">
-    <h3 class="mb-4">Személyes adatok</h3>
+  <div class="flex-grow-1 mt-2 px-3 pb-3">
+    <base-dialog
+      :show="!!sureDelete"
+      title="Biztosan törölni akarod?"
+      type="danger"
+      close-text="Mégse"
+      btn="outline-warning"
+      btn2-text="Törlés"
+      btn2-type="outline-danger"
+      reverse
+      @close="sureDelete = 0"
+      @send="del"
+    ></base-dialog>
+    <h3 v-if="!imported" class="mb-4">Személyes adatok</h3>
     <div
       v-if="showErr"
       class="alert alert-dismissible fade position-absolute z-100"
@@ -68,10 +80,10 @@
         Telefonszám
       </base-input>
       <base-select
-        v-if="myProfile.role > 1"
+        v-if="role > 1"
         v-model="editProfile.role"
         icon="user-tag"
-        :nums="myProfile.role"
+        :nums="id ? role - 1 : myProfile.role"
         :values="roleEnum"
         :def="myProfile.role"
         class="w-75 my-3"
@@ -82,6 +94,14 @@
         <base-button type="warning" class="w-25 align-self-center" @click="megse">
           Mégse
         </base-button>
+        <base-button
+          v-if="!imported"
+          type="outline-danger"
+          class="w-25 align-self-center"
+          @click="sureDelete = 1"
+        >
+          Fiók törlése
+        </base-button>
         <base-button type="primary" submit class="w-25 align-self-center">Mentés</base-button>
       </div>
     </form>
@@ -90,34 +110,39 @@
 
 <script>
 import axios from '@/config/axios.js';
+import rolesEnum from '@/config/role.enum.js';
 import { ref, watch } from 'vue';
 import { useStore } from 'vuex';
 
 export default {
   name: 'Profile',
-  setup() {
+  props: { id: { type: String, default: '' }, imported: { type: Boolean, required: false } },
+  emits: ['close'],
+  setup(props, { emit }) {
     const store = useStore();
+    const sureDelete = ref(0);
     const error = ref('');
     const showErr = ref('');
-    const roleEnum = ['Vendég', 'Felhasználó', 'Szerkesztő', 'Moderátor', 'Admin', 'Superuser'];
+    const roleEnum = rolesEnum;
     const myProfile = ref();
     const editProfile = ref();
     function getFromServer() {
-      axios.get('/users/whoami').then(res => {
+      axios.get(`/users/whoami/${props.id}`).then(res => {
         myProfile.value = { ...res.data, password: '' };
         if (!myProfile.value.phoneNumber) myProfile.value.phoneNumber = '';
         editProfile.value = JSON.parse(JSON.stringify(myProfile.value));
       });
     }
     function save() {
       axios
-        .patch('/users', editProfile.value)
+        .patch(`/users/${props.id}`, editProfile.value)
         .then(({ data }) => {
-          store.dispatch('changeAuth', { token: data.accessToken });
+          if (!props.id) store.dispatch('changeAuth', { token: data.accessToken });
           myProfile.value = JSON.parse(JSON.stringify(editProfile.value));
           error.value = 'Sikeres mentés!';
           setTimeout(() => {
             error.value = '';
+            if (props.imported) emit('close');
           }, 3000);
         })
         .catch(err => {
@@ -129,7 +154,14 @@ export default {
     }
     function megse() {
       editProfile.value = JSON.parse(JSON.stringify(myProfile.value));
+      if (props.imported) emit('close');
+    }
+    function del() {
+      axios.delete('/users').then(() => {
+        store.dispatch('logout');
+      });
     }
+    //TODO Mentés után a select nem kékül vissza
 
     watch(error, val => {
       const timer = val ? 0 : 250;
@@ -139,7 +171,23 @@ export default {
     });
 
     getFromServer();
-    return { myProfile, getFromServer, save, roleEnum, editProfile, error, megse, showErr };
+    return {
+      myProfile,
+      getFromServer,
+      save,
+      editProfile,
+      roleEnum,
+      error,
+      megse,
+      showErr,
+      sureDelete,
+      del,
+    };
+  },
+  computed: {
+    role() {
+      return this.$store.getters['getRole'];
+    },
   },
 };
 </script>