0210071 4 luni în urmă
părinte
comite
3d9790cceb

+ 23 - 19
src/app/app-routing.module.ts

@@ -1,20 +1,24 @@
-import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
-
-const routes: Routes = [
-  {
-    path: '',
-    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
-  },
-  {
-    path: 'new-page',
-    loadChildren: () => import('./new-page/new-page.module').then( m => m.NewPagePageModule)
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
+  },
+  {
+    path: 'new-page',
+    loadChildren: () => import('./new-page/new-page.module').then( m => m.NewPagePageModule)
+  },
  {
+    path: 'login',
+    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
   }
-];
-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
-  ],
-  exports: [RouterModule]
-})
-export class AppRoutingModule {}
+
+];
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

+ 17 - 0
src/app/login/login-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { LoginPage } from './login.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: LoginPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class LoginPageRoutingModule {}

+ 20 - 0
src/app/login/login.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { LoginPageRoutingModule } from './login-routing.module';
+
+import { LoginPage } from './login.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    LoginPageRoutingModule
+  ],
+  declarations: [LoginPage]
+})
+export class LoginPageModule {}

+ 256 - 0
src/app/login/login.page.html

@@ -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>
+ 

+ 232 - 0
src/app/login/login.page.scss

@@ -0,0 +1,232 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+ 
+section {
+    min-height: 100vh;
+    width: 100%;
+    background: url(../../assets/img/bg.jpg) no-repeat;
+    background-position: center;
+    background-size: cover;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    position: relative;
+}
+ 
+.login-box,
+.register-box,
+.forget-box {
+    width: 400px;
+    height: 400px;
+    position: absolute;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateX(50%);
+    -webkit-transform: translateX(50%);
+    -moz-transform: translateX(50%);
+    -ms-transform: translateX(50%);
+    -o-transform: translateX(50%);
+    transition: all 1s ease-in-out;
+    -webkit-transition: all 1s ease-in-out;
+    -moz-transition: all 1s ease-in-out;
+    -ms-transition: all 1s ease-in-out;
+    -o-transition: all 1s ease-in-out;
+}
+ 
+.register-box {
+    height: 550px;
+}
+ 
+ 
+.active {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(0);
+    -webkit-transform: translateX(0);
+    -moz-transform: translateX(0);
+    -ms-transform: translateX(0);
+    -o-transform: translateX(0);
+}
+ 
+.login-form,
+.register-form,
+.forget-form {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 400px;
+    height: 450px;
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    backdrop-filter: blur(15px);
+    border-radius: 20px;
+    -webkit-border-radius: 20px;
+    -moz-border-radius: 20px;
+    -ms-border-radius: 20px;
+    -o-border-radius: 20px;
+}
+ 
+.register-form {
+    height: 550px;
+    padding: 30px 0 0 0;
+}
+ 
+.forget-form{
+    
+    padding: 30px 0 0 0;
+}
+ 
+ 
+h2 {
+    font-size: 2em;
+    color: #fff;
+    text-align: center;
+}
+ 
+.inputbox {
+    position: relative;
+    margin: 30px 0;
+    width: 310px;
+    border-bottom: 2px solid #fff;
+ 
+    button{
+        position: absolute;
+        right: -110px;
+        top: 8px;
+        width: 100px;
+        height: 40px;
+        font-size: 1em;
+        border-radius: 5px;
+        background:transparent;
+        border: 1px solid #fff;
+        color: #fff;
+        -webkit-border-radius: 5px;
+        -moz-border-radius: 5px;
+        -ms-border-radius: 5px;
+        -o-border-radius: 5px;
+ 
+        &:hover{
+            transform: translateY(-10%);
+            -webkit-transform: translateY(-10%);
+            -moz-transform: translateY(-10%);
+            -ms-transform: translateY(-10%);
+            -o-transform: translateY(-10%);
+            transition: all 0.3s ease-in-out;
+            -webkit-transition: all 0.3s ease-in-out;
+            -moz-transition: all 0.3s ease-in-out;
+            -ms-transition: all 0.3s ease-in-out;
+            -o-transition: all 0.3s ease-in-out;
+            box-shadow: 0px 3px 8px -3px #fff;
+            
+}
+}
+}
+ 
+.inputbox label {
+    position: absolute;
+    top: 50%;
+    left: 5px;
+    color: #fff;
+    font-size: 1em;
+    pointer-events: none;
+    transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    -o-transform: translateY(-50%);
+    transition: .5s;
+    -webkit-transition: .5s;
+    -moz-transition: .5s;
+    -ms-transition: .5s;
+    -o-transition: .5s;
+}
+ 
+input:focus~label,
+input:valid~label {
+    top: -5px;
+}
+ 
+.inputbox input {
+    width: 100%;
+    height: 50px;
+    background: transparent;
+    border: none;
+    outline: none;
+    font-size: 1em;
+    padding: 0 35px 0 5px;
+    color: #fff;
+}
+ 
+.inputbox ion-icon {
+    position: absolute;
+    right: 8px;
+    color: #fff;
+    font-size: 1.2em;
+    top: 20px;
+}
+ 
+.forget {
+    margin: -15px 0 35px;
+    font-size: .9em;
+    color: #fff;
+ 
+    label {
+        input {
+            margin-right: 3px;
+            color: #fff;
+        }
+ 
+        a {
+            margin-left: 5px;
+            font-size: .9em;
+            color: #fff;
+            text-decoration: none;
+            font-weight: 700;
+            float: right;
+ 
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+}
+ 
+.loginBtn,
+.registerBtn {
+    width: 100%;
+    height: 40px;
+    border-radius: 40px;
+    -webkit-border-radius: 40px;
+    -moz-border-radius: 40px;
+    -ms-border-radius: 40px;
+    -o-border-radius: 40px;
+    background: #fff;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    font-size: 1em;
+    font-weight: 700;
+}
+ 
+.link {
+    font-size: .9em;
+    color: #fff;
+    text-align: center;
+    margin: 25px 0 10px;
+ 
+    a {
+        text-decoration: none;
+        color: #fff;
+        font-weight: 600;
+        font-size: .9em;
+        margin-left: 5px;
+ 
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}

+ 17 - 0
src/app/login/login.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { LoginPage } from './login.page';
+
+describe('LoginPage', () => {
+  let component: LoginPage;
+  let fixture: ComponentFixture<LoginPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

+ 15 - 0
src/app/login/login.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.page.html',
+  styleUrls: ['./login.page.scss'],
+})
+export class LoginPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

+ 6 - 33
src/app/tab3/tab3.page.ts

@@ -1,36 +1,7 @@
-// import { Component } from '@angular/core';
 
-// @Component({
-//   selector: 'app-tab3',
-//   templateUrl: 'tab3.page.html',
-//   styleUrls: ['tab3.page.scss']
-// })
-// export class Tab3Page {
-
-//   constructor() {}
-
-//   editProfile() {
-//     this.navCtrl.navigateForward('/edit-profile');
-//   }
-
-//   viewInheritance() {
-//     // 查看数字遗产信息的逻辑
-//   }
-
-//   manageSecurity() {
-//     // 管理安全与隐私设置的逻辑
-//   }
-
-//   getHelp() {
-//     // 获取帮助与支持的逻辑
-//   }
-
-//   customizeSettings() {
-//     // 定制个性化设置的逻辑
-//   }
-// }
 import { Router } from '@angular/router';
 import { Component } from '@angular/core';
+import { NavController } from '@ionic/angular';
 
 @Component({
   selector: 'app-tab3',
@@ -44,6 +15,10 @@ export class Tab3Page {
   editProfile() {
     this.router.navigate(['/new-page']);
   }
+  openDigitalEstateAccount() {
+    // 开通数字遗产账户的逻辑
+    this.router.navigate(['/login']);
+  }
 
   viewInheritance() {
         // 查看数字遗产信息的逻辑
@@ -65,9 +40,7 @@ export class Tab3Page {
         // 成为黄金会员的逻辑
       }
     
-      openDigitalEstateAccount() {
-        // 开通数字遗产账户的逻辑
-      }
+
 
   
 }

BIN
src/assets/img/bg.jpg