Merge pull request 'Fix registration not displaying' (#14) from registration into master

Reviewed-on: #14

postgres/numeric.go

@@ -94,7 +94,7 @@ func (n Numeric) Add(other Numeric) Numeric {
 
 func (n Numeric) MarshalJSON() ([]byte, error) {
 	if n.Int.Int64() == 0 {
-		return []byte("\"0\""), nil
+		return []byte("0"), nil
 	}
 
 	s := fmt.Sprintf("%d", n.Int)

web/src/pages/Login.vue

@@ -5,6 +5,7 @@ import { useSessionStore } from "../stores/session";
 
 const error = ref("");
 const login = ref({ user: "", password: "" });
+const router = useRouter(); // has to be called in setup
 
 onMounted(() => {
     useSessionStore().setTitle("Login");
@@ -15,7 +16,8 @@ function formSubmit(e: MouseEvent) {
     useSessionStore().login(login.value)
         .then(x => {
             error.value = "";
-            useRouter().replace("/dashboard");
+            router.replace("/dashboard");
+            return x;
         })
         .catch(x => error.value = "The entered credentials are invalid!");
 
@@ -26,23 +28,17 @@ function formSubmit(e: MouseEvent) {
 
 <template>
     <div>
-        <input
-            type="text"
-            v-model="login.user"
+        <input type="text" v-model="login.user"
             placeholder="Username"
-            class="border-2 border-black rounded-lg block px-2 my-2 w-48"
-        />
-        <input
-            type="password"
-            v-model="login.password"
+            class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
+        <input type="password" v-model="login.password"
             placeholder="Password"
-            class="border-2 border-black rounded-lg block px-2 my-2 w-48"
-        />
+            class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
     </div>
     <div>{{ error }}</div>
     <button type="submit" @click="formSubmit" class="bg-blue-300 rounded-lg p-2 w-48">Login</button>
     <p>
         New user?
-        <router-link to="/register">Register</router-link>instead!
+        <router-link to="/register">Register</router-link> instead!
     </p>
 </template>

web/src/pages/Register.vue

@@ -1,16 +1,25 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { useSessionStore } from '../stores/session';
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import { useSessionStore } from "../stores/session";
 
 const error = ref("");
 const login = ref({ email: "", password: "", name: "" });
-const showPassword = ref(false);
+const router = useRouter(); // has to be called in setup
 
-function formSubmit(e: FormDataEvent) {
+onMounted(() => {
+    useSessionStore().setTitle("Login");
+});
+
+function formSubmit(e: MouseEvent) {
     e.preventDefault();
-    useSessionStore().register(login)
-        .then(() => error.value = "")
-        .catch(() => error.value = "Something went wrong!");
+    useSessionStore().register(login.value)
+        .then(x => {
+            error.value = "";
+            router.replace("/dashboard");
+            return x;
+        })
+        .catch(x => error.value = "The entered credentials are invalid!");
 
     // TODO display invalidCredentials
     // TODO redirect to dashboard on success
@@ -18,44 +27,21 @@ function formSubmit(e: FormDataEvent) {
 </script>
 
 <template>
-    <v-container>
-        <v-row>
-            <v-col cols="12">
-                <v-text-field v-model="login.email" type="text" label="E-Mail" />
-            </v-col>
-            <v-col cols="12">
-                <v-text-field v-model="login.name" type="text" label="Name" />
-            </v-col>
-            <v-col cols="6">
-                <v-text-field
-                    v-model="login.password"
-                    label="Password"
-                    :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
-                    :type="showPassword ? 'text' : 'password'"
-                    @click:append="showPassword = showPassword"
-                    :error-message="error"
-                    error-count="2"
-                    error
-                />
-            </v-col>
-            <v-col cols="6">
-                <v-text-field
-                    v-model="login.password"
-                    label="Repeat password"
-                    :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
-                    :type="showPassword ? 'text' : 'password'"
-                    @click:append="showPassword = showPassword"
-                    :error-message="error"
-                    error-count="2"
-                    error
-                />
-            </v-col>
-        </v-row>
-        <div class="form-group">{{ error }}</div>
-        <v-btn type="submit" @click="formSubmit">Register</v-btn>
+    <div>
+        <input type="text" v-model="login.name"
+            placeholder="Name"
+            class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
+        <input type="text" v-model="login.email"
+            placeholder="Email"
+            class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
+        <input type="password" v-model="login.password"
+            placeholder="Password"
+            class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
+    </div>
+    <div>{{ error }}</div>
+    <button type="submit" @click="formSubmit" class="bg-blue-300 rounded-lg p-2 w-48">Register</button>
     <p>
         Existing user?
-            <router-link to="/login">Login</router-link>instead!
+        <router-link to="/login">Login</router-link> instead!
     </p>
-    </v-container>
 </template>

web/src/stores/session.ts

@@ -20,12 +20,12 @@ export interface Budget {
 
 export const useSessionStore = defineStore('session', {
     state: () => ({
-        Session: useStorage<Session>('session', null, undefined, { serializer: StorageSerializers.object }),
+        Session: useStorage<Session | null>('session', null, undefined, { serializer: StorageSerializers.object }),
         Budgets: useStorage<Map<string, Budget>>('budgets', new Map<string, Budget>(), undefined, { serializer: StorageSerializers.map }),
     }),
     getters: {
         BudgetsList: (state) => [ ...state.Budgets.values() ],
-        AuthHeaders: (state) => ({'Authorization': 'Bearer ' + state.Session.Token}),
+        AuthHeaders: (state) => ({'Authorization': 'Bearer ' + state.Session?.Token}),
         LoggedIn: (state) => state.Session != null,
     },
     actions: {
@@ -42,15 +42,18 @@ export const useSessionStore = defineStore('session', {
         async login(login: any) {
             const response = await POST("/user/login", JSON.stringify(login));
             const result = await response.json();
-            return this.loginSuccess(result);
+            this.loginSuccess(result);
+            return result;
         },
         async register(login : any) {
             const response = await POST("/user/register", JSON.stringify(login));
             const result = await response.json();
-            return this.loginSuccess(result);
+            this.loginSuccess(result);
+            return result;
         },
         logout() {
-            this.$reset()
+            this.Session = null;
+            this.Budgets.clear();
         },
     }
 })