fix(Auth): Fix Broken Auth page after frontend framework change

1. Remove old layui framework in auth page 2. Include a password strength indicator when register 3. Create the ability to make the password visible when login and register 4. Add Frontend library : dropbox/zxcvbn 5. Add Disclaimer in index page
Rhilip · Jun 3, 2019 · 21dca47 · 21dca47
1 parent 3072c39
commit 21dca47
Show file tree

Hide file tree

Showing 19 changed files with 407 additions and 202 deletions.
diff --git a/README.md b/README.md
@@ -145,8 +145,19 @@ So that tracker can record the peer's ip address.
 Some rule or Docs May help you when you rebuild this project,
 Or you can join our chat group on Telegram -- [@ridpt](https://t.me/ridpt)
 
-| Name | Used As | Docs | 
-|:--|:--:|:--:|
+### FrontEnd
+
+| Library | Docs |
+|:--|:--|
+| [Zui](https://github.com/easysoft/zui): an HTML5 front UI framework | http://zui.sexy/ |
+| [FortAwesome](https://github.com/FortAwesome/Font-Awesome): The iconic SVG, font, and CSS toolkit | https://fontawesome.com/icons?d=gallery |
+| [flag-css](https://github.com/7kfpun/flag-css): CSS for SVG country flags respecting the original ratio. | https://kfpun.com/flag-css/ |
+| [zxcvbn](https://github.com/dropbox/zxcvbn): Low-Budget Password Strength Estimation | https://lowe.github.io/tryzxcvbn/ |
+
+### Backend Library
+
+| Library | Used As | Docs | 
+|:--|:--:|:--|
 | [MixPHP](https://github.com/mix-php/mix-framework/tree/v1) | Framework | https://www.kancloud.cn/onanying/mixphp1/379324 ( Chinese Version ) |
 | [siriusphp/validation](https://github.com/siriusphp/validation) | Validator | http://www.sirius.ro/php/sirius/validation/ |
 | [league/plates](https://github.com/thephpleague/plates) | Template system | http://platesphp.com/ |

diff --git a/apps/components/User/User.php b/apps/components/User/User.php
@@ -31,6 +31,7 @@ class User extends Component implements UserInterface
     public function onRequestBefore()
     {
         parent::onRequestBefore();
+        $this->class = 0;
         $this->anonymous = true;
         $this->bookmark_list = null;
     }

diff --git a/apps/components/User/UserTrait.php b/apps/components/User/UserTrait.php
@@ -19,7 +19,7 @@ trait UserTrait
     private $username;
     private $email;
     private $status;
-    private $class;
+    private $class = 0;
 
     private $passkey;
 

diff --git a/apps/models/form/UserRegisterForm.php b/apps/models/form/UserRegisterForm.php
@@ -84,7 +84,8 @@ public static function inputRules()
                 ['Match', ['item' => 'password']]
             ],
             'email' => 'required | email',
-            'accept_tos' => 'required | Equal(value=yes)',
+            'verify_tos' => 'required | Equal(value=yes)',
+            'verify_age' => 'required | Equal(value=yes)',
         ];
     }
 

diff --git a/apps/public/static/css/main.css b/apps/public/static/css/main.css
@@ -23,21 +23,7 @@ body{background-color:#f6f6f6}
 .nowrap {white-space: nowrap;}
 
 /*-----------------------------------------------------------------------------------*/
-/*	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}
-
-/*-----------------------------------------------------------------------------------*/
-/*	3.	Layout of Header, Navigation & Menus
+/*	2.	Layout of Header, Navigation & Menus
 /*-----------------------------------------------------------------------------------*/
 
 /* Top Menu */
@@ -82,12 +68,19 @@ body{background-color:#f6f6f6}
 #footer_menu a:hover{color:#E84807}
 
 /*-----------------------------------------------------------------------------------*/
-/*	4. Page of '/index'
+/*	3. Page of '/auth'
+/*-----------------------------------------------------------------------------------*/
+
+.auth-password-help-btn{position:absolute;top:0;right:0;width:32px;height:32px;padding:0;text-align:center;filter:alpha(opacity=65);outline:0;opacity:.65;z-index:3}
+
+
+/*-----------------------------------------------------------------------------------*/
+/*	3. Page of '/index'
 /*-----------------------------------------------------------------------------------*/
 
 
 /*-----------------------------------------------------------------------------------*/
-/*	4. Page of '/torrent'
+/*	3. Page of '/torrent'
 /*-----------------------------------------------------------------------------------*/
 
 /* Common */

diff --git a/apps/public/static/js/main.js b/apps/public/static/js/main.js
@@ -20,6 +20,14 @@ const ext2Icon = {
     contract: []
 };
 
+const paswordStrengthText = {
+    0: "Worst ☹",  // too guessable: risky password. (guesses < 10^3)
+    1: "Bad ☹",    // too guessable: risky password. (guesses < 10^3)
+    2: "Weak ☹",   // somewhat guessable: protection from unthrottled online attacks. (guesses < 10^8)
+    3: "Good ☺",   // safely unguessable: moderate protection from offline slow-hash scenario. (guesses < 10^10)
+    4: "Strong ☻"  // very unguessable: strong protection from offline slow-hash scenario. (guesses >= 10^10)
+};
+
 function humanFileSize(bytes, fix, si) {
     let thresh = si ? 1000 : 1024;
     if (Math.abs(bytes) < thresh) {
@@ -77,7 +85,19 @@ jQuery(document).ready(function() {
             });
         }
     });
+
+    // Captcha Img Re-flush
+    let captcha_img_another = $('.captcha_img');
+    captcha_img_another.on('click',function () {
+        $(this).attr('src','/captcha?t=' + Date.now())  // Change src to get another captcha image
+            .parent('.captcha_img_load').addClass('load-indicator loading');  // Add loading indicator in parent of img tag
+    });
+    captcha_img_another.on('load',function () {
+        $(this).parent('.captcha_img_load').removeClass('load-indicator loading');
+    });
 
+
+
     // TODO Add Scroll to TOP fixbar
 
 
@@ -92,6 +112,40 @@ jQuery(document).ready(function() {
         return new $.zui.Messager(text, option).show();
     }
 
+    // Password strength checker
+    let password_strength = $('#password_strength');
+    if (password_strength.length > 0) {
+        let strength_text = $('#password_strength_text');
+        let strength_suggest = $('#password_strength_suggest');
+        $('#password').on('input', function () {
+            let val = $(this).val();
+            if (val !== "") {
+                try {
+                    let result = zxcvbn(val);
+                    password_strength.show();
+                    strength_text.html(paswordStrengthText[result.score]);
+                    strength_suggest.html( (result.feedback.warning !== "" ? (result.feedback.warning + "<br>") : "") + result.feedback.suggestions);
+                } catch (e) {
+                }
+            } else {
+                password_strength.hide();
+                strength_suggest.text('');
+            }
+        })
+    }
+
+    $('#password_help_btn').click(function () {
+        let password_input = $(this).prev('input[name="password"]');
+        let help_info = $(this).children('i');
+        let old_type_is_password = password_input.attr('type') === 'password';
+        password_input.attr('type', old_type_is_password ? 'text' : 'password');
+        if (old_type_is_password) {
+            help_info.removeClass('fa-eye').addClass('fa-eye-slash');
+        } else {
+            help_info.removeClass('fa-eye-slash').addClass('fa-eye');
+        }
+    });
+
     // Torrent favour Add/Remove action
     $('.torrent-favour').click(function () {
         let that = $(this);
@@ -164,7 +218,7 @@ jQuery(document).ready(function() {
         $('#torrent_structure div.dictionary,div.list').click(function () {
             $(this).next('ul').toggle();
         });
-    };
+    }
 
     // Show Extend debug info of Database sql execute and Redis key hit
     if (typeof _extend_debug_info !== 'undefined' && _extend_debug_info) {

diff --git a/apps/views/auth/base.php b/apps/views/auth/base.php
@@ -7,6 +7,10 @@
  *
  * @var League\Plates\Template\Template $this
  */
+
+$css_tag = env('APP_DEBUG') ? time() : app()->config->get('base.site_css_update_date');
+$extend_debug_info = app()->config->get('base.enable_extend_debug') &&
+    app()->user->getClass(true) > app()->config->get('authority.see_extend_debug_log');
 ?>
 
 <!DOCTYPE html>
@@ -17,10 +21,16 @@
 
     <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/ */ ?>
+    <!-- styles of Library -->
+    <link rel="stylesheet" href="/lib/flag-css/dist/css/flag-css.min.css">
+    <link rel="stylesheet" href="/lib/fontAwesome/css/all.min.css">
+    <link rel="stylesheet" href="/lib/zui/dist/css/zui.min.css">
+
+    <!-- Custom styles of this template -->
+    <link rel="stylesheet" href="/static/css/main.css?<?= $css_tag ?>">
 
-    <!-- Custom stlylesheet -->
-    <link rel="stylesheet" href="/static/css/main.css?<?= app()->config->get('base.site_css_update_date') ?>"/>
+    <!-- Other Page CSS field -->
+    <?= $this->section('css') ?>
 
     <!-- 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:// -->
@@ -31,33 +41,71 @@
 </head>
 
 <body>
+<script type="text/javascript">const _body_start = new Date();</script>
+<div id="top_menu"></div>
 
-<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 class="container">
+    <header id="header">
+        <div class="row header-top">
+            <div class="span5 logo">
+                <a class="logo-img" href="/"><img src="/static/pic/logo.png" style="width: 135px" alt="Logo"/></a>
+                <p class="tagline"><?= app()->config->get('base.site_description') ?></p>
             </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>
+    </header>
+    <div class="clearfix"></div>
+
+    <nav id="nav" class="navbar navbar-default navbar-static-top navbar-custom" role="navigation">
+        <div class="navbar-header">
+            <a class="navbar-brand" href="#"><?= app()->config->get('base.site_name') ?></a>
+        </div>
+        <div class="collapse navbar-collapse navbar-collapse-custom">
+            <ul class="nav navbar-nav">
+                <li<?= $this->uri('/auth/login', ' class="active"') ?>><!--suppress HtmlUnknownTarget --><a href="/auth/login">Authenticate</a></li>
+                <li<?= $this->uri('/auth/register', ' class="active"'); ?>><!--suppress HtmlUnknownTarget --><a href="/auth/register">Recruit</a></li>
+            </ul> <!-- END .navbar-nav -->
+        </div><!-- END .navbar-collapse -->
+    </nav> <!-- END /nav -->
+    <div class="clearfix"></div>
+
+    <div id="container" class="container main-container">
+        <?= $this->section('container') ?> <!-- Page Content -->
+    </div> <!-- END /container -->
+    <div class="clearfix"></div>
 </div>
 
-<script src="/lib/layui/src/layui.js"></script>
-<script src="/static/js/main.js?<?= app()->config->get('base.site_css_update_date') ?>"></script>
-</body><!-- This templates was made by Colorlib (https://colorlib.com) -->
+<footer id="footer_menu">
+    <div class="container" align="center">
+        <div class="row">
+            <p class="copyright">
+                &copy; <a href="/" target="_self"><?= app()->config->get('base.site_name') ?></a> 2019-2020 Powered by <a href="https://github.com/Rhilip/RidPT">RidPT</a>
+            </p>
+            <p class="debug-info">
+                [ Page created in <b><?= number_format(microtime(true) - app()->request->start_at, 6) ?></b> sec
+                with <b><?= $this->e(memory_get_usage(),'format_bytes') ?></b> ram used,
+                <b><?= count(app()->pdo->getExecuteData()) ?></b> db queries,
+                <b><?= array_sum(app()->redis->getCalledData())?></b> calls of Redis ]
+                <?php if ($extend_debug_info): ?>
+                    <a href="javascript:" id="extend_debug_info"><span class="label label-warning label-outline">Debug info</span></a>
+                    <script>
+                        const _extend_debug_info = true;
+                        const _sql_data = '<?= json_encode(app()->pdo->getExecuteData(), JSON_HEX_APOS) ?>';
+                        const _redis_data = '<?= json_encode(app()->redis->getCalledData(), JSON_HEX_APOS) ?>';
+                    </script>
+                <?php endif; ?>
+            </p>
+        </div>
+    </div>
+</footer>
+
+<!-- Javascript of Library -->
+<script src="/lib/jquery/dist/jquery.min.js"></script>
+<script src="/lib/zui/dist/js/zui.min.js"></script>
+
+<!-- Custom Javascript of this template -->
+<script src="/static/js/main.js?<?= $css_tag ?>"></script>
+
+<!-- Other Page script field -->
+<?= $this->section('script') ?>
+</body>
 </html>
diff --git a/apps/views/auth/confirm_success.php b/apps/views/auth/confirm_success.php
@@ -11,8 +11,8 @@
 
 <?= $this->layout('auth/base') ?>
 
-<?php $this->start('panel') ?>
-<div class="auth-form">
+<?php $this->start('container') ?>
+<div class="jumbotron">
     <h1>Your account is success Confirmed.</h1>
     <p>Click <!--suppress HtmlUnknownTarget --><a href="/auth/login">Login Page</a> to login</p>
 </div>

diff --git a/apps/views/auth/error.php b/apps/views/auth/error.php
@@ -12,11 +12,9 @@
 
 <?= $this->layout('auth/base') ?>
 
-<?php $this->start('panel') ?>
-<div class="auth-form">
-    <div class="jumbotron">
-        <h1>Opps~</h1>
-        <p><?= nl2br($msg) ?></p>
-    </div>
+<?php $this->start('container') ?>
+<div class="jumbotron">
+    <h1>Opps~</h1>
+    <p><?= nl2br($msg) ?></p>
 </div>
 <?php $this->end(); ?>