Update auth

2023-05-29 15:48:01 +07:00
parent e577788c80
commit eb3599b351
7 changed files with 163 additions and 124 deletions
--- a/src/auth.js
+++ b/src/auth.js
@@ -1,58 +1,54 @@
-const defaultUser = {
-  email: 'titan@hadiyan.net',
-  avatarUrl: 'https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/06.png'
-};
+import * as Forge from 'node-forge'
+import axios from 'axios'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()

 export default {
-  _user: defaultUser,
+  _user: null,
+
  loggedIn() {
-    return !!this._user;
+    let user = JSON.parse(window.localStorage.getItem('user'));
+    let access_token = window.localStorage.getItem('access_token');
+
+    if (user && access_token) {
+      axios.defaults.headers['authorization'] = `Bearer ${access_token}`;
+      return !!user;
+    }
+
+    return false;
  },

  async logIn(email, password) {
    try {
-      // Send request
-      console.log(email, password);
-      // this._user = { ...defaultUser, email };

-      // return {
-      //   isOk: true,
-      //   data: this._user
-      // };
+      const response = await axios.post('authentication/login', {
+        email,
+        password: this.encrypt(password),
+      });

-      const requestOptions = {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ email: email, password: password }),
+      const data = response.data;
+
+      this._user = {
+        username: data.data.username,
+        email: data.data.email,
+        role: data.data.role,
+        avatarUrl: 'https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/06.png',
      };

-      const response = await fetch('http://localhost:9090/api/authentication/login', requestOptions);
-      const data = await response.json();
+      window.localStorage.setItem('user', JSON.stringify(this._user))
+      window.localStorage.setItem('access_token', response.data.data.accessToken)
+      window.localStorage.setItem('refresh_token', response.data.data.refreshToken)

-      console.log(data);
-      //console.log(data.data.length);
-
-      // this._user = {
-      //   id: response.data.id,
-      //   email: response.data.role,
-      //   name: response.data.keterangan,
-      //   role_id: response.data.id,
-      // };
-
-      if(data.status == 'sukses') {
-        const defaultUser = {
-          email: data.data.email,
-          avatarUrl: 'https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/06.png',
-          name: data.data.name,
-        };
-        this._user = { ...defaultUser };
+      axios.defaults.headers['authorization'] = `Bearer ${response.data.data.accessToken}`;

+      if (response.status === 200) {
        return {
          isOk: true,
          data: this._user
        };
      } else {
-        //--- jika gagal munculkan pesan gagal
+
        return {
          isOk: false,
          message: "Authentication failed"
@@ -70,16 +66,27 @@ export default {

  async logOut() {
    this._user = null;
+    window.localStorage.removeItem('user');
+    window.localStorage.removeItem('access_token');
+    window.localStorage.removeItem('refresh_token');
+    await axios.post('authentication/logout')
+    axios.defaults.headers['authorization'] = null;
+    router.push({ name: 'login-form' })
  },

  async getUser() {
    try {
-      // Send request
+      const user = JSON.parse(window.localStorage.getItem('user'));
+
+      if (user) {
+        return {
+          isOk: true,
+          data: user,
+        };
+      }
+
+      throw new Error(`Could not find current logged in user.`);

-      return {
-        isOk: true,
-        data: this._user
-      };
    }
    catch {
      return {
@@ -137,5 +144,23 @@ export default {
        message: "Failed to create account"
      };
    }
-  }
+  },
+
+  encrypt(param) {
+
+    const publicKey = `-----BEGIN PUBLIC KEY-----
+${process.env.VUE_APP_PUBLIC_KEY}
+-----END PUBLIC KEY-----`
+
+    const rsa = Forge.pki.publicKeyFromPem(publicKey)
+
+    const encrypted = rsa.encrypt(param, 'RSA-OAEP', {
+      md: Forge.md.sha256.create(),
+      mgf1: {
+        md: Forge.md.sha1.create(),
+      },
+    });
+
+    return btoa(encrypted)
+  },
 };
--- a/src/main.js
+++ b/src/main.js
@@ -4,10 +4,13 @@ import './themes/generated/theme.additional.css';
 import { createApp }  from "vue";
 import router from "./router";
 import themes from "devextreme/ui/themes";
+import axios from 'axios'

 import App from "./App";
 import appInfo from "./app-info";

+axios.defaults.baseURL = `${process.env.VUE_APP_ROOT_API}`;
+
 themes.initialized(() => {
    const app = createApp(App);
    app.use(router);
--- a/src/router.js
+++ b/src/router.js
@@ -121,7 +121,7 @@ const router = new createRouter({
    {
      path: "/:pathMatch(.*)*",
      redirect: "/home"
-    }, 
+    },
    {
      path: "/user-page",
      name: "user-page",
@@ -130,7 +130,7 @@ const router = new createRouter({
        layout: defaultLayout
      },
      component: User
-    }, 
+    },
    {
      path: "/master-data/jenis-pengadaan",
      name: "jenis-pengadaan",
@@ -139,7 +139,7 @@ const router = new createRouter({
        layout: defaultLayout
      },
      component: JenisPengadaan
-    }, 
+    },
    {
      path: "/master-data/unit-inisiator",
      name: "unit-inisiator",
@@ -148,7 +148,7 @@ const router = new createRouter({
        layout: defaultLayout
      },
      component: UnitInisiator
-    }, 
+    },
    {
      path: "/master-data/metode-pengadaan",
      name: "metode-pengadaan",
@@ -157,7 +157,7 @@ const router = new createRouter({
        layout: defaultLayout
      },
      component: MetodePengadaan
-    }, 
+    },
    {
      path: "/master-data/metode-penyampaian",
      name: "metode-penyampaian",
@@ -175,7 +175,7 @@ const router = new createRouter({
        layout: defaultLayout
      },
      component: JenisKontrak
-    },  
+    },
    {
      path: "/master-data/sumber-dana",
      name: "sumber-dana",
@@ -184,7 +184,7 @@ const router = new createRouter({
        layout: defaultLayout
      },
      component: SumberDana
-    }, 
+    },
    {
      path: "/master-data/strategi-pengadaan",
      name: "strategi-pengadaan",
@@ -193,7 +193,7 @@ const router = new createRouter({
        layout: defaultLayout
      },
      component: StrategiPengadaan
-    }, 
+    },
    {
      path: "/master-data/lokasi-pengadaan",
      name: "lokasi-pengadaan",
@@ -202,7 +202,7 @@ const router = new createRouter({
        layout: defaultLayout
      },
      component: LokasiPengadaan
-    }, 
+    },
    {
      path: "/master-data/supply-positioning-matrix",
      name: "supply-positioning-matrix",
@@ -211,7 +211,7 @@ const router = new createRouter({
        layout: defaultLayout
      },
      component: SupplyPositioningMatrix
-    }, 
+    },
    {
      path: "/master-data/jenis-anggaran",
      name: "jenis-anggaran",
@@ -229,7 +229,7 @@ const router = new createRouter({
        layout: defaultLayout
      },
      component: InstansiPage
-    }, 
+    },
    {
      path: "/master-data/bidang-page",
      name: "bidang-page",
@@ -238,7 +238,7 @@ const router = new createRouter({
        layout: defaultLayout
      },
      component: BidangPage
-    }, 
+    },
    {
      path: "/master-data/jabatan-page",
      name: "jabatan-page",
@@ -256,7 +256,7 @@ const router = new createRouter({
        layout: defaultLayout
      },
      component: RolesConfig
-    }, 
+    },
    {
      path: "/master-config/users-config",
      name: "users-config",
@@ -265,7 +265,7 @@ const router = new createRouter({
        layout: defaultLayout
      },
      component: UsersConfig
-    }, 
+    },
    {
      path: "/master-config/permissions-config",
      name: "permissions-config",
@@ -274,7 +274,7 @@ const router = new createRouter({
        layout: defaultLayout
      },
      component: PermissionsConfig
-    }, 
+    },
    {
      path: "/rks-daftar",
      name: "rks-daftar",
@@ -294,7 +294,7 @@ const router = new createRouter({
      component: DrpPenyusunan
    },

-    
+
  ],
  history: createWebHashHistory()
 });
--- a/src/views/login-form.vue
+++ b/src/views/login-form.vue
@@ -2,56 +2,42 @@
  <div class="wrapper">
    <div class="content-wrapper">
      <form class="login-form" @submit.prevent="onSubmit">
-    <dx-form :form-data="formData" :disabled="loading">
-      <dx-item
-        data-field="email"
-        editor-type="dxTextBox"
-        :editor-options="{ stylingMode: 'filled', placeholder: 'Email', mode: 'email' }"
-      >
-        <dx-required-rule message="Dibutuhkan alamat email" />
-        <dx-email-rule message="Alamat email tidak valid" />
-        <dx-label :visible="false" />
-      </dx-item>
-      <dx-item
-        data-field='password'
-        editor-type='dxTextBox'
-        :editor-options="{ stylingMode: 'filled', placeholder: 'Password', mode: 'password' }"
-      >
-        <dx-required-rule message="Password harus diisi" />
-        <dx-label :visible="false" />
-      </dx-item>
-      <dx-item
-        data-field="rememberMe"
-        editor-type="dxCheckBox"
-        :editor-options="{ text: 'Ingat saya', elementAttr: { class: 'form-text' } }"
-      >
-        <dx-label :visible="false" />
-      </dx-item>
-      <dx-button-item>
-        <dx-button-options
-          width="100%"
-          type="default"
-          template="signInTemplate"
-          :use-submit-behavior="true"
-        >
-        </dx-button-options>
-      </dx-button-item>
-      <dx-item>
-        <template #default>
-          <div class="link">
-            <router-link to="/reset-password">Lupa password?</router-link>
-          </div>
-        </template>
-      </dx-item>
-      <template #signInTemplate>
-        <div>
-          <span class="dx-button-text">
-            <dx-load-indicator v-if="loading" width="24px" height="24px" :visible="true" />
-            <span v-if="!loading">Log In</span>
-          </span>
-        </div>
-      </template>
-    </dx-form>
+        <dx-form :form-data="formData" :disabled="loading">
+          <dx-item data-field="email" editor-type="dxTextBox"
+            :editor-options="{ stylingMode: 'filled', placeholder: 'Email', mode: 'email' }">
+            <dx-required-rule message="Dibutuhkan alamat email" />
+            <dx-email-rule message="Alamat email tidak valid" />
+            <dx-label :visible="false" />
+          </dx-item>
+          <dx-item data-field='password' editor-type='dxTextBox'
+            :editor-options="{ stylingMode: 'filled', placeholder: 'Password', mode: 'password' }">
+            <dx-required-rule message="Password harus diisi" />
+            <dx-label :visible="false" />
+          </dx-item>
+          <dx-item data-field="rememberMe" editor-type="dxCheckBox"
+            :editor-options="{ text: 'Ingat saya', elementAttr: { class: 'form-text' } }">
+            <dx-label :visible="false" />
+          </dx-item>
+          <dx-button-item>
+            <dx-button-options width="100%" type="default" template="signInTemplate" :use-submit-behavior="true">
+            </dx-button-options>
+          </dx-button-item>
+          <dx-item>
+            <template #default>
+              <div class="link">
+                <router-link to="/reset-password">Lupa password?</router-link>
+              </div>
+            </template>
+          </dx-item>
+          <template #signInTemplate>
+            <div>
+              <span class="dx-button-text">
+                <dx-load-indicator v-if="loading" width="24px" height="24px" :visible="true" />
+                <span v-if="!loading">Log In</span>
+              </span>
+            </div>
+          </template>
+        </dx-form>
      </form>
    </div>
  </div>
@@ -80,8 +66,8 @@ export default {
    const router = useRouter();

    const formData = reactive({
-      email:"",
-      password:""
+      email: "",
+      password: ""
    });
    const loading = ref(false);

@@ -93,11 +79,12 @@ export default {
      const { email, password } = formData;
      loading.value = true;
      const result = await auth.logIn(email, password);
+
      if (!result.isOk) {
        loading.value = false;
        notify(result.message, "error", 2000);
      } else {
-        router.push(route.query.redirect || "/home");
+        router.push(route.query?.redirect || "/home");
      }
    }

@@ -141,5 +128,8 @@ export default {
  }
 }

-html, body { height: 100%; }
+html,
+body {
+  height: 100%;
+}
 </style>