Node-RED dashboard 制作注册/登录页面

效果：完成用户注册及登录，并实现基础持久登录方法

页面部分：

<div style = "text-align: center;">
        <div style="font-size: 14px; color: #006eff; margin-bottom: 30px; margin-top: 10px;">
            即日起所有用户均需登录，请自行注册账号，推荐使用邮箱前缀
        </div>
        <div id = "Login" class="login_container">
            <h2>登录</h2>
            <form id="loginForm" onsubmit="submitForm(event)">
                <div class="form-group">
                    <label for="username">账号:</label>
                    <input type="text" id="username" name="username" required>
                </div>
                <div class="form-group">
                    <label for="password">密码:</label>
                    <input type="password" id="password" name="password" required>
                </div>
                <div class="form-group">
                    <button type="button" onclick="showRegister()" class="left-button">注册</button>
                    <button type="submit" class="right-button">登录</button>
                </div>
            </form>
        </div>
    
        <div id="register" class="login_container" style="display: none;">
            <h2>注册</h2>
            <form id="registerForm" onsubmit="registerForm(event)">
                <div class="form-group">
                    <label for="username">账号:</label>
                    <span class="error-message">请使用邮箱前缀注册</span>
                    <input type="text" id="registerUsername" name="username" required>
                </div>
                <div class="form-group">
                    <label for="password">密码:</label>
                    <input type="password" id="registerPassword" name="password" required>
                </div>
                <div class="form-group">
                    <label for="confirm_password">确认密码:</label>
                    <span id="passwordError" class="error-message"></span>
                    <input type="password" id="confirmPassword" name="confirm_password" required>
                </div>
                <div class="form-group">
                    <button type="button" onclick="showLogin()" class="left-button">返回登录</button>
                    <button type="submit" class="right-button">注册</button>
                </div>
            </form>
        </div>
    </div>

JS部分：利用localStorage进行基础信息存储，此处可以加入更多的逻辑，来实现复杂的验签方式。

    <script>
        var value = {};
        this.scope.action = function() { return value; }
		devices_list = {};
		(function(scope) {
			scope.$watch('msg', function(msg) {
			    dashboard_toolbar_init()
			    if (msg) {
			        switch (msg.type) {
			            case 'user_exsit':
			                alert('账号已存在')
			                msg.type = ''
			                break;
			            case 'user_success':
			                alert('注册成功')
			                msg.type = ''
			                break;
			            case 'login_err':
			                alert("账号/密码错误");
			                msg.type = ''
			                break;
			            case 'login_success':
			                show_login_info(msg.username)
			                msg.type = ''
			                break;
			            default:
			                break;
			        }
			    }
			});
		})(scope);
        
        function dashboard_toolbar_init() {
            /* 自己想显示的toolbar设计 */
        }
        function usr_exit() {
            var isLoggedIn = localStorage.getItem('isLoggedIn');
            var usrname = localStorage.getItem('usrname');

            if ((isLoggedIn == null) || (isLoggedIn == 'false') || (usrname == null)) {
                return;
            }
            if(confirm("是否确认退出")){
                var login_btn = document.getElementById('login_btn');
                login_btn.innerHTML = '未登录'
                
                localStorage.setItem('isLoggedIn', false);
                localStorage.setItem('usrname', '');
    
                value.type = "Login"
    			value.data = 'null';
    			document.getElementById("save_pb").click();
            }
        }

        function show_login_info(username) {
            var login_btn = document.getElementById('login_btn');
            login_btn.innerHTML = username + ' | 退出'
            localStorage.setItem('isLoggedIn', true);
            localStorage.setItem('usrname', username);
            
            value.type = "go_others"
    		value.data = '首页';
    		document.getElementById("save_pb").click();
        }
        function submitForm(event) {
            event.preventDefault();
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            var login_btn = document.getElementById('login_btn');
            
            value.type = "submitForm"
			value.data = {}
			value.data.usrname = username
			value.data.psswd = password
			document.getElementById("save_pb").click();
        }

        function showRegister() {
            document.getElementById("Login").style.display = "none";
            document.getElementById("register").style.display = "inline-block";
        }

        function showLogin() {
            document.getElementById("register").style.display = "none";
            document.getElementById("Login").style.display = "inline-block";
        }

        function registerForm(event) {
            event.preventDefault();
            var username = document.getElementById("registerUsername").value;
            var password = document.getElementById("registerPassword").value;
            var confirmPassword = document.getElementById("confirmPassword").value;
            
            if (password !== confirmPassword) {
                document.getElementById("passwordError").textContent = "密码不一致";
                return;
            } else {
                document.getElementById("passwordError").textContent = "";
                value.type = "registerForm"
    			value.data = {}
    			value.data.usrname = username
    			value.data.psswd = password
    			document.getElementById("save_pb").click();
            }
        }
    </script>

在其他页面可对登录用户及状态进行检查，未登录则跳转到Login页面，登录则显示用户名

function check_usr_login_status() {
            var isLoggedIn = localStorage.getItem('isLoggedIn');
            var usrname = localStorage.getItem('usrname');
    
            if ((isLoggedIn == null) || (isLoggedIn == 'false') || (usrname == null)) {
                value = {}
                value.type = "Login"
    			value.data = 'null';
    			document.getElementById("save_pb").click();
            } else {
                /*set toolbar name*/
                g_login_usrname = usrname
            }
        }