api login v3

globalcomponent/one-menu.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <!-- :location="$vuetify.display.mobile ? 'bottom' : undefined" -->
+    <v-navigation-drawer style="border: 0;" v-model="drawer">
+      <v-list-item class="ml-2 mt-3">
+        <v-img
+          :aspect-ratio="1"
+          max-height="42px"
+          max-width="132px"
+          class="bg-white"
+          src="images/logo.png"
+        ></v-img>
+      </v-list-item>
+    </v-navigation-drawer>
+  </div>
+</template>
+
+<script type="module">
+  export default {
+    name: "MenuComponent",
+    data() {
+      return {};
+    },
+    computed: {
+      // Akses state dari store
+      drawer: {
+        get() {
+          return this.$store.state.system.drawer;
+        },
+        set(val) {
+          this.$store.commit("system/setDrawer", val);
+        },
+      },
+      count() {
+        return this.$store.state.coba2.count;
+      },
+      email() {
+        return this.$store.state.coba2.email;
+      },
+    },
+    methods: {
+      // Dispatch action ke store
+      increment() {
+        this.$store.dispatch("increment");
+      },
+    },
+  };
+</script>
+
+<style scoped>
+  h1 {
+    color: blue;
+  }
+</style>

globalcomponent/one-navbar.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <one-menu></one-menu>
+
+    <v-app-bar class="elevation-0">
+      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
+
+      <v-app-bar-title>Application</v-app-bar-title>
+    </v-app-bar>
+  </div>
+</template>
+
+<script type="module">
+  import MenuComponent from "./one-menu.vue";
+
+  export default {
+    name: "NavbarComponent",
+    components: {
+      "one-menu": MenuComponent,
+    },
+    mounted() {
+      console.log("drawer");
+      console.log(this.$store.state.system.drawer);
+    },
+    data() {
+      return {};
+    },
+    computed: {
+      // Akses state dari store
+      count() {
+        return this.$store.state.coba2.count;
+      },
+      drawer: {
+        get() {
+          return this.$store.state.system.drawer;
+        },
+        set(val) {
+          this.$store.commit("system/setDrawer", val);
+        },
+      },
+      email() {
+        return this.$store.state.coba2.email;
+      },
+    },
+    methods: {
+      // Dispatch action ke store
+      increment() {
+        this.$store.dispatch("increment");
+      },
+    },
+  };
+</script>
+
+<style scoped>
+  h1 {
+    color: blue;
+  }
+</style>

globalscript/global.js

@@ -0,0 +1,24 @@
+function one_money(inp, format) {
+    return numeral(inp).format(format ? format : '0,000')
+}
+window.one_money = one_money
+
+function one_token() {
+    return localStorage.getItem('token')
+}
+window.one_token = one_token
+
+function one_user() {
+    return JSON.parse(localStorage.getItem('user'))
+}
+window.one_user = one_user
+function one_float(inp) {
+    try {
+        let val = parseFloat(inp)
+        if (isNaN(val)) return 0.0
+        return val
+    } catch (e) {
+        return 0.0
+    }
+}
+window.one_float = one_float

globalscript/theme.js

@@ -11,9 +11,9 @@ var CustomTheme = {
             error: "#F44336",
             "error-lighten": "#FFEBEE",
             "error-darken": "#B71C1C",
-            info: "#3F51B5",
-            "info-lighten": "#E8EAF6",
-            "info-darken": "#1A237E",
+            info: "#00BCD4",
+            "info-lighten": "#E0F7FA",
+            "info-darken": "#006064",
             success: "#4CAF50",
             "success-lighten": "#E8F5E9",
             "success-darken": "#1B5E20",

globalstore/globalstore.js

@@ -0,0 +1,68 @@
+
+const URL = "/westone-api/v1/system/auth";
+const store = {
+    namespaced: true,
+    state() {
+        return {
+            count: 0,
+            drawer: true,
+            data: null,
+            email: "lashlkdsa",
+            password: null,
+            dialog_success: false
+        };
+    },
+    mutations: {
+        increment(state) {
+            state.count++;
+        },
+        decrement(state) {
+            state.count--;
+        },
+        setData(state, payload) {
+            state.data = payload;
+        },
+        setDrawer(state, payload) {
+            state.drawer = payload;
+        },
+        setEmail(state, data) {
+            state.email = data;
+        },
+        setPassword(state, data) {
+            state.password = data;
+        },
+        setDialogSuccess(state, data) {
+            state.dialog_success = data;
+        }
+    },
+    actions: {
+        increment({ commit }) {
+            commit('increment');
+        },
+        decrement({ commit }) {
+            commit('decrement');
+        },
+        async loginState({ state, commit }) {
+            const params = {
+                email: state.email,
+                password: state.pasword
+            };
+
+            try {
+                const response = await axios.post(URL + '/login', params);
+                commit('setData', response.data);
+            } catch (error) {
+                commit('setError', error);
+            }
+        },
+        async LoginParam({ commit }, params) {
+            try {
+                const response = await axios.post(URL + '/login', params);
+                commit('setData', response.data);
+            } catch (error) {
+                commit('setError', error);
+            }
+        }
+    }
+};
+export default store

login-coba/components/main.vue

@@ -22,7 +22,7 @@
 
 <script type="module">
   import CobaComponent from "./coba.vue";
-  import NavbarComponent from "./one-navbar.vue";
+  import NavbarComponent from "../../globalcomponent/one-navbar.vue";
   export default {
     name: "component2",
     components: {

login-coba/index.html

@@ -30,7 +30,7 @@
     <!-- Component JS -->
     <script src="components/ComponentA.js"></script>
     <script src="components/ComponentB.js"></script>
-    <script src="theme.js"></script>
+    <script src="../globalscript/theme.js"></script>
     <!-- <script src="https://unpkg.com/vue3-sfc-loader/dist/vue3-sfc-loader.iife.js"></script> -->
     <script src="../libraries/vue3-sfc-loader.js"></script>
 
@@ -39,9 +39,12 @@
 
       import coba from "./modules/coba.js";
       import coba2 from "./modules/coba2.js";
+      import system from "../globalstore/globalstore.js";
+
       // import theme from "./theme.js";
       const store = Vuex.createStore({
         modules: {
+          system: system,
           coba: coba,
           coba2: coba2,
         },

loginv3/components/dekstop.vue

@@ -37,15 +37,17 @@
                       </p>
                     </v-sheet>
                   </div>
+                  <!-- bg-primary-lighten text-primary  -->
+                  <!-- icon="mdi-information-slab-circle-outline" -->
                   <v-alert
-                    color="primary"
                     density="compact"
-                    type="info"
-                    style="width: 100% !important;"
-                    class="bg-primary-lighten text-primary mt-4 mb-3 w-100"
-                    text="Enter the registered account"
+                    :text="alert.message"
+                    :type="alert.type"
+                    class="mt-4 mb-3 w-100"
+                    variant="tonal"
                   >
                   </v-alert>
+
                   <v-text-field
                     class="mt-3"
                     v-model="email"
@@ -87,7 +89,10 @@
                     >
                       {{ $t("message.login") }}
                       <template v-slot:loader>
-                        <v-progress-linear indeterminate></v-progress-linear>
+                        <!-- <v-progress-linear indeterminate></v-progress-linear> -->
+                        <v-progress-circular
+                          indeterminate
+                        ></v-progress-circular>
                       </template>
                     </v-btn>
                   </div>
@@ -111,8 +116,11 @@
     },
     computed: {
       // Akses state dari store
-      count() {
-        return this.$store.state.login.count;
+      loading() {
+        return this.$store.state.login.loading;
+      },
+      alert() {
+        return this.$store.state.login.alert;
       },
       email: {
         get() {
@@ -133,6 +141,9 @@
     },
     methods: {
       // Dispatch action ke store
+      login() {
+        this.$store.dispatch("login/login");
+      },
       increment() {
         this.$store.dispatch("increment");
       },

loginv3/components/login.vue

@@ -18,6 +18,7 @@
       "mobile-component": MobileComponent,
       "dekstop-component": DekstopComponent,
     },
+    mounted() {},
     data() {
       return {
         visible: false,

loginv3/components/mobile.vue

@@ -27,12 +27,11 @@
             </v-sheet>
           </div>
           <v-alert
-            color="primary"
             density="compact"
-            type="info"
-            style="width: 100% !important;"
-            class="bg-primary-lighten text-primary mt-4 mb-3 w-100"
-            text="Enter the registered account"
+            :text="alert.message"
+            :type="alert.type"
+            class="mt-4 mb-3 w-100"
+            variant="tonal"
           >
           </v-alert>
           <v-text-field
@@ -76,7 +75,7 @@
             >
               {{ $t("message.login") }}
               <template v-slot:loader>
-                <v-progress-linear indeterminate></v-progress-linear>
+                <v-progress-circular indeterminate></v-progress-circular>
               </template>
             </v-btn>
           </div>
@@ -96,8 +95,11 @@
     },
     computed: {
       // Akses state dari store
-      count() {
-        return this.$store.state.login.count;
+      loading() {
+        return this.$store.state.login.loading;
+      },
+      alert() {
+        return this.$store.state.login.alert;
       },
       email: {
         get() {
@@ -118,6 +120,9 @@
     },
     methods: {
       // Dispatch action ke store
+      login() {
+        this.$store.dispatch("login/login");
+      },
       increment() {
         this.$store.dispatch("increment");
       },

loginv3/index.html

@@ -28,6 +28,7 @@
     <script src="../libraries/axios.js"></script>
 
     <script src="../globalscript/theme.js"></script>
+    <script src="../globalscript/global.js"></script>
     <!-- loader single file component -->
     <script src="../libraries/vue3-sfc-loader.js"></script>
     <script src="./language.js"></script>
@@ -36,11 +37,12 @@
       const { loadModule } = window["vue3-sfc-loader"];
 
       import login from "./modules/login.js";
-      const store = Vuex.createStore({
-        modules: {
-          login: login,
-        },
-      });
+      import system from "../globalstore/globalstore.js";
+
+      //   if (one_token()) {
+      //     let usr = JSON.parse(localStorage.getItem("user"));
+      //     location.replace("/" + usr.M_UserGroupDashboard);
+      //   }
       const options = {
         moduleCache: {
           vue: Vue,
@@ -69,7 +71,13 @@
         fallbackLocale: "en", // Set fallback locale
         messages, // Set locale messages
       });
-
+      window.i18n = i18n;
+      const store = Vuex.createStore({
+        modules: {
+          system: system,
+          login: login,
+        },
+      });
       // Vue App
       const app = Vue.createApp({
         data() {

loginv3/language.js

@@ -9,6 +9,9 @@ var CustomMessages = {
             forgotPassword: "Forgot password?",
             placeholderEmail: "Enter your email",
             placeholderPassword: "Enter your password",
+            msgInfo: 'Enter the registered account',
+            errorQuery: "Error get data",
+            invalid: "Invalid username / password"
         },
     },
     id: {
@@ -21,6 +24,9 @@ var CustomMessages = {
             forgotPassword: "Lupa kata sandi?",
             placeholderEmail: "Isikan email anda",
             placeholderPassword: "Isikan kata sandi anda",
+            msgInfo: "Masukkan akun terdaftar",
+            errorQuery: "Gagal mendapatkan data",
+            invalid: "Nama pengguna / kata sandi tidak valid"
         },
     },
 };

loginv3/modules/login.js

@@ -1,6 +1,8 @@
 
 // const URL = "/westone-api/v1/system/auth";
-const URL = "https://devcpone.aplikasi.web.id/one-api/v1/system/auth/";
+
+const URL = "https://devcpone.aplikasi.web.id/westone-api/v1/system/auth/";
+
 const store = {
     namespaced: true,
     state() {
@@ -9,7 +11,15 @@ const store = {
             data: null,
             email: "",
             password: "",
-            dialog_success: false
+            dialog_success: false,
+            loading: false,
+            errorMessage: "",
+            iin: window.i18n.global.t('message.login'),
+            alert: {
+                show: false,
+                type: 'info',
+                message: window.i18n.global.t('message.msgInfo')
+            }
         };
     },
     mutations: {
@@ -30,6 +40,12 @@ const store = {
         },
         setDialogSuccess(state, data) {
             state.dialog_success = data;
+        },
+        setLoading(state, data) {
+            state.loading = data;
+        },
+        setAlert(state, data) {
+            state.alert = data;
         }
     },
     actions: {
@@ -39,7 +55,50 @@ const store = {
         decrement({ commit }) {
             commit('decrement');
         },
+        async login({ state, commit }) {
+            commit('setLoading', true);
+            let alert = {
+                show: false,
+                type: 'info',
+                message: window.i18n.global.t('message.msgInfo')
+            }
+            let params = {
+                username: state.email,
+                password: state.password
+            };
+            console.log(params);
+            try {
+                const response = await axios.post(URL + '/login', params);
+                console.log(response.data)
+                if (response.data.status != 'OK') {
+                    commit('setLoading', false);
+                    if (response.data.message !== 'Invalid') {
+                        alert.message = window.i18n.global.t('message.errorQuery');
+                    } else {
+                        alert.message = window.i18n.global.t('message.invalid');
+                    }
+                    alert.type = "error"
+                } else {
+                    commit('setLoading', false);
+                    commit('setData', response.data.data);
+                    localStorage.setItem("token", response.data.data.token)
+                    localStorage.setItem('user', JSON.stringify(response.data.data.user))
+                    //console.log(localStorage.getItem("token"))
+                    // if (data.user.is_courier === 'Y' && window.innerWidth < 600)
+                    //     window.location = "/one-ui/test/vuex/one-courier-mobile/";
+                    // else
+                    // window.location = "/" + response.data.data.user.M_UserGroupDashboard;
+
+                }
+                commit('setAlert', alert)
+            } catch (error) {
+                console.log(error)
+                commit('setLoading', false);
+
+            }
+        },
         async loginState({ state, commit }) {
+            commit('setLoading', true);
             const params = {
                 email: state.email,
                 password: state.pasword
@@ -47,8 +106,16 @@ const store = {
 
             try {
                 const response = await axios.post(URL + '/login', params);
-                commit('setData', response.data);
+                if (response.status != 'OK') {
+                    commit('setLoading', false);
+
+                } else {
+                    commit('setLoading', false);
+                    commit('setData', response.data);
+
+                }
             } catch (error) {
+                commit('setLoading', false);
                 commit('setError', error);
             }
         },