base login v3

loginv3/components/login.vue

@@ -0,0 +1,146 @@
+<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>
+  </v-app>
+</template>
+
+<script type="module">
+  export default {
+    name: "login",
+    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>