handleUser.js

// Imports
import { RandomString } from "/services/common/common.js";
import * as Messages from "/services/messages/messages.js";
import * as Auth from "/services/auth/auth.js";
import * as Users from "/components/users/users.js";

// DOM elements
let id_field;
let idOAuth_field;
let login_field;
let displayName_field;
let password_field;
let name_field;
let surname_field;
let role_field;

// local variables
let current_user;
let update_user;

export async function mount(where, parent) {
  const handleUser = new HandleUser(parent);
  await handleUser.mount(where);
  handleUser.handleDom();
  return handleUser;
}

class HandleUser {
  constructor(parent) {
    this.parent = parent;
  }

  async mount(where) {
    document.getElementById(where).innerHTML = /* HTML */ `
      <div class="modal-background"></div>
      <div class="modal-card" id="users-modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">Ajout/modification d'un utilisateur</p>
          <button class="delete" aria-label="close" id="users-modal-close"></button>
        </header>
        <section class="modal-card-body">
          <div class="field">
            <label>Id</label>
            <div class="control">
              <input class="input" type="number" id="users-modal-id" disabled />
            </div>
          </div>
          <div class="field">
            <label>IdOAuth</label>
            <div class="control">
              <input class="input" type="text" id="users-modal-idoauth" />
            </div>
          </div>
          <div class="field">
            <label>Identifiant</label>
            <div class="control">
              <input class="input" type="text" id="users-modal-login" />
            </div>
          </div>
          <div class="field" id="users-modal-password-container">
            <label>Mot de passe</label>
            <div class="control">
              <input class="input" type="text" id="users-modal-password" />
            </div>
          </div>
          <div class="field" id="users-modal-name-container">
            <label>Nom</label>
            <div class="control">
              <input class="input" type="text" id="users-modal-name" />
            </div>
          </div>
          <div class="field" id="users-modal-name-container">
            <label>Nom complet</label>
            <div class="control">
              <input class="input" type="text" id="users-modal-displayName" />
            </div>
          </div>
          <div class="field" id="users-modal-surname-container">
            <label>Surnom</label>
            <div class="control">
              <input class="input" type="text" id="users-modal-surname" />
            </div>
          </div>
          <div class="field" id="users-modal-role-container">
            <label>Rôle</label><br />
            <div class="control select">
              <select name="role" id="users-modal-role">
                <option value="CLIENT">Client</option>
                <option value="BANKER">Banquier</option>
                <option value="ADMIN">Administrateur</option>
              </select>
            </div>
          </div>
        </section>
        <footer class="modal-card-foot">
          <button id="users-modal-save" class="button is-success">Sauvegarder</button>
          <button id="users-modal-cancel" class="button">Annuler</button>
        </footer>
      </div>
    `;
    current_user = await Auth.GetUser();
  }

  handleDom() {
    id_field = document.getElementById("users-modal-id");
    idOAuth_field = document.getElementById("users-modal-idoauth");
    login_field = document.getElementById("users-modal-login");
    password_field = document.getElementById("users-modal-password");
    displayName_field = document.getElementById("users-modal-displayName");
    name_field = document.getElementById("users-modal-name");
    surname_field = document.getElementById("users-modal-surname");
    role_field = document.getElementById("users-modal-role");

    document.getElementById(`users-modal-close`).addEventListener("click", function () {
      Users.toggleModal("users-modal", "users-modal-card");
    });
    document.getElementById(`users-modal-cancel`).addEventListener("click", function () {
      Users.toggleModal("users-modal", "users-modal-card");
    });
    let userHandler = this;
    document.getElementById(`users-modal-save`).addEventListener("click", function () {
      userHandler.postUser();
    });
    document.getElementById(`users-new`).addEventListener("click", function () {
      userHandler.newUser();
    });
  }

  async newUser() {
    update_user = false;
    id_field.value = "";
    login_field.value = "";
    password_field.value = RandomString(48);
    name_field.value = "";
    displayName_field.value = "";
    surname_field.value = "";
    role_field.value = "";
    Users.toggleModal("users-modal", "users-modal-card");
  }

  async deleteUser(user) {
    try {
      const response = await fetch("/api/admin/users/" + user.id, {
        method: "delete",
        headers: new Headers({
          "XSRF-Token": current_user.xsrftoken,
        }),
      });
      if (response.status !== 200) {
        throw new Error(`User could not be deleted (status ${response.status})`);
      }
      document.getElementById(`users-user-${user.id}`).remove();
    } catch (e) {
      Messages.Show("is-warning", e.message);
      console.error(e);
    }
    if (user.role == "BANKER") {
      let banker = await this.getBankerByUserID(user.id);
      if (banker != undefined) this.parent.HandleBanker.deleteBanker(banker);
    } else if (user.role == "CLIENT") {
      let client = await Auth.getClientByUserID(user.id, current_user);
      if (client != undefined) this.parent.HandleClient.deleteClient(client);
    }
  }

  editUser(user) {
    this.parent.cleanUser(user);
    update_user = true;
    id_field.value = user.id;
    idOAuth_field.value = user.idOAuth;
    login_field.value = user.login;
    password_field.value = "";
    name_field.value = user.name;
    displayName_field.value = user.displayName;
    surname_field.value = user.surname;
    role_field.value = user.role;
    Users.toggleModal("users-modal", "users-modal-card");
  }

  async updateUsers() {
    try {
      const response = await fetch("/api/admin/users/", {
        method: "GET",
        headers: new Headers({
          "XSRF-Token": current_user.xsrftoken,
        }),
      });
      if (response.status !== 200) {
        throw new Error(`Users could not be fetched (status ${response.status})`);
      }
      return await response.json();
    } catch (e) {
      Messages.Show("is-warning", e.message);
      console.error(e);
    }
  }

  async getBankerByUserID(userID) {
    let bankerToSend = undefined;
    const response = await fetch("/api/UserBankers/", {
      method: "GET",
      headers: new Headers({
        "XSRF-Token": current_user.xsrftoken,
      }),
    });
    if (response.status !== 200) {
      throw new Error(`Could not get bankers (status ${response.status})`);
    }
    let bankers = await response.json();
    bankers.forEach((banker) => {
      if (banker.UserID == userID) {
        bankerToSend = banker;
      }
    });
    return bankerToSend;
  }

  async postUser() {
    let method;
    if (update_user) method = "PUT";
    else method = "POST";

    try {
      if (role_field.value == "") {
        Messages.Show("is-warning", "Veuillez choisir un rôle pour l'utilisateur");
        return;
      }
      const response = await fetch("/api/admin/users/" + id_field.value, {
        method: method,
        headers: new Headers({
          "XSRF-Token": current_user.xsrftoken,
        }),
        body: JSON.stringify({
          id: id_field.value,
          login: login_field.value,
          password: password_field.value,
          name: name_field.value,
          surname: surname_field.value,
          role: role_field.value,
        }),
      });
      if (response.status !== 200) {
        throw new Error(`User could not be updated or created (status ${response.status})`);
      }
      let user = await response.json();
      if (user.role == "BANKER") {
        let banker = await this.getBankerByUserID(user.id);
        if (banker != undefined) this.parent.HandleBanker.editBanker(banker);
        else this.parent.HandleBanker.newBanker(user.id);
      } else if (user.role == "CLIENT") {
        let client = await Auth.getClientByUserID(user.id, current_user);
        if (client != undefined) this.parent.HandleClient.editClient(client);
        else this.parent.HandleClient.newClient(user.id);
      } else this.parent.displayUsers();
    } catch (e) {
      Messages.Show("is-warning", e.message);
      console.error(e);
    }
    Users.toggleModal("users-modal", "users-modal-card");
  }
}