[new feature] Password page

src/client/AdminPage.js

@@ -148,7 +148,7 @@ export default class AdminPage extends Component {
             content = (<div className="admin-section-title"> You are authorized to move/delete files. </div>)
         }else{
             content = (<React.Fragment>
-                        <div className="admin-section-title">Type password to move/delete file </div>
+                        <div className="admin-section-title">Enter password to move/delete file </div>
                         <div className="admin-section-content">
                         <input className="admin-intput" ref={pathInput => this.passwordInputRef = pathInput}
                                     placeholder="...type here"  onChange={this.setPasswordCookie.bind(this)}/>

src/client/App.js

@@ -13,6 +13,8 @@ import screenfull from 'screenfull';
 const clientUtil = require("./clientUtil");
 const { getSearchInputText } = clientUtil;
 import { ToastContainer } from 'react-toastify';
+import ReactDOM from 'react-dom';
+import Cookie from "js-cookie";
 import 'react-toastify/dist/ReactToastify.css';
 
 // http://localhost:3000/
@@ -102,8 +104,40 @@ class App extends Component {
         // You can also log the error to an error reporting service
         console.error(error, info);
     }
+
+    getPasswordInput(){
+        const pathInput = ReactDOM.findDOMNode(this.passwordInputRef);
+        const text = (pathInput && pathInput.value) || "";
+        return text;
+    }
+
+    setPasswordCookie(){
+        const text = this.getPasswordInput();
+        Cookie.set("home-password", text, { expires: 3 });
+        this.forceUpdate();
+    }
+
+    renderPasswordInput(){
+        let content = (<React.Fragment>
+                        <div className="admin-section-title">Enter password to use Shigureader</div>
+                        <div className="admin-section-content">
+                        <input className="admin-intput" ref={pathInput => this.passwordInputRef = pathInput}
+                                    placeholder="...type here"  onChange={this.setPasswordCookie.bind(this)}/>
+                        </div>
+                        </React.Fragment>);
+
+        return (
+            <div className="home-admin-section">
+                {content}
+            </div>
+        )
+    }
 
     render() {
+        if(!clientUtil.isAllowedToEnter()){
+            return this.renderPasswordInput();
+        }
+
         // document.title = this.getWebTitle();
         if(this.searchText){
             const path = clientUtil.getSearhLink(this.searchText);

src/client/clientUtil.js

@@ -80,6 +80,17 @@ module.exports.isAuthorized = function(){
     }
 }
 
+module.exports.isAllowedToEnter = function(){
+    const userConfig = require('@config/user-config');
+    if(!userConfig.home_password){
+        return true;
+    }
+
+    const Cookie = require("js-cookie");
+    const password =  Cookie.get('home-password');
+    return userConfig.home_password === password;
+}
+
 // module.exports.cleanSearchStr = function(str){
 //     // search/ケマオ9% will break everything
 //     // it is too troublesome to do everything in url encoding 

src/client/style/App.scss

@@ -129,4 +129,15 @@ a {
      }
     }
   }
+}
+
+//https://stackoverflow.com/questions/31217268/center-div-on-the-middle-of-screen
+.home-admin-section{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -50px;
+  margin-left: -50px;
+  width: 300px;
+  height: 200px;
 }

src/config/user-config.js

@@ -101,4 +101,10 @@ module.exports.img_reduce_resolution_dimension = "2800x2800";
 //But this may cause more Memory usage
 //可以阅读文件夹的图片，就不需要打包成zip
 //但可能用很多内存
-module.exports.view_img_folder = true;
+module.exports.view_img_folder = true;
+
+
+//global password
+//when set, user need to enter password to use ShiguReader
+//全局密码，设置以后用户必须输入密码才能打开网站
+module.exports.home_password = ""