Skip to content
This repository has been archived by the owner on Nov 2, 2020. It is now read-only.

Commit

Permalink
fix(Auth): Fix layout fo Auth Point
Browse files Browse the repository at this point in the history 
1. Separate captcha image tag as temple utils, add default image
   `captcha_dummy.png` and click action to get real captcha image.
2. Remove `layout/{footer,header}.php`, separate `layout/head.php` in
   new status.
3. Add new layout for visitor `auth/base.php` and fix all templates in
   folder `views/auth`
  • Loading branch information
@Rhilip
Rhilip committed Mar 9, 2019
1 parent 8fa31bc commit 7f36ddf
Show file tree
Hide file tree
Showing 16 changed files with 274 additions and 197 deletions.
16 changes: 16 additions & 0 deletions apps/public/static/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,22 @@ pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;backgrou

body{background-color:#f6f6f6}

.img-rounded{border-radius:6px}

/*-----------------------------------------------------------------------------------*/
/* 2. Auth page with prefix `auth-`
/*-----------------------------------------------------------------------------------*/

.auth-nav{opacity:0.9;align-items:center}
.auth-container{width:100%;margin:0 auto;height:calc(100vh);background-image:url("/static/pic/background_auth.jpg");background-repeat:no-repeat;background-size:cover;background-position:left;position:relative;z-index:1}
.auth-main-panel{border:1px solid #8F8381;border-radius:8px;margin:60px 0 0 100px;width:40%;background:rgba(241,243,244,0.6);min-width:600px;min-height:500px;padding:15px 25px}
.auth-panel{padding:15px}
.auth-form-notify{margin-top:5px;margin-left:110px}
.auth-footer{bottom:0;margin-bottom:0;border-width:1px 0 0;position:fixed;right:0;z-index:1030;padding:10px 40px 10px 20px;background:rgba(241,243,244,0.6)}
.auth-footer-text{opacity:1}
.auth-form{min-height:20px;padding:19px;margin-top:20px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px;box-shadow:inset 0 1px 1px rgba(0,0,0,.05)}
.auth-login-return-msg{margin-top:5px}

/*-----------------------------------------------------------------------------------*/
/* 2. Header, Navigation & Menus
/*-----------------------------------------------------------------------------------*/
Expand Down
2 changes: 1 addition & 1 deletion apps/public/static/js/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
layui.use(['layer', 'form','element'], function(){
;layui.use(['layer', 'form','element'], function(){


});
Binary file added apps/public/static/pic/background_auth.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/public/static/pic/captcha_dummy.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
63 changes: 63 additions & 0 deletions apps/views/auth/base.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<?php
/**
* Created by PhpStorm.
* User: Rhilip
* Date: 2019/3/9
* Time: 9:50
*
* @var League\Plates\Template\Template $this
*/
?>

<!DOCTYPE html>
<html lang="en">

<head>
<?php $this->insert('layout/head'); ?>

<title><?= app()->config->get('base.site_name') ?> :: Authorization Point -- Powered by RidPT</title>

<link rel="stylesheet" href="/lib/layui/src/css/layui.css"> <?php /** https://www.layui.com/doc/ */ ?>

<!-- Custom stlylesheet -->
<link rel="stylesheet" href="/static/css/main.css?<?= time() // FIXME For debug ?>"/>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="/lib/html5shiv/dist/html5shiv.min.js"></script>
<script src="/lib/respond/dest/respond.min.js"></script>
<![endif]-->
</head>

<body>

<div class="auth-container">
<div class="layui-row auth-nav" id="auth-nav" align="center">
<ul class="layui-nav">
<li class="layui-nav-item<?= /** @noinspection PhpUndefinedMethodInspection */ $this->uri('/auth/login', ' layui-this'); ?>"><!--suppress HtmlUnknownTarget --><a href="/auth/login">Authenticate</a></li>
<li class="layui-nav-item<?= /** @noinspection PhpUndefinedMethodInspection */ $this->uri('/auth/register', ' layui-this'); ?>"><!--suppress HtmlUnknownTarget --><a href="/auth/register">Recruit</a></li>
</ul>
</div>
<div class="layui-row auth-body" id="auth-body">
<div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
<div class="auth-main-panel" id="auth-main-panel">
<div class="auth-panel">
<?= $this->section('panel') ?> <!-- Panel Content -->
</div>
</div>
</div>
</div>
<footer class="auth-footer" id="auth-footer">
<!-- The water meter is not here! -->
<p class="auth-footer-text">
CSS3, Javascript and Cookie support are required.<br>
See more Browsers we support on <a href="https://browsehappy.com/" target="_blank">Browse Happy</a>.
</p>
</footer>
</div>

<script src="/lib/layui/src/layui.js"></script>
<script src="/static/js/main.js?<?= time() // FIXME For debug ?>"></script>
</body><!-- This templates was made by Colorlib (https://colorlib.com) -->
</html>
10 changes: 4 additions & 6 deletions apps/views/auth/confirm_success.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,12 @@
*/
?>

<?= $this->layout('layout/base') ?>
<?= $this->layout('auth/base') ?>

<?php $this->start('title') ?>Confirm Success<?php $this->end(); ?>

<?php $this->start('container') ?>
<div class="jumbotron">
<?php $this->start('panel') ?>
<div class="auth-form">
<h1>Your account is success Confirmed.</h1>
<p>Click <a href="/auth/login">Login Page</a> to login</p>
<p>Click <!--suppress HtmlUnknownTarget --><a href="/auth/login">Login Page</a> to login</p>
</div>
<?php $this->end(); ?>

Expand Down
96 changes: 53 additions & 43 deletions apps/views/auth/login.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,54 +6,64 @@
* Time: 19:32
*
* @var League\Plates\Template\Template $this
* @var int $left_attempts
*/
?>

<?= $this->layout('layout/base') ?>
<?= $this->layout('auth/base') ?>

<?php $this->start('title') ?>Login<?php $this->end(); ?>
<?php $this->start('panel') ?>
<h1>Authenticate</h1>

<?php $this->start('container') ?>
<h1>Login</h1>
<form method="post">
<div class="row">
<div class="form-group col-md-4">
<?php if (isset($left_attemps) && $left_attemps < 3): ?>
<div class="form-group">
<p class="bg-danger">Left login attempts: <strong class="text-center"><?= $left_attemps ?></strong></p>
</div>
<?php endif; ?>
<div class="form-group">
<label class="control-label" for="username">Username / Email address</label>
<input autofocus="" class="form-control" id="username" name="username" placeholder="Username" tabindex="1" title="" type="text" value="<?= $username ?? '' ?>">
</div>
<div class="form-group">
<label class="control-label" for="password">Password</label>
<small class="float-right"><a href="/auth/recover">I have forgot my password</a></small>
<input class="form-control" id="password" name="password" tabindex="2" title="" type="password" value="">
</div>
<div class="form-group">
<label class="control-label" for="opt">2FA Code</label>
<input autofocus="" class="form-control" id="opt" name="opt" placeholder="2FA Code" tabindex="3" title="" type="text" value="" maxlength="6">
<small>Your 2FA code, leave it blank if you haven't enable 2FA.</small>
</div>
<div class="form-group">
<label class="control-label" for="captcha">Captcha</label>
<div class="row">
<div class="col-md-6">
<input autofocus="" class="form-control" id="captcha" name="captcha" tabindex="4" title="" type="text" value="" maxlength="6">
</div>
<div class="col-md-6"><img src="/captcha" alt="captcha"></div>
</div>
<small>Case insensitive.</small>
</div>
<?php if (isset($error_msg)): ?>
<div class="form-group">
<p class="bg-danger">Login failed: <strong class="text-center"><?= $error_msg ?></strong></p>
</div>
<?php endif; ?>
<input type="submit" value="Login" class="btn btn-primary" tabindex="4">
<form class="layui-form layui-form-pane auth-form" method="post">
<div class="layui-form-item">
<label class="layui-form-label" for="username"><i class="layui-icon layui-icon-username"></i></label>
<div class="layui-input-block">
<input type="text" class="layui-input" id="username" name="username" required lay-verify="required" placeholder="Username / Email address" title="" value="<?= $username ?? '' ?>">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" for="password"><i class="layui-icon layui-icon-password"></i></label>
<div class="layui-input-block">
<input type="password" class="layui-input" id="password" name="password" required lay-verify="required" placeholder="Password" autocomplete="off">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" for="opt"><i class="layui-icon layui-icon-cellphone"></i></label>
<div class="layui-input-block">
<input type="text" class="layui-input" id="opt" name="opt" placeholder="2FA Code" maxlength="6" autocomplete="off">
</div>
<p class="auth-form-notify">Your 2FA code, leave it blank if you haven't enable 2FA.</p>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label" for="captcha"><i class="layui-icon layui-icon-vercode"></i></label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="captcha" name="captcha" placeholder="Captcha" autocomplete="off" maxlength="6">
</div>
<div class="layui-input-inline" style="width: 150px"><?= $this->insert('layout/captcha') ?></div>
<p class="auth-form-notify">Case insensitive.</p>
</div>
</div>
<div class="layui-form-item" align="center">
<label for="logout"></label><input type="checkbox" name="logout" id="logout" value="yes" title="Auto Logout">
<label for="securelogin"></label><input type="checkbox" name="securelogin" id="securelogin" value="yes" title="Lock Session IP">
<label for="ssl"></label><input type="checkbox" name="ssl" id="ssl" value="yes" title="Enable SSL">
</div>
<hr>

<div class="layui-form-item">
<button type="submit" value="Login" class="layui-btn layui-btn-normal layui-btn-fluid">Login</button>
</div>

<div class="auth-attempts-msg" align="center">
<strong>You have <?= $left_attempts > 3 ? $left_attempts : "<span style='color: #FF5722'>$left_attempts</span>" ?>/<?= app()->config->get('security.max_login_attempts') ?> attempts left, or your IP will be banned.</strong>
</div>

<?php if (isset($error_msg)): ?>
<div class="auth-error-msg">
<p style="color: #FF5722">Login failed: <strong class="text-center"><?= $error_msg ?></strong></p>
</div>
</form>
<?php endif; ?>
</form>
<?php $this->end(); ?>
Loading

0 comments on commit 7f36ddf

Please sign in to comment.