From 44868f4673719b1d1904ead7fe543641234b56da Mon Sep 17 00:00:00 2001
From: Reto Aebersold <aeby@substyle.ch>
Date: Tue, 6 Feb 2024 09:15:34 +0100
Subject: [PATCH] feat: user store cleanup

---
 client/src/components/AppFooter.vue           |  2 +-
 .../components/onboarding/WizardSidePanel.vue |  2 +-
 .../src/pages/onboarding/AccountProfile.vue   |  4 +-
 .../personalProfile/PersonalProfilePage.vue   |  1 +
 client/src/stores/user.ts                     | 57 +++++++------------
 5 files changed, 27 insertions(+), 39 deletions(-)

diff --git a/client/src/components/AppFooter.vue b/client/src/components/AppFooter.vue
index 0ebb2178..958469fb 100644
--- a/client/src/components/AppFooter.vue
+++ b/client/src/components/AppFooter.vue
@@ -13,7 +13,7 @@ const hideVersion = (import.meta.env.VITE_APP_ENVIRONMENT || "local").startsWith
 );
 
 async function changeLocale(language: AvailableLanguages) {
-  userStore.setUserLanguages(language);
+  await userStore.updateUserProfile({ language });
 }
 </script>
 
diff --git a/client/src/components/onboarding/WizardSidePanel.vue b/client/src/components/onboarding/WizardSidePanel.vue
index d9050de5..38827e62 100644
--- a/client/src/components/onboarding/WizardSidePanel.vue
+++ b/client/src/components/onboarding/WizardSidePanel.vue
@@ -13,7 +13,7 @@ const props = defineProps<{
 const userStore = useUserStore();
 
 async function changeLocale(language: AvailableLanguages) {
-  await userStore.setUserLanguages(language);
+  await userStore.updateUserProfile({ language });
 }
 </script>
 <template>
diff --git a/client/src/pages/onboarding/AccountProfile.vue b/client/src/pages/onboarding/AccountProfile.vue
index 957e2772..be7e1ed4 100644
--- a/client/src/pages/onboarding/AccountProfile.vue
+++ b/client/src/pages/onboarding/AccountProfile.vue
@@ -57,7 +57,9 @@ async function avatarUpload(e: Event) {
 }
 
 watch(selectedOrganisation, async (organisation) => {
-  await user.setUserOrganisation(organisation.id);
+  await user.updateUserProfile({
+    organisation: organisation.id,
+  });
 });
 
 const nextRoute = computed(() => {
diff --git a/client/src/pages/personalProfile/PersonalProfilePage.vue b/client/src/pages/personalProfile/PersonalProfilePage.vue
index 6bfef14d..41566b71 100644
--- a/client/src/pages/personalProfile/PersonalProfilePage.vue
+++ b/client/src/pages/personalProfile/PersonalProfilePage.vue
@@ -15,6 +15,7 @@ const formData = ref();
 const saved = ref(false);
 
 function startEditMode() {
+  saved.value = false;
   formData.value = {
     first_name: user.first_name,
     last_name: user.last_name,
diff --git a/client/src/stores/user.ts b/client/src/stores/user.ts
index fe3f0afe..548c1f51 100644
--- a/client/src/stores/user.ts
+++ b/client/src/stores/user.ts
@@ -1,5 +1,3 @@
-import log from "loglevel";
-
 import { bustItGetCache, itGetCached, itPost } from "@/fetchHelpers";
 import { setI18nLanguage } from "@/i18nextWrapper";
 import type { Country } from "@/services/entities";
@@ -9,7 +7,6 @@ import { defineStore } from "pinia";
 
 let logoutRedirectUrl = import.meta.env.VITE_LOGOUT_REDIRECT || "/";
 
-// TODO: check if user logged in with SSO or login-local
 if (import.meta.env.VITE_OAUTH_API_BASE_URL) {
   logoutRedirectUrl = `${
     import.meta.env.VITE_OAUTH_API_BASE_URL
@@ -21,7 +18,7 @@ const AVAILABLE_LANGUAGES = ["de", "fr", "it"];
 export type AvailableLanguages = "de" | "fr" | "it";
 export type InvoiceAddress = "prv" | "org";
 
-export interface UserProfile {
+export interface User {
   id: string;
   username: string;
   first_name: string;
@@ -30,6 +27,7 @@ export interface UserProfile {
   avatar_url: string;
   organisation: number | null;
   is_superuser: boolean;
+  loggedIn: boolean;
   language: AvailableLanguages;
   course_session_experts: string[];
   invoice_address: InvoiceAddress | null;
@@ -46,10 +44,6 @@ export interface UserProfile {
   organisation_country: Country | null;
 }
 
-export type UserState = {
-  loggedIn: boolean;
-} & UserProfile;
-
 let defaultLanguage: AvailableLanguages = "de";
 
 const isAvailableLanguage = (language: string): language is AvailableLanguages => {
@@ -67,7 +61,7 @@ for (const language of languagesWithoutCountryCode) {
   }
 }
 
-const initialUserState: UserState = {
+const initialUserState: User = {
   id: "",
   email: "",
   first_name: "",
@@ -110,7 +104,7 @@ async function setLocale(language: AvailableLanguages) {
 
 export const useUserStore = defineStore({
   id: "user",
-  state: () => initialUserState as UserState,
+  state: () => initialUserState as User,
   getters: {
     getFullName(): string {
       return `${this.first_name} ${this.last_name}`.trim();
@@ -130,24 +124,20 @@ export const useUserStore = defineStore({
     },
   },
   actions: {
-    handleLogin(username: string, password: string, next = "/") {
+    async handleLogin(username: string, password: string, next = "/") {
       if (username && password) {
-        itPost("/api/core/login/", {
-          username,
-          password,
-        })
-          .then((data) => {
-            this.$state = data;
-            this.loggedIn = true;
-            log.debug("bust cache");
-            bustItGetCache();
-            log.debug(`redirect to ${next}`);
-            window.location.href = next;
-          })
-          .catch(() => {
-            this.loggedIn = false;
-            alert("Login failed");
+        try {
+          this.$state = await itPost("/api/core/login/", {
+            username,
+            password,
           });
+          this.loggedIn = true;
+          bustItGetCache();
+          window.location.href = next;
+        } catch (e) {
+          this.loggedIn = false;
+          alert("Login failed");
+        }
       }
     },
     handleLogout() {
@@ -170,20 +160,15 @@ export const useUserStore = defineStore({
       this.loggedIn = true;
       await setLocale(data.language);
     },
-    async setUserLanguages(language: AvailableLanguages) {
-      await setLocale(language);
-      this.$state.language = language;
-      await itPost("/api/core/me/", { language }, { method: "PUT" });
-    },
-    async setUserOrganisation(organisation: number) {
-      this.$state.organisation = organisation;
-      await itPost("/api/core/me/", { organisation }, { method: "PUT" });
-    },
     async setUserAvatar(file: File) {
       const r = await directUpload("/api/core/avatar/", file);
       this.$state.avatar_url = r.url;
     },
-    async updateUserProfile(profileData: UserProfile) {
+    async updateUserProfile(profileData: Partial<User>) {
+      if (profileData.language) {
+        await setLocale(profileData.language);
+      }
+
       await itPost("/api/core/me/", profileData, { method: "PUT" });
       Object.assign(this.$state, profileData);
     },