Zdockerovani, sjednoceni marginu, drobnejsi upravy

src/pages/public/RegisterPage.vue

@@ -1,61 +1,74 @@
 <script setup>
-
-import {ref} from "vue";
+import {reactive, 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("");
+import {errorObject, successObject} from "src/composables/dialog";
+import {useAppStore} from "stores/App";
+import {isRequired, isValidEmail, minLength} from "src/composables/form/rules";
 
 const router = useRouter();
 const $q = useQuasar();
+const form = ref(null);
+
+useAppStore().setPageTitle("Registrace");
+
 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'})
+  if (!form.value.validate()) return;
+
+  useUserStore().register(formData).then(() => {
+    useUserStore().login({email: formData.email, password: formData.password}).then(() => {
+      $q.notify(successObject("Registrace úspěšná, vítej!"));
+      router.push({name: "myFlights"});
+    })
+
   }).catch(({response}) => {
-    $q.notify({
-      message: "Registration failed",
-      position: "top",
-      color: "negative",
-      timeout: 0,
-      actions: [
-        {
-          label: "Dismiss", color: "white"
-        }
-      ]
-    });
+    console.log(response.detail);
+    if (response.detail === 'User already exists') {
+      $q.notify(errorObject("Uživatel s tímto e-mailem je již registrovaný. Zkus se přihlásit."));
+    } else {
+      $q.notify(errorObject("Registrace se nepovedla, zkus to prosím znovu za chvíli"));
+    }
   })
 }
 
+const formData = reactive({
+  name: "",
+  email: "",
+  password: ""
+});
+
+
+const rules = {
+  email: [isRequired, isValidEmail],
+  password: [isRequired, minLength(4)]
+}
 </script>
 
 <template>
   <q-page class="row justify-center">
-    <q-card style="width:95%; max-width: 450px; height: 500px" >
+    <q-card style="width:95%; max-width: 450px; height: 500px">
       <q-card-section class="bg-primary">
         <h4 class="text-h5 text-white q-my-md">Registrace</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">
+        <q-form
+          ref="form"
+          class="q-px-sm q-pt-xl q-pb-lg"
+          @submit.prevent="registerUser"
+        >
+          <q-input square clearable v-model="formData.name" type="text" label="Jméno">
             <template v-slot:prepend>
               <q-icon name="person"/>
             </template>
           </q-input>
 
-          <q-input square clearable v-model="email" type="email" label="E-mail">
+          <q-input square clearable v-model="formData.email" type="email" label="E-mail" :rules="rules.email">
             <template v-slot:prepend>
               <q-icon name="email"/>
             </template>
           </q-input>
-          <q-input square clearable v-model="password" type="password" label="Password">
+          <q-input square clearable v-model="formData.password" type="password" label="Heslo" :rules="rules.password">
             <template v-slot:prepend>
               <q-icon name="lock"/>
             </template>
@@ -63,7 +76,13 @@ const registerUser = () => {
         </q-form>
       </q-card-section>
       <q-card-actions class="q-px-lg">
-        <q-btn @click="registerUser" unelevated size="lg" class="full-width" label="Registrovat"/>
+        <q-btn
+          @click="registerUser"
+          unelevated
+          size="lg"
+          class="full-width"
+          label="Registrovat"
+        />
       </q-card-actions>
       <q-card-section class="text-center q-pa-sm">
         <router-link :to="{name: 'login'}" class="text-grey-6">Zpět na login</router-link>