<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">Sign Up</div>
            </div>
          </q-card-section>
          <q-form>
            <q-card-section class="q-gutter-md">
              <q-input
                v-model="email"
                label="E-Mail"
                type="email"
                color="darkblue"
                :rules="['email']"
                filled></q-input>
              <NewPasswordComponent v-model="password" />
              <q-card-actions>
                <q-space />
                <q-btn
                  type="button"
                  @click="doRegister"
                  label="Sign Up"
                  color="primary"></q-btn>
              </q-card-actions>
            </q-card-section>
          </q-form>
        </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 { useAuthStore } from 'src/stores/auth';
import NewPasswordComponent from 'src/components/NewPasswordComponent.vue';
import { Dialog } from 'quasar';
import { useRouter } from 'vue-router';
import { APP_VERSION } from 'src/version.js';

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

console.log('version:' + APP_VERSION);

const doRegister = async () => {
  if (email.value && password.value) {
    try {
      await useAuthStore().register(email.value, password.value);
      Dialog.create({
        message: 'Account Created!  Now log-in with your e-mail / password.',
      }).onOk(() => router.replace('/login'));
    } catch (e) {
      console.log(e);
      Dialog.create({
        message: 'An error occurred.  Please ask for support in Discord',
      });
    }
  }
};
</script>
