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

<script setup lang="ts">
import { appName, openRegisration } from "@/env";
import { ref, reactive, 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";
import  TOS  from "@/components/TOS.vue";
const mainStore = useMainStore();
const mainStoreRef = storeToRefs(mainStore);

// variable
const email = ref("");
const password = ref("");
const { name } = useDisplay();
const { t } = useI18n();
const confirmPassword = ref("");
let data = reactive({
  email: "",
  password: "",
  full_name: ""
});
let dialog = ref(false);
let confirmState = ref(false);
let showPassword = ref(false);
let showConfirmPassword = 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;
  }
  return 6;
});

// action
async function submit() {
  if (confirmPassword.value === data.password) {
    console.log("data", data.password);
    mainStore.register(data);
  } else {
    confirmState.value = true;
    setTimeout(() => {
      confirmState.value = false;
    }, 5000);
  }
}
</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("register") }}</h3>
          <span></span>
        </div>
        <v-form ref="form" class="login-form" lazy-validation>
          <v-text-field
            v-model="data.full_name"
            :rules="[(v) => !!v || '請輸入您的帳號']"
            :label="$t('userName')"
            required
          ></v-text-field>

          <v-text-field
            v-model="data.email"
            :rules="[(v) => !!v || '請輸入您的電子信箱']"
            :label="$t('emailAddress')"
            required
          ></v-text-field>

          <v-text-field
            v-model="data.password"
            :append-icon="showPassword ? 'visibility' : 'visibility_off'"
            :rules="[(v) => !!v || '請輸入您的密碼']"
            :type="showPassword ? 'text' : 'password'"
            :label="$t('registerPassword')"
            :hint="$t('passwordLength')"
            @click:append="showPassword = !showPassword"
            required
          ></v-text-field>

          <v-text-field
            v-model="confirmPassword"
            :append-icon="showConfirmPassword ? 'visibility' : 'visibility_off'"
            :rules="[(v) => !!v || '請輸入您的密碼']"
            :type="showConfirmPassword ? 'text' : 'password'"
            :label="$t('confirmPassword')"
            :hint="$t('passwordConfirm')"
            @click:append="showConfirmPassword = !showConfirmPassword"
            required
          ></v-text-field>

          <v-alert v-model="confirmState" type="error" variant="outlined">
            該密碼與您輸入的確認密碼不一致
          </v-alert>

          <p class="text-center">
            {{ t("haveAccount") }}
            <router-link to="/login"> {{ t("login") }}</router-link>
          </p>

          <v-btn
            rounded="pill"
            color="primary"
            @click.prevent="submit"
            class="login-btn"
          >
            {{ t("registerLink") }}
          </v-btn>

          <section
            class="mt-5 d-flex align-center justify-center dialog-content"
          >
            <p>
              {{ t("privacy_term_1") }}
              <v-dialog v-model="dialog" max-width="700" scrollable>
                <template v-slot:activator="{ props }">
                  <a
                    href="javascript:;"
                    color="primary"
                    v-bind="props"
                    class="ms-1"
                  >
                    {{ t("privacy_term_2") }}
                  </a>
                </template>

                <v-card class="terms-card">
                  <v-card-title>
                    <v-spacer></v-spacer>
                    <v-btn icon @click="dialog = false">
                      <v-icon icon="md:close"></v-icon>
                    </v-btn>
                  </v-card-title>
                  <v-card-text>
                    <TOS/>
                  </v-card-text>
                </v-card>
              </v-dialog>
            </p>
          </section>
        </v-form>
      </v-col>
    </v-row>
  </v-container>
</template>

<style lang="scss">
.dialog-content {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  letter-spacing: 1px;
  .v-btn {
    &:hover > .v-btn__overlay {
      opacity: 0;
    }
    &:hover > .v-btn__content {
      color: rgba(234, 84, 19, 0.8);
    }
  }
  .v-btn__content {
    font-size: 14px;
    font-weight: bold;
  }
}
.terms-card {
  margin: auto;
  font-size: 16px;
  ul {
    padding: 20px;
  }
  .v-card-title {
    display: flex;
    .v-btn {
      box-shadow: none;
    }
  }
  .v-card-text {
    padding: 0px 50px 50px !important;
  }
}
</style>