sendnrw/gaseous-server
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added support for custom user avatars

Browse Source 
* Added support for custom user avatars
This commit is contained in:
Michael Green
2024-02-06 19:43:15 +11:00
committed by GitHub
parent 645327bdd1
commit 3c451f5558
12 changed files with 309 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gaseous-server/wwwroot/index.html
View File

@@ -130,6 +130,8 @@
console.log("User is logged in");
userProfile = result;
loadAvatar(userProfile.avatar);
// hide the upload button if it's not permitted
var uploadButton = document.getElementById('banner_upload');
if (!userProfile.roles.includes("Admin") && !userProfile.roles.includes("Gamer")) {

90
gaseous-server/wwwroot/pages/dialogs/userprofile.html
View File

@@ -1,5 +1,6 @@
<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">
@@ -78,6 +79,17 @@
</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%;">
@@ -344,8 +356,86 @@
}
}
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();

22
gaseous-server/wwwroot/pages/settings/users.html
View File

@@ -26,6 +26,7 @@
createTableRow(
true,
[
'',
'Email',
'Role',
'Age Restriction',
@@ -37,17 +38,17 @@
);
for (var i = 0; i < result.length; i++) {
var roleDiv = document.createElement('div');
// for (var r = 0; r < result[i].roles.length; r++) {
// var roleItem = document.createElement('div');
// roleItem.className = 'dropdownroleitem';
// roleItem.innerHTML = result[i].roles[r].toUpperCase();
// var colorVal = intToRGB(hashCode(result[i].roles[r]));
// roleItem.style.backgroundColor = '#' + colorVal;
// roleItem.style.borderColor = '#' + colorVal;
// roleDiv.appendChild(roleItem);
// }
var userAvatar = document.createElement('img');
userAvatar.className = "user_list_icon";
if (result[i].avatar != "00000000-0000-0000-0000-000000000000") {
userAvatar.setAttribute("src", "/api/v1.1/Account/Avatar/" + result[i].avatar + ".jpg");
} else {
userAvatar.setAttribute("src", "/images/user.svg");
userAvatar.classList.add("user_list_icon_reversed");
}
var roleDiv = document.createElement('div');
var roleItem = CreateBadge(result[i].highestRole);
roleDiv.appendChild(roleItem);
@@ -79,6 +80,7 @@
createTableRow(
false,
[
userAvatar,
result[i].emailAddress,
roleDiv,
ageRestrictionPolicyDescription,

22
gaseous-server/wwwroot/scripts/main.js
View File

@@ -516,4 +516,26 @@ function Uint8ToString(u8a){
c.push(String.fromCharCode.apply(null, u8a.subarray(i, i+CHUNK_SZ)));
}
return c.join("");
}
function loadAvatar(AvatarId) {
// load user avatar
var bannerAvatar = document.getElementById('banner_user_image');
var bannerAvatarButton = document.getElementById('banner_user');
if (bannerAvatar && bannerAvatarButton) {
if (AvatarId != "00000000-0000-0000-0000-000000000000") {
bannerAvatar.setAttribute("src", "/api/v1.1/Account/Avatar/" + AvatarId + ".jpg");
bannerAvatar.className = "banner_button_avatar";
bannerAvatarButton.classList.add('banner_button_avatar_image');
bannerAvatarButton.classList.remove('banner_button');
} else {
bannerAvatar.setAttribute("src", "/images/user.svg");
bannerAvatar.className = "banner_button_image";
bannerAvatarButton.classList.remove('banner_button_avatar_image');
bannerAvatarButton.classList.add('banner_button');
}
}
}

21
gaseous-server/wwwroot/styles/style.css
View File

@@ -146,12 +146,33 @@ h3 {
filter: invert(100%);
}
.user_list_icon {
width: 35px;
height: 35px;
margin-bottom: -5px;
}
.user_list_icon_reversed {
filter: invert(100%);
}
.banner_button_image_smaller {
height: 16px;
width: 16px;
margin-left: 5px;
}
.banner_button_avatar {
margin-top: -10px;
height: 40px;
width: 40px;
cursor: pointer;
}
.banner_button_avatar_image:hover {
cursor: pointer;
}
#banner_header {
background-color: rgba(0, 22, 56, 0.8);
backdrop-filter: blur(8px);