handleUser.js

// Imports
import { RandomString } from "/services/common/common.js";
import * as Messages from "/services/messages/messages.js";
import * as CapturerModel from "/services/model/capturer-model.js";
import * as Auth from "/services/auth/auth.js";
import * as Common from "/services/common/common.js";

// DOM elements
let id_field;
let idOAuth_field;
let login_field;
let password_field;
let name_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;
    this.CapturerModel = CapturerModel.getCapturerModel();
  }

  async mount(where) {
    this.CapturerModel.current_user = await Auth.GetUser();
    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-role-container">
            <label>Rôle</label><br />
            <div class="control select">
              <select name="role" id="users-modal-role">
                <option value="VISUALIZER">Visualiseur</option>
                <option value="CAPTURER">Saisisseur</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");
    name_field = document.getElementById("users-modal-name");
    role_field = document.getElementById("users-modal-role");

    document
      .getElementById(`users-modal-close`)
      .addEventListener("click", function () {
        Common.toggleModal("users-modal", "users-modal-card");
      });
    document
      .getElementById(`users-modal-cancel`)
      .addEventListener("click", function () {
        Common.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 = "";
    role_field.value = "";
    Common.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 == "CAPTURER") {
      let capturer = await Auth.getCapturerByUserID(user.id, current_user);
      if (capturer != undefined)
        await this.CapturerModel.deleteCapturer(capturer.ID);
    }
  }

  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;
    role_field.value = user.role;
    Common.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 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,
          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 != undefined && user.role == "CAPTURER")
        await this.postCapturer(user, method);
      else if (user.role != "CAPTURER") {
        let capturer = await Auth.getCapturerByUserID(user.id, current_user);
        if (capturer != undefined)
          await this.CapturerModel.deleteCapturer(capturer.ID);
      }
      this.parent.displayUsers();
    } catch (e) {
      Messages.Show("is-warning", e.message);
      console.error(e);
    }
    Common.toggleModal("users-modal", "users-modal-card");
  }

  async postCapturer(user, method) {
    let capturer;
    capturer = await Auth.getCapturerByUserID(user.id, current_user);
    if (capturer == undefined) {
      capturer = { ID: 0 };
      method = "POST";
    }
    this.CapturerModel.saveCapturer(method, capturer.ID, user.id, user.name);
  }
}