gaseous-server/gaseous-server/wwwroot/pages/dialogs/userprofile.html

<div id="properties_toc">
    <div id="properties_profile_toc_general" name="properties_profile_toc_item" onclick="ProfileSelectTab('general');">Preferences</div>
    <div id="properties_profile_toc_avatar" name="properties_profile_toc_item" onclick="ProfileSelectTab('avatar');">Avatar</div>
    <div id="properties_profile_toc_account" name="properties_profile_toc_item" onclick="ProfileSelectTab('account');">Account</div>
</div>
<div id="properties_bodypanel">
    <div id="properties_bodypanel_general" name="properties_profile_tab" style="display: none;">
        <h3>Game Library</h3>
        <table style="width: 100%;">
            <tr>
                <th>
                    Library
                </th>
            </tr>
            <tr>
                <td>
                    Pagination mode:
                </td>
            </tr>
            <tr>
                <td>
                    <select id="profile_pref-LibraryPagination" data-pref="LibraryPagination" data-minimum-results-for-search="Infinity">
                        <option value="paged">Paged</option>
                        <option value="infinite">Infinite scrolling</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <th>
                    Game Icons
                </th>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" id="profile_pref_LibraryShowGameTitle" data-pref="LibraryShowGameTitle"><label for="profile_pref_LibraryShowGameTitle"> Show title</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" id="profile_pref_LibraryShowGameRating" data-pref="LibraryShowGameRating"><label for="profile_pref_LibraryShowGameRating"> Show rating</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" id="profile_pref_LibraryShowGameClassification" data-pref="LibraryShowGameClassification"><label for="profile_pref_LibraryShowGameClassification"> Show age classification badges</label>
                </td>
            </tr>
            <tr>
                <td>
                    <table id="profile_pref_LibraryClassificationBadgeSelect">
                        <tr>
                            <td>Use classification badges from:</td>
                        </tr>
                        <tr>
                            <td>
                                <select id="profile_pref_LibraryPrimaryClassificationBadge" data-primary="primary" data-minimum-results-for-search="Infinity" onchange="SavePrefValue_ClassBadge(this);">
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>Fallback to classification badges from:</td>
                        </tr>
                        <tr>
                            <td>
                                <select id="profile_pref_LibraryFallbackClassificationBadge" onchange="SavePrefValue_ClassBadge(this);" data-minimum-results-for-search="Infinity">
                                </select>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <strong>Note</strong>: The page will need to be reloaded for changes to take effect.
                </td>
            </tr>
            <tr>
                <td style="text-align: right;">
                    <button id="profile_pref_ok" value="OK" onclick="SavePrefs();">OK</button>
                </td>
            </tr>
        </table>
    </div>
    <div id="properties_bodypanel_avatar" name="properties_profile_tab" style="display: none;">
        <h3>Avatar</h3>
        <div style="width: 100%; text-align: center;">
            <div>
                <img id="properties_bodypanel_avatar_image" style="width: 200px; height: 200px;" src="/images/user.svg"/>
            </div>
            <form id="properties_bodypanel_avatar_form" onsubmit="return false">
                <input type="file" name="file" id="properties_bodypanel_avatar_upload" accept="image/*" /><button value="Save" onclick="SaveAvatar();">Save</button><button value="Delete" onclick="SaveAvatar(true);">Delete</button>
            </form>
        </div>
    </div>
    <div id="properties_bodypanel_account" name="properties_profile_tab" style="display: none;">
        <h3>Reset Password</h3>
        <table style="width: 100%;">
            <tr>
                <th>Old Password</th>
                <td><input type="password" id="profile_oldpassword" style="width: 95%;" /></td>
            </tr>
            <tr>
                <th>New Password</th>
                <td><input type="password" id="profile_newpassword" style="width: 95%;" onkeyup="checkPasswordsMatch();" /></td>
            </tr>
            <tr>
                <th>Confirm Password</th>
                <td><input type="password" id="profile_confirmpassword" style="width: 95%;" onkeyup="checkPasswordsMatch();" /></td>
            </tr>
            <tr>
                <td colspan="2" id="profile_passwordnotice"></td>
            </tr>
            <tr>
                <td colspan="2" id="profile_passworderrors" style="color: red;"></td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: right;">
                    <button id="profile_resetpassword" value="Reset Password" disabled="disabled" onclick="ResetPassword();">Reset Password</button>
                </td>
            </tr>
        </table>
    </div>
</div>

<script type="text/javascript">
    document.getElementById('modal-heading').innerHTML = userProfile.emailAddress;

    function ProfileSelectTab(TabName) {
        var tabs = document.getElementsByName('properties_profile_tab');
        for (var i = 0; i < tabs.length; i++) {
            if ((tabs[i].id) == ("properties_bodypanel_" + TabName)) {
                tabs[i].style.display = '';
            } else {
                tabs[i].style.display = 'none';
            }
        }

        var tocs = document.getElementsByName('properties_profile_toc_item');
        for (var i = 0; i < tocs.length; i++) {
            if ((tocs[i].id) == ("properties_profile_toc_" + TabName)) {
                tocs[i].className = "properties_toc_item_selected";
            } else {
                tocs[i].className = '';
            }
        }
    }

    function GetPrefInitialValues() {
        var paginationMode = document.getElementById('profile_pref-LibraryPagination');
        paginationMode.value = GetPreference('LibraryPagination', 'paged');

        ConfigurePrefInitialValue_Checkbox("LibraryShowGameTitle", GetPreference("LibraryShowGameTitle", true));
        ConfigurePrefInitialValue_Checkbox("LibraryShowGameRating", GetPreference("LibraryShowGameRating", true));
        ConfigurePrefInitialValue_Checkbox("LibraryShowGameClassification", GetPreference("LibraryShowGameClassification", true));

        var primary = document.getElementById('profile_pref_LibraryPrimaryClassificationBadge');
        var secondary = document.getElementById('profile_pref_LibraryFallbackClassificationBadge');
        PopulateClassificationMenus(primary);
        PopulateClassificationMenus(secondary, true);

        var classificationOrder = JSON.parse(GetPreference("LibraryGameClassificationDisplayOrder", JSON.stringify([ "ESRB" ])));
        primary.value = classificationOrder[0];
        if (classificationOrder[1]) {
            secondary.value = classificationOrder[1];
        }

        for (var i = 0; i < secondary.childNodes.length; i++) {
            if (secondary.childNodes[i].value == primary.value) {
                secondary.childNodes[i].setAttribute('disabled', 'disabled');
            } else {
                secondary.childNodes[i].removeAttribute('disabled');
            }
        }
    }

    function PopulateClassificationMenus(targetSelector, IsSecondary) {
        targetSelector.innerHTML = '';

        if (IsSecondary == true) {
            var defaultOpt = document.createElement('option');
            defaultOpt.value = '-';
            defaultOpt.innerHTML = 'None';
            targetSelector.appendChild(defaultOpt);
        }

        for (const [key, value] of Object.entries(ClassificationBoards)) {
            var opt = document.createElement('option');
            opt.value = key;
            opt.innerHTML = value;
            targetSelector.appendChild(opt);
        }
    }

    function ConfigurePrefInitialValue_Checkbox(ValueName, ValueSetting) {
        var valueCheckbox = document.getElementById("profile_pref_" + ValueName);
        if (ValueSetting == "true" || ValueSetting == true) {
            valueCheckbox.checked = true;
            updateDisplay(ValueName, true);
        } else {
            valueCheckbox.checked = false;
            updateDisplay(ValueName, false);
        }
    }

    function SavePrefs() {
        var model = [];

        model.push(SavePrefValue_Checkbox(document.getElementById('profile_pref_LibraryShowGameTitle')));
        model.push(SavePrefValue_Checkbox(document.getElementById('profile_pref_LibraryShowGameRating')));
        model.push(SavePrefValue_Checkbox(document.getElementById('profile_pref_LibraryShowGameClassification')));


        model.push(SavePrefValue_Value(document.getElementById('profile_pref-LibraryPagination')));
        
        model.push(
            {
                "setting": "LibraryGameClassificationDisplayOrder",
                "value": JSON.stringify(SavePrefValue_ClassBadge(document.getElementById('profile_pref_LibraryPrimaryClassificationBadge')))
            }
        );
        
        SetPreference_Batch(model);
        
        if (getQueryString('page', 'string') == 'home' ||  getQueryString('page', 'string') == undefined) {
            setCookie('games_library_last_page', 1);
            //location.reload();
        }

        closeDialog();
    }

    function SavePrefValue_Checkbox(e) {
        var ValueName = e.getAttribute("data-pref");
        
        return { "setting": ValueName, "value": e.checked.toString() };
    }

    function SavePrefValue_Value(e) {
        var ValueName = e.getAttribute("data-pref");
        
        return { "setting": ValueName, "value": e.value };
    }

    function updateDisplay(ValueName, ValueSetting) {
        switch(ValueName) {
            case "LibraryShowGameClassification":
                // var badgeSelector = document.getElementById("profile_pref_LibraryClassificationBadgeSelect");
                // if (ValueSetting == true || ValueSetting == "true") {
                //     badgeSelector.style.display = '';
                // } else {
                //     badgeSelector.style.display = 'none';
                // }
                break;
        }
    }

    function SavePrefValue_ClassBadge(e) {
        var primary = document.getElementById('profile_pref_LibraryPrimaryClassificationBadge');
        var secondary = document.getElementById('profile_pref_LibraryFallbackClassificationBadge');

        if (e.getAttribute('data-primary') == 'primary') {
            // reset secondary to "none" if the same board is selected in both
            if (primary.value == secondary.value) {
                secondary.value = '-';
            }

            // disable in secondary board selected in primary
            for (var i = 0; i < secondary.childNodes.length; i++) {
                if (secondary.childNodes[i].value == primary.value) {
                    secondary.childNodes[i].setAttribute('disabled', 'disabled');
                } else {
                    secondary.childNodes[i].removeAttribute('disabled');
                }
            }
        }

    
        // save values
        var model = [];
        if (secondary.value == '-') {
            model = [ primary.value ];
        } else {
            model = [ primary.value, secondary.value ];
        }

        return model;
    }

    function checkPasswordsMatch() {
        var oldPassword = document.getElementById('profile_oldpassword').value;
        var newPassword = document.getElementById('profile_newpassword').value;
        var conPassword = document.getElementById('profile_confirmpassword').value;
        var errorLabel = document.getElementById('profile_passwordnotice');
        var submitButton = document.getElementById('profile_resetpassword');

        // make sure the new password is not the same as the old one
        if (newPassword == oldPassword) {
            errorLabel.innerHTML = "New password should not match the old password";
            submitButton.setAttribute('disabled', 'disabled');
        } else {
            if (newPassword == conPassword) {
                // check if password meets requirements
                if (newPassword.length >= 10) {
                    errorLabel.innerHTML = "";
                    submitButton.removeAttribute('disabled');
                } else {
                    errorLabel.innerHTML = "Password should be at least 10 characters long";
                    submitButton.setAttribute('disabled', 'disabled');
                }
            } else {
                errorLabel.innerHTML = "New and confirmed passwords do not match";
                submitButton.setAttribute('disabled', 'disabled');
            }
        }
    }

    function ResetPassword() {
        var oldPassword = document.getElementById('profile_oldpassword').value;
        var newPassword = document.getElementById('profile_newpassword').value;
        var conPassword = document.getElementById('profile_confirmpassword').value;

        var model = {
            "OldPassword": oldPassword,
            "NewPassword": newPassword,
            "ConfirmPassword": conPassword
        }

        ajaxCall(
            '/api/v1.1/Account/ChangePassword',
            'POST',
            function(result) {
                ResetPasswordCallback(result);
            },
            function(error) {
                ResetPasswordCallback(error);
            },
            JSON.stringify(model)
        );
    }

    function ResetPasswordCallback(result) {
        var errorLabel = document.getElementById('profile_passwordnotice');
        var errorBox = document.getElementById('profile_passworderrors');
        errorBox.innerHTML = '';

        console.log(result);
        if (result.responseJSON.succeeded == false) {
            for (var i = 0; i < result.responseJSON.errors.length; i++) {
                var errorMessage = document.createElement('p');
                errorMessage.innerHTML = result.responseJSON.errors[i].description;
                errorBox.appendChild(errorMessage);
            }
        } else {
            document.getElementById('profile_oldpassword').value = '';
            document.getElementById('profile_newpassword').value = '';
            document.getElementById('profile_confirmpassword').value = '';
            document.getElementById('profile_resetpassword').setAttribute('disabled', 'disabled');
            errorLabel.innerHTML = "Password changed.";
        }
    }

    function SaveAvatar(DeleteExisting) {
        if (DeleteExisting == true) {
            ajaxCall(
                '/api/v1.1/Account/Avatar/' + userProfile.avatar + '.jpg',
                'DELETE',
                function (success) {
                    userProfile.avatar = "00000000-0000-0000-0000-000000000000";
                    loadAvatar(userProfile.avatar);
                    displayAvatarPreview("/images/user.svg");
                },
                function (error) {
                    userProfile.avatar = "00000000-0000-0000-0000-000000000000";
                    loadAvatar(userProfile.avatar);
                    displayAvatarPreview("/images/user.svg");
                }
            );
        } else {
            var form = $('#properties_bodypanel_avatar_form')[0];
            var formData = new FormData(form);
            formData.append("file", document.getElementById("properties_bodypanel_avatar_upload").files[0]);

            $.ajax({

                // Our sample url to make request
                url:
                '/api/v1.1/Account/Avatar',

                // Type of Request
                type: 'POST',

                // data to send to the server
                data: formData,

                contentType: false,
                processData: false,

                // Function to call when to
                // request is ok
                success: function (data) {
                    var x = JSON.stringify(data);
                    console.log(x);

                    loadAvatar(data);
                    userProfile.avatar = data;
                    displayAvatarPreview("/api/v1.1/Account/Avatar/" + data + ".jpg");
                },

                // Error handling
                error: function (error) {
                    console.log(`Error ${JSON.stringify(error)}`);
                }
            });
        }
    }

    function displayAvatarPreview(previewImg) {
        var previewPath;
        if (previewImg) {
            previewPath = previewImg;
        } else {
            if (userProfile.avatar == "00000000-0000-0000-0000-000000000000") {
                previewPath = "/images/user.svg";
            } else {
                previewPath = "/api/v1.1/Account/Avatar/" + userProfile.avatar + ".jpg";
            }
        }

        var previewElement = document.getElementById('properties_bodypanel_avatar_image')
        previewElement.setAttribute("src", previewPath);

        if (previewPath != "/images/user.svg") {
            previewElement.style.filter = "";
        } else {
            previewElement.style.filter = "invert(100%)";
        }
    }

    ProfileSelectTab('general');
    GetPrefInitialValues();
    displayAvatarPreview();

    $('#profile_pref-LibraryPagination').select2();
    $('#profile_pref_LibraryPrimaryClassificationBadge').select2();
    $('#profile_pref_LibraryFallbackClassificationBadge').select2();
</script>