|
|
@@ -0,0 +1,256 @@
|
|
|
+<ion-header [translucent]="true">
|
|
|
+ <ion-toolbar>
|
|
|
+ <ion-title>login</ion-title>
|
|
|
+ </ion-toolbar>
|
|
|
+</ion-header>
|
|
|
+
|
|
|
+<!-- <ion-content [fullscreen]="true">
|
|
|
+ <ion-header collapse="condense">
|
|
|
+ <ion-toolbar>
|
|
|
+ <ion-title size="large">login</ion-title>
|
|
|
+ </ion-toolbar>
|
|
|
+ </ion-header>
|
|
|
+</ion-content> -->
|
|
|
+
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>登录页</title>
|
|
|
+ <link rel="stylesheet" href="login.page.scss">
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <section>
|
|
|
+ <div class=" login-box active">
|
|
|
+ <div class="login-form">
|
|
|
+ <form action="">
|
|
|
+ <h2>Login</h2>
|
|
|
+ <div class="inputbox">
|
|
|
+ <ion-icon name="person-outline"></ion-icon>
|
|
|
+ <input type="text" id="login-user" required>
|
|
|
+ <label for="">Username</label>
|
|
|
+ </div>
|
|
|
+ <div class="inputbox">
|
|
|
+ <ion-icon name="lock-closed-outline"></ion-icon>
|
|
|
+ <input type="password" id="login-pass" required>
|
|
|
+ <label for="">Password</label>
|
|
|
+ </div>
|
|
|
+ <div class="forget">
|
|
|
+ <label for="remember-me">
|
|
|
+ <input type="checkbox" id="remember-me">Remember Me
|
|
|
+ <a href="#" onclick="goBox('forget')">Forget Password</a>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <button class="loginBtn" onclick="doLogin()">Log In</button>
|
|
|
+ <div class="link">
|
|
|
+ <p>Don't have a account
|
|
|
+ <a href="#" onclick="goBox('register')">register</a>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="register-box">
|
|
|
+ <div class="register-form">
|
|
|
+ <form action="" id="register-form">
|
|
|
+ <h2>Register</h2>
|
|
|
+ <div class="inputbox">
|
|
|
+ <ion-icon name="person-outline"></ion-icon>
|
|
|
+ <input type="text" id="register-user" required>
|
|
|
+ <label for="">Username</label>
|
|
|
+ </div>
|
|
|
+ <div class="inputbox">
|
|
|
+ <ion-icon name="mail-outline"></ion-icon>
|
|
|
+ <input type="email" id="register-email" required>
|
|
|
+ <label for="">Email</label>
|
|
|
+ </div>
|
|
|
+ <div class="inputbox" style="width: 200px;">
|
|
|
+ <ion-icon name="shield-checkmark-outline"></ion-icon>
|
|
|
+ <input type="text" id="register-code" required>
|
|
|
+ <label for="">Enter Captcha</label>
|
|
|
+ <button onclick="sendCode()">Send Code</button>
|
|
|
+ </div>
|
|
|
+ <div class="inputbox">
|
|
|
+ <ion-icon name="lock-closed-outline"></ion-icon>
|
|
|
+ <input type="password" id="register-pass" required>
|
|
|
+ <label for="">Password</label>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button class="registerBtn" onclick="doRegister()">Register</button>
|
|
|
+ <div class="link">
|
|
|
+ <p>Have a account
|
|
|
+ <a href="#" onclick="goBox('login')">login</a>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="forget-box">
|
|
|
+ <div class="forget-form">
|
|
|
+ <form action="" id="forget-form">
|
|
|
+ <h2>Find Password</h2>
|
|
|
+ <div class="inputbox">
|
|
|
+ <ion-icon name="mail-outline"></ion-icon>
|
|
|
+ <input type="email" id="forget-email" required>
|
|
|
+ <label for="">Email</label>
|
|
|
+ </div>
|
|
|
+ <div class="inputbox" style="width: 200px;">
|
|
|
+ <ion-icon name="shield-checkmark-outline"></ion-icon>
|
|
|
+ <input type="text" id="forget-code" required>
|
|
|
+ <label for="">Enter Captcha</label>
|
|
|
+ <button onclick="sendCode()">Send Code</button>
|
|
|
+ </div>
|
|
|
+ <div class="inputbox">
|
|
|
+ <ion-icon name="lock-closed-outline"></ion-icon>
|
|
|
+ <input type="password" id="forget-pass" required>
|
|
|
+ <label for="">New Password</label>
|
|
|
+ </div>
|
|
|
+ <button class="registerBtn" onclick="doUpdate()">Update</button>
|
|
|
+ <div class="link">
|
|
|
+ <p>Have a account
|
|
|
+ <a href="#" onclick="goBox('login')">login</a>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
|
|
|
+ <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
|
|
|
+ <script>
|
|
|
+
|
|
|
+ document.addEventListener('DOMContentLoaded', function () {
|
|
|
+ // 检查本地存储中的“Remember Me”状态，更新复选框
|
|
|
+ let rememberMeCheckbox = document.getElementById('remember-me');
|
|
|
+
|
|
|
+ if (localStorage.getItem('rememberMe') === 'true') {
|
|
|
+ rememberMeCheckbox.checked = true;
|
|
|
+
|
|
|
+ let user = JSON.parse(localStorage.getItem('user'))
|
|
|
+
|
|
|
+ document.getElementById('login-user').value=user.username
|
|
|
+ document.getElementById('login-pass').value=user.password
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 登录事件
|
|
|
+ function doLogin() {
|
|
|
+ const username = document.getElementById('login-user').value
|
|
|
+ const password = document.getElementById('login-pass').value
|
|
|
+ console.log('登录表单：',
|
|
|
+ {
|
|
|
+ username: username,
|
|
|
+ password: password
|
|
|
+ });
|
|
|
+ if (username === 'sa' && password === '123') {
|
|
|
+
|
|
|
+ alert('Login Success!!!')
|
|
|
+
|
|
|
+ const rememberMeCheckBox = document.getElementById('remember-me')
|
|
|
+ if (rememberMeCheckBox.checked) {
|
|
|
+ localStorage.setItem('rememberMe', 'true')
|
|
|
+
|
|
|
+ const userObj = { username: username, password: password };
|
|
|
+ const userStr = JSON.stringify(userObj);
|
|
|
+ localStorage.setItem('user', userStr);
|
|
|
+ } else {
|
|
|
+ localStorage.removeItem('rememberMe')
|
|
|
+ localStorage.removeItem('user')
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ } else {
|
|
|
+ alert('Login Fail!!!')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 注册事件
|
|
|
+ function doRegister() {
|
|
|
+ const username = document.getElementById('register-user').value
|
|
|
+ const email = document.getElementById('register-email').value
|
|
|
+ const code = document.getElementById('register-code').value
|
|
|
+ const password = document.getElementById('register-pass').value
|
|
|
+
|
|
|
+
|
|
|
+ console.log('注册表单：',
|
|
|
+ {
|
|
|
+ username: username,
|
|
|
+ email: email,
|
|
|
+ code: code,
|
|
|
+ password: password
|
|
|
+ });
|
|
|
+
|
|
|
+ if (username && email && code && password) {
|
|
|
+ alert('Register Success!!!');
|
|
|
+
|
|
|
+
|
|
|
+ // 清空表单内容
|
|
|
+ document.getElementById('register-user').value = '';
|
|
|
+ document.getElementById('register-email').value = '';
|
|
|
+ document.getElementById('register-code').value = '';
|
|
|
+ document.getElementById('register-pass').value = '';
|
|
|
+
|
|
|
+ // 切换到登录表单
|
|
|
+ goBox();
|
|
|
+ } else {
|
|
|
+ alert('Register Fail!!!');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 找回密码事件
|
|
|
+ function doUpdate() {
|
|
|
+ const email = document.getElementById('forget-email').value
|
|
|
+ const code = document.getElementById('forget-code').value
|
|
|
+ const password = document.getElementById('forget-pass').value
|
|
|
+
|
|
|
+
|
|
|
+ console.log('更新密码表单',
|
|
|
+ {
|
|
|
+ email: email,
|
|
|
+ code: code,
|
|
|
+ password: password
|
|
|
+ });
|
|
|
+
|
|
|
+ if (email && code && password) {
|
|
|
+ alert('UUpdate Success!!!');
|
|
|
+
|
|
|
+
|
|
|
+ // 清空表单内容
|
|
|
+ document.getElementById('forget-email').value = '';
|
|
|
+ document.getElementById('forget-code').value = '';
|
|
|
+ document.getElementById('forget-pass').value = '';
|
|
|
+
|
|
|
+ // 切换到登录表单
|
|
|
+ goBox();
|
|
|
+ } else {
|
|
|
+ alert('Update Fail!!!');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 切换登录注册表单
|
|
|
+ function goBox(type) {
|
|
|
+ let loginForm = document.querySelector('.login-box');
|
|
|
+ let registerForm = document.querySelector('.register-box');
|
|
|
+ let forgetPasswordForm = document.querySelector('.forget-box');
|
|
|
+
|
|
|
+ // 首先隐藏所有表单
|
|
|
+ loginForm.classList.remove('active');
|
|
|
+ registerForm.classList.remove('active');
|
|
|
+ forgetPasswordForm.classList.remove('active');
|
|
|
+
|
|
|
+ // 根据目标显示对应的表单
|
|
|
+ if (type === 'register') {
|
|
|
+ registerForm.classList.add('active');
|
|
|
+ } else if (type === 'forget') {
|
|
|
+ forgetPasswordForm.classList.add('active');
|
|
|
+ } else {
|
|
|
+ loginForm.classList.add('active');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
