From 148b771d9a8923a73a0491cb05130e35812d6402 Mon Sep 17 00:00:00 2001
From: Valerian Saliou <valerian@valeriansaliou.name>
Date: Sun, 10 Nov 2024 16:27:27 +0100
Subject: [PATCH] feat: large refactor to commonize axios client

---
 config/development.json                       |   6 +-
 config/production.json                        |   6 +-
 src/api/index.ts                              |  44 ++++
 src/api/login.ts                              |  52 ----
 src/api/{ => providers}/advancedBackup.ts     |   0
 src/api/{ => providers}/advancedNetwork.ts    |   4 +-
 src/api/{ => providers}/advancedSecurity.ts   |   4 +-
 src/api/{ => providers}/connect.ts            |   4 +-
 .../{ => providers}/customizationReactions.ts |   4 +-
 .../{ => providers}/customizationWorkspace.ts |   4 +-
 src/api/{ => providers}/global.ts             |   4 +-
 src/api/providers/login.ts                    |  47 ++++
 .../{ => providers}/serverConfiguration.ts    |   4 +-
 src/api/{ => providers}/teamMembers.ts        |   4 +-
 src/assemblies/start/StartLoginForm.vue       |  21 +-
 src/components/form/FormSelect.vue            |  55 ++---
 src/store/tables/account.ts                   | 225 +-----------------
 src/store/tables/customizationEmojis.ts       |  64 ++---
 src/store/tables/customizationWorkspace.ts    |  69 +++---
 src/views/start/StartLogin.vue                |  36 +--
 vite.config.ts                                |   4 +
 21 files changed, 230 insertions(+), 431 deletions(-)
 create mode 100644 src/api/index.ts
 delete mode 100644 src/api/login.ts
 rename src/api/{ => providers}/advancedBackup.ts (100%)
 rename src/api/{ => providers}/advancedNetwork.ts (90%)
 rename src/api/{ => providers}/advancedSecurity.ts (94%)
 rename src/api/{ => providers}/connect.ts (94%)
 rename src/api/{ => providers}/customizationReactions.ts (93%)
 rename src/api/{ => providers}/customizationWorkspace.ts (93%)
 rename src/api/{ => providers}/global.ts (87%)
 create mode 100644 src/api/providers/login.ts
 rename src/api/{ => providers}/serverConfiguration.ts (95%)
 rename src/api/{ => providers}/teamMembers.ts (95%)

diff --git a/config/development.json b/config/development.json
index 8199865..e2b3ea0 100644
--- a/config/development.json
+++ b/config/development.json
@@ -1,3 +1,7 @@
 {
-  "environment": "development"
+  "environment": "development",
+
+  "api": {
+    "endpoint": "http://127.0.0.1:8000/v1/"
+  }
 }
diff --git a/config/production.json b/config/production.json
index 2dc1963..5a3955e 100644
--- a/config/production.json
+++ b/config/production.json
@@ -1,3 +1,7 @@
 {
-  "environment": "production"
+  "environment": "production",
+
+  "api": {
+    "endpoint": "/api/v1/"
+  }
 }
diff --git a/src/api/index.ts b/src/api/index.ts
new file mode 100644
index 0000000..10fd8e1
--- /dev/null
+++ b/src/api/index.ts
@@ -0,0 +1,44 @@
+/*
+ * This file is part of prose-pod-dashboard
+ *
+ * Copyright 2024, Prose Foundation
+ */
+
+/**************************************************************************
+ * IMPORTS
+ * ************************************************************************* */
+
+// NPM
+import { default as axios, AxiosInstance } from "axios";
+
+// PROJECT: COMMONS
+import CONFIG from "@/commons/config";
+
+/**************************************************************************
+ * STORE
+ * ************************************************************************* */
+
+class API {
+  public readonly client: AxiosInstance;
+
+  constructor() {
+    // Initialize API HTTP client
+    this.client = this.__createClient();
+  }
+
+  private __createClient(): AxiosInstance {
+    return axios.create({
+      baseURL: CONFIG.api.endpoint,
+
+      headers: {
+        "Content-Type": "application/json"
+      }
+    });
+  }
+}
+
+/**************************************************************************
+ * EXPORTS
+ * ************************************************************************* */
+
+export default new API();
diff --git a/src/api/login.ts b/src/api/login.ts
deleted file mode 100644
index 610d7e2..0000000
--- a/src/api/login.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/*
- * This file is part of prose-pod-dashboard
- *
- * Copyright 2024, Prose Foundation
- */
-
-import axios from "axios";
-
-class Login {
-  async authenticate(password: string, attemptOnceOnly = false): Promise<void> {
-    // Incomplete parameters?
-    if (!password) {
-      throw new Error("Please provide a password");
-    }
-
-    // Attempt connecting (this might fail, eg. wrong credentials)
-    await axios.post("/login", {
-      password
-    });
-
-    // Store credentials AFTER connection attempt succeeded
-    if (attemptOnceOnly === true) {
-      // doStoreCredentials();
-    }
-
-    // // Another connection active?
-    // if (
-    //   Store.$session.connected === true ||
-    //   Store.$session.connecting === true
-    // ) {
-    //   throw new Error("Another connection already exists");
-    // }
-
-    // // Make credentials store handler
-    // const doStoreCredentials = () => {
-    //   // Store credentials
-    //   this.__credentials = {
-    //     jid,
-    //     password
-    //   };
-
-    //   // Store authentication JID
-    //   this.authenticationJID = this.__credentials?.jid;
-    // };
-
-    // // Store credentials BEFORE attempting to connect? (this allows retries)
-    // if (attemptOnceOnly !== true) {
-    //   doStoreCredentials();
-  }
-}
-
-export default new Login();
diff --git a/src/api/advancedBackup.ts b/src/api/providers/advancedBackup.ts
similarity index 100%
rename from src/api/advancedBackup.ts
rename to src/api/providers/advancedBackup.ts
diff --git a/src/api/advancedNetwork.ts b/src/api/providers/advancedNetwork.ts
similarity index 90%
rename from src/api/advancedNetwork.ts
rename to src/api/providers/advancedNetwork.ts
index c2d54ec..d3185c3 100644
--- a/src/api/advancedNetwork.ts
+++ b/src/api/providers/advancedNetwork.ts
@@ -13,7 +13,7 @@ import axios from "axios";
 
 const NETWORK_CHECK_URL = "/network/checks"; //// EFFACER ??
 
-class AdvancedNetwork {
+class APIAdvancedNetwork {
   /**  SERVER  **/
 
   /**  NETWORK  **/
@@ -26,4 +26,4 @@ class AdvancedNetwork {
   }
 }
 
-export default new AdvancedNetwork();
+export default new APIAdvancedNetwork();
diff --git a/src/api/advancedSecurity.ts b/src/api/providers/advancedSecurity.ts
similarity index 94%
rename from src/api/advancedSecurity.ts
rename to src/api/providers/advancedSecurity.ts
index 2701c5c..ee26e9d 100644
--- a/src/api/advancedSecurity.ts
+++ b/src/api/providers/advancedSecurity.ts
@@ -6,7 +6,7 @@
 
 import axios from "axios";
 
-export class AdvancedSecurity {
+export class APIAdvancedSecurity {
   /**  CONFIG  **/
 
   async getWorkspaceConfig(): Promise<void> {
@@ -58,4 +58,4 @@ export class AdvancedSecurity {
   }
 }
 
-export default new CustomizationWorkspace();
+export default new APIAdvancedSecurity();
diff --git a/src/api/connect.ts b/src/api/providers/connect.ts
similarity index 94%
rename from src/api/connect.ts
rename to src/api/providers/connect.ts
index 33bf406..765e78e 100644
--- a/src/api/connect.ts
+++ b/src/api/providers/connect.ts
@@ -6,7 +6,7 @@
 
 import axios from "axios";
 
-class Connect {
+class APIConnect {
   /**  CONFIG  **/
 
   async initializeAccount(): Promise<void> {
@@ -39,4 +39,4 @@ class Connect {
   }
 }
 
-export default new Connect();
+export default new APIConnect();
diff --git a/src/api/customizationReactions.ts b/src/api/providers/customizationReactions.ts
similarity index 93%
rename from src/api/customizationReactions.ts
rename to src/api/providers/customizationReactions.ts
index 1640c4f..0c18a43 100644
--- a/src/api/customizationReactions.ts
+++ b/src/api/providers/customizationReactions.ts
@@ -13,7 +13,7 @@ import axios from "axios";
 
 const REACTIONS_URL = "/workspace/reactions";
 
-class CustomizationReactions {
+class APICustomizationReactions {
   /**  REACTIONS  **/
 
   async getAllReactions(): Promise<void> {
@@ -46,4 +46,4 @@ class CustomizationReactions {
   }
 }
 
-export default new CustomizationReactions();
+export default new APICustomizationReactions();
diff --git a/src/api/customizationWorkspace.ts b/src/api/providers/customizationWorkspace.ts
similarity index 93%
rename from src/api/customizationWorkspace.ts
rename to src/api/providers/customizationWorkspace.ts
index 9699004..49d02d8 100644
--- a/src/api/customizationWorkspace.ts
+++ b/src/api/providers/customizationWorkspace.ts
@@ -6,7 +6,7 @@
 
 import axios from "axios";
 
-export class CustomizationWorkspace {
+export class APICustomizationWorkspace {
   /**  CONFIG  **/
 
   async getWorkspaceConfig(): Promise<void> {
@@ -58,4 +58,4 @@ export class CustomizationWorkspace {
   }
 }
 
-export default new CustomizationWorkspace();
+export default new APICustomizationWorkspace();
diff --git a/src/api/global.ts b/src/api/providers/global.ts
similarity index 87%
rename from src/api/global.ts
rename to src/api/providers/global.ts
index 76c508d..f6e3d99 100644
--- a/src/api/global.ts
+++ b/src/api/providers/global.ts
@@ -6,7 +6,7 @@
 
 import axios from "axios";
 
-class Global {
+class APIGlobal {
   /**  CONFIG  **/
 
   async getServerConfig(): Promise<void> {
@@ -18,4 +18,4 @@ class Global {
   }
 }
 
-export default new Global();
+export default new APIGlobal();
diff --git a/src/api/providers/login.ts b/src/api/providers/login.ts
new file mode 100644
index 0000000..c8f75fc
--- /dev/null
+++ b/src/api/providers/login.ts
@@ -0,0 +1,47 @@
+/*
+ * This file is part of prose-pod-dashboard
+ *
+ * Copyright 2024, Prose Foundation
+ */
+
+/**************************************************************************
+ * IMPORTS
+ * ************************************************************************* */
+
+// PROJECT: API
+import Api from "@/api";
+
+/**************************************************************************
+ * INTERFACES
+ * ************************************************************************* */
+
+interface LoginResponse {
+  token: string;
+}
+
+/**************************************************************************
+ * API
+ * ************************************************************************* */
+
+class APILogin {
+  async login(username: string, password: string): Promise<LoginResponse> {
+    return (
+      await Api.client.post<LoginResponse>(
+        "/login",
+        {},
+        {
+          auth: {
+            username,
+            password
+          }
+        }
+      )
+    ).data;
+  }
+}
+
+/**************************************************************************
+ * EXPORTS
+ * ************************************************************************* */
+
+export default new APILogin();
diff --git a/src/api/serverConfiguration.ts b/src/api/providers/serverConfiguration.ts
similarity index 95%
rename from src/api/serverConfiguration.ts
rename to src/api/providers/serverConfiguration.ts
index b9c61d8..eab706a 100644
--- a/src/api/serverConfiguration.ts
+++ b/src/api/providers/serverConfiguration.ts
@@ -12,7 +12,7 @@ import axios from "axios";
 
 const CONFIG_URL = "/server/config";
 
-class ServerConfiguration {
+class APIServerConfiguration {
   /**  MESSAGING  **/
 
   async resetMessagesConfig(): Promise<void> {
@@ -63,4 +63,4 @@ class ServerConfiguration {
   }
 }
 
-export default new ServerConfiguration();
+export default new APIServerConfiguration();
diff --git a/src/api/teamMembers.ts b/src/api/providers/teamMembers.ts
similarity index 95%
rename from src/api/teamMembers.ts
rename to src/api/providers/teamMembers.ts
index 4e9b1f2..cdf78af 100644
--- a/src/api/teamMembers.ts
+++ b/src/api/providers/teamMembers.ts
@@ -6,7 +6,7 @@
 
 import axios from "axios";
 
-class TeamMembers {
+class APITeamMembers {
   /**  INVITATIONS  **/
 
   async getAllInvitations(): Promise<void> {
@@ -53,4 +53,4 @@ class TeamMembers {
   }
 }
 
-export default new TeamMembers();
+export default new APITeamMembers();
diff --git a/src/assemblies/start/StartLoginForm.vue b/src/assemblies/start/StartLoginForm.vue
index 62770dc..24b493b 100644
--- a/src/assemblies/start/StartLoginForm.vue
+++ b/src/assemblies/start/StartLoginForm.vue
@@ -25,7 +25,7 @@
       class="a-start-login-form__field"
       type="email"
       name="jid"
-      placeholder="Enter your Prose address…"
+      placeholder="Enter your Prose admin address…"
       size="ultra-large"
       autofocus
     )
@@ -66,15 +66,11 @@
 
 <script lang="ts">
 // PROJECT: COMPONENTS
-import BaseAlert from "@/components/base/BaseAlert.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
 import BaseProseLogo from "@/components/base/BaseProseLogo.vue";
 import FormCheckbox from "@/components/form/FormCheckbox.vue";
 import FormField from "@/components/form/FormField.vue";
 
-// PROJECT: STORES
-// import Store from "@/store";
-
 // INTERFACES
 export interface StateForm {
   jid: string;
@@ -111,22 +107,13 @@ export default {
     };
   },
 
-  created() {
-    // Populate initial values
-    // this.form.jid = Store.$account.last.jid || "";
-  },
-
   methods: {
     // --> EVENT LISTENERS <--
 
     onSubmit(): void {
-      BaseAlert.error(
-        "Account credentials are invalid",
-        "Please check your password and try again"
-      );
-      //   this.$emit("submit", {
-      //     ...this.form
-      //   });
+      this.$emit("submit", {
+        ...this.form
+      });
     }
   }
 };
diff --git a/src/components/form/FormSelect.vue b/src/components/form/FormSelect.vue
index 5627002..0e53f63 100644
--- a/src/components/form/FormSelect.vue
+++ b/src/components/form/FormSelect.vue
@@ -108,17 +108,14 @@ div(
           )
             | {{ option.value }}
 </template>
-  
+
 <!-- **********************************************************************
      SCRIPT
      ********************************************************************** -->
 
 <script lang="ts">
-// NPM
-//- import { names as keyNames } from "keycode";
-
-//COMPONENTS
-import BaseIcon from '@/components/base/BaseIcon.vue'
+// COMPONENTS
+import BaseIcon from "@/components/base/BaseIcon.vue";
 
 // INTERFACES
 export interface Option {
@@ -150,8 +147,6 @@ const AVAILABLE_SIZES: { [size: string]: { arrow: string } } = {
   }
 };
 
-const SEARCH_QUERY_PREFIX_LENGTH_MAXIMUM = 2;
-
 export interface Icon {
   component: object;
   properties: (value: string) => object;
@@ -228,9 +223,7 @@ export default {
     loading: {
       type: Boolean,
       default: false
-    },
-
-
+    }
   },
 
   emits: ["update:modelValue", "change"],
@@ -249,17 +242,15 @@ export default {
   },
 
   computed: {
-
     hasOptions(): boolean {
       return this.options.length > 0;
     },
 
     valueLabel(): string {
       const option = this.options.find(option => {
-
         return this.value === option.value;
       });
-      
+
       // Return inner label from corresponding option?
       if (option && option.value) {
         return option.value;
@@ -312,21 +303,15 @@ export default {
     }
   },
 
-  mounted() {
-    // Apply focus on search input (as needed)
-    // this.autoFocusDropdownSearch();
-  },
-
   methods: {
     // --> HELPERS <--
 
     selectOption(option: Option): void {
-      console.log(option, option.value)
+      console.log(option, option.value);
       this.$emit("update:modelValue", option.value);
 
       // Hide dropdown selector
       this.hideDropdown();
-      
     },
 
     hideDropdown(): void {
@@ -522,12 +507,12 @@ $sizes: (
     border: $size-form-select-border-width solid rgba($color-black, 0.1);
     box-shadow: 0 2px 3px 0 rgba(var(--color-shadow-primary), 0.01);
     width: max-content;
-    
   }
 
   #{$c}__field,
-  #{$c}__options, #{$c}__option {
-    margin:0px;
+  #{$c}__options,
+  #{$c}__option {
+    margin: 0px;
 
     #{$c}__color-prev {
       height: 11px;
@@ -583,27 +568,25 @@ $sizes: (
       flex: 0 0 auto;
     }
 
-    width:max-content;
-    
+    width: max-content;
   }
 
   #{$c}__dropdown {
     overflow: hidden;
 
-    &--menu{
+    &--menu {
       position: absolute;
       inset-inline: 0;
     }
 
-    a{
+    a {
       border-radius: 0px;
     }
-
   }
 
   #{$c}__options {
     max-height: 240px;
-    padding-block: 0; 
+    padding-block: 0;
     padding-inline: 0;
     overflow-x: hidden;
     overflow-y: auto;
@@ -685,7 +668,6 @@ $sizes: (
           }
         }
       }
-
     }
   }
 
@@ -698,13 +680,11 @@ $sizes: (
         font-size: map-get($size, "font-size");
       }
 
-      #{$c}__field #{$c}__inner
-      {
-        &--menu{
+      #{$c}__field #{$c}__inner {
+        &--menu {
           padding-inline-start: map-get($size, "padding-start");
           padding-inline-end: map-get($size, "padding-end");
         }
-
       }
 
       #{$c}__field {
@@ -783,9 +763,8 @@ $sizes: (
         border-end-end-radius: 0;
       }
 
-      #{$c}__dropdown{
+      #{$c}__dropdown {
         width: initial;
-
       }
     }
   }
@@ -830,4 +809,4 @@ $sizes: (
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/store/tables/account.ts b/src/store/tables/account.ts
index 14347db..5ce31e2 100644
--- a/src/store/tables/account.ts
+++ b/src/store/tables/account.ts
@@ -10,51 +10,18 @@
 
 // NPM
 import { defineStore } from "pinia";
-// import { Availability, JID } from "@prose-im/prose-sdk-js";
 
 // PROJECT: STORES
-import Store from "@/store";
-// import { InboxNameOrigin } from "@/store/tables/inbox";
-
-// PROJECT: BROKER
-// import Broker from "@/broker";
-
-// PROJECT: UTILITIES
-// import logger from "@/utilities/logger";
-// import UtilitiesRuntime from "@/utilities/runtime";
+import APILogin from "@/api/providers/login";
 
 /**************************************************************************
  * INTERFACES
  * ************************************************************************* */
 
 interface Account {
-  credentials: {
-    jid: string;
-    password: string;
-  };
-
-  last: {
-    jid: string;
-    timestamp: number;
-  };
-
-  information: {
-    jid: string;
-    name: string;
-    // availability: Availability;
-  };
+  token: string | null;
 }
 
-/**************************************************************************
- * CONSTANTS
- * ************************************************************************* */
-
-const LOCAL_STATES = {
-  informationLoaded: false
-};
-
-// const INFORMATION_AVAILABILITY_DEFAULT = Availability.Available;
-
 /**************************************************************************
  * TABLE
  * ************************************************************************* */
@@ -64,194 +31,22 @@ const $account = defineStore("account", {
 
   state: (): Account => {
     return {
-      credentials: {
-        jid: "",
-        password: "" // TODO: password is stored in the clear, this is insecure
-      },
-
-      last: {
-        jid: "",
-        timestamp: -1
-      },
-
-      information: {
-        jid: "",
-        name: "",
-        // availability: INFORMATION_AVAILABILITY_DEFAULT
-      }
+      token: null
     };
   },
 
-  getters: {
-    getSelfJID: function () {
-      return (): JID => {
-        // Notice: use last JID as a fallback, as during logout the UI still \
-        //   requires the JID value, although it is in process of being reset. \
-        //   The last JID is supposed to of the exact same value as the JID \
-        //   from the credentials object, but we always prefer to use the one \
-        //   served from the core client library once account information have \
-        //   been fully obtained, as the source of truth.
-        const selfJID =
-          this.information.jid || this.credentials.jid || this.last.jid || null;
-
-        if (selfJID === null) {
-          throw new Error(
-            "No self JID could be acquired (this should never happen)"
-          );
-        }
-
-        return new JID(selfJID);
-      };
-    },
-
-    getInformationName: function () {
-      return (): string => {
-        return this.information.name;
-      };
-    },
-
-    getInformationAvailability: function () {
-      return (): Availability => {
-        // return this.information.availability;
-      };
-    }
-  },
-
   actions: {
-    async login(
-      rawJID: string,
-      password: string,
-      remember = true
-    ): Promise<void> {
-      let jid: JID;
-
-      try {
-        jid = new JID(rawJID);
-      } catch (e) {
-        throw new Error("Please provide a valid Jabber ID");
-      }
-
-      // Connect and authenticate to server
-      // Important: disable reconnect retries on failure by marking as \
-      //   'attempt once only' here.
-      await Broker.client.authenticate(jid, password, true);
+    async login(username: string, password: string): Promise<void> {
+      const { token } = await APILogin.login(username, password);
 
-      // Store credentials? (if success)
-      if (remember === true) {
-        this.$patch(state => {
-          // Assign account credentials
-          state.credentials.jid = rawJID;
-          state.credentials.password = password;
-
-          // Assign last account marker
-          state.last.jid = rawJID;
-          state.last.timestamp = Date.now();
-        });
-      }
-
-      // Load local user profile and check if should show onboarding
-      try {
-        const profile = await Broker.$profile.loadUserProfile(jid);
-
-        // No profile first/last name set? (or profile is completely empty)
-        if (
-          profile === undefined ||
-          (!profile.firstName && !profile.lastName)
-        ) {
-          Store.$session.setOnboardingWelcome(true);
-        }
-      } catch (error) {
-        // Ignore profile load errors (this is not mandatory for login to \
-        //   succeed)
-        logger.error(
-          `Failed loading local user profile after logging in (ignoring error)`,
-          error
-        );
-      }
+      // TODO
+      console.error("==> got token = " + token);
     },
 
     async logout(purge = false) {
-      // Disconnect from server
-      Broker.client.logout(purge);
-
-      // Reset unread count
-      UtilitiesRuntime.requestUnreadCountUpdate(0);
-
-      // Clear stored credentials and information
-      // Notice: retain last JID for later quick-login
-      this.$patch(state => {
-        // Clear credentials
-        state.credentials.jid = "";
-        state.credentials.password = "";
-
-        // Clear information
-        state.information.jid = "";
-        state.information.name = "";
-        state.information.availability = INFORMATION_AVAILABILITY_DEFAULT;
-      });
-    },
-
-    async loadInformation(reload = false): Promise<void> {
-      // Load information? (or reload)
-      if (LOCAL_STATES.informationLoaded === false || reload === true) {
-        // Load account information
-        const accountInfo = await Broker.$account.loadAccountInfo();
-
-        if (accountInfo) {
-          // Update stored JID, name and availability
-          this.setInformationJID(accountInfo.jid);
-          this.setInformationName(accountInfo.name);
-          this.setInformationAvailability(accountInfo.availability);
-
-          // Update account avatar
-          // Notice: this is a cross-store operation, for convenience.
-          if (accountInfo.avatar !== undefined) {
-            Store.$avatar.refresh(
-              accountInfo.jid.toString(),
-              accountInfo.avatar
-            );
-          }
-
-          // Update stored activity
-          // Notice: this is a cross-store operation, for convenience.
-          Store.$activity.setActivity(accountInfo.jid, accountInfo.status);
-
-          // Re-register name in all rooms (as needed)
-          // Notice: this is a cross-store operation, for convenience.
-          const jidString = accountInfo.jid.toString();
-
-          Store.$inbox.getRooms().forEach(roomId => {
-            Store.$inbox.setName(
-              roomId,
-              jidString,
-              accountInfo.name,
-              InboxNameOrigin.Global
-            );
-          });
-        }
-
-        // Mark as loaded
-        LOCAL_STATES.informationLoaded = true;
-      }
-    },
-
-    setInformationJID(jid: JID): void {
-      this.$patch(() => {
-        this.information.jid = jid.toString();
-      });
-    },
-
-    setInformationName(name: string): void {
-      this.$patch(() => {
-        this.information.name = name;
-      });
-    },
-
-    // setInformationAvailability(availability: Availability): void {
-    //   this.$patch(() => {
-    //     this.information.availability = availability;
-    //   });
-    // }
+      // TODO: clear cookies et al
+      throw new Error("Not implemented");
+    }
   }
 });
 
diff --git a/src/store/tables/customizationEmojis.ts b/src/store/tables/customizationEmojis.ts
index f529fe3..6af25af 100644
--- a/src/store/tables/customizationEmojis.ts
+++ b/src/store/tables/customizationEmojis.ts
@@ -17,7 +17,7 @@ import { defineStore } from "pinia";
 
 // PROJECT: STORES
 import Store from "@/store";
-import customizationReactions from "@/api/customizationReactions";
+import customizationReactions from "@/api/providers/customizationReactions";
 
 /**************************************************************************
  * TYPES
@@ -30,16 +30,16 @@ type EmojiList = Array<EmojiListEntry>;
  * ************************************************************************* */
 
 interface EmojiListEntry {
-    id: string,
-    imageUrl: string,
-    shortcut: string,
-    date: string,
-    contributor: string,
-    contributorAvatar: string
-};
+  id: string;
+  imageUrl: string;
+  shortcut: string;
+  date: string;
+  contributor: string;
+  contributorAvatar: string;
+}
 
-interface Emojis{
-  emojisList: EmojiList
+interface Emojis {
+  emojisList: EmojiList;
 }
 
 /**************************************************************************
@@ -68,28 +68,34 @@ const $customizationEmojis = defineStore("room", {
       emojisList: [
         {
           id: "29684b21-e799-4aa9-b475-d307493a7719",
-          imageUrl:"https://i.pinimg.com/736x/24/0d/22/240d22bf3aeda750fca5c00d2dfbf72a.jpg",
-          shortcut:":excellent:",
-          date:"11 November 2012",
+          imageUrl:
+            "https://i.pinimg.com/736x/24/0d/22/240d22bf3aeda750fca5c00d2dfbf72a.jpg",
+          shortcut: ":excellent:",
+          date: "11 November 2012",
           contributor: "Valerian Saliou",
-          contributorAvatar: "https://avatars.githubusercontent.com/u/1451907?v=4"
+          contributorAvatar:
+            "https://avatars.githubusercontent.com/u/1451907?v=4"
         },
         {
           id: "ec30d684-5d54-42fb-834e-cc0a192f021f",
-          imageUrl:"https://emojis.slackmojis.com/emojis/images/1693897448/68276/1000046743.jpg?1693897448",
-          shortcut:":excellent:",
-          date:"11 November 2012",
+          imageUrl:
+            "https://emojis.slackmojis.com/emojis/images/1693897448/68276/1000046743.jpg?1693897448",
+          shortcut: ":excellent:",
+          date: "11 November 2012",
           contributor: "Valerian Saliou",
-          contributorAvatar: "https://avatars.githubusercontent.com/u/1451907?v=4"
+          contributorAvatar:
+            "https://avatars.githubusercontent.com/u/1451907?v=4"
         },
         {
           id: "2b74c4f2-7010-411d-bc42-4ca88b2495d2",
-          imageUrl:"https://emojis.slackmojis.com/emojis/images/1697828273/71257/1000057723q.gif?1697828273",
-          shortcut:":excellent:",
-          date:"11 November 2012",
+          imageUrl:
+            "https://emojis.slackmojis.com/emojis/images/1697828273/71257/1000057723q.gif?1697828273",
+          shortcut: ":excellent:",
+          date: "11 November 2012",
           contributor: "Valerian Saliou",
-          contributorAvatar: "https://avatars.githubusercontent.com/u/1451907?v=4"
-        },
+          contributorAvatar:
+            "https://avatars.githubusercontent.com/u/1451907?v=4"
+        }
       ]
     };
   },
@@ -99,7 +105,7 @@ const $customizationEmojis = defineStore("room", {
       return (): Array<SidebarItem> => {
         return this.emojisList;
       };
-    },
+    }
   },
 
   actions: {
@@ -112,7 +118,7 @@ const $customizationEmojis = defineStore("room", {
       // Load room list? (or reload)
       if (LOCAL_STATES.loaded !== true || reload === true) {
         // Initialize entries
-        const allReactions: Array<EmojiListEntry> = []
+        const allReactions: Array<EmojiListEntry> = [];
 
         // Load rooms
         const sidebarItems = await customizationReactions.getAllReactions();
@@ -123,18 +129,18 @@ const $customizationEmojis = defineStore("room", {
     },
 
     addReaction(reaction: EmojiListEntry): void {
-      console.log('hey hey')
+      console.log("hey hey");
       this.emojisList.push(reaction);
       // customizationReactions.addReaction(reaction);
       // loadReactions(true):
     },
 
     deleteReaction(reactionId: string): void {
-      customizationReactions.deleteReactionById(reactionId)
+      customizationReactions.deleteReactionById(reactionId);
     },
 
     updateReaction(reactionId: string, newReaction: EmojiListEntry) {
-      customizationReactions.updateReactionById(reactionId, newReaction)
+      customizationReactions.updateReactionById(reactionId, newReaction);
     }
   }
 });
@@ -142,5 +148,5 @@ const $customizationEmojis = defineStore("room", {
 /**************************************************************************
  * EXPORTS
  * ************************************************************************* */
-export type { EmojiListEntry }
+export type { EmojiListEntry };
 export default $customizationEmojis;
diff --git a/src/store/tables/customizationWorkspace.ts b/src/store/tables/customizationWorkspace.ts
index 11eae68..15cecc6 100644
--- a/src/store/tables/customizationWorkspace.ts
+++ b/src/store/tables/customizationWorkspace.ts
@@ -11,15 +11,13 @@
 // NPM
 import mitt from "mitt";
 import { defineStore } from "pinia";
-import {
-  RoomID,
-} from "@prose-im/prose-sdk-js";
+import { RoomID } from "@prose-im/prose-sdk-js";
 
 // PROJECT: STORES
 import Store from "@/store";
 
 // PROJECT: UTILITIES
-import { CustomizationWorkspace } from "@/api/customizationWorkspace";
+import { APICustomizationWorkspace } from "@/api/providers/customizationWorkspace";
 
 /**************************************************************************
  * ENUMERATIONS
@@ -30,13 +28,13 @@ import { CustomizationWorkspace } from "@/api/customizationWorkspace";
  * ************************************************************************* */
 
 type AppearanceConfig = {
-  color: string
+  color: string;
 };
 
 type WorkspaceProfileConfig = {
-  name: string,
-  iconUrl: string,
-  detailsCard: string
+  name: string;
+  iconUrl: string;
+  detailsCard: string;
 };
 
 /**************************************************************************
@@ -44,9 +42,9 @@ type WorkspaceProfileConfig = {
  * ************************************************************************* */
 
 interface CustomizationWorkspaceConfig {
-  workspaceProfile: WorkspaceProfileConfig,
-  appearance: AppearanceConfig
-};
+  workspaceProfile: WorkspaceProfileConfig;
+  appearance: AppearanceConfig;
+}
 
 /**************************************************************************
  * INSTANCES
@@ -76,13 +74,14 @@ const $customizationWorkspace = defineStore("customizationWorkspace", {
   state: (): CustomizationWorkspaceConfig => {
     return {
       workspaceProfile: {
-        name: 'Crisp',
-        iconUrl: 'https://cdn.cmsfly.com/635bcad9b8a74e0091632998/cerp-GR1YU2.png',
-        detailsCard: ''
+        name: "Crisp",
+        iconUrl:
+          "https://cdn.cmsfly.com/635bcad9b8a74e0091632998/cerp-GR1YU2.png",
+        detailsCard: ""
       },
 
       appearance: {
-        color: 'Dark Blue'
+        color: "Dark Blue"
       }
     };
   },
@@ -96,13 +95,13 @@ const $customizationWorkspace = defineStore("customizationWorkspace", {
       return Object.keys(this.appearance);
     },
 
-    getConfig: function() {
-      return (): CustomizationWorkspaceConfig =>{
+    getConfig: function () {
+      return (): CustomizationWorkspaceConfig => {
         return {
           workspaceProfile: this.workspaceProfile,
           appearance: this.appearance
-        }
-      } 
+        };
+      };
     }
   },
 
@@ -115,47 +114,39 @@ const $customizationWorkspace = defineStore("customizationWorkspace", {
     async loadWorkspaceConfig(reload: boolean = false): Promise<void> {
       // Load information? (or reload)
       if (LOCAL_STATES.configLoaded === false || reload === true) {
-
         // Load globalConfig configuration
-        await CustomizationWorkspace.getWorkspaceConfig();
+        await APICustomizationWorkspace.getWorkspaceConfig();
       }
     },
 
     async getWorkspaceName(): Promise<void> {
-      await CustomizationWorkspace.getWorkspaceName();
+      await APICustomizationWorkspace.getWorkspaceName();
     },
 
-    async updateWorkspaceName(
-      newName: string,
-    ): Promise<void> {
-      await CustomizationWorkspace.updateWorkspaceName(newName)
+    async updateWorkspaceName(newName: string): Promise<void> {
+      await APICustomizationWorkspace.updateWorkspaceName(newName);
     },
 
     async getWorkspaceIcon(): Promise<void> {
-      await CustomizationWorkspace.getWorkspaceIcon();
+      await APICustomizationWorkspace.getWorkspaceIcon();
     },
 
-    async updateWorkspaceIcon(
-      newIcon: string,
-    ): Promise<void> {
-      await CustomizationWorkspace.updateWorkspaceIcon(newIcon)
+    async updateWorkspaceIcon(newIcon: string): Promise<void> {
+      await APICustomizationWorkspace.updateWorkspaceIcon(newIcon);
     },
 
     async getWorkspaceColor(reload = false): Promise<void> {
       // Load information? (or reload)
       if (LOCAL_STATES.configLoaded === false || reload === true) {
-
         // Load globalConfig configuration
-        await CustomizationWorkspace.getWorkspaceColor();
+        await APICustomizationWorkspace.getWorkspaceColor();
       }
     },
 
-    async updateWorkspaceColor(
-      newColor: string,
-    ): Promise<void> {
-      this.appearance.color = newColor
-      //await CustomizationWorkspace.updateWorkspaceColor(newColor)
-    },
+    async updateWorkspaceColor(newColor: string): Promise<void> {
+      this.appearance.color = newColor;
+      //await APICustomizationWorkspace.updateWorkspaceColor(newColor)
+    }
   }
 });
 
diff --git a/src/views/start/StartLogin.vue b/src/views/start/StartLogin.vue
index e49928c..68d9e88 100644
--- a/src/views/start/StartLogin.vue
+++ b/src/views/start/StartLogin.vue
@@ -19,8 +19,6 @@
       :loading="isFormLoading"
       class="v-start-login__form"
     )
-
-  .v-start-login__background
 </template>
 
 <!-- **********************************************************************
@@ -34,6 +32,7 @@ import StartLoginForm, {
 } from "@/assemblies/start/StartLoginForm.vue";
 
 // PROJECT: COMPONENTS
+import BaseAlert from "@/components/base/BaseAlert.vue";
 import BaseIdentityBadge from "@/components/base/BaseIdentityBadge.vue";
 
 // PROJECT: STORES
@@ -65,7 +64,17 @@ export default {
         // Mark as loading
         this.isFormLoading = true;
 
-        // TODO
+        try {
+          // Login to account
+          await Store.$account.login(form.jid, form.password);
+        } catch (error) {
+          BaseAlert.error(
+            "Could not log in",
+            "Check your credentials and try again"
+          );
+        } finally {
+          this.isFormLoading = false;
+        }
       }
     }
   }
@@ -95,14 +104,10 @@ $c: ".v-start-login";
     left: 46px;
   }
 
-  #{$c}__box,
-  #{$c}__background {
-    pointer-events: none;
-  }
-
   #{$c}__box {
     background-color: $color-white;
     border: 1px solid rgba($color-base-purple-light, 0.35);
+    pointer-events: none;
     border-radius: 18px;
     backdrop-filter: blur(20px);
     box-shadow: 0 2px 4px 0 rgba($color-black, 0.03);
@@ -124,17 +129,6 @@ $c: ".v-start-login";
     }
   }
 
-  #{$c}__background {
-    background-image: url("/images/views/start/StartLogin/background-wave.svg");
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-    opacity: 0.7;
-    position: absolute;
-    inset: 0;
-    z-index: 0;
-  }
-
   // --> CONTEXTS <--
 
   &--context-application {
@@ -143,10 +137,6 @@ $c: ".v-start-login";
       border-block: 0 none;
       backdrop-filter: none;
     }
-
-    #{$c}__background {
-      background-image: none;
-    }
   }
 
   // --> BOOLEANS <--
diff --git a/vite.config.ts b/vite.config.ts
index 6b2b564..6d132bd 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -25,6 +25,10 @@ import productionConfig from "./config/production";
 
 interface Configuration {
   environment: string;
+
+  api: {
+    endpoint: string;
+  };
 }
 
 /**************************************************************************