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 Navbar from "@/components/Navbar.vue";

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

// variable
const email = ref("");
const password = ref("");
const { name } = useDisplay();
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>
            將您的生活、創作、宣傳做成影片
            <br />
            開始使用 AI Presentors
          </h2>
        </section>
      </v-col>
      <v-col :cols="width" class="px-6 my-8 my-md-0">
        <div class="form-title">
          <h3>登入</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="使用者名稱"
            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="密碼"
            hint="4-12 位數密碼"
            @click:append="showPassword = !showPassword"
            required
          ></v-text-field>

          <p class="text-center">
            還沒有帳號？
            <router-link to="/signup">註冊</router-link>／<router-link
              to="/recover-password"
              >忘記密碼</router-link
            >
          </p>

          <v-btn
            rounded="pill"
            color="primary"
            @click.prevent="submit"
            class="login-btn"
          >
            立即登入
          </v-btn>
        </v-form>
      </v-col>
    </v-row>
  </v-container>

  <!-- <v-container fluid class="d-flex fill-height">
    <v-row align="center" justify="center">
      <v-col :cols="width">
        <v-card class="elevation-12">
          <v-toolbar dark color="primary">
            <v-toolbar-title>{{ appName }}</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn to="/signup">SignUp</v-btn>
          </v-toolbar>
          <v-card-text>
            <v-form @keyup.enter="submit">
              <v-text-field
                @keyup.enter="submit"
                v-model="email"
                prepend-icon="person"
                name="email"
                label="Email"
                type="text"
              ></v-text-field>
              <v-text-field
                @keyup.enter="submit"
                v-model="password"
                prepend-icon="key"
                name="password"
                label="Password"
                id="password"
                type="password"
              ></v-text-field>
            </v-form>
            <div v-if="loginError">
              <v-alert
                :value="loginError"
                transition="fade-transition"
                type="error"
              >
                Incorrect email or password
              </v-alert>
            </div>
            <div class="d-flex align-end flex-column">
              <router-link to="/recover-password"
                >Forgot your password?</router-link
              >
            </div>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn @click.prevent="submit">Login</v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container> -->
</template>