INIT commit

src/pages/public/RegisterPage.vue

@@ -0,0 +1,79 @@
+<script setup>
+
+import {ref} from "vue";
+import {useUserStore} from "stores/User";
+import {useRouter} from "vue-router";
+import {useQuasar} from "quasar";
+
+const email = ref("");
+const name = ref("");
+const password = ref("");
+
+const router = useRouter();
+const $q = useQuasar();
+const registerUser = () => {
+  useUserStore().register({
+    email: email.value,
+    name: name.value,
+    password: password.value
+  }).then(() => {
+    $q.notify({message: "Registration Ok, now login", position: "top", color: "positive"});
+    router.push({name: 'login'})
+  }).catch(({response}) => {
+    $q.notify({
+      message: "Registration failed",
+      position: "top",
+      color: "negative",
+      timeout: 0,
+      actions: [
+        {
+          label: "Dismiss", color: "white"
+        }
+      ]
+    });
+  })
+}
+
+</script>
+
+<template>
+  <q-page
+    class="window-height window-width row justify-center items-center"
+  >
+    <div class="column q-pa-lg">
+      <div class="row">
+        <q-card square class="shadow-24" style="width:300px;height:485px;">
+          <q-card-section class="bg-deep-purple-7">
+            <h4 class="text-h5 text-white q-my-md">Registration</h4>
+          </q-card-section>
+          <q-card-section>
+            <q-form class="q-px-sm q-pt-xl q-pb-lg" @submit.prevent="registerUser">
+              <q-input square clearable v-model="name" type="text" label="Name">
+                <template v-slot:prepend>
+                  <q-icon name="person"/>
+                </template>
+              </q-input>
+
+              <q-input square clearable v-model="email" type="email" label="E-mail">
+                <template v-slot:prepend>
+                  <q-icon name="email"/>
+                </template>
+              </q-input>
+              <q-input square clearable v-model="password" type="password" label="Password">
+                <template v-slot:prepend>
+                  <q-icon name="lock"/>
+                </template>
+              </q-input>
+            </q-form>
+          </q-card-section>
+          <q-card-actions class="q-px-lg">
+            <q-btn @click="registerUser" unelevated size="lg" color="purple-4" class="full-width text-white" label="Get Started"/>
+          </q-card-actions>
+          <q-card-section class="text-center q-pa-sm">
+            <router-link :to="{name: 'login'}" class="text-grey-6">Return to login</router-link>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+  </q-page>
+</template>