ft_transcendence/frontend/static/js/views/MeView.js

import { client, navigateTo } from "../index.js";
import AbstractAuthentificateView from "./AbstractAuthentifiedView.js";

export default class extends AbstractAuthentificateView
{    
    constructor(params)
    {
        super(params, "Me");
	}

    async postInit()
    {
        if (this.fill() === null)
            return;
        document.getElementById("save-button").onclick = this.save;
        document.getElementById("delete-button").onclick = this.delete_accounts;
    }

    async fill()
    {
        let data = await client.account.get();
    
        document.getElementById("username").value = data.username;
    }

    async delete_accounts()
    {
        let current_password = document.getElementById("current_password").value;
        
        let response_data = await client.account.delete(current_password);

        if (response_data === null)
        {
            navigateTo("/login");
            return;
        }

        ["delete", "current_password"].forEach(error_field => {
            let error_display = document.getElementById(`error_${error_field}`);
            if (error_display != null)
                error_display.innerHTML = "";
        });

        if (response_data === "user deleted")
        {
            document.getElementById(`error_delete`).innerHTML = "OK";
            navigateTo("/login")
            return;
        }

        document.getElementById("error_current_password").innerHTML = response_data["password"]
    }

    async save()
    {
        let username = document.getElementById("username").value;
        let new_password = document.getElementById("new_password").value;
        let current_password = document.getElementById("current_password").value;
    
        let data = {};
    
        data.username = username;
        if (new_password.length != 0)
            data.new_password = new_password;
        let response_data = await client.account.update(data, current_password);
    
        if (response_data === null)
        {
            navigateTo(super.redirect_url);
            return;
        }
    
        ["username", "new_password", "current_password"].forEach(error_field => {
            let error_display = document.getElementById(`error_${error_field}`);
            if (error_display != null)
                error_display.innerHTML = "";
        });
    
        Object.keys(response_data).forEach(error_field => {
            let error_display = document.getElementById(`error_${error_field}`);
            if (error_display != null)
                error_display.innerHTML = response_data[error_field];
        });
    }
    
    async getHtml()
    {
        return `
			<h1>ME</h1>
            <input type=text placeholder="username" id="username">
            <span id="error_username"></span>
            <input type=password placeholder="new password" id="new_password">
            <span id="error_new_password"></span>
            <input type=password placeholder="current password" id="current_password">
            <span id="error_current_password"></span>
            <input type="button" value="Save" id="save-button">
            <span id="error_save"></span>
            <input type="button" value="Delete" id="delete-button">
            <span id="error_delete"></span>
            <a href="/logout" class="nav__link" data-link>Logout</a>
        `;
    }
}