mirror of
https://github.com/renbaoshuo/S2OJ.git
synced 2024-11-08 14:48:41 +00:00
refactor: login page with bs5
This commit is contained in:
parent
cad5bb9a44
commit
b737505f3f
GPG Key ID:
00CB9680AB29F51A
@ -51,41 +51,61 @@
|
||||
}
|
||||
?>
|
||||
<?php
|
||||
$REQUIRE_LIB['bootstrap5'] = '';
|
||||
$REQUIRE_LIB['md5'] = '';
|
||||
?>
|
||||
<?php echoUOJPageHeader(UOJLocale::get('login')) ?>
|
||||
<h2 class="page-header"><?= UOJLocale::get('login') ?></h2>
|
||||
<form id="form-login" class="form-horizontal" method="post">
|
||||
<div id="div-username" class="form-group">
|
||||
<label for="input-username" class="col-sm-2 control-label"><?= UOJLocale::get('username') ?></label>
|
||||
<div class="col-sm-3">
|
||||
<input type="text" class="form-control" id="input-username" name="username" placeholder="<?= UOJLocale::get('enter your username') ?>" maxlength="20" />
|
||||
<span class="help-block" id="help-username"></span>
|
||||
|
||||
<style>
|
||||
.login-container {
|
||||
max-width: 400px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.login-input-group-item {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<main class="login-container mx-auto w-100 text-center">
|
||||
<form id="form-login" method="post">
|
||||
<img class="mb-4" src="<?= HTML::url('/images/sjzez.png') ?>">
|
||||
|
||||
<div class="login-input-group mb-3">
|
||||
<div id="div-username" class="input-group">
|
||||
<div class="form-floating">
|
||||
<input type="text" class="form-control rounded-0 rounded-top login-input-group-item" id="input-username" name="username" placeholder="<?= UOJLocale::get('enter your username') ?>" maxlength="20" />
|
||||
<label for="input-username"><?= UOJLocale::get('username') ?></label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="div-password" class="form-group">
|
||||
<label for="input-password" class="col-sm-2 control-label"><?= UOJLocale::get('password') ?></label>
|
||||
<div class="col-sm-3">
|
||||
<input type="password" class="form-control" id="input-password" name="password" placeholder="<?= UOJLocale::get('enter your password') ?>" maxlength="20" />
|
||||
<span class="help-block" id="help-password"></span>
|
||||
|
||||
<div id="div-password" class="input-group">
|
||||
<div class="form-floating">
|
||||
<input type="password" class="form-control rounded-0 login-input-group-item" id="input-password" name="password" placeholder="<?= UOJLocale::get('enter your password') ?>" maxlength="20" />
|
||||
<label for="input-password"><?= UOJLocale::get('password') ?></label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="div-captcha" class="form-group">
|
||||
<label for="input-captcha" class="col-sm-2 control-label"><?= UOJLocale::get('verification code') ?></label>
|
||||
<div class="col-sm-3" style="max-width: 60%">
|
||||
<input type="text" class="form-control" id="input-captcha" name="captcha" placeholder="<?= UOJLocale::get('enter verification code') ?>" maxlength="20" style="display: inline-block; width: 12em;" />
|
||||
<div style="display: inline-block; margin-left: 8px; position: relative; top: -2px; cursor: pointer;">
|
||||
<img id="captcha" src="" />
|
||||
|
||||
<div id="div-captcha" class="input-group">
|
||||
<div class="form-floating">
|
||||
<input type="text" class="form-control rounded-0" style="border-bottom-left-radius: var(--bs-border-radius) !important" id="input-captcha" name="captcha" placeholder="<?= UOJLocale::get('enter verification code') ?>" maxlength="20" />
|
||||
<label for="input-captcha"><?= UOJLocale::get('verification code') ?></label>
|
||||
</div>
|
||||
<span class="help-block" id="help-captcha" style="display: block"></span>
|
||||
<span class="input-group-text p-0 overflow-hidden rounded-0" style="border-bottom-right-radius: var(--bs-border-radius) !important">
|
||||
<img id="captcha" class="col w-100 h-100" src="/captcha">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-offset-2 col-sm-3">
|
||||
<button type="submit" id="button-submit" class="btn btn-secondary"><?= UOJLocale::get('submit') ?></button>
|
||||
</div>
|
||||
|
||||
<div class="text-danger">
|
||||
<span id="help-username"></span>
|
||||
<span id="help-password"></span>
|
||||
<span id="help-captcha"></span>
|
||||
</div>
|
||||
|
||||
<button type="submit" id="button-submit" class="mt-4 w-100 btn btn-lg btn-primary"><?= UOJLocale::get('login') ?></button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<script type="text/javascript">
|
||||
function validateLoginPost() {
|
||||
@ -112,12 +132,9 @@ function submitLoginPost() {
|
||||
password : md5($('#input-password').val(), "<?= getPasswordClientSalt() ?>"),
|
||||
captcha: $('#input-captcha').val(),
|
||||
}, function(msg) {
|
||||
$('#div-captcha').removeClass('has-error');
|
||||
$('#div-username').removeClass('has-error');
|
||||
$('#div-password').removeClass('has-error');
|
||||
$('#help-captcha').html('');
|
||||
$('#help-username').html('');
|
||||
$('#help-password').html('');
|
||||
$('#div-username, #div-password, #div-captcha').removeClass('has-validation');
|
||||
$('#input-username, #input-password, #input-captcha').removeClass('is-invalid');
|
||||
$('#help-username, #help-passwor, #help-captcha').html('');
|
||||
|
||||
if (msg == 'ok') {
|
||||
var prevUrl = document.referrer;
|
||||
@ -126,21 +143,25 @@ function submitLoginPost() {
|
||||
};
|
||||
window.location.href = prevUrl;
|
||||
} else if (msg == 'bad_captcha') {
|
||||
$('#div-captcha').addClass('has-error');
|
||||
$('#div-captcha').addClass('has-validation');
|
||||
$('#div-captcha > .form-floating, #input-captcha').addClass('is-invalid');
|
||||
$('#help-captcha').html('验证码错误。');
|
||||
refreshCaptcha();
|
||||
} else if (msg == 'banned') {
|
||||
$('#div-username').addClass('has-error');
|
||||
$('#div-username').addClass('has-validation');
|
||||
$('#div-username > .form-floating, #input-username').addClass('is-invalid');
|
||||
$('#help-username').html('该用户已被封停，请联系管理员。');
|
||||
refreshCaptcha();
|
||||
} else if (msg == 'expired') {
|
||||
$('#div-username').addClass('has-error');
|
||||
$('#div-username').addClass('has-validation');
|
||||
$('#div-username > .form-floating, #input-username').addClass('is-invalid');
|
||||
$('#help-username').html('页面会话已过期。');
|
||||
refreshCaptcha();
|
||||
} else {
|
||||
$('#div-username').addClass('has-error');
|
||||
$('#help-username').html('用户名或密码错误。');
|
||||
$('#div-password').addClass('has-error');
|
||||
$('#div-username').addClass('has-validation');
|
||||
$('#div-username > .form-floating, #input-username').addClass('is-invalid');
|
||||
$('#div-password').addClass('has-validation');
|
||||
$('#div-password > .form-floating, #input-password').addClass('is-invalid');
|
||||
$('#help-password').html('用户名或密码错误。<a href="/forgot-password">忘记密码？</a>');
|
||||
refreshCaptcha();
|
||||
}
|
||||
@ -161,4 +182,5 @@ $(document).ready(function() {
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<?php echoUOJPageFooter() ?>
|
||||
|
||||
BIN
web/images/sjzez.png
Normal file
BIN
web/images/sjzez.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
@ -168,11 +168,13 @@ $.fn.uoj_honor = function() {
|
||||
|
||||
function showErrorHelp(name, err) {
|
||||
if (err) {
|
||||
$('#div-' + name).addClass('has-error');
|
||||
$('#div-' + name).addClass(isBootstrap5Page ? 'has-validation' : 'has-error');
|
||||
if (isBootstrap5Page) $('#div-' + name + ' .form-floating, #input-' + name).addClass('is-invalid');
|
||||
$('#help-' + name).text(err);
|
||||
return false;
|
||||
} else {
|
||||
$('#div-' + name).removeClass('has-error');
|
||||
$('#div-' + name).removeClass(isBootstrap5Page ? 'has-validation' : 'has-error');
|
||||
if (isBootstrap5Page) $('#div-' + name+ ' .form-floating, #input-' + name).removeClass('is-invalid');
|
||||
$('#help-' + name).text('');
|
||||
return true;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user