Added lite login model window, closes #79.
This commit is contained in:
parent
dea897456a
commit
f8a3b8bb9b
6 changed files with 118 additions and 11 deletions
|
|
@ -33,4 +33,17 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
&__button {
|
||||
flex: 1 1 auto;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,6 +28,15 @@ window.addEventListener('load', () => {
|
|||
changelogChangeAction.title = "This is supposed to be sideways, but your browser doesn't support that.";
|
||||
}
|
||||
|
||||
const loginButtons: HTMLCollectionOf<HTMLAnchorElement> = document.getElementsByClassName('js-login-button') as HTMLCollectionOf<HTMLAnchorElement>;
|
||||
|
||||
if (loginButtons.length > 0) {
|
||||
for (let i = 0; i < loginButtons.length; i++) {
|
||||
loginButtons[i].href = 'javascript:void(0);';
|
||||
loginButtons[i].addEventListener('click', () => loginModal());
|
||||
}
|
||||
}
|
||||
|
||||
const loginForms: HTMLCollectionOf<HTMLFormElement> = document.getElementsByClassName('js-login-form') as HTMLCollectionOf<HTMLFormElement>;
|
||||
|
||||
if (loginForms.length > 0) {
|
||||
|
|
@ -76,8 +85,7 @@ interface MessageBoxButton {
|
|||
callback: Function;
|
||||
}
|
||||
|
||||
function messageBox(text: string, title: string = null, buttons: MessageBoxButton[] = []): boolean
|
||||
{
|
||||
function messageBox(text: string, title: string = null, buttons: MessageBoxButton[] = []): boolean {
|
||||
if (document.querySelector('.messagebox')) {
|
||||
return false;
|
||||
}
|
||||
|
|
@ -104,11 +112,13 @@ function messageBox(text: string, title: string = null, buttons: MessageBoxButto
|
|||
const buttonsContainer = container.appendChild(document.createElement('div'));
|
||||
buttonsContainer.className = 'messagebox__buttons';
|
||||
|
||||
let firstButton = null;
|
||||
|
||||
if (buttons.length < 1) {
|
||||
const okButton = buttonsContainer.appendChild(document.createElement('button'));
|
||||
okButton.className = 'input__button';
|
||||
okButton.textContent = 'OK';
|
||||
okButton.addEventListener('click', () => element.remove());
|
||||
firstButton = buttonsContainer.appendChild(document.createElement('button'));
|
||||
firstButton.className = 'input__button';
|
||||
firstButton.textContent = 'OK';
|
||||
firstButton.addEventListener('click', () => element.remove());
|
||||
} else {
|
||||
for (let i = 0; i < buttons.length; i++) {
|
||||
let button = buttonsContainer.appendChild(document.createElement('button'));
|
||||
|
|
@ -118,9 +128,87 @@ function messageBox(text: string, title: string = null, buttons: MessageBoxButto
|
|||
element.remove();
|
||||
buttons[i].callback();
|
||||
});
|
||||
|
||||
if (firstButton === null)
|
||||
firstButton = button;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.appendChild(element);
|
||||
firstButton.focus();
|
||||
return true;
|
||||
}
|
||||
|
||||
function loginModal(): boolean {
|
||||
if (document.querySelector('.messagebox') || getCurrentUser('user_id') > 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const element: HTMLDivElement = document.createElement('div');
|
||||
element.className = 'messagebox';
|
||||
|
||||
const container: HTMLFormElement = element.appendChild(document.createElement('form'));
|
||||
container.className = 'container messagebox__container auth js-login-form';
|
||||
container.method = 'post';
|
||||
container.action = '/auth.php';
|
||||
|
||||
const titleElement = container.appendChild(document.createElement('div')),
|
||||
titleBackground = titleElement.appendChild(document.createElement('div')),
|
||||
titleHeader = titleElement.appendChild(document.createElement('div'));
|
||||
|
||||
titleElement.className = 'container__title';
|
||||
titleBackground.className = 'container__title__background';
|
||||
titleHeader.className = 'auth__header';
|
||||
|
||||
const authAvatar: HTMLDivElement = titleHeader.appendChild(document.createElement('div'));
|
||||
authAvatar.className = 'avatar auth__avatar';
|
||||
authAvatar.style.backgroundImage = "url('/profile.php?u=0&m=avatar')";
|
||||
|
||||
const hiddenMode: HTMLInputElement = container.appendChild(document.createElement('input'));
|
||||
hiddenMode.type = 'hidden';
|
||||
hiddenMode.name = 'auth[mode]';
|
||||
hiddenMode.value = 'login';
|
||||
|
||||
const hiddenCsrf: HTMLInputElement = container.appendChild(document.createElement('input'));
|
||||
hiddenCsrf.type = 'hidden';
|
||||
hiddenCsrf.name = 'csrf[login]';
|
||||
hiddenCsrf.value = getCSRFToken('login');
|
||||
|
||||
const hiddenRedirect: HTMLInputElement = container.appendChild(document.createElement('input'));
|
||||
hiddenRedirect.type = 'hidden';
|
||||
hiddenRedirect.name = 'auth[redirect]';
|
||||
hiddenRedirect.value = location.toString();
|
||||
|
||||
const authForm: HTMLDivElement = container.appendChild(document.createElement('div'));
|
||||
authForm.className = 'auth__form';
|
||||
|
||||
const inputUsername: HTMLInputElement = authForm.appendChild(document.createElement('input'));
|
||||
inputUsername.className = 'input__text auth__input';
|
||||
inputUsername.placeholder = 'Username';
|
||||
inputUsername.type = 'text';
|
||||
inputUsername.name = 'auth[username]';
|
||||
inputUsername.addEventListener('keyup', () => loginFormUpdateAvatar(authAvatar, inputUsername));
|
||||
|
||||
const inputPassword: HTMLInputElement = authForm.appendChild(document.createElement('input'));
|
||||
inputPassword.className = 'input__text auth__input';
|
||||
inputPassword.placeholder = 'Password';
|
||||
inputPassword.type = 'password';
|
||||
inputPassword.name = 'auth[password]';
|
||||
|
||||
const formButtons: HTMLDivElement = authForm.appendChild(document.createElement('div'));
|
||||
formButtons.className = 'auth__buttons';
|
||||
|
||||
const inputLogin: HTMLButtonElement = formButtons.appendChild(document.createElement('button'));
|
||||
inputLogin.className = 'input__button auth__button';
|
||||
inputLogin.textContent = 'Log in';
|
||||
|
||||
const inputClose: HTMLButtonElement = formButtons.appendChild(document.createElement('button'));
|
||||
inputClose.className = 'input__button auth__button';
|
||||
inputClose.textContent = 'Close';
|
||||
inputClose.type = 'button';
|
||||
inputClose.addEventListener('click', () => element.remove());
|
||||
|
||||
document.body.appendChild(element);
|
||||
inputUsername.focus();
|
||||
return true;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -390,6 +390,9 @@ MIG;
|
|||
|
||||
if (!empty($userDisplayInfo)) {
|
||||
tpl_var('current_user', $userDisplayInfo);
|
||||
} else {
|
||||
// make sure the login csrf token is available
|
||||
csrf_token('login');
|
||||
}
|
||||
|
||||
$inManageMode = starts_with($_SERVER['REQUEST_URI'], '/manage');
|
||||
|
|
|
|||
|
|
@ -227,7 +227,7 @@ MSG;
|
|||
$remainingAttempts === 2 ? '' : 's'
|
||||
);
|
||||
|
||||
if ($userData['user_id'] < 1) {
|
||||
if (empty($userData) || $userData['user_id'] < 1) {
|
||||
user_login_attempt_record(false, null, $ipAddress, $userAgent);
|
||||
$authLoginError = $loginFailedError;
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -82,6 +82,7 @@
|
|||
'title': 'Log in',
|
||||
'url': '/auth.php?m=login',
|
||||
'icon': 'fas fa-sign-in-alt fa-fw',
|
||||
'class': 'js-login-button',
|
||||
},
|
||||
]
|
||||
%}
|
||||
|
|
@ -116,7 +117,7 @@
|
|||
<div class="header__desktop__user">
|
||||
{% for item in user_menu %}
|
||||
{% if item.display is not defined or item.display %}
|
||||
<a href="{{ item.url }}" title="{{ item.title }}" class="header__desktop__user__button">
|
||||
<a href="{{ item.url }}" title="{{ item.title }}" class="header__desktop__user__button {{ item.class|default('') }}">
|
||||
<i class="{{ item.icon }}"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
|
@ -126,7 +127,7 @@
|
|||
<a href="{{ url('user-profile', {'user': current_user.user_id}) }}" class="avatar header__desktop__user__avatar" title="{{ current_user.username }}"
|
||||
style="background-image:url('{{ url('user-avatar', {'user': current_user.user_id}) }}');{{ current_user.user_colour|html_colour }}"></a>
|
||||
{% else %}
|
||||
<a href="{{ url('auth-login') }}" class="avatar header__desktop__user__avatar"
|
||||
<a href="{{ url('auth-login') }}" class="avatar header__desktop__user__avatar js-login-button"
|
||||
style="background-image:url('{{ url('guest-avatar') }}');"></a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
@ -154,7 +155,7 @@
|
|||
<div class="header__mobile__user">
|
||||
{% for item in user_menu %}
|
||||
{% if item.display is not defined or item.display %}
|
||||
<a href="{{ item.url }}" class="header__mobile__link header__mobile__link--user">
|
||||
<a href="{{ item.url }}" class="header__mobile__link header__mobile__link--user {{ item.class|default('') }}">
|
||||
<i class="{{ item.icon }}"></i> {{ item.title }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,9 @@
|
|||
{{ input_text('auth[username]', 'auth__input js-login-username', username|default(''), 'text', 'Username', true, null, 0, autofocus) }}
|
||||
{{ input_text('auth[password]', 'auth__input', '', 'password', 'Password', true, null) }}
|
||||
|
||||
<button class="input__button">Log in</button>
|
||||
<div class="auth__buttons">
|
||||
<button class="input__button auth__button">Log in</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{% endmacro %}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue