first commit

loginv2/components/coba.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <v-container class="mb-6">
+      <v-row align="end" style="min-height: 480px;" no-gutters justify="center">
+        
+        <v-col>
+          <div class="d-flex justify-center">
+            <v-sheet class="pa-2 ma-2">
+              <h2 class="text-h6 font-weight-black">
+                {{ $t("message.login") }} {{ email }}
+              </h2>
+            </v-sheet>
+          </div>
+          <div class="d-flex justify-center mb-6">
+            <v-card
+              class="mx-auto pa-12 pb-8"
+              elevation="0"
+              min-width="400"
+              rounded="lg"
+            >
+              <div class="text-subtitle-1 text-medium-emphasis">
+                {{ $t("message.email") }}
+              </div>
+              <v-text-field
+                density="compact"
+                :placeholder="$t('message.placeholderEmail')"
+                prepend-inner-icon="mdi-email-outline"
+                variant="outlined"
+                v-model="email"
+              ></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
+                :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
+                :type="visible ? 'text' : 'password'"
+                density="compact"
+                :placeholder="$t('message.placeholderPassword')"
+                prepend-inner-icon="mdi-lock-outline"
+                variant="outlined"
+                @click:append-inner="visible = !visible"
+              ></v-text-field>
+              <div class="text-center">
+                <v-btn
+                  :loading="loading"
+                  @click="login"
+                  class="mt-8 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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HelloWorld",
+  setup() {
+    const store = useStore();
+    const email = computed(() => store.state.email);
+    return { email };
+  }
+};
+</script>
+
+<style scoped>
+  h1 {
+    color: blue;
+  }
+</style>