Working login flow

public/scripts/login.js

@@ -0,0 +1,142 @@
+async function getUserList() {
+    const response = await fetch('/api/users/list');
+    const userListObj = await response.json();
+    console.log(userListObj);
+    return userListObj;
+}
+
+async function sendRecoveryPart1(handle) {
+    const response = await fetch('/api/users/recover-step1', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ handle }),
+    });
+
+    if (!response.ok) {
+        const errorData = await response.json();
+        return displayError(errorData.error || 'An error occurred');
+    }
+
+    showRecoveryBlock();
+}
+
+async function sendRecoveryPart2(handle, code, newPassword) {
+    const recoveryData = {
+        handle,
+        code,
+        newPassword,
+    };
+
+    const response = await fetch('/api/users/recover-step2', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(recoveryData),
+    });
+
+    if (!response.ok) {
+        const errorData = await response.json();
+        return displayError(errorData.error || 'An error occurred');
+    }
+
+    console.log(`Successfully recovered password for ${handle}!`);
+    await performLogin(handle, newPassword);
+}
+
+async function onUserSelected(user) {
+    // No password, just log in
+    if (!user.password) {
+        return await performLogin(user.handle, '');
+    }
+
+    $('#passwordRecoveryBlock').hide();
+    $('#passwordEntryBlock').show();
+    $('#loginButton').off('click').on('click', async () => {
+        const password = String($('#userPassword').val());
+        await performLogin(user.handle, password);
+    });
+
+    $('#recoverPassword').off('click').on('click', async () => {
+        await sendRecoveryPart1(user.handle);
+    });
+
+    $('#sendRecovery').off('click').on('click', async () => {
+        const code = String($('#recoveryCode').val());
+        const newPassword = String($('#newPassword').val());
+        await sendRecoveryPart2(user.handle, code, newPassword);
+    });
+
+    displayError('');
+}
+
+function displayError(message) {
+    $('#errorMessage').text(message);
+}
+
+async function performLogin(handle, password) {
+    const userInfo = {
+        handle: handle,
+        password: password,
+    };
+
+    try {
+        const response = await fetch('/api/users/login', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(userInfo),
+        });
+
+        if (!response.ok) {
+            const errorData = await response.json();
+            return displayError(errorData.error || 'An error occurred');
+        }
+
+        const data = await response.json();
+
+        if (data.handle) {
+            console.log(`Successfully logged in as ${handle}!`);
+            redirectToHome();
+        }
+    } catch (error) {
+        console.error('Error logging in:', error);
+        displayError(String(error));
+    }
+}
+
+function redirectToHome() {
+    window.location.href = '/';
+}
+
+function showRecoveryBlock() {
+    $('#passwordEntryBlock').hide();
+    $('#passwordRecoveryBlock').show();
+    displayError('');
+}
+
+function onCancelRecoveryClick() {
+    $('#passwordRecoveryBlock').hide();
+    $('#passwordEntryBlock').show();
+    displayError('');
+}
+
+(async function () {
+    const userList = await getUserList();
+    console.log(userList);
+    for (const user of userList) {
+        const userBlock = $('<div></div>').addClass('userSelect');
+        const avatarBlock = $('<div></div>').addClass('avatar');
+        avatarBlock.append($('<img>').attr('src', user.avatar));
+        userBlock.append(avatarBlock);
+        userBlock.append($('<span></span>').text(user.name));
+        userBlock.append($('<small></small>').text(user.handle));
+        userBlock.on('click', () => onUserSelected(user));
+        $('#userList').append(userBlock);
+    }
+    document.body.style.display = '';
+    $('#cancelRecovery').on('click', onCancelRecoveryClick);
+})();