From 1f5a3e7d932c6f266168f370f9efb0e7cae07508 Mon Sep 17 00:00:00 2001 From: nhphuc2411 Date: Mon, 10 Jul 2023 16:56:43 +0700 Subject: [PATCH 001/146] add profile setting page --- src/app/app-routing.module.ts | 4 ++ .../pages/profile/profile-routing.module.ts | 21 ++++++ .../profile-settings.component.html | 72 +++++++++++++++++++ .../profile-settings.component.scss | 12 ++++ .../profile-settings.component.ts | 32 +++++++++ src/app/pages/profile/profile.component.html | 11 +++ src/app/pages/profile/profile.component.scss | 0 src/app/pages/profile/profile.component.ts | 8 +++ src/app/pages/profile/profile.module.ts | 34 +++++++++ 9 files changed, 194 insertions(+) create mode 100644 src/app/pages/profile/profile-routing.module.ts create mode 100644 src/app/pages/profile/profile-settings/profile-settings.component.html create mode 100644 src/app/pages/profile/profile-settings/profile-settings.component.scss create mode 100644 src/app/pages/profile/profile-settings/profile-settings.component.ts create mode 100644 src/app/pages/profile/profile.component.html create mode 100644 src/app/pages/profile/profile.component.scss create mode 100644 src/app/pages/profile/profile.component.ts create mode 100644 src/app/pages/profile/profile.module.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 7edc77b5a..9aaa3a1e7 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -60,6 +60,10 @@ const routes: Routes = [ path: 'community-pool', loadChildren: () => import('./pages/community-pool/community-pool.module').then((m) => m.CommunityPoolModule), }, + { + path: 'profile', + loadChildren: () => import('./pages/profile/profile.module').then((m) => m.ProfileModule), + }, ], }, { path: 'account', loadChildren: () => import('./pages/account/account.module').then((m) => m.AccountModule) }, diff --git a/src/app/pages/profile/profile-routing.module.ts b/src/app/pages/profile/profile-routing.module.ts new file mode 100644 index 000000000..7827afa70 --- /dev/null +++ b/src/app/pages/profile/profile-routing.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { ProfileComponent } from "./profile.component"; +import { ProfileSettingsComponent } from './profile-settings/profile-settings.component'; + +const routes: Routes = [ + { + path: '', + component: ProfileComponent + }, + { + path: 'profile-settings', + component: ProfileSettingsComponent + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class ProfileRoutingModule { } diff --git a/src/app/pages/profile/profile-settings/profile-settings.component.html b/src/app/pages/profile/profile-settings/profile-settings.component.html new file mode 100644 index 000000000..553e0f7bc --- /dev/null +++ b/src/app/pages/profile/profile-settings/profile-settings.component.html @@ -0,0 +1,72 @@ + +
+ Email + abc@gmail.com +
+
+
+ +
+
+
+ +
+ + + {{ hideOldPassword ? 'visibility_off' : 'visibility' }} + +
+
+
+
+ +
+
+
+ +
+ + + {{ hideNewPassword ? 'visibility_off' : 'visibility' }} + +
+
+
+
+ +
+
+
+ +
+ + + {{ hideConfirmPassword ? 'visibility_off' : 'visibility' }} + +
+
+
+
+ +
+ +
+
+
diff --git a/src/app/pages/profile/profile-settings/profile-settings.component.scss b/src/app/pages/profile/profile-settings/profile-settings.component.scss new file mode 100644 index 000000000..b37273803 --- /dev/null +++ b/src/app/pages/profile/profile-settings/profile-settings.component.scss @@ -0,0 +1,12 @@ +.tab-title { + font-size: 15px; + white-space: nowrap; +} + +.card__title { + font-size: 2.4rem; + line-height: 3.2rem; + font-weight: 500; + color: var(--aura-white); + margin-bottom: 32px; +} diff --git a/src/app/pages/profile/profile-settings/profile-settings.component.ts b/src/app/pages/profile/profile-settings/profile-settings.component.ts new file mode 100644 index 000000000..0f0e4f681 --- /dev/null +++ b/src/app/pages/profile/profile-settings/profile-settings.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit } from '@angular/core'; +import { FormBuilder } from '@angular/forms'; + +@Component({ + selector: 'app-profile-settings', + templateUrl: './profile-settings.component.html', + styleUrls: ['./profile-settings.component.scss'], +}) +export class ProfileSettingsComponent implements OnInit { + changePassForm; + hideOldPassword = true; + hideNewPassword = true; + hideConfirmPassword = true; + + constructor(private fb: FormBuilder) {} + + ngOnInit(): void { + this.formInit(); + } + + formInit() { + this.changePassForm = this.fb.group({ + expiration_time: [''], + period_amount: [''], + period_day: [''], + isInstantiate: false, + isExecute: false, + execute_contract: this.fb.array([]), + }); + // this.addContracts(); + } +} diff --git a/src/app/pages/profile/profile.component.html b/src/app/pages/profile/profile.component.html new file mode 100644 index 000000000..07e150837 --- /dev/null +++ b/src/app/pages/profile/profile.component.html @@ -0,0 +1,11 @@ + +
Profile
+ + + +
Personal note
+ + + + + diff --git a/src/app/pages/profile/profile.component.scss b/src/app/pages/profile/profile.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/pages/profile/profile.component.ts b/src/app/pages/profile/profile.component.ts new file mode 100644 index 000000000..bce5e61be --- /dev/null +++ b/src/app/pages/profile/profile.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-profile', + templateUrl: './profile.component.html', + styleUrls: ['./profile.component.scss'], +}) +export class ProfileComponent {} diff --git a/src/app/pages/profile/profile.module.ts b/src/app/pages/profile/profile.module.ts new file mode 100644 index 000000000..62d7fd9c2 --- /dev/null +++ b/src/app/pages/profile/profile.module.ts @@ -0,0 +1,34 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { TranslateModule } from '@ngx-translate/core'; +import { NgxMaskModule } from 'ngx-mask'; +import { LoadingImageModule } from 'src/app/shared/components/loading-image/loading-image.module'; +import { NameTagModule } from 'src/app/shared/components/name-tag/name-tag.module'; +import { MaterialModule } from '../../app.module'; +import { CommonPipeModule } from '../../core/pipes/common-pipe.module'; +import { SharedModule } from '../../shared/shared.module'; +import { ProfileRoutingModule } from './profile-routing.module'; +import { ProfileSettingsComponent } from './profile-settings/profile-settings.component'; +import { ProfileComponent } from './profile.component'; +import { MatIconModule } from '@angular/material/icon'; + +@NgModule({ + declarations: [ProfileComponent, ProfileSettingsComponent], + imports: [ + CommonModule, + FormsModule, + ProfileRoutingModule, + SharedModule, + MaterialModule, + TranslateModule, + CommonPipeModule, + NgxMaskModule, + LoadingImageModule, + ReactiveFormsModule, + NameTagModule, + MatIconModule, + ], + providers: [FormBuilder], +}) +export class ProfileModule {} From e1e8212ac75a114f5cb474ccc8e30e70b41f1732 Mon Sep 17 00:00:00 2001 From: mtam Date: Tue, 11 Jul 2023 08:16:42 +0700 Subject: [PATCH 002/146] [TamTM6] add authen part 1 --- src/app/app-routing.module.ts | 1 + .../horizontaltopbar.component.html | 2 + .../horizontaltopbar.component.scss | 14 ++ src/app/layouts/layouts.module.ts | 2 + src/app/pages/login/login-routing.module.ts | 17 +++ src/app/pages/login/login.component.html | 48 +++++++ src/app/pages/login/login.component.scss | 4 + src/app/pages/login/login.component.ts | 27 ++++ src/app/pages/login/login.module.ts | 13 ++ .../authenticate-mail.component.html | 14 ++ .../authenticate-mail.component.scss | 124 ++++++++++++++++++ .../authenticate-mail.component.ts | 92 +++++++++++++ .../authenticate-mail.module.ts | 24 ++++ .../wallet-connect.component.html | 29 ++-- .../wallet-connect.component.scss | 14 +- 15 files changed, 407 insertions(+), 18 deletions(-) create mode 100644 src/app/pages/login/login-routing.module.ts create mode 100644 src/app/pages/login/login.component.html create mode 100644 src/app/pages/login/login.component.scss create mode 100644 src/app/pages/login/login.component.ts create mode 100644 src/app/pages/login/login.module.ts create mode 100644 src/app/shared/components/authenticate-mail/authenticate-mail.component.html create mode 100644 src/app/shared/components/authenticate-mail/authenticate-mail.component.scss create mode 100644 src/app/shared/components/authenticate-mail/authenticate-mail.component.ts create mode 100644 src/app/shared/components/authenticate-mail/authenticate-mail.module.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 7edc77b5a..2b7d0b3bb 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -60,6 +60,7 @@ const routes: Routes = [ path: 'community-pool', loadChildren: () => import('./pages/community-pool/community-pool.module').then((m) => m.CommunityPoolModule), }, + { path: 'login', loadChildren: () => import('./pages/login/login.module').then((m) => m.LoginModule) }, ], }, { path: 'account', loadChildren: () => import('./pages/account/account.module').then((m) => m.AccountModule) }, diff --git a/src/app/layouts/horizontaltopbar/horizontaltopbar.component.html b/src/app/layouts/horizontaltopbar/horizontaltopbar.component.html index 911734475..c7b8a2693 100644 --- a/src/app/layouts/horizontaltopbar/horizontaltopbar.component.html +++ b/src/app/layouts/horizontaltopbar/horizontaltopbar.component.html @@ -55,6 +55,8 @@
+ +
diff --git a/src/app/layouts/horizontaltopbar/horizontaltopbar.component.scss b/src/app/layouts/horizontaltopbar/horizontaltopbar.component.scss index dd6ec9e50..ea6dfecfc 100644 --- a/src/app/layouts/horizontaltopbar/horizontaltopbar.component.scss +++ b/src/app/layouts/horizontaltopbar/horizontaltopbar.component.scss @@ -210,3 +210,17 @@ form.aura-form.single-input-field { border-radius: 25px; background-color: var(--aura-gray-10); } + +.wallet-connect{ + display: flex; + background-color: var(--aura-gray-9); + border-radius: 999px; + align-items: center; + padding: 6px; + .split-menu{ + background-color: var(--aura-gray-6); + width: 1px; + margin: 0px 12px; + height: 40px; + } +} \ No newline at end of file diff --git a/src/app/layouts/layouts.module.ts b/src/app/layouts/layouts.module.ts index d65420795..d4b26cc4f 100644 --- a/src/app/layouts/layouts.module.ts +++ b/src/app/layouts/layouts.module.ts @@ -17,6 +17,7 @@ import { HorizontalComponent } from './horizontal/horizontal.component'; import { HorizontaltopbarComponent } from './horizontaltopbar/horizontaltopbar.component'; import { LayoutComponent } from './layout.component'; import { MenuBottomBarComponent } from './menu-bottom-bar/menu-bottom-bar.component'; +import { AuthenticateMailModule } from '../shared/components/authenticate-mail/authenticate-mail.module'; @NgModule({ declarations: [ @@ -37,6 +38,7 @@ import { MenuBottomBarComponent } from './menu-bottom-bar/menu-bottom-bar.compon WalletConnectModule, NgbPopoverModule, CommonPipeModule, + AuthenticateMailModule ], providers: [LanguageService, CommonService, TransactionService, ContractService], exports: [], diff --git a/src/app/pages/login/login-routing.module.ts b/src/app/pages/login/login-routing.module.ts new file mode 100644 index 000000000..d927825a8 --- /dev/null +++ b/src/app/pages/login/login-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { LoginComponent } from './login.component'; + +const routes: Routes = [ + { + path: '', + component: LoginComponent + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) + +export class LoginRoutingModule { } diff --git a/src/app/pages/login/login.component.html b/src/app/pages/login/login.component.html new file mode 100644 index 000000000..e8ddbac76 --- /dev/null +++ b/src/app/pages/login/login.component.html @@ -0,0 +1,48 @@ + diff --git a/src/app/pages/login/login.component.scss b/src/app/pages/login/login.component.scss new file mode 100644 index 000000000..61be00c66 --- /dev/null +++ b/src/app/pages/login/login.component.scss @@ -0,0 +1,4 @@ +.card-login { + max-width: 300px; + margin: auto; +} diff --git a/src/app/pages/login/login.component.ts b/src/app/pages/login/login.component.ts new file mode 100644 index 000000000..61bf816c6 --- /dev/null +++ b/src/app/pages/login/login.component.ts @@ -0,0 +1,27 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-login', + templateUrl: './login.component.html', + styleUrls: ['./login.component.scss'], +}) +export class LoginComponent implements OnInit { + formValid = false; + email = ''; + passWord = ''; + ngOnInit(): void { + + } + + closeDialog(){ + + } + + onSubmit(){ + + } + + checkFormValid(){ + + } +} diff --git a/src/app/pages/login/login.module.ts b/src/app/pages/login/login.module.ts new file mode 100644 index 000000000..d8c8c4b6c --- /dev/null +++ b/src/app/pages/login/login.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { LoginComponent } from './login.component'; +import { LoginRoutingModule } from './login-routing.module'; +import { CommonPipeModule } from 'src/app/core/pipes/common-pipe.module'; +import { FormsModule } from '@angular/forms'; + +@NgModule({ + declarations: [LoginComponent], + imports: [LoginRoutingModule, CommonPipeModule, FormsModule], + providers: [], + exports: [LoginComponent], +}) +export class LoginModule {} diff --git a/src/app/shared/components/authenticate-mail/authenticate-mail.component.html b/src/app/shared/components/authenticate-mail/authenticate-mail.component.html new file mode 100644 index 000000000..badf0702d --- /dev/null +++ b/src/app/shared/components/authenticate-mail/authenticate-mail.component.html @@ -0,0 +1,14 @@ + diff --git a/src/app/shared/components/authenticate-mail/authenticate-mail.component.scss b/src/app/shared/components/authenticate-mail/authenticate-mail.component.scss new file mode 100644 index 000000000..9d96aedcc --- /dev/null +++ b/src/app/shared/components/authenticate-mail/authenticate-mail.component.scss @@ -0,0 +1,124 @@ +.wallet-connect-container { + .text { + font-size: 16px; + } + + .img-wallet { + width: 32px; + cursor: pointer; + height: auto; + } + + .wallet-avatar { + width: 26px; + height: 26px; + border: 1px solid #d2d2d2; + border-radius: 100%; + overflow: hidden; + + img { + width: 100%; + height: auto; + } + } + + .account-button { + white-space: nowrap; + @media (min-width: 992px) { + width: 192px; + } + } + + .walletMenu { + &.aura-dropdown .dropdown-menu.aura-dropdown-menu { + border: 1px solid var(--aura-gray-9); + border-radius: 8px; + box-shadow: 0px 2px 10px rgba(3, 3, 3, 0.3); + li.dropdown-item { + transition: background-color .35s ease-in-out; + &:hover { + background-color: var(--aura-gray-9) !important; + } + } + } + .button__title { + @media (min-width: 576px) { + min-width: 100px; + } + } + + li { + cursor: pointer; + } + } + + .offcanvas-wallet { + background: #141416; + box-shadow: -2px 0px 18px rgba(0, 0, 0, 0.25); + border: none; + + .card { + background: #141416; + } + } + + .wallet-container { + position: relative; + + .qr-modal { + position: absolute; + top: 0px; + width: 100%; + height: 100%; + z-index: 1552; + + display: flex; + justify-content: center; + + background-color: rgba(255, 255, 255, 0.75); + + .modal-content { + margin-top: 80px; + height: fit-content; + width: 80%; + box-shadow: 1px 1px 1px 1px rgba(219, 219, 225, 0.5); + border: 1px solid rgb(204, 204, 204); + background: rgb(255, 255, 255); + overflow: auto; + border-radius: 4px; + outline: none; + padding: 20px; + } + } + } +} + +.button-login-menu { + min-width: 90px; + border-radius: 999px; + padding: 10px 24px; + @media (max-width: 991.98px) { + padding-right: 30px !important; + &:before, &:after { + right: 10px !important; + } + } + @media (max-width: 414.98px) { + padding: 0 14px; + padding-right: 25px !important; + } + &[aria-expanded = 'true'] { + &:before { + opacity: 0; + } + &:after { + opacity: 1; + } + } + &::before { + background: url(../../../../assets/icons/icons-svg/black/caret-up.svg) center no-repeat; + } + &::after { + background: url(../../../../assets/icons/icons-svg/black/caret-down.svg) center no-repeat; + } +} diff --git a/src/app/shared/components/authenticate-mail/authenticate-mail.component.ts b/src/app/shared/components/authenticate-mail/authenticate-mail.component.ts new file mode 100644 index 000000000..7d9e866e0 --- /dev/null +++ b/src/app/shared/components/authenticate-mail/authenticate-mail.component.ts @@ -0,0 +1,92 @@ +import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'; +import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core'; +import { Observable, Subject } from 'rxjs'; +import { takeUntil, tap } from 'rxjs/operators'; +import { WALLET_PROVIDER } from '../../../core/constants/wallet.constant'; +import { EnvironmentService } from '../../../core/data-services/environment.service'; +import { DialogService } from '../../../core/services/dialog.service'; +import { WalletService } from '../../../core/services/wallet.service'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'app-authenticate-mail', + templateUrl: './authenticate-mail.component.html', + styleUrls: ['./authenticate-mail.component.scss'], +}) +export class AuthenticateMailComponent implements AfterViewInit, OnDestroy { + wallet$: Observable = this.walletService.wallet$; + + @ViewChild('offcanvasWallet') offcanvasWallet: ElementRef; + @ViewChild('buttonDismiss') buttonDismiss: ElementRef; + @ViewChild('connectButton') connectButton: ElementRef; + + chainId = this.envService.configValue.chainId; + isMobileMatched = false; + breakpoint$ = this.layout.observe([Breakpoints.Small, Breakpoints.XSmall]).pipe( + tap((state) => { + if (state) { + this.isMobileMatched = state.matches; + } + }), + ); + + destroy$ = new Subject(); + constructor( + private walletService: WalletService, + private envService: EnvironmentService, + private dlgService: DialogService, + private layout: BreakpointObserver, + private router: Router + ) { + // this.walletService.dialogState$.pipe(takeUntil(this.destroy$)).subscribe((state) => { + // if (state === 'open') { + // this.connectButton?.nativeElement.click(); + // } else { + // this.buttonDismiss?.nativeElement.click(); + // } + // }); + } + + ngAfterViewInit(): void { + this.offcanvasWallet.nativeElement.addEventListener('hide.bs.offcanvas', () => { + this.walletService.setDialogState('close'); + }); + } + + ngOnDestroy(): void { + document.removeAllListeners('hide.bs.offcanvas'); + this.destroy$.next(); + this.destroy$.complete(); + } + + connectWallet(provider: WALLET_PROVIDER): void { + try { + const connect = async () => { + const connect = await this.walletService.connect(provider); + if (!connect && provider === WALLET_PROVIDER.COIN98 && !this.isMobileMatched) { + this.dlgService.showDialog({ + title: '', + content: 'Please set up override Keplr in settings of Coin98 wallet', + }); + } + this.buttonDismiss.nativeElement.click(); + }; + + connect(); + } catch (error) { + console.error(error); + } + } + + dismiss(): void { + this.buttonDismiss.nativeElement.click(); + } + + disconnect(): void { + this.walletService.disconnect(); + } + + linkLogin(){ + this.router.navigate(['login']); + } +} diff --git a/src/app/shared/components/authenticate-mail/authenticate-mail.module.ts b/src/app/shared/components/authenticate-mail/authenticate-mail.module.ts new file mode 100644 index 000000000..3f1c182d9 --- /dev/null +++ b/src/app/shared/components/authenticate-mail/authenticate-mail.module.ts @@ -0,0 +1,24 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { MatDialogModule } from '@angular/material/dialog'; +import { MatMenuModule } from '@angular/material/menu'; +import { RouterModule } from '@angular/router'; +import { TranslateModule } from '@ngx-translate/core'; +import { ClickOutsideModule } from 'ng-click-outside'; +import { CommonPipeModule } from 'src/app/core/pipes/common-pipe.module'; +import { AuthenticateMailComponent } from './authenticate-mail.component'; + +@NgModule({ + declarations: [AuthenticateMailComponent], + imports: [ + CommonModule, + MatMenuModule, + RouterModule, + ClickOutsideModule, + TranslateModule, + MatDialogModule, + CommonPipeModule, + ], + exports: [AuthenticateMailComponent], +}) +export class AuthenticateMailModule {} diff --git a/src/app/shared/components/wallet-connect/wallet-connect.component.html b/src/app/shared/components/wallet-connect/wallet-connect.component.html index c36de6cc7..90d7b7704 100644 --- a/src/app/shared/components/wallet-connect/wallet-connect.component.html +++ b/src/app/shared/components/wallet-connect/wallet-connect.component.html @@ -4,27 +4,30 @@ #connectButton *ngIf="!ng.wallet" type="button" - class="button button--md button--sm-mob button-pill button-flat border-radius--sm body-01 fw-semibold button-wallet-menu" + class="button button--sm-mob button-flat body-01 button-wallet-menu" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWallet" - aria-controls="offcanvasWallet" - > + aria-controls="offcanvasWallet"> Connect Connect Wallet
diff --git a/src/app/shared/components/wallet-connect/wallet-connect.component.scss b/src/app/shared/components/wallet-connect/wallet-connect.component.scss index d93e37e43..448319438 100644 --- a/src/app/shared/components/wallet-connect/wallet-connect.component.scss +++ b/src/app/shared/components/wallet-connect/wallet-connect.component.scss @@ -93,38 +93,6 @@ } } -.button-wallet-menu { - min-width: 90px; - border-radius: 999px; - padding: 10px 24px; - box-shadow: 2px 1000px 1px var(--aura-gray-9) inset !important; - @media (max-width: 991.98px) { - padding-right: 30px !important; - &:before, &:after { - right: 10px !important; - } - } - @media (max-width: 414.98px) { - padding: 0 14px; - padding-right: 25px !important; - } - &[aria-expanded = 'true'] { - &:before { - opacity: 0; - } - // &:after { - // opacity: 1; - // } - } - &::before { - background: url(../../../../assets/icons/icons-svg/black/caret-up.svg) center no-repeat; - } - &.button-outline.button-outline--gradient:hover { - background: linear-gradient(113.1deg, #5EE6D0 13.45%, #BFC6FF 50.33%, #FFBA69 85.05%); - box-shadow: unset !important; - border-color: transparent; - } -} .menu__input { background: rgba(19, 20, 25, 1); height: 48px; @@ -135,3 +103,10 @@ padding-right: 10px; border-radius: 4px; } +.button-wallet { + border-radius: 999px; +} +.button-wallet-menu.button-outline__in-card { + box-shadow: 2px 1000px 1px var(--aura-gray-9) inset !important; + border-radius: 999px; +} diff --git a/src/assets/scss/aura-theme/form.scss b/src/assets/scss/aura-theme/form.scss index 390bd65b2..0fae86add 100644 --- a/src/assets/scss/aura-theme/form.scss +++ b/src/assets/scss/aura-theme/form.scss @@ -389,7 +389,10 @@ /* special case menu dropdown */ .aura-dropdown .dropdown-menu.aura-dropdown-menu.walletMenu { top: calc(100% + 12px) !important; - min-width: 242px; + min-width: 212px; + @media (min-width: 991.98px) { + min-width: 242px; + } &#wallet-menu { transform: translateX(-40px) !important; } From 852d158a05976fea9b39c1eeabab7e5607e24dba Mon Sep 17 00:00:00 2001 From: mtam Date: Mon, 17 Jul 2023 13:58:36 +0700 Subject: [PATCH 010/146] [TamTM6] authen mail login flow --- src/app/app-routing.module.ts | 1 + .../account-detail.component.html | 24 +++----- src/app/pages/login/login-routing.module.ts | 8 +++ src/app/pages/login/login.component.html | 2 +- src/app/pages/login/login.component.ts | 58 +++++++++++++------ .../profile-settings.component.html | 30 ++++++---- .../profile-settings.component.ts | 2 + .../authenticate-mail.component.html | 19 +++--- .../authenticate-mail.component.ts | 29 +++++----- 9 files changed, 104 insertions(+), 69 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index c977c1ece..32797db5e 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -61,6 +61,7 @@ const routes: Routes = [ loadChildren: () => import('./pages/community-pool/community-pool.module').then((m) => m.CommunityPoolModule), }, { path: 'login', loadChildren: () => import('./pages/login/login.module').then((m) => m.LoginModule) }, + { path: 'user', loadChildren: () => import('./pages/login/login.module').then((m) => m.LoginModule) }, { path: 'profile', loadChildren: () => import('./pages/profile/profile.module').then((m) => m.ProfileModule), diff --git a/src/app/pages/account/account-detail/account-detail.component.html b/src/app/pages/account/account-detail/account-detail.component.html index a1e136fe2..828b08090 100644 --- a/src/app/pages/account/account-detail/account-detail.component.html +++ b/src/app/pages/account/account-detail/account-detail.component.html @@ -20,19 +20,13 @@ {{ currentAddress | cutStringPipe : 8 : 8 }}
- - - +
Coins & Tokens ({{ totalAssets || 0 }})
-
+
{{ data[template.matColumnDef] | stringEllipsis : 11 }}
- +
diff --git a/src/app/pages/login/login-routing.module.ts b/src/app/pages/login/login-routing.module.ts index b6b272e10..be68248e6 100644 --- a/src/app/pages/login/login-routing.module.ts +++ b/src/app/pages/login/login-routing.module.ts @@ -8,6 +8,14 @@ const routes: Routes = [ path: '', component: LoginComponent, }, + { + path: 'welcome', + component: LoginComponent, + }, + { + path: 'already-active', + component: LoginComponent, + }, { path: 'reset-password', component: ResetPasswordComponent, diff --git a/src/app/pages/login/login.component.html b/src/app/pages/login/login.component.html index 7f0ecf0cf..bf5a3e73a 100644 --- a/src/app/pages/login/login.component.html +++ b/src/app/pages/login/login.component.html @@ -197,7 +197,7 @@
diff --git a/src/app/pages/login/login.component.ts b/src/app/pages/login/login.component.ts index 6c15af31f..cf2bca335 100644 --- a/src/app/pages/login/login.component.ts +++ b/src/app/pages/login/login.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { FormBuilder, Validators } from '@angular/forms'; import { MatDialogConfig } from '@angular/material/dialog'; +import { ActivatedRoute, Router } from '@angular/router'; import { UserService } from 'src/app/core/services/user.service'; @Component({ @@ -26,9 +27,25 @@ export class LoginComponent implements OnInit { hideConfirmPassword = true; emailFormat = ''; - constructor(private fb: FormBuilder, private userService: UserService) {} + constructor( + private fb: FormBuilder, + private userService: UserService, + private router: ActivatedRoute, + private route: Router, + ) {} ngOnInit(): void { + // check exit email + const userEmail = localStorage.getItem('userEmail'); + if (userEmail) { + this.route.navigate(['/']); + } + + // check link from verify mail + if (this.router.snapshot.url[0]?.path === 'welcome' || this.router.snapshot.url[0]?.path === 'already-active') { + this.mode = this.screenType.Welcome; + return; + } this.formInit(); } @@ -83,38 +100,41 @@ export class LoginComponent implements OnInit { }; this.errorMessage = ''; + let payload = { + email: this.loginForm.value?.email, + password: this.loginForm.value?.password, + }; + switch (this.mode) { case this.screenType.Login: - let payloadLogin = { - email: this.loginForm.value?.email, - password: this.loginForm.value?.password, - }; - this.userService.loginWithPassword(payloadLogin).subscribe({ + this.userService.loginWithPassword(payload).subscribe({ next: (res) => { + if (!res.error) { + localStorage.setItem('accessToken', JSON.stringify(res.accessToken)); + localStorage.setItem('refreshToken', JSON.stringify(res.refreshToken)); + localStorage.setItem('userEmail', JSON.stringify(res.email)); + this.route.navigate(['/']); + } }, error: (error) => { - this.errorMessage = error.details.message; + this.errorMessage = error?.details?.message; }, }); break; case this.screenType.Register: - let payloadRegister = { - email: this.loginForm.value?.email, - password: this.loginForm.value?.password, - passwordConfirmation: this.loginForm.value?.confirmPassword, - }; - this.userService.registerUser(payloadRegister).subscribe({ + payload['passwordConfirmation'] = this.loginForm.value?.confirmPassword; + this.userService.registerUser(payload).subscribe({ next: (res) => { - this.mode = this.screenType.Verify; - const tempChar = this.loginForm.value?.email.indexOf('@'); - let strStart = this.loginForm.value?.email.substring(0, 3) + '***'; + this.mode = this.screenType?.Verify; + const tempChar = this.loginForm.value?.email?.indexOf('@'); + let strStart = this.loginForm.value?.email?.substring(0, 3) + '***'; if (tempChar <= 3) { - strStart = this.loginForm.value?.email.substring(0, tempChar); + strStart = this.loginForm.value?.email?.substring(0, tempChar); } - this.emailFormat = strStart + this.loginForm.value?.email.substring(tempChar); + this.emailFormat = strStart + this.loginForm.value?.email?.substring(tempChar); }, error: (error) => { - this.errorMessage = error.details.message[0]; + this.errorMessage = error?.details?.message[0]; }, }); break; diff --git a/src/app/pages/profile/profile-settings/profile-settings.component.html b/src/app/pages/profile/profile-settings/profile-settings.component.html index aac4b745f..5aad7a839 100644 --- a/src/app/pages/profile/profile-settings/profile-settings.component.html +++ b/src/app/pages/profile/profile-settings/profile-settings.component.html @@ -1,7 +1,7 @@

Profile settings

Email - abc@gmail.com + {{ userEmail }}

Change password

@@ -18,7 +18,9 @@

Change password

#old_password formControlName="old_password" placeholder="Enter old password" /> - +
@@ -35,7 +37,9 @@

Change password

#new_password formControlName="new_password" placeholder="Enter new password" /> - + @@ -44,19 +48,25 @@

Change password

- + id="cf_new_password" + #cf_new_password + [type]="hideConfirmPassword ? 'password' : 'text'" + formControlName="cf_new_password" + placeholder="Type the new password again" /> +
-
diff --git a/src/app/pages/profile/profile-settings/profile-settings.component.ts b/src/app/pages/profile/profile-settings/profile-settings.component.ts index 0f0e4f681..633e66bbb 100644 --- a/src/app/pages/profile/profile-settings/profile-settings.component.ts +++ b/src/app/pages/profile/profile-settings/profile-settings.component.ts @@ -7,6 +7,7 @@ import { FormBuilder } from '@angular/forms'; styleUrls: ['./profile-settings.component.scss'], }) export class ProfileSettingsComponent implements OnInit { + userEmail = null; changePassForm; hideOldPassword = true; hideNewPassword = true; @@ -15,6 +16,7 @@ export class ProfileSettingsComponent implements OnInit { constructor(private fb: FormBuilder) {} ngOnInit(): void { + this.userEmail = localStorage.getItem('userEmail').replace(/"/g, ''); this.formInit(); } diff --git a/src/app/shared/components/authenticate-mail/authenticate-mail.component.html b/src/app/shared/components/authenticate-mail/authenticate-mail.component.html index 84daec3e3..f52725943 100644 --- a/src/app/shared/components/authenticate-mail/authenticate-mail.component.html +++ b/src/app/shared/components/authenticate-mail/authenticate-mail.component.html @@ -1,23 +1,24 @@ - -
+
  • - My Profile + My Profile
  • diff --git a/src/app/shared/components/authenticate-mail/authenticate-mail.component.ts b/src/app/shared/components/authenticate-mail/authenticate-mail.component.ts index c3d4129e8..08e3c33e6 100644 --- a/src/app/shared/components/authenticate-mail/authenticate-mail.component.ts +++ b/src/app/shared/components/authenticate-mail/authenticate-mail.component.ts @@ -1,10 +1,9 @@ import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'; -import { Component, ElementRef, OnDestroy, ViewChild } from '@angular/core'; -import { Subject } from 'rxjs'; -import { tap } from 'rxjs/operators'; -import { EnvironmentService } from '../../../core/data-services/environment.service'; -import { DialogService } from '../../../core/services/dialog.service'; +import { Component, ElementRef, OnDestroy, ViewChild } from '@angular/core'; import { Router } from '@angular/router'; +import { Subject } from 'rxjs'; +import { tap } from 'rxjs/operators'; +import { EnvironmentService } from '../../../core/data-services/environment.service'; @Component({ selector: 'app-authenticate-mail', @@ -12,7 +11,7 @@ import { Router } from '@angular/router'; styleUrls: ['./authenticate-mail.component.scss'], }) export class AuthenticateMailComponent implements OnDestroy { - user = 'demo'; + userEmail = null; //'demo'; @ViewChild('offcanvasWallet') offcanvasWallet: ElementRef; @ViewChild('buttonDismiss') buttonDismiss: ElementRef; @@ -29,12 +28,11 @@ export class AuthenticateMailComponent implements OnDestroy { ); destroy$ = new Subject(); - constructor( - private envService: EnvironmentService, - private dlgService: DialogService, - private layout: BreakpointObserver, - private router: Router - ) {} + constructor(private envService: EnvironmentService, private layout: BreakpointObserver, private router: Router) {} + + ngOnInit(): void { + this.userEmail = localStorage.getItem('userEmail'); + } ngOnDestroy(): void { document.removeAllListeners('hide.bs.offcanvas'); @@ -48,10 +46,13 @@ export class AuthenticateMailComponent implements OnDestroy { disconnect(): void { // logout Google - this.user = null; + this.userEmail = null; + localStorage.removeItem('accessToken'); + localStorage.removeItem('refreshToken'); + localStorage.removeItem('userEmail'); } - linkLogin(){ + linkLogin() { this.router.navigate(['login']); } } From 1f4dfac2c71fd4e93b717835ecdef04d7963de38 Mon Sep 17 00:00:00 2001 From: nhphuc2411 Date: Mon, 17 Jul 2023 14:03:12 +0700 Subject: [PATCH 011/146] call api --- src/app/core/services/user.service.ts | 12 +++++++++ src/app/pages/login/login.component.html | 6 ++++- src/app/pages/login/login.component.ts | 17 +++++++++--- .../profile-settings.component.ts | 26 +++++++++++++------ .../authenticate-mail.component.html | 17 ++++++------ .../authenticate-mail.component.ts | 14 +++++----- 6 files changed, 64 insertions(+), 28 deletions(-) diff --git a/src/app/core/services/user.service.ts b/src/app/core/services/user.service.ts index 882923949..fa27e99ad 100644 --- a/src/app/core/services/user.service.ts +++ b/src/app/core/services/user.service.ts @@ -19,4 +19,16 @@ export class UserService extends CommonService { loginWithPassword(payload): Observable { return this.http.post(`${this.apiUrl}/auth/login-with-password`, payload); } + + changePassword(payload): Observable { + return this.http.post(`${this.apiUrl}/user/change-password`, payload); + } + + resendVerifyEmail(email: string): Observable { + return this.http.get(`${this.apiUrl}/auth/resend-verification-email/${email}`); + } + + sendResetPasswordEmail(email: string): Observable { + return this.http.get(`${this.apiUrl}/auth/send-reset-password-email/${email}`); + } } diff --git a/src/app/pages/login/login.component.html b/src/app/pages/login/login.component.html index 7f0ecf0cf..56bf853c0 100644 --- a/src/app/pages/login/login.component.html +++ b/src/app/pages/login/login.component.html @@ -224,6 +224,10 @@
Have not received any email? - Resend + Resend +
+ You have reached the maximum number of verification email sent per day.
+ Kindly come back tomorrow or contact us via mailbox [support@aura.netwwork] for special case! +
diff --git a/src/app/pages/login/login.component.ts b/src/app/pages/login/login.component.ts index 6c15af31f..aab414cc4 100644 --- a/src/app/pages/login/login.component.ts +++ b/src/app/pages/login/login.component.ts @@ -90,8 +90,7 @@ export class LoginComponent implements OnInit { password: this.loginForm.value?.password, }; this.userService.loginWithPassword(payloadLogin).subscribe({ - next: (res) => { - }, + next: (res) => {}, error: (error) => { this.errorMessage = error.details.message; }, @@ -114,15 +113,27 @@ export class LoginComponent implements OnInit { this.emailFormat = strStart + this.loginForm.value?.email.substring(tempChar); }, error: (error) => { - this.errorMessage = error.details.message[0]; + this.errorMessage = error.details.message[0]; }, }); break; case this.screenType.Forgot: + this.userService.sendResetPasswordEmail(this.loginForm.value?.email).subscribe({ + next: (res) => {}, + error: (error) => { + this.errorMessage = error.details.message; + }, + }); break; case this.screenType.Welcome: break; case this.screenType.Verify: + this.userService.resendVerifyEmail(this.loginForm.value?.email).subscribe({ + next: (res) => {}, + error: (error) => { + this.errorMessage = error.details.message; + }, + }); break; default: break; diff --git a/src/app/pages/profile/profile-settings/profile-settings.component.ts b/src/app/pages/profile/profile-settings/profile-settings.component.ts index 0f0e4f681..4a1f45c37 100644 --- a/src/app/pages/profile/profile-settings/profile-settings.component.ts +++ b/src/app/pages/profile/profile-settings/profile-settings.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { FormBuilder } from '@angular/forms'; +import { FormBuilder, Validators } from '@angular/forms'; @Component({ selector: 'app-profile-settings', @@ -20,13 +20,23 @@ export class ProfileSettingsComponent implements OnInit { formInit() { this.changePassForm = this.fb.group({ - expiration_time: [''], - period_amount: [''], - period_day: [''], - isInstantiate: false, - isExecute: false, - execute_contract: this.fb.array([]), + old_password: [ + '', + [ + Validators.required, + Validators.maxLength(100), + Validators.pattern('^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*]).{8,}$'), + ], + ], + new_password: [ + '', + [ + Validators.required, + Validators.maxLength(100), + Validators.pattern('^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*]).{8,}$'), + ], + ], + cf_new_password: [''], }); - // this.addContracts(); } } diff --git a/src/app/shared/components/authenticate-mail/authenticate-mail.component.html b/src/app/shared/components/authenticate-mail/authenticate-mail.component.html index 84daec3e3..ffd3dbbcf 100644 --- a/src/app/shared/components/authenticate-mail/authenticate-mail.component.html +++ b/src/app/shared/components/authenticate-mail/authenticate-mail.component.html @@ -1,23 +1,24 @@ -