|
|
@@ -20,12 +20,12 @@
|
|
|
<h2>Login</h2>
|
|
|
<div class="inputbox">
|
|
|
<ion-icon name="person-outline"></ion-icon>
|
|
|
- <input type="text" id="login-user" required>
|
|
|
+ <input type="text" id="login-user" required [ngModelOptions]="{standalone: true}" [(ngModel)]="username">
|
|
|
<label for="">Username</label>
|
|
|
</div>
|
|
|
<div class="inputbox">
|
|
|
<ion-icon name="lock-closed-outline"></ion-icon>
|
|
|
- <input type="password" id="login-pass" required>
|
|
|
+ <input type="password" id="login-pass" required [ngModelOptions]="{standalone: true}" [(ngModel)]="password">
|
|
|
<label for="">Password</label>
|
|
|
</div>
|
|
|
<div class="forget">
|
|
|
@@ -34,7 +34,7 @@
|
|
|
<a href="#" onclick="goBox('forget')">Forget Password</a>
|
|
|
</label>
|
|
|
</div>
|
|
|
- <button class="loginBtn" onclick="doLogin()">Log In</button>
|
|
|
+ <button class="loginBtn" (click)="doLogin()">Log In</button>
|
|
|
|
|
|
<div (click)="goRegister()" style="color: white">
|
|
|
<p>Don't have a account</p>
|
|
|
@@ -45,206 +45,7 @@
|
|
|
</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>
|
|
|
+
|
|
|
|
