baoshuo/S2OJ
baoshuo/S2OJ
1
1
Fork 0
mirror of https://github.com/renbaoshuo/S2OJ.git synced 2024-11-22 18:08:42 +00:00
Code Issues Actions Packages Releases Activity

refactor: login page with bs5

Browse Source
This commit is contained in:
Baoshuo Ren 2022-10-07 16:47:52 +08:00
parent cad5bb9a44
commit b737505f3f
Signed by: baoshuo
GPG Key ID: 00CB9680AB29F51A
3 changed files with 71 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
web/app/controllers/login.php
View File

@ -5,7 +5,7 @@
if (Auth::check()) { if (Auth::check()) {
redirectTo('/'); redirectTo('/');
} }
function handleLoginPost() { function handleLoginPost() {
if (!crsf_check()) { if (!crsf_check()) {
return 'expired'; return 'expired';
@ -51,41 +51,61 @@
} }
?> ?>
<?php <?php
$REQUIRE_LIB['bootstrap5'] = '';
$REQUIRE_LIB['md5'] = ''; $REQUIRE_LIB['md5'] = '';
?> ?>
<?php echoUOJPageHeader(UOJLocale::get('login')) ?> <?php echoUOJPageHeader(UOJLocale::get('login')) ?>
<h2 class="page-header"><?= UOJLocale::get('login') ?></h2>
<form id="form-login" class="form-horizontal" method="post"> <style>
<div id="div-username" class="form-group"> .login-container {
<label for="input-username" class="col-sm-2 control-label"><?= UOJLocale::get('username') ?></label> max-width: 400px;
<div class="col-sm-3"> padding: 15px;
<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>
</div> .login-input-group-item {
</div> margin-bottom: -1px;
<div id="div-password" class="form-group"> }
<label for="input-password" class="col-sm-2 control-label"><?= UOJLocale::get('password') ?></label> </style>
<div class="col-sm-3">
<input type="password" class="form-control" id="input-password" name="password" placeholder="<?= UOJLocale::get('enter your password') ?>" maxlength="20" /> <main class="login-container mx-auto w-100 text-center">
<span class="help-block" id="help-password"></span> <form id="form-login" method="post">
</div> <img class="mb-4" src="<?= HTML::url('/images/sjzez.png') ?>">
</div>
<div id="div-captcha" class="form-group"> <div class="login-input-group mb-3">
<label for="input-captcha" class="col-sm-2 control-label"><?= UOJLocale::get('verification code') ?></label> <div id="div-username" class="input-group">
<div class="col-sm-3" style="max-width: 60%"> <div class="form-floating">
<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;" /> <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" />
<div style="display: inline-block; margin-left: 8px; position: relative; top: -2px; cursor: pointer;"> <label for="input-username"><?= UOJLocale::get('username') ?></label>
<img id="captcha" src="" /> </div>
</div> </div>
<span class="help-block" id="help-captcha" style="display: block"></span>
</div> <div id="div-password" class="input-group">
</div> <div class="form-floating">
<div class="form-group"> <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" />
<div class="col-sm-offset-2 col-sm-3"> <label for="input-password"><?= UOJLocale::get('password') ?></label>
<button type="submit" id="button-submit" class="btn btn-secondary"><?= UOJLocale::get('submit') ?></button> </div>
</div> </div>
</div>
</form> <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="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="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"> <script type="text/javascript">
function validateLoginPost() { function validateLoginPost() {
@ -112,12 +132,9 @@ function submitLoginPost() {
password : md5($('#input-password').val(), "<?= getPasswordClientSalt() ?>"), password : md5($('#input-password').val(), "<?= getPasswordClientSalt() ?>"),
captcha: $('#input-captcha').val(), captcha: $('#input-captcha').val(),
}, function(msg) { }, function(msg) {
$('#div-captcha').removeClass('has-error'); $('#div-username, #div-password, #div-captcha').removeClass('has-validation');
$('#div-username').removeClass('has-error'); $('#input-username, #input-password, #input-captcha').removeClass('is-invalid');
$('#div-password').removeClass('has-error'); $('#help-username, #help-passwor, #help-captcha').html('');
$('#help-captcha').html('');
$('#help-username').html('');
$('#help-password').html('');
if (msg == 'ok') { if (msg == 'ok') {
var prevUrl = document.referrer; var prevUrl = document.referrer;
@ -126,21 +143,25 @@ function submitLoginPost() {
}; };
window.location.href = prevUrl; window.location.href = prevUrl;
} else if (msg == 'bad_captcha') { } 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('验证码错误。'); $('#help-captcha').html('验证码错误。');
refreshCaptcha(); refreshCaptcha();
} else if (msg == 'banned') { } 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('该用户已被封停，请联系管理员。'); $('#help-username').html('该用户已被封停，请联系管理员。');
refreshCaptcha(); refreshCaptcha();
} else if (msg == 'expired') { } 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('页面会话已过期。'); $('#help-username').html('页面会话已过期。');
refreshCaptcha(); refreshCaptcha();
} else { } else {
$('#div-username').addClass('has-error'); $('#div-username').addClass('has-validation');
$('#help-username').html('用户名或密码错误。'); $('#div-username > .form-floating, #input-username').addClass('is-invalid');
$('#div-password').addClass('has-error'); $('#div-password').addClass('has-validation');
$('#div-password > .form-floating, #input-password').addClass('is-invalid');
$('#help-password').html('用户名或密码错误。<a href="/forgot-password">忘记密码？</a>'); $('#help-password').html('用户名或密码错误。<a href="/forgot-password">忘记密码？</a>');
refreshCaptcha(); refreshCaptcha();
} }
@ -161,4 +182,5 @@ $(document).ready(function() {
}); });
</script> </script>
<?php echoUOJPageFooter() ?> <?php echoUOJPageFooter() ?>

BIN
web/images/sjzez.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

6
web/js/uoj.js
View File

@ -168,11 +168,13 @@ $.fn.uoj_honor = function() {
function showErrorHelp(name, err) { function showErrorHelp(name, err) {
if (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); $('#help-' + name).text(err);
return false; return false;
} else { } 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(''); $('#help-' + name).text('');
return true; return true;
} }