mirror of
https://github.com/SillyTavern/SillyTavern.git
synced 2025-03-11 01:20:12 +01:00
imp user creation, split out from loader.js (still disabled)
This commit is contained in:
RossAscends
parent
5ad498f3ca
commit
f0aa0c5540
@ -1,6 +1,6 @@
|
|||||||
const ELEMENT_ID = 'loader';
|
const ELEMENT_ID = 'loader';
|
||||||
|
|
||||||
import { delay } from "./utils.js";
|
import { populateUserList } from './userManagement.js'
|
||||||
|
|
||||||
export function showLoader() {
|
export function showLoader() {
|
||||||
const container = $('<div></div>').attr('id', ELEMENT_ID);
|
const container = $('<div></div>').attr('id', ELEMENT_ID);
|
||||||
@ -9,55 +9,23 @@ export function showLoader() {
|
|||||||
$('body').append(container);
|
$('body').append(container);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//placeholder user data
|
|
||||||
const user1 =
|
|
||||||
{
|
|
||||||
handle: 'user0',
|
|
||||||
avatarSrc: 'https://cdn-icons-png.flaticon.com/256/147/147144.png',
|
|
||||||
name: 'Admin',
|
|
||||||
password: true
|
|
||||||
}
|
|
||||||
|
|
||||||
const user2 =
|
|
||||||
{
|
|
||||||
handle: 'user1',
|
|
||||||
avatarSrc: 'https://cdn.iconscout.com/icon/free/png-256/free-avatar-370-456322.png',
|
|
||||||
name: 'Guest',
|
|
||||||
password: true
|
|
||||||
}
|
|
||||||
|
|
||||||
const userSelectMessage = `
|
|
||||||
<div class="flex-container flexFlowColumn alignItemsCenter">
|
|
||||||
<h3>Select User</h3>
|
|
||||||
<small>This is merely a test. <br> Click a user, and then click Login to proceed.</small>
|
|
||||||
<div class="flex-container justifyCenter">
|
|
||||||
<div id="userSelect-${user1.handle}" data-foruser="${user1.name}" class="userSelect menu_button flex-container flexFlowCol"><img class='avatar' src="${user1.avatarSrc}">${user1.name}</div>
|
|
||||||
<div id="userSelect-${user2.handle}" data-foruser="${user2.name}" class="userSelect menu_button flex-container flexFlowCol"><img class='avatar' src="${user2.avatarSrc}">${user2.name}</div>
|
|
||||||
<div id="registerNewUserButton" class="menu_button flex-container flexFlowCol">New User</div>
|
|
||||||
</div>
|
|
||||||
<div id="passwordEntryBlock" style="display:none;" class="flex-container flexFlowColumn alignItemsCenter">
|
|
||||||
<h4 id="passwordHeaderText"></h4>
|
|
||||||
<input id="userPassword" class="text_pole" type="password">
|
|
||||||
<div id="loginButton" class='menu_button'>Login</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
|
|
||||||
|
|
||||||
export async function hideLoader() {
|
export async function hideLoader() {
|
||||||
|
|
||||||
//Sets up a 2-step animation. Spinner blurs/fades out, and then the loader shadow does the same.
|
//Sets up a 2-step animation. Spinner blurs/fades out, and then the loader shadow does the same.
|
||||||
$('#load-spinner').on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function () {
|
$('#load-spinner').on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function () {
|
||||||
|
//uncomment this as part of user selection enabling
|
||||||
//$('#loader-spinner')
|
//$('#loader-spinner')
|
||||||
|
|
||||||
|
//comment this instead
|
||||||
$(`#${ELEMENT_ID}`)
|
$(`#${ELEMENT_ID}`)
|
||||||
//only fade out the spinner and replace with login screen
|
//only fade out the spinner and replace with login screen
|
||||||
.animate({ opacity: 0 }, 300, function () {
|
.animate({ opacity: 0 }, 300, function () {
|
||||||
//dont remove the loader container just yet
|
//when enabling user select, dont remove the loader container just yet
|
||||||
|
//comment this out
|
||||||
$(`#${ELEMENT_ID}`).remove();
|
$(`#${ELEMENT_ID}`).remove();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
//console.log('BLURRING SPINNER')
|
//console.log('BLURRING SPINNER')
|
||||||
$('#load-spinner')
|
$('#load-spinner')
|
||||||
.css({
|
.css({
|
||||||
@ -65,29 +33,8 @@ export async function hideLoader() {
|
|||||||
'opacity': '0',
|
'opacity': '0',
|
||||||
});
|
});
|
||||||
|
|
||||||
//add login screen
|
//uncomment to make user selection live
|
||||||
//$('#loader').append(userSelectMessage)
|
//await populateUserList()
|
||||||
|
|
||||||
$(".userSelect").on("click", function () {
|
|
||||||
let selectedUserName = $(this).data('foruser')
|
|
||||||
$('.userSelect').removeClass('avatar-container selected')
|
|
||||||
$(this).addClass('avatar-container selected')
|
|
||||||
console.log(selectedUserName)
|
|
||||||
$("#passwordHeaderText").text(`Enter password for ${selectedUserName}`)
|
|
||||||
$("#passwordEntryBlock").show()
|
|
||||||
})
|
|
||||||
|
|
||||||
$("#loginButton").on('click', function () {
|
|
||||||
$('#loader')
|
|
||||||
.animate({ opacity: 0 }, 300, function () {
|
|
||||||
|
|
||||||
//insert user handle/password verification code here
|
|
||||||
|
|
||||||
//.finally:
|
|
||||||
$('#loader').remove();
|
|
||||||
});
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
152
public/scripts/userManagement.js
Normal file
152
public/scripts/userManagement.js
Normal file
@ -0,0 +1,152 @@
|
|||||||
|
async function getUserList() {
|
||||||
|
const response = await fetch('/api/users/list');
|
||||||
|
const userListObj = await response.json(); // Assuming the response is in JSON format
|
||||||
|
console.log(userListObj)
|
||||||
|
return userListObj;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function registerNewUser() {
|
||||||
|
let handle = String($("#newUserHandle").val());
|
||||||
|
let name = String($("#newUserName").val());
|
||||||
|
let password = String($("#newUserPassword").val());
|
||||||
|
let passwordConfirm = String($("#newUserPasswordConfirm").val());
|
||||||
|
|
||||||
|
if (handle.length < 4) {
|
||||||
|
alert('Username must be at least 4 characters long');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (password.length < 8) {
|
||||||
|
alert('Password must be at least 8 characters long');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (password !== passwordConfirm) {
|
||||||
|
alert("Passwords don't match!")
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const newUser = {
|
||||||
|
handle: handle,
|
||||||
|
name: name || 'Anonymous',
|
||||||
|
password: password,
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await $.ajax({
|
||||||
|
url: '/api/users/create',
|
||||||
|
type: 'POST',
|
||||||
|
contentType: 'application/json',
|
||||||
|
data: JSON.stringify(newUser),
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(response);
|
||||||
|
if (response.handle) {
|
||||||
|
console.log('saw user created successfully')
|
||||||
|
alert('New user created!')
|
||||||
|
$("#userSelectBlock").empty()
|
||||||
|
populateUserList()
|
||||||
|
$("#userListBlock").show()
|
||||||
|
$("#registerNewUserBlock").hide()
|
||||||
|
$("#registerNewUserBlock input").val('')
|
||||||
|
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating new user:', error);
|
||||||
|
alert(error.responseText)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function populateUserList() {
|
||||||
|
const userList = await getUserList();
|
||||||
|
|
||||||
|
const registerNewUserButtonHTML = `<div id="registerNewUserButton" class="menu_button flex-container flexFlowCol">New User</div>`
|
||||||
|
|
||||||
|
const newUserRegisterationHTML = `
|
||||||
|
<div class="flex-container flexFlowColumn">
|
||||||
|
Register New SillyTavern User
|
||||||
|
<div class="flex-container">Username: <input id="newUserHandle" class="text_pole"></div>
|
||||||
|
<div class="flex-container">Password: <input id="newUserPassword" class="text_pole" type="password"></div>
|
||||||
|
<div class="flex-container">Password confirm: <input id="newUserPasswordConfirm" class="text_pole" type="password"></div>
|
||||||
|
This will create a new subfolder in the /data/ directory.
|
||||||
|
<div class="flex-container">
|
||||||
|
<div id="newUserRegisterFinalizeButton" class="menu_button">Register</div>
|
||||||
|
<div id="newUserRegisterCancelButton" class="menu_button">Cancel</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
|
||||||
|
const userSelectHTML = `
|
||||||
|
<div id="userSelectBlock" class="flex-container flexFlowColumn alignItemsCenter">
|
||||||
|
<h3>Select User</h3>
|
||||||
|
<small>This is merely a test. <br> Click a user, and then click Login to proceed.</small>
|
||||||
|
<div id="userListBlock">
|
||||||
|
<div id="userList" class="flex-container justifyCenter"></div>
|
||||||
|
<div id="passwordEntryBlock" style="display:none;" class="flex-container flexFlowColumn alignItemsCenter">
|
||||||
|
<h4 id="passwordHeaderText"></h4>
|
||||||
|
<input id="userPassword" class="text_pole" type="password">
|
||||||
|
<div id="loginButton" class='menu_button'>Login</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="registerNewUserBlock" style="display:none;">
|
||||||
|
${newUserRegisterationHTML}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Add login screen
|
||||||
|
$('#loader').append(userSelectHTML);
|
||||||
|
|
||||||
|
const parentDiv = $('#userList');
|
||||||
|
|
||||||
|
userList.forEach(user => {
|
||||||
|
const userDiv = $('<div></div>')
|
||||||
|
.attr('id', `userSelect-${user.handle}`)
|
||||||
|
.attr('data-foruser', user.name)
|
||||||
|
.addClass('userSelect menu_button flex-container flexFlowCol');
|
||||||
|
|
||||||
|
const avatarImg = $('<img>')
|
||||||
|
.addClass('avatar')
|
||||||
|
.attr('src', user.avatar);
|
||||||
|
|
||||||
|
userDiv.append(avatarImg);
|
||||||
|
|
||||||
|
const userName = $('<span></span>').text(user.name);
|
||||||
|
userDiv.append(userName);
|
||||||
|
|
||||||
|
parentDiv.append(userDiv);
|
||||||
|
});
|
||||||
|
|
||||||
|
parentDiv.append(registerNewUserButtonHTML)
|
||||||
|
|
||||||
|
$(".userSelect").off('click').on("click", function () {
|
||||||
|
let selectedUserName = $(this).data('foruser')
|
||||||
|
$('.userSelect').removeClass('avatar-container selected')
|
||||||
|
$(this).addClass('avatar-container selected')
|
||||||
|
console.log(selectedUserName)
|
||||||
|
$("#passwordHeaderText").text(`Enter password for ${selectedUserName}`)
|
||||||
|
$("#passwordEntryBlock").show()
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#registerNewUserButton").off('click').on('click', function () {
|
||||||
|
$("#userListBlock").hide()
|
||||||
|
$("#registerNewUserBlock").show()
|
||||||
|
})
|
||||||
|
|
||||||
|
$("#newUserRegisterFinalizeButton").off('click').on('click', registerNewUser)
|
||||||
|
|
||||||
|
$("#newUserRegisterCancelButton").off('click').on('click', function () {
|
||||||
|
$("#userListBlock").show()
|
||||||
|
$("#registerNewUserBlock").hide()
|
||||||
|
})
|
||||||
|
|
||||||
|
$("#loginButton").off('click').on('click', function () {
|
||||||
|
$('#loader')
|
||||||
|
.animate({ opacity: 0 }, 300, function () {
|
||||||
|
// Insert user handle/password verification code here
|
||||||
|
//.finally:
|
||||||
|
$('#loader').remove();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user