From 9257bf39908bc03b2e555e7e54de5f1ee3b9f14c Mon Sep 17 00:00:00 2001
From: Sas Andy <alfiantoandy6@gmail.com>
Date: Mon, 12 Aug 2024 15:16:27 +0700
Subject: [PATCH] login mobile ui

---
 loginv3/components/dekstop.vue | 143 +++++++++++++++++++++++++++++++++
 loginv3/components/login.vue   | 113 +++-----------------------
 loginv3/components/mobile.vue  | 128 +++++++++++++++++++++++++++++
 loginv3/index.html             |  28 +------
 loginv3/language.js            |  26 ++++++
 loginv3/modules/login.js       |   3 +-
 6 files changed, 313 insertions(+), 128 deletions(-)
 create mode 100644 loginv3/components/dekstop.vue
 create mode 100644 loginv3/components/mobile.vue
 create mode 100644 loginv3/language.js

diff --git a/loginv3/components/dekstop.vue b/loginv3/components/dekstop.vue
new file mode 100644
index 0000000..7ae8faf
--- /dev/null
+++ b/loginv3/components/dekstop.vue
@@ -0,0 +1,143 @@
+<template>
+  <v-app id="inspire">
+    <v-row no-gutters>
+      <v-col lg="8" md="7">
+        <!-- width="100vw" -->
+        <!-- :aspect-ratio="1" -->
+        <v-img
+          min-height="100vh"
+          cover
+          style="background-repeat: repeat-y;"
+          class="bg-white"
+          src="./images/bg-left.jpg"
+          cover
+        ></v-img>
+      </v-col>
+      <v-col lg="4" md="5">
+        <div class="d-flex justify-center mb-6 mt-16 bg-surface-variant">
+          <v-img
+            class="bg-white"
+            height="86px"
+            aspect-ratio="16/9"
+            src="../globalimages/logo.png"
+          ></v-img>
+        </div>
+        <v-container class="mt-16">
+          <v-row no-gutters justify="center">
+            <v-col>
+              <div class="d-flex justify-center">
+                <v-card class="mx-auto px-12" elevation="0" rounded="lg">
+                  <div class="d-flex mb-6">
+                    <v-sheet class="">
+                      <h2 class="text-h6 font-weight-black">
+                        {{ $t("message.title") }}
+                      </h2>
+                      <p class="text-subtitle-1" style="color: #637381;">
+                        {{ $t("message.sublogin") }}
+                      </p>
+                    </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"
+                  >
+                  </v-alert>
+                  <v-text-field
+                    class="mt-3"
+                    v-model="email"
+                    :label="$t('message.email')"
+                    :placeholder="$t('message.placeholderEmail')"
+                    variant="outlined"
+                  ></v-text-field>
+                  <!-- <div
+                    class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
+                  >
+                    {{ $t("message.password") }}
+                    <a
+                      class="text-caption text-decoration-none text-blue"
+                      href="#"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      {{ $t("message.forgotPassword") }}</a
+                    >
+                  </div> -->
+                  <v-text-field
+                    :label="$t('message.password')"
+                    v-model="password"
+                    :append-inner-icon="visible ?  'mdi-eye':'mdi-eye-off'"
+                    :type="visible ? 'text' : 'password'"
+                    :placeholder="$t('message.placeholderPassword')"
+                    variant="outlined"
+                    @click:append-inner="visible = !visible"
+                  ></v-text-field>
+                  <div class="text-center">
+                    <v-btn
+                      :loading="loading"
+                      @click="login"
+                      class="mt-5 text-none"
+                      color="blue"
+                      size="large"
+                      variant="elevated"
+                      block
+                    >
+                      {{ $t("message.login") }}
+                      <template v-slot:loader>
+                        <v-progress-linear indeterminate></v-progress-linear>
+                      </template>
+                    </v-btn>
+                  </div>
+                </v-card>
+              </div>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-col>
+    </v-row>
+  </v-app>
+</template>
+
+<script type="module">
+  export default {
+    name: "dekstop",
+    data() {
+      return {
+        visible: false,
+      };
+    },
+    computed: {
+      // Akses state dari store
+      count() {
+        return this.$store.state.login.count;
+      },
+      email: {
+        get() {
+          return this.$store.state.login.email;
+        },
+        set(val) {
+          this.$store.commit("login/setEmail", val);
+        },
+      },
+      password: {
+        get() {
+          return this.$store.state.login.password;
+        },
+        set(val) {
+          this.$store.commit("login/setPassword", val);
+        },
+      },
+    },
+    methods: {
+      // Dispatch action ke store
+      increment() {
+        this.$store.dispatch("increment");
+      },
+    },
+  };
+</script>
+
+<style scoped></style>
diff --git a/loginv3/components/login.vue b/loginv3/components/login.vue
index 6d1c412..099a549 100644
--- a/loginv3/components/login.vue
+++ b/loginv3/components/login.vue
@@ -1,112 +1,23 @@
 <template>
   <v-app id="inspire">
-    <v-row no-gutters>
-      <v-col cols="8">
-        <v-img
-          :aspect-ratio="1"
-          class="bg-white"
-          src="./images/bg-left.jpg"
-          width="100vw"
-          height="100vh"
-          cover
-        ></v-img>
-      </v-col>
-      <v-col cols="4">
-        <div class="d-flex justify-center mb-6 mt-16 bg-surface-variant">
-          <v-img
-            class="bg-white"
-            height="86px"
-            src="../globalimages/logo.png"
-          ></v-img>
-        </div>
-        <v-container class="mb-6 mt-16">
-          <v-row style="min-height: 480px;" no-gutters justify="center">
-            <v-col>
-              <div class="d-flex px-10">
-                <v-sheet class="pl-16 ma-2">
-                  <h2 class="text-h6 font-weight-black">
-                    {{ $t("message.title") }}
-                  </h2>
-                  <p class="text-subtitle-1" style="color: #637381;">
-                    {{ $t("message.sublogin") }}
-                  </p>
-                </v-sheet>
-              </div>
-
-              <div class="d-flex justify-center mb-6">
-                <v-card
-                  class="mx-auto px-12"
-                  elevation="0"
-                  min-width="400"
-                  rounded="lg"
-                >
-                  <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"
-                  >
-                  </v-alert>
-                  <v-text-field
-                    class="mt-3"
-                    v-model="email"
-                    :label="$t('message.email')"
-                    :placeholder="$t('message.placeholderEmail')"
-                    variant="outlined"
-                  ></v-text-field>
-                  <!-- <div
-                    class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
-                  >
-                    {{ $t("message.password") }}
-                    <a
-                      class="text-caption text-decoration-none text-blue"
-                      href="#"
-                      rel="noopener noreferrer"
-                      target="_blank"
-                    >
-                      {{ $t("message.forgotPassword") }}</a
-                    >
-                  </div> -->
-                  <v-text-field
-                    :label="$t('message.password')"
-                    v-model="password"
-                    :append-inner-icon="visible ?  'mdi-eye':'mdi-eye-off'"
-                    :type="visible ? 'text' : 'password'"
-                    :placeholder="$t('message.placeholderPassword')"
-                    variant="outlined"
-                    @click:append-inner="visible = !visible"
-                  ></v-text-field>
-                  <div class="text-center">
-                    <v-btn
-                      :loading="loading"
-                      @click="login"
-                      class="mt-5 text-none"
-                      color="blue"
-                      size="large"
-                      variant="elevated"
-                      block
-                    >
-                      {{ $t("message.login") }}
-                      <template v-slot:loader>
-                        <v-progress-linear indeterminate></v-progress-linear>
-                      </template>
-                    </v-btn>
-                  </div>
-                </v-card>
-              </div>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-col>
-    </v-row>
+    <div class="hidden-md-and-up">
+      <mobile-component></mobile-component>
+    </div>
+    <div class="hidden-sm-and-down">
+      <dekstop-component></dekstop-component>
+    </div>
   </v-app>
 </template>
 
 <script type="module">
+  import MobileComponent from "./mobile.vue";
+  import DekstopComponent from "./dekstop.vue";
   export default {
     name: "login",
+    components: {
+      "mobile-component": MobileComponent,
+      "dekstop-component": DekstopComponent,
+    },
     data() {
       return {
         visible: false,
diff --git a/loginv3/components/mobile.vue b/loginv3/components/mobile.vue
new file mode 100644
index 0000000..4b29636
--- /dev/null
+++ b/loginv3/components/mobile.vue
@@ -0,0 +1,128 @@
+<template>
+  <div style="background-image: url(./images/bg-left.jpg);">
+    <v-container class="h-100 w-100">
+      <v-col align-self="center">
+        <v-card
+          class="mx-auto px-5 py-12"
+          elevation="0"
+          rounded="lg"
+          width="90%"
+        >
+          <div class="d-flex justify-center mb-6 bg-surface-variant">
+            <v-img
+              class="bg-white"
+              height="86px"
+              aspect-ratio="16/9"
+              src="../globalimages/logo.png"
+            ></v-img>
+          </div>
+          <div class="d-flex mb-6">
+            <v-sheet class="">
+              <h2 class="text-h6 font-weight-black">
+                {{ $t("message.title") }}
+              </h2>
+              <p class="text-subtitle-1" style="color: #637381;">
+                {{ $t("message.sublogin") }}
+              </p>
+            </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"
+          >
+          </v-alert>
+          <v-text-field
+            class="mt-3"
+            v-model="email"
+            :label="$t('message.email')"
+            :placeholder="$t('message.placeholderEmail')"
+            variant="outlined"
+          ></v-text-field>
+          <!-- <div
+                    class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
+                  >
+                    {{ $t("message.password") }}
+                    <a
+                      class="text-caption text-decoration-none text-blue"
+                      href="#"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      {{ $t("message.forgotPassword") }}</a
+                    >
+                  </div> -->
+          <v-text-field
+            :label="$t('message.password')"
+            v-model="password"
+            :append-inner-icon="visible ?  'mdi-eye':'mdi-eye-off'"
+            :type="visible ? 'text' : 'password'"
+            :placeholder="$t('message.placeholderPassword')"
+            variant="outlined"
+            @click:append-inner="visible = !visible"
+          ></v-text-field>
+          <div class="text-center">
+            <v-btn
+              :loading="loading"
+              @click="login"
+              class="mt-5 text-none"
+              color="blue"
+              size="large"
+              variant="elevated"
+              block
+            >
+              {{ $t("message.login") }}
+              <template v-slot:loader>
+                <v-progress-linear indeterminate></v-progress-linear>
+              </template>
+            </v-btn>
+          </div>
+        </v-card>
+      </v-col>
+    </v-container>
+  </div>
+</template>
+
+<script type="module">
+  export default {
+    name: "mobile",
+    data() {
+      return {
+        visible: false,
+      };
+    },
+    computed: {
+      // Akses state dari store
+      count() {
+        return this.$store.state.login.count;
+      },
+      email: {
+        get() {
+          return this.$store.state.login.email;
+        },
+        set(val) {
+          this.$store.commit("login/setEmail", val);
+        },
+      },
+      password: {
+        get() {
+          return this.$store.state.login.password;
+        },
+        set(val) {
+          this.$store.commit("login/setPassword", val);
+        },
+      },
+    },
+    methods: {
+      // Dispatch action ke store
+      increment() {
+        this.$store.dispatch("increment");
+      },
+    },
+  };
+</script>
+
+<style scoped></style>
diff --git a/loginv3/index.html b/loginv3/index.html
index 295d7b8..ae2d86a 100644
--- a/loginv3/index.html
+++ b/loginv3/index.html
@@ -30,6 +30,7 @@
     <script src="../globalscript/theme.js"></script>
     <!-- loader single file component -->
     <script src="../libraries/vue3-sfc-loader.js"></script>
+    <script src="./language.js"></script>
 
     <script type="module">
       const { loadModule } = window["vue3-sfc-loader"];
@@ -57,32 +58,7 @@
         },
       };
       // Locale messages
-      const messages = {
-        en: {
-          message: {
-            login: "Log in",
-            title: "Log in to your account",
-            sublogin: "Enter your details below",
-            email: "Email",
-            password: "Password",
-            forgotPassword: "Forgot password?",
-            placeholderEmail: "Enter your email",
-            placeholderPassword: "Enter your password",
-          },
-        },
-        id: {
-          message: {
-            login: "Masuk",
-            title: "Masuk ke akun Anda",
-            sublogin: "Masukkan detail Anda di bawah ini",
-            email: "Surel",
-            password: "Kata Sandi",
-            forgotPassword: "Lupa kata sandi?",
-            placeholderEmail: "Isikan email anda",
-            placeholderPassword: "Isikan kata sandi anda",
-          },
-        },
-      };
+      const messages = CustomMessages;
 
       // Get the browser's preferred language
       const browserLocale = navigator.language || navigator.languages[0];
diff --git a/loginv3/language.js b/loginv3/language.js
new file mode 100644
index 0000000..8d16a8f
--- /dev/null
+++ b/loginv3/language.js
@@ -0,0 +1,26 @@
+var CustomMessages = {
+    en: {
+        message: {
+            login: "Log in",
+            title: "Log in to your account",
+            sublogin: "Enter your details below",
+            email: "Email",
+            password: "Password",
+            forgotPassword: "Forgot password?",
+            placeholderEmail: "Enter your email",
+            placeholderPassword: "Enter your password",
+        },
+    },
+    id: {
+        message: {
+            login: "Masuk",
+            title: "Masuk ke akun Anda",
+            sublogin: "Masukkan detail Anda di bawah ini",
+            email: "Surel",
+            password: "Kata Sandi",
+            forgotPassword: "Lupa kata sandi?",
+            placeholderEmail: "Isikan email anda",
+            placeholderPassword: "Isikan kata sandi anda",
+        },
+    },
+};
\ No newline at end of file
diff --git a/loginv3/modules/login.js b/loginv3/modules/login.js
index 8e21d56..678fa32 100644
--- a/loginv3/modules/login.js
+++ b/loginv3/modules/login.js
@@ -1,5 +1,6 @@
 
-const URL = "/westone-api/v1/system/auth";
+// const URL = "/westone-api/v1/system/auth";
+const URL = "https://devcpone.aplikasi.web.id/one-api/v1/system/auth/";
 const store = {
     namespaced: true,
     state() {