<template>
  <q-layout>
    <q-page-container>
      <q-page class="flex bg-image flex-center">
        <q-card
          v-bind:style="$q.screen.lt.sm ? { width: '80%' } : { width: '30%' }">
          <q-card-section>
            <q-img
              fit="scale-down"
              src="~assets/oysqn_logo.png" />
          </q-card-section>
          <q-card-section>
            <div class="text-center q-pt-sm">
              <div class="col text-h6">Reset Password</div>
            </div>
          </q-card-section>
          <q-form v-if="!isPasswordResetLink()">
            <q-card-section class="q-ma-sm">
              <q-input
                v-model="email"
                label="E-Mail"
                type="email"
                color="darkblue"
                @keydown.enter.prevent="resetPw"
                filled></q-input>
              <div class="text-caption q-py-md">
                Enter your e-mail address. If we have an account with that
                address on file, you will be e-mailed a link to reset your
                password.
              </div>
              <q-card-actions>
                <q-btn
                  type="button"
                  @click="resetPw"
                  label="Send Reset Link"
                  color="primary"></q-btn>
              </q-card-actions>
            </q-card-section>
          </q-form>
          <div v-else-if="validResetLink()">
            <q-form
              @submit="submitNewPw"
              @keydown.enter.prevent="resetPw">
              <NewPasswordComponent v-model="newPassword" />
              <q-card-actions>
                <q-btn
                  type="submit"
                  label="Reset Password"
                  color="primary"></q-btn>
              </q-card-actions>
            </q-form>
          </div>
          <q-card
            v-else
            class="text-center">
            <span class="text-h5">Invalid reset link.</span>
          </q-card>
        </q-card>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<style>
.bg-image {
  background-image: url('/src/assets/oys_lighthouse.jpg');
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: cover;
  /* background-image: linear-gradient(
    135deg,
    #ed232a 0%,
    #ffffff 75%,
    #14539a 100%
  ); */
}
</style>

<script setup lang="ts">
import { ref } from 'vue';
import { account, resetPassword } from 'boot/appwrite';
import { useRouter } from 'vue-router';
import { Dialog } from 'quasar';
import NewPasswordComponent from 'components/NewPasswordComponent.vue';

const email = ref('');
const router = useRouter();
const newPassword = ref();

function validResetLink(): boolean {
  const query = router.currentRoute.value.query;
  const expire = query.expire ? new Date(query.expire + 'Z') : null;
  return Boolean(
    query && expire && query.secret && query.userId && new Date() < expire
  );
}

function isPasswordResetLink() {
  const query = router.currentRoute.value.query;
  return query && query.secret && query.userId && query.expire;
}

function submitNewPw() {
  const query = router.currentRoute.value.query;
  if (newPassword.value) {
    account
      .updateRecovery(
        query.userId as string,
        query.secret as string,
        newPassword.value
      )
      .then(() => {
        Dialog.create({ message: 'Password Changed!' }).onOk(() =>
          router.replace('/login')
        );
      })
      .catch((e) =>
        Dialog.create({
          message: 'Password change failed!  Error: ' + e.message,
        })
      );
  } else {
    Dialog.create({
      message: 'Invalid password.  Try again',
    });
  }
}

function resetPw() {
  resetPassword(email.value)
    .then(() => router.replace('/login'))
    .finally(() =>
      Dialog.create({
        message:
          'If your address is in our system, you should receive an e-mail shortly.',
      })
    );
}
</script>
