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

<script setup lang="ts">
import router from "@/router";
import { useMainStore } from "@/stores/main";
import { ref, computed } from "vue";
import { required } from "@/utils";
import { useDisplay } from "vuetify";
import { useI18n } from "vue-i18n";
import Navbar from "@/components/Navbar.vue";

let email = ref("");
const valid = ref(true);

const { t } = useI18n();
const mainStore = useMainStore();
const { name } = useDisplay();
const width = computed(() => {
  switch (name.value) {
    case "xs":
      return 12;
  }
  return 8;
});

function cancel() {
  router.back();
}

function submit() {
  mainStore.passwordRecovery(email.value);
}
</script>

<template>
  <Navbar />
  <v-container 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>{{ t("passwordRecovery") }}</v-toolbar-title>
          </v-toolbar>
          <v-card-text>
            <p class="subheading mb-3">
              {{ t("passwordRecoveryMail") }}
            </p>
            <v-form
              @keyup.enter="submit"
              v-model="valid"
              ref="form"
              @submit.prevent=""
              lazy-validation
            >
              <v-text-field
                @keyup.enter="submit"
                :label="$t('emailAddress')"
                type="text"
                prepend-icon="email"
                v-model="email"
                :rules="required()"
                required
              ></v-text-field>
            </v-form>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn @click="cancel">{{ t("cancel") }}</v-btn>
            <v-btn @click.prevent="submit" :disabled="!valid">
              {{ t("submit") }}
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>