Update auth

.env

@@ -1,3 +1,3 @@
 VUE_APP_ROOT_URL=http://localhost:8080
 VUE_APP_ROOT_API=http://localhost:9090/api
-VUE_APP_PUBLIC_KEY=MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAx3MRA7zxvaWKrtmPl2hRJLFiyryvj0ZUlmWw9OZIgqwJUDBTsg5yFX4hCQrANV1yy5ibTqAn2APdNCdhGgp8R2YLWrUR2vVGbmnKXXzEDsFpT6cgo
+VUE_APP_PUBLIC_KEY="MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAkclHj0FpIPiB+XQL0P/mJVUdYbRXYS9vjSbVllzVteZgVDhK/srybDmAM2PSn8ZlakUa9bkBAGmiozaccDRJx5DJ/C80hIUcQneDKqWuY6rgnT3zKhjt3MHZK0I2VX5t7QgWHdh5Dni/D08JWwTkbnH+qhz8Wb4xlV0HokQB05YB00deuO09fr5Qw3GjgSSK8HA+euoajgijMbRPuReA4nkmBLhyTMryX/1h9vi8Wz9reGeiFdLZLECrcMmbLRF3d8iC/HISqBYdqdyjvGhXzGu19Gog1Qt8/qNh4fPmB0Le3EpfjRkcWrLqi22N7cGRAvagCJJAzqQVKe5S2fTVRwIDAQAB"

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "hasInstallScript": true,
       "dependencies": {
+        "axios": "^1.4.0",
         "core-js": "^3.8.3",
         "devextreme": "^22.2.4",
         "devextreme-vue": "^22.2.4",
@@ -3763,9 +3764,7 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
-      "dev": true,
-      "optional": true
     },
     "node_modules/at-least-node": {
       "version": "1.0.0",
@@ -3837,6 +3836,29 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/axios": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/babel-loader": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.3.0.tgz",
@@ -4768,8 +4790,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
-      "optional": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -5609,8 +5629,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
-      "optional": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -7285,7 +7303,6 @@
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
       "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -9358,7 +9375,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -9367,7 +9383,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -11068,6 +11083,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",

package.json

@@ -10,6 +10,7 @@
     "postinstall": "npm run build-themes"
   },
   "dependencies": {
+    "axios": "^1.4.0",
     "core-js": "^3.8.3",
     "devextreme": "^22.2.4",
     "devextreme-vue": "^22.2.4",

src/auth.js

@@ -1,58 +1,54 @@
-const defaultUser = {
+import * as Forge from 'node-forge'
-  email: 'titan@hadiyan.net',
+import axios from 'axios'
-  avatarUrl: 'https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/06.png'
+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 {
+      const response = await axios.post('authentication/login', {
-      //   isOk: true,
+        email,
-      //   data: this._user
+        password: this.encrypt(password),
-      // };
+      });
 
-      const requestOptions = {
+      const data = response.data;
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ email: email, password: password }),
-      };
 
-      const response = await fetch('http://localhost:9090/api/authentication/login', requestOptions);
+      this._user = {
-      const data = await response.json();
+        username: data.data.username,
-
-      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,
+        role: data.data.role,
         avatarUrl: 'https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/06.png',
-          name: data.data.name,
       };
-        this._user = { ...defaultUser };
 
+      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)
+
+      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,17 +66,28 @@ 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: this._user
+          data: user,
         };
       }
+
+      throw new Error(`Could not find current logged in user.`);
+
+    }
     catch {
       return {
         isOk: false
@@ -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)
+  },
 };

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);

src/views/login-form.vue

@@ -3,37 +3,23 @@
     <div class="content-wrapper">
       <form class="login-form" @submit.prevent="onSubmit">
         <dx-form :form-data="formData" :disabled="loading">
-      <dx-item
+          <dx-item data-field="email" editor-type="dxTextBox"
-        data-field="email"
+            :editor-options="{ stylingMode: 'filled', placeholder: 'Email', mode: '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
+          <dx-item data-field='password' editor-type='dxTextBox'
-        data-field='password'
+            :editor-options="{ stylingMode: 'filled', placeholder: 'Password', mode: '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
+          <dx-item data-field="rememberMe" editor-type="dxCheckBox"
-        data-field="rememberMe"
+            :editor-options="{ text: 'Ingat saya', elementAttr: { class: 'form-text' } }">
-        editor-type="dxCheckBox"
-        :editor-options="{ text: 'Ingat saya', elementAttr: { class: 'form-text' } }"
-      >
             <dx-label :visible="false" />
           </dx-item>
           <dx-button-item>
-        <dx-button-options
+            <dx-button-options width="100%" type="default" template="signInTemplate" :use-submit-behavior="true">
-          width="100%"
-          type="default"
-          template="signInTemplate"
-          :use-submit-behavior="true"
-        >
             </dx-button-options>
           </dx-button-item>
           <dx-item>
@@ -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>