Updated frontend
This commit is contained in:
+102
-33
@@ -3,44 +3,55 @@
|
||||
|
||||
app.auth.isLoggedIn(function(error, isLoggedIn){
|
||||
if(isLoggedIn){
|
||||
window.location.href = app.util.getUrlParameter('redirect') || '/';
|
||||
app.auth.logInRedirect();
|
||||
}
|
||||
})
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
});
|
||||
|
||||
function setOtpMethod(method) {
|
||||
$('#otpMethodInput').val(method);
|
||||
$('#otpMethodEmail').toggleClass('active', method === 'email').toggleClass('btn-secondary', method === 'email').toggleClass('btn-outline-secondary', method !== 'email');
|
||||
$('#otpMethodSms').toggleClass('active', method === 'sms').toggleClass('btn-secondary', method === 'sms').toggleClass('btn-outline-secondary', method !== 'sms');
|
||||
}
|
||||
|
||||
function resetOtpForm() {
|
||||
$('#otpStep2').hide();
|
||||
$('#otpStep1').show().find('input[name=login]').val('');
|
||||
setOtpMethod('email');
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="row">
|
||||
<div class="card-deck">
|
||||
<div class="shadow-lg card mb-3">
|
||||
<div class="col-md-1">
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="shadow-lg card">
|
||||
<div class="card-header shadow">
|
||||
Password Log in
|
||||
</div>
|
||||
<div class="card-header shadow actionMessage" style="display:none">
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="auth/login" onsubmit="formAJAX(this)" evalAJAX="app.auth.setToken(data.token);window.location.href = app.util.getUrlParameter('redirect') || '/';">
|
||||
<input type="hidden" name="redirect" value="<%= redirect %>">
|
||||
|
||||
<div class="form-group">
|
||||
<label class="control-label">User name</label>
|
||||
<div class="input-group mb-3 shadow">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" ><i class="fad fa-user"></i></span>
|
||||
</div>
|
||||
<input type="text" name="uid" class="form-control" placeholder="jsmith" validate="user:3" />
|
||||
<form action="auth/login" onsubmit="formAJAX(this)" evalAJAX="
|
||||
app.auth.setToken(data.token);
|
||||
app.auth.logInRedirect();
|
||||
">
|
||||
|
||||
|
||||
<input type="hidden" name="redirect" value="<%= redirect %>">
|
||||
|
||||
<div class="mb-3">
|
||||
<label></label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="addon-wrapping"><i class="fa-solid fa-user-tie"></i></span>
|
||||
<input type="text" name="username" class="form-control" placeholder="jsmith" aria-label="Username" aria-describedby="addon-wrapping">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="control-label">Password</label>
|
||||
<div class="input-group mb-3 shadow">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" ><i class="fad fa-key"></i></span>
|
||||
</div>
|
||||
<input type="password" name="password" class="form-control" placeholder="hunter123!" validate=":3" />
|
||||
<div class="mb-3">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="addon-wrapping"><i class="fa-solid fa-key"></i></span>
|
||||
<input type="password" name="password" class="form-control" placeholder="huunteR!23" aria-label="Username" aria-describedby="addon-wrapping">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -48,7 +59,9 @@
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shadow-lg card border-danger mb-3">
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="shadow-lg card border-danger">
|
||||
<div class="card-header shadow">
|
||||
Social Login
|
||||
</div>
|
||||
@@ -65,7 +78,65 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shadow-lg card mb-3">
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="shadow-lg card">
|
||||
<div class="card-header shadow">
|
||||
<i class="fa-solid fa-mobile-screen"></i>
|
||||
Login with a Code
|
||||
</div>
|
||||
<div class="card-header shadow actionMessage" style="display:none"></div>
|
||||
<div class="card-body">
|
||||
<form id="otpStep1" action="auth/otp/request" onsubmit="formAJAX(this)" evalAJAX="
|
||||
$('#otpVerifyLogin').val(formData.login);
|
||||
$('#otpSentMsg').text('Code sent via ' + data.method + '. Expires at ' + new Date(data.expires_at).toLocaleTimeString() + '.');
|
||||
$('#otpStep1').hide();
|
||||
$('#otpStep2').show();
|
||||
setTimeout(function(){ $('#otpCode').focus(); }, 100);
|
||||
">
|
||||
<input type="hidden" name="method" id="otpMethodInput" value="email">
|
||||
<div class="mb-3">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="fa-solid fa-user-tie"></i></span>
|
||||
<input type="text" name="login" class="form-control" placeholder="username or email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="btn-group w-100" role="group">
|
||||
<button type="button" id="otpMethodEmail" class="btn btn-secondary active" onclick="setOtpMethod('email')">
|
||||
<i class="fa-solid fa-envelope"></i> Email
|
||||
</button>
|
||||
<button type="button" id="otpMethodSms" class="btn btn-outline-secondary" onclick="setOtpMethod('sms')">
|
||||
<i class="fa-solid fa-mobile-screen"></i> SMS
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-outline-dark">
|
||||
<i class="fa-solid fa-paper-plane"></i> Send Code
|
||||
</button>
|
||||
</form>
|
||||
<form id="otpStep2" action="auth/otp/verify" onsubmit="formAJAX(this)" style="display:none" evalAJAX="
|
||||
app.auth.setToken(data.token);
|
||||
app.auth.logInRedirect();
|
||||
">
|
||||
<input type="hidden" name="login" id="otpVerifyLogin">
|
||||
<p class="text-muted small mb-3" id="otpSentMsg"></p>
|
||||
<div class="mb-3">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="fa-solid fa-hashtag"></i></span>
|
||||
<input type="text" name="code" id="otpCode" class="form-control" placeholder="123456" maxlength="6" inputmode="numeric" autocomplete="one-time-code">
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-outline-dark me-2">
|
||||
<i class="fa-solid fa-check"></i> Verify
|
||||
</button>
|
||||
<button type="button" class="btn btn-link btn-sm text-muted" onclick="resetOtpForm()">Start over</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="shadow-lg card">
|
||||
<div class="card-header shadow">
|
||||
Password Reset
|
||||
</div>
|
||||
@@ -81,13 +152,11 @@
|
||||
<form action="auth/resetpassword" onsubmit="formAJAX(this)">
|
||||
<input type="hidden" name="redirect" value="<%= redirect %>">
|
||||
|
||||
<div class="form-group">
|
||||
<label class="control-label">Email</label>
|
||||
<div class="input-group mb-3 shadow">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" ><i class="fad fa-at"></i></span>
|
||||
</div>
|
||||
<input type="email" name="mail" class="form-control" placeholder="jsmith@gmail.com" validate="email:3" />
|
||||
<div class="mb-3">
|
||||
<label></label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="addon-wrapping"><i class="fad fa-at"></i></span>
|
||||
<input type="text" name="mail" class="form-control" placeholder="jsmith" aria-label="Email" aria-describedby="addon-wrapping">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user