video-maker/frontend/src/views/Login.vue

<script setup lang="ts">
import { appName, openRegisration } from "@/env";
import { ref, computed, onMounted } from "vue";
import { useMainStore } from "@/stores/main";
import { useDisplay } from "vuetify";
import { storeToRefs } from "pinia";
import { useI18n } from "vue-i18n";
import Navbar from "@/components/Navbar.vue";

const mainStore = useMainStore();
const mainStoreRef = storeToRefs(mainStore);

// variable
const email = ref("");
const password = ref("");
const { name } = useDisplay();
const { t } = useI18n();
let showPassword = ref(false);

// getter
const loginError = mainStoreRef.readLoginError;
const width = computed(() => {
  // name is reactive and
  // must use .value
  switch (name.value) {
    case "xs":
      return 12;
    case "sm":
      return 12;
    // case "md":
    //   return 6;
  }
  return 6;
});

// action
function submit() {
  mainStore.logIn(email.value, password.value);
}

// lifecycle
onMounted(() => {});
</script>

<template>
  <Navbar />
  <v-container fluid class="pa-0">
    <v-row align="center" no-gutters class="overflow-hidden">
      <v-col :cols="width">
        <section class="overflow-hidden banner-item">
          <img src="../assets/img/banner.png" alt="" />
          <h2>
            {{ t("describe_1") }}
            <br />
            {{ t("describe_2") }}
          </h2>
        </section>
      </v-col>
      <v-col :cols="width" class="px-6 my-8 my-md-0">
        <div class="form-title">
          <h3>{{ t("login") }}</h3>
          <span></span>
        </div>
        <v-form ref="form" class="login-form" lazy-validation>
          <v-text-field
            v-model="email"
            name="email"
            prepend-icon="person"
            :rules="[(v) => !!v || '請輸入您的帳號']"
            :label="$t('emailAddress')"
            required
          ></v-text-field>

          <v-text-field
            v-model="password"
            name="password"
            id="password"
            prepend-icon="key"
            :append-icon="showPassword ? 'visibility' : 'visibility_off'"
            :rules="[(v) => !!v || '請輸入您的密碼']"
            :type="showPassword ? 'text' : 'password'"
            :label="$t('password')"
            hint="4-12 位數密碼"
            @click:append="showPassword = !showPassword"
            required
          ></v-text-field>

          <p class="text-center">
<<<<<<< HEAD
            還沒有帳號？
            <router-link to="/signup">註冊</router-link> / <router-link
              to="/recover-password"
              >忘記密碼</router-link
            >
=======
            {{ t("haventAccount") }}
            <router-link to="/signup">{{ t("register") }}</router-link
            > / <router-link to="/recover-password">{{
              t("forgotPsd")
            }}</router-link>
>>>>>>> choozmo/front-dev
          </p>

          <v-btn
            rounded="pill"
            color="primary"
            @click.prevent="submit"
            class="login-btn"
          >
            {{ t("loginLink") }}
          </v-btn>
        </v-form>
      </v-col>
    </v-row>
  </v-container>
<<<<<<< HEAD

=======
>>>>>>> choozmo/front-dev
</template>