old-portfolio/frontend-hideyoshi.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #14 from HideyoshiNakazone/implements-other-popups

Browse Source 
Implements Other Popups
This commit is contained in:
Vitor Hideyoshi
2023-08-28 01:04:36 -03:00
committed by GitHub
parent 9b8d0e248f 189efc1085
commit af48ce2cd8
33 changed files with 2529 additions and 2504 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4071
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@@ -28,7 +28,7 @@
"@fortawesome/free-brands-svg-icons": "^6.1.1",
"@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"bootstrap": "^4.6.1",
"bootstrap": "^4.6.2",
"cors": "^2.8.5",
"express": "^4.18.1",
"jquery": "^3.6.0",
@@ -41,12 +41,12 @@
"devDependencies": {
"@angular-builders/custom-webpack": "^14.1.0",
"@angular-devkit/build-angular": "^14.0.3",
"@angular-eslint/builder": "14.0.0",
"@angular-eslint/builder": "^14.4.0",
"@angular-eslint/eslint-plugin": "14.0.0",
"@angular-eslint/eslint-plugin-template": "14.0.0",
"@angular-eslint/schematics": "14.0.0",
"@angular-eslint/template-parser": "14.0.0",
"@angular/cli": "~14.0.3",
"@angular/cli": "^14.2.12",
"@angular/compiler-cli": "^14.0.0",
"@types/jasmine": "~4.0.0",
"@types/node": "^18.11.19",

4
src/app/header/header-dropdown/header-dropdown.component.html
View File

@@ -26,13 +26,13 @@
</li>
</ul>
<ul class="user-management" *ngIf="this.user">
<li class="dropdown-item">
<li class="dropdown-item" (click)="onMyProfileClicked()">
<div class="icon-box">
<fa-icon class="fas fa-user" [icon]="userIcon"></fa-icon>
</div>
<p>My Profile</p>
</li>
<li class="dropdown-item">
<li class="dropdown-item" (click)="onHelpClicked()">
<div class="icon-box">
<fa-icon class="fas fa-question-circle" [icon]="questionCircleIcon"></fa-icon>
</div>

27
src/app/header/header-dropdown/header-dropdown.component.ts
View File

@@ -1,10 +1,12 @@
import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import {Component, ComponentRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewContainerRef} from '@angular/core';
import { faEdit, faQuestionCircle, faSignOutAlt, faUser } from '@fortawesome/free-solid-svg-icons';
import { Subscription, timeout } from 'rxjs';
import { Subscription } from 'rxjs';
import { AuthService } from 'src/app/shared/auth/auth.service';
import UserChecker from 'src/app/shared/model/user/user.checker';
import { User } from 'src/app/shared/model/user/user.model';
import {User} from "../../shared/model/user/user.model";
import UserChecker from "../../shared/model/user/user.checker";
import {HelpComponent} from "../header-popup/help/help.component";
import {MyProfileComponent} from "../header-popup/my-profile/my-profile.component";
@Component({
selector: 'app-header-dropdown',
@@ -52,7 +54,13 @@ export class HeaderDropdownComponent implements OnInit, OnDestroy {
@Output()
signupPopupState: EventEmitter<boolean> = new EventEmitter();
constructor(private authService: AuthService) { }
@Output()
helpPopupState: EventEmitter<boolean> = new EventEmitter();
@Output()
myProfilePopupState: EventEmitter<boolean> = new EventEmitter();
constructor(private viewContainerRef: ViewContainerRef, private authService: AuthService) { }
ngOnInit(): void {
this.userSubscription = this.authService.authSubject.subscribe(
@@ -86,8 +94,15 @@ export class HeaderDropdownComponent implements OnInit, OnDestroy {
this.signupPopupState.emit(true);
}
onMyProfileClicked() {
this.myProfilePopupState.emit(true);
}
onHelpClicked() {
this.helpPopupState.emit(true);
}
onLogout() {
this.authService.logout();
}
}

7
src/app/header/header-popup/help/help.component.css Normal file
View File

@@ -0,0 +1,7 @@
.help-container {
max-width: 400px;
}
p {
color: #555555;
}

28
src/app/header/header-popup/help/help.component.html Normal file
View File

@@ -0,0 +1,28 @@
<app-popup [state]="state"
(stateChange)="onStateChange($event)"
[ignoreClickOutside]="ignoreClickOutside">
<div class="help-container container m-0 overflow-hidden">
<p>
This is a simple example project to demonstrate
User Authentication and Authorization using
<a href="https://spring.io/projects/spring-security" target="_blank">Spring Security</a>
and
<a href="https://docs.spring.io/spring-security/reference/servlet/oauth2/" target="_blank">OAuth2</a>.
<br/><br/>
The only data stored is your email address, username and name.
This data is stored in a database and is used to authenticate you
and will not be used for any other purpose.
<br/><br/>
All data can be deleted by clicking the "Delete Account" button
on the "My Profile" option.
</p>
</div>
</app-popup>

23
src/app/header/header-popup/help/help.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HelpComponent } from './help.component';
describe('HelpComponent', () => {
let component: HelpComponent;
let fixture: ComponentFixture<HelpComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ HelpComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(HelpComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

24
src/app/header/header-popup/help/help.component.ts Normal file
View File

@@ -0,0 +1,24 @@
import {Component, EventEmitter, Input, Output} from '@angular/core';
@Component({
selector: 'app-help',
templateUrl: './help.component.html',
styleUrls: ['./help.component.css']
})
export class HelpComponent {
@Input()
state: boolean = false;
@Input()
ignoreClickOutside!: HTMLDivElement[];
@Output()
stateChange = new EventEmitter<boolean>();
constructor() { }
onStateChange(state: boolean) {
this.stateChange.emit(state);
}
}

100
src/app/header/header-popup/my-profile/my-profile.component.css Normal file
View File

@@ -0,0 +1,100 @@
* {
margin: 0;
}
.profile-options-container {
justify-content: space-around;
display: flex !important;
flex-direction: column;
align-content: center;
align-items: center;
height: 200px;
max-width: 400px;
}
.profile-options-row {
width: 100%;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.separator-line {
justify-content: center;
align-content: center;
align-items: center;
margin: 30px 0;
display: flex;
width: 100%;
}
.line {
width: 100%;
border-bottom: 2px solid #80808076;
border-radius: 50px;
}
.profile-options-container button {
text-decoration: none;
border-radius: 8px;
color: #ffffff;
font-weight: 500;
font-size: 16px;
border: none;
height: 50px;
width: 150px;
}
.picture-btn {
background-color: rgba(118, 118, 118, 0.7) !important;
}
.delete-btn {
background-color: rgba(216, 41, 28, 0.7) !important;
}
@media (min-width:767px) {
.profile-options-container {
all: unset;
justify-content: space-around;
width: 600px;
align-items: center;
display: flex;
height: 200px;
}
.profile-options-container .row {
all: unset;
display: flex;
height: 200px;
}
.btn-container {
justify-content: center;
align-content: center;
align-items: center;
display: flex;
}
.separator-line {
all: unset;
justify-content: center;
align-content: center;
align-items: center;
margin: 0px 60px;
display: flex;
height: 100%;
}
.line {
all: unset;
border-right: 2px solid #80808076;
border-radius: 50px;
height: 100%;
}
}

41
src/app/header/header-popup/my-profile/my-profile.component.html Normal file
View File

@@ -0,0 +1,41 @@
<app-popup [state]="state"
(stateChange)="onStateChange($event)"
[ignoreClickOutside]="ignoreClickOutside">
<div class="container m-0 overflow-hidden"
[@resizeContainerForErrorMessage]="hideErrorMessage()">
<app-error-box [errorMessage]="errorMessage"
[@showErrorMessage]="showErrorMessage()">
</app-error-box>
<div class="container profile-options-container"
[@hideAuthContainer]="hideErrorMessage()"
(@hideAuthContainer.done)="hideAuthContainer($event)">
<div class="row profile-options-row">
<div class="btn-container">
<app-profile-picture-picker
(imageSent)="onProfilePictureSent($event)">
</app-profile-picture-picker>
</div>
<div class="separator-line">
<div class="line"></div>
</div>
<div class="btn-container">
<button class="delete-btn"
(click)="onDeleteAccount()">
Delete Account
</button>
</div>
</div>
</div>
</div>
</app-popup>

23
src/app/header/header-popup/my-profile/my-profile.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyProfileComponent } from './my-profile.component';
describe('MyProfileComponent', () => {
let component: MyProfileComponent;
let fixture: ComponentFixture<MyProfileComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ MyProfileComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(MyProfileComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

162
src/app/header/header-popup/my-profile/my-profile.component.ts Normal file
View File

@@ -0,0 +1,162 @@
import {ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {AuthService} from "../../../shared/auth/auth.service";
import {User} from "../../../shared/model/user/user.model";
import {animate, animateChild, group, query, state, style, transition, trigger} from "@angular/animations";
import {MatIconRegistry} from "@angular/material/icon";
import {DomSanitizer} from "@angular/platform-browser";
import {FormControl, FormGroup, Validators} from "@angular/forms";
import {ValidateNotEmptyValidator} from "../../../shared/validators/validate-not-empty.validator";
import {ValidatePasswordValidator} from "../../../shared/validators/validate-password.validator";
import {first, take} from "rxjs";
import UserChecker from "../../../shared/model/user/user.checker";
import HttpErrorChecker from "../../../shared/model/httpError/httpErrorChecker";
import {HttpError} from "../../../shared/model/httpError/httpError.model";
import {faFileUpload} from "@fortawesome/free-solid-svg-icons";
@Component({
selector: 'app-my-profile',
templateUrl: './my-profile.component.html',
styleUrls: ['./my-profile.component.css'],
animations: [
trigger('resizeContainerForErrorMessage', [
state('hide',
style({
height: '100px',
width: '320px',
})
),
transition(
'show => hide',
group([
query(
"@*",
animateChild(),
{ optional: true }
),
animate('1s ease')
])
)
]),
trigger('showErrorMessage', [
state('show',
style({
opacity: 1,
height: '100px',
width: '320px',
})
),
state('hide',
style({
opacity: 0,
height: '0px',
width: '0px',
})
),
transition(
'* => show',
animate(
'500ms ease-in'
)
),
]),
trigger('hideAuthContainer', [
state('hide',
style({
opacity: 0,
})
),
transition(
'show => hide',
group([
query(
"@*",
animateChild(),
{ optional: true }
),
animate(
'250ms ease-out'
)
])
)
]),
]
})
export class MyProfileComponent implements OnInit {
@Input()
state: boolean = false;
@Input()
user!: User | null;
@Input()
ignoreClickOutside!: HTMLDivElement[];
@Output()
stateChange = new EventEmitter<boolean>();
alterForm!: FormGroup;
errorMessage!: string | null;
isShowErrorMessage = false;
_fileIcon = faFileUpload
constructor(private authService: AuthService) {
}
ngOnInit(): void {
this.alterForm = new FormGroup({
'username': new FormControl(null, [Validators.required, ValidateNotEmptyValidator]),
'password': new FormControl(null, [Validators.required, ValidatePasswordValidator])
});
this.errorMessage = null;
}
onStateChange(state: boolean) {
this.stateChange.emit(state);
}
showErrorMessage(): string {
if (this.isShowErrorMessage) {
return "show";
}
return "hide";
}
hideErrorMessage(): string {
if (!!this.errorMessage) {
return "hide";
}
return "show";
}
onDeleteAccount() {
this.authService.deleteAccount().subscribe({
next: (response: any) => {
this.authService.logout();
}
})
this.closePopup();
}
hideAuthContainer(event: any) {
if (event.toState === "hide") {
event.element.style.display = "none";
this.isShowErrorMessage = true;
}
}
onProfilePictureSent(event: any) {
if (event) {
this.closePopup();
}
}
private closePopup() {
this.onStateChange(false);
}
}

0
src/app/header/header-popup/my-profile/profile-picture-picker/profile-picture-picker.component.css Normal file
View File

20
src/app/header/header-popup/my-profile/profile-picture-picker/profile-picture-picker.component.html Normal file
View File

@@ -0,0 +1,20 @@
<div class="btn-container">
<div class="input-group mb-3">
<div class="custom-file">
<input type="file"
class="custom-file-input"
id="inputProfilePicture"
aria-describedby="inputProfilePicture"
(change)="handleFileInput($event)">
<label class="custom-file-label"
for="inputProfilePicture">
{{isProfilePictureSelected ? getFileName() : 'Profile Picture'}}
</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary"
[disabled]="!isProfilePictureSelected"
(click)="uploadProfilePicture()">Upload</button>
</div>
</div>
</div>

23
src/app/header/header-popup/my-profile/profile-picture-picker/profile-picture-picker.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ProfilePicturePickerComponent } from './profile-picture-picker.component';
describe('ProfilePicturePickerComponent', () => {
let component: ProfilePicturePickerComponent;
let fixture: ComponentFixture<ProfilePicturePickerComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ProfilePicturePickerComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(ProfilePicturePickerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

39
src/app/header/header-popup/my-profile/profile-picture-picker/profile-picture-picker.component.ts Normal file
View File

@@ -0,0 +1,39 @@
import {Component, EventEmitter, Output} from '@angular/core';
import {AuthService} from "../../../../shared/auth/auth.service";
@Component({
selector: 'app-profile-picture-picker',
templateUrl: './profile-picture-picker.component.html',
styleUrls: ['./profile-picture-picker.component.css']
})
export class ProfilePicturePickerComponent {
@Output()
imageSent = new EventEmitter<boolean>();
private profilePicture!: File;
constructor(private authService: AuthService) { }
handleFileInput(event: Event) {
const element = event.currentTarget as HTMLInputElement;
const fileList: FileList | null = element.files;
if (fileList != null && fileList.length > 0 && fileList[0] != null) {
this.profilePicture = fileList[0];
}
}
uploadProfilePicture() {
this.authService.addProfilePicture(this.profilePicture);
this.imageSent.emit(true);
}
getFileName(): string {
return this.profilePicture.name;
}
get isProfilePictureSelected(): boolean {
return !!this.profilePicture;
}
}

11
src/app/header/header-slider/nav-slider/nav-slider.component.css
View File

@@ -56,6 +56,11 @@
width: 45px;
}
.profile-picture {
border-radius: 50%;
border: 2px solid #ffffff;
}
.profile .profile-btn {
display: flex;
border: 5px solid #ffffff;
@@ -63,10 +68,10 @@
justify-content: center;
align-items: center;
color: #ffffff;
height: 45px;
width: 45px;
height: 50px;
width: 50px;
}
.profile .profile-btn fa-icon {
font-size: 25px;
font-size: 28px;
}

8
src/app/header/header-slider/nav-slider/nav-slider.component.html
View File

@@ -16,7 +16,13 @@
#profile>
<div class="profile-btn"
(click)="onProfileButtonClicked()">
<fa-icon class="fas fa-user" [icon]="userIcon"></fa-icon>
<fa-icon *ngIf="!loggedUser || !(loggedUser.profilePictureUrl)"
class="fas fa-user" [icon]="userIcon"></fa-icon>
<img *ngIf="!!loggedUser && !!(loggedUser.profilePictureUrl)"
class="profile-picture"
[ngSrc]="loggedUser.profilePictureUrl"
width="50" height="50"
alt="Profile Picture" priority/>
</div>
</div>
</div>

30
src/app/header/header-slider/nav-slider/nav-slider.component.ts
View File

@@ -1,13 +1,17 @@
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import {Component, EventEmitter, OnDestroy, OnInit, Output} from '@angular/core';
import { faUser } from '@fortawesome/free-solid-svg-icons';
import { SliderItemComponent } from 'src/app/shared/components/slider-item/slider-item.component';
import UserChecker from "../../../shared/model/user/user.checker";
import {User} from "../../../shared/model/user/user.model";
import {AuthService} from "../../../shared/auth/auth.service";
import {Subscription} from "rxjs";
@Component({
selector: 'app-nav-slider',
templateUrl: './nav-slider.component.html',
styleUrls: ['./nav-slider.component.css']
})
export class NavSliderComponent extends SliderItemComponent {
export class NavSliderComponent extends SliderItemComponent implements OnInit, OnDestroy {
userIcon = faUser;
@@ -18,13 +22,33 @@ export class NavSliderComponent extends SliderItemComponent {
{ page: "About", link: "/home" }
]
loggedUser!: User | null;
private userSubscription!: Subscription;
@Output()
profileButtonClicked = new EventEmitter();
constructor() {
constructor(private authService: AuthService) {
super();
}
ngOnInit(): void {
this.userSubscription = this.authService.authSubject.subscribe(
res => {
if (res && UserChecker.test(res)) {
this.loggedUser = <User>res;
} else {
this.loggedUser = null;
}
}
)
}
ngOnDestroy(): void {
this.userSubscription.unsubscribe();
}
onProfileButtonClicked() {
this.profileButtonClicked.emit();
}

33
src/app/header/header-slider/user-slider/user-slider.component.ts
View File

@@ -16,13 +16,13 @@ export class UserSliderComponent extends SliderItemComponent implements OnInit {
{
name: "Login",
onClick: () => {
this.loginOptionClicked();
this.onLoginOptionClicked();
}
},
{
name: "Signup",
onClick: () => {
this.signupOptionClicked();
this.onSignUpOptionClick();
}
}
]
@@ -30,11 +30,15 @@ export class UserSliderComponent extends SliderItemComponent implements OnInit {
userOptions = [
{
name: "My Profile",
onClick: () => {}
onClick: () => {
this.onMyProfileClicked()
}
},
{
name: "Help",
onClick: () => {}
onClick: () => {
this.onHelpClicked();
}
},
{
name: "Logout",
@@ -48,12 +52,17 @@ export class UserSliderComponent extends SliderItemComponent implements OnInit {
authSubscription!: Subscription;
@Output()
loginPopupState: EventEmitter<boolean> = new EventEmitter();
@Output()
loginPopupState = new EventEmitter<boolean>();
signupPopupState: EventEmitter<boolean> = new EventEmitter();
@Output()
signupPopupState = new EventEmitter<boolean>();
helpPopupState: EventEmitter<boolean> = new EventEmitter();
@Output()
myProfilePopupState: EventEmitter<boolean> = new EventEmitter();
constructor(private authService: AuthService) {
super();
@@ -72,14 +81,22 @@ export class UserSliderComponent extends SliderItemComponent implements OnInit {
)
}
loginOptionClicked(): void {
onLoginOptionClicked(): void {
this.loginPopupState.emit(true);
}
signupOptionClicked(): void {
onSignUpOptionClick(): void {
this.signupPopupState.emit(true);
}
onMyProfileClicked(): void {
this.myProfilePopupState.emit(true);
}
onHelpClicked(): void {
this.helpPopupState.emit(true);
}
onLogout() {
this.authService.logout();
}

11
src/app/header/header.component.css
View File

@@ -136,6 +136,11 @@ app-header-slider {
cursor: pointer;
}
.profile-picture {
border-radius: 50%;
border: 2px solid #ffffff;
}
.profile .profile-btn {
display: flex;
border: 5px solid #ffffff;
@@ -143,8 +148,8 @@ app-header-slider {
justify-content: center;
align-items: center;
color: #ffffff;
height: 45px;
width: 45px;
height: 50px;
width: 50px;
}
.profile .dropdown {
@@ -153,7 +158,7 @@ app-header-slider {
}
.profile .profile-btn fa-icon {
font-size: 25px;
font-size: 28px;
}
.burger-container {

28
src/app/header/header.component.html
View File

@@ -16,15 +16,24 @@
<div class="profile" #profileDropdown>
<div class="profile-btn" (click)="toogleProfileDropdown()" #profileBtn>
<fa-icon class="fas fa-user" [icon]="userIcon"></fa-icon>
<fa-icon *ngIf="!loggedUser || !(loggedUser.profilePictureUrl)"
class="fas fa-user" [icon]="userIcon"></fa-icon>
<img *ngIf="!!loggedUser && !!(loggedUser.profilePictureUrl)"
class="profile-picture"
[ngSrc]="loggedUser.profilePictureUrl"
width="50" height="50"
alt="Profile Picture" priority/>
</div>
<app-header-dropdown
class="dropdown"
(clickOutside)="closeDropdown()"
[ignoreClickOutside]="[profileBtn]"
[state]="profileDropdownState"
(loginPopupState)="loginPopupStateChange($event)"
(signupPopupState)="signupPopupStateChange($event)">
(signupPopupState)="signupPopupStateChange($event)"
(myProfilePopupState)="myProfilePopupStateChange($event)"
(helpPopupState)="helpPopupStateChange($event)">
</app-header-dropdown>
</div>
<div class="burger-container" (click)="toogleNavSlider()">
@@ -51,20 +60,11 @@
<app-user-slider
[state]="userSliderStatus"
(loginPopupState)="loginPopupStateChange($event)"
(signupPopupState)="signupPopupStateChange($event)">
(signupPopupState)="signupPopupStateChange($event)"
(myProfilePopupState)="myProfilePopupStateChange($event)"
(helpPopupState)="helpPopupStateChange($event)">
</app-user-slider>
</app-header-slider>
</div>
</div>
<div class="header-spacer"></div>
<!-- <app-login
*ngIf="loginPopupState"
[(state)]="loginPopupState"
[ignoreClickOutside]="[profileBtn, profileDropdown, user]">
</app-login>
<app-signup
[(state)]="signupPopupState"
[ignoreClickOutside]="[profileBtn, profileDropdown, user]">
</app-signup> -->

116
src/app/header/header.component.ts
View File

@@ -1,14 +1,20 @@
import { Component, ComponentRef, ElementRef, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import {Component, ComponentRef, ElementRef, OnDestroy, OnInit, ViewChild, ViewContainerRef} from '@angular/core';
import { faUser } from '@fortawesome/free-solid-svg-icons';
import { LoginComponent } from './header-popup/login/login.component';
import { SignupComponent } from './header-popup/signup/signup.component';
import {AuthService} from "../shared/auth/auth.service";
import UserChecker from "../shared/model/user/user.checker";
import {User} from "../shared/model/user/user.model";
import {Subscription} from "rxjs";
import {HelpComponent} from "./header-popup/help/help.component";
import {MyProfileComponent} from "./header-popup/my-profile/my-profile.component";
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent {
export class HeaderComponent implements OnInit, OnDestroy {
userIcon = faUser;
@@ -28,11 +34,35 @@ export class HeaderComponent {
@ViewChild('user')
userElementRef!: ElementRef;
loggedUser!: User | null;
private userSubscription!: Subscription;
private loginComponent!: ComponentRef<LoginComponent>;
private signupComponent!: ComponentRef<SignupComponent>;
constructor(private viewContainerRef: ViewContainerRef) { }
private myProfileComponent!: ComponentRef<MyProfileComponent>;
private helpComponent!: ComponentRef<HelpComponent>;
constructor(private viewContainerRef: ViewContainerRef, private authService: AuthService) { }
ngOnInit(): void {
this.userSubscription = this.authService.authSubject.subscribe(
res => {
if (res && UserChecker.test(res)) {
this.loggedUser = <User>res;
} else {
this.loggedUser = null;
}
}
)
}
ngOnDestroy(): void {
this.userSubscription.unsubscribe();
}
public toogleProfileDropdown(): void {
@@ -58,23 +88,36 @@ export class HeaderComponent {
public closeDropdown(): void {
this.profileDropdownState = false;
}
public closeNavSlider(): void {
if (this.userSliderStatus) {
this.userSliderStatus = false;
} else {
this.navSliderStatus = false;
}
}
public loginPopupStateChange(state: boolean): void {
if (state) {
this.createLoginPopup();
} else {
this.closeLoginPopup();
}
}
public signupPopupStateChange(state: boolean): void {
if (state) {
this.createSignupPopup();
} else {
this.closeSignupPopup();
}
}
myProfilePopupStateChange(state: boolean): void {
if (state) {
this.createMyProfilePopup();
} else {
this.closeMyProfilePopup();
}
}
helpPopupStateChange(state: boolean): void {
if (state) {
this.createHelpPopup();
} else {
this.closeHelpPopup();
}
}
private createLoginPopup(): void {
@@ -123,6 +166,41 @@ export class HeaderComponent {
this.profileDropdownState = false;
}
private createMyProfilePopup() {
this.myProfileComponent = this.viewContainerRef.createComponent(MyProfileComponent);
this.myProfileComponent.instance.state = true;
this.myProfileComponent.instance.user = this.loggedUser;
this.myProfileComponent.instance.stateChange.subscribe(
state => {
if (!state) {
this.closeMyProfilePopup()
}
}
);
this.navSliderStatus = false;
this.userSliderStatus = false;
this.profileDropdownState = false;
}
private createHelpPopup() {
this.helpComponent = this.viewContainerRef.createComponent(HelpComponent);
this.helpComponent.instance.state = true;
this.helpComponent.instance.stateChange.subscribe(
state => {
if (!state) {
this.closeHelpPopup()
}
}
);
this.navSliderStatus = false;
this.userSliderStatus = false;
this.profileDropdownState = false;
}
private closeLoginPopup() {
this.loginComponent.destroy();
}
@@ -131,15 +209,11 @@ export class HeaderComponent {
this.signupComponent.destroy();
}
public signupPopupStateChange(state: boolean): void {
this.signupPopupState = state;
if (state) {
this.createSignupPopup();
} else {
this.closeSignupPopup();
private closeMyProfilePopup() {
this.myProfileComponent.destroy();
}
private closeHelpPopup() {
this.helpComponent.destroy();
}
}

6
src/app/header/header.module.ts
View File

@@ -16,6 +16,9 @@ import { SignupComponent } from './header-popup/signup/signup.component';
import { CallbackComponent } from './header-popup/callback/callback.component';
import {MatIconModule} from '@angular/material/icon';
import { ErrorBoxComponent } from './header-popup/error-box/error-box.component';
import { HelpComponent } from './header-popup/help/help.component';
import { MyProfileComponent } from './header-popup/my-profile/my-profile.component';
import { ProfilePicturePickerComponent } from './header-popup/my-profile/profile-picture-picker/profile-picture-picker.component';
@@ -30,6 +33,9 @@ import { ErrorBoxComponent } from './header-popup/error-box/error-box.component'
SignupComponent,
CallbackComponent,
ErrorBoxComponent,
HelpComponent,
MyProfileComponent,
ProfilePicturePickerComponent,
],
imports: [
CommonModule,

104
src/app/shared/auth/auth.service.ts
View File

@@ -1,11 +1,11 @@
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import {first, firstValueFrom, Observable, of, Subject, take} from 'rxjs';
import {first, firstValueFrom, map, Observable, of, Subject, take, tap} from 'rxjs';
import { catchError } from 'rxjs/operators';
import { environment } from 'src/environments/environment';
import { HttpError } from '../model/httpError/httpError.model';
import { Token } from '../model/token/token.model';
import { User } from '../model/user/user.model';
import * as http from "http";
@Injectable({
providedIn: 'root'
@@ -21,7 +21,6 @@ export class AuthService {
readonly BACKEND_OAUTH_PATH = environment.backendOAuthPath;
constructor(private http: HttpClient) { }
login(userAuthAtempt: User): void {
this.validateUser(this.loginUser(userAuthAtempt));
}
@@ -56,14 +55,27 @@ export class AuthService {
this.destroySessions().subscribe()
}
async getUserAccessToken(): Promise<Token | undefined> {
if (this.userAuthenticated) {
if ((!this.userAuthenticated.accessToken && this.refreshAccessToken) ||
(this.userAuthenticated.accessToken && this.userAuthenticated.accessToken.expirationDate < Date.now())) {
this.userAuthenticated = <User>(await this.refreshAccessToken());
deleteAccount() {
return this.deleteAccountRequest();
}
return this.userAuthenticated.accessToken;
} else return
addProfilePicture(file: File): void {
const fileType = file.type.split('/')[1];
this.getAddProfilePictureUrl(fileType).subscribe({
next: (url: string|null) => {
if (url != null) {
this.uploadProfilePicture(url, file).then(
(response: Observable<any>) => {
response.subscribe({
next: (response: any) => {
this.processProfilePicture().subscribe();
}
});
}
);
}
}
})
}
private loginUser(userAuthAtempt: User): Observable<User|any> {
@@ -155,6 +167,15 @@ export class AuthService {
);
}
private deleteAccountRequest() {
let headers = this.createAuthorizationHeader()
return this.http.delete(
this.BACKEND_PATH + `/user/delete`,
{ headers: headers, withCredentials: true }
);
}
private validateUser(userAuthAtempt: Observable<User>) {
userAuthAtempt.pipe(
catchError(error => {
@@ -178,4 +199,67 @@ export class AuthService {
});
}
private getAddProfilePictureUrl(fileType: string): Observable<string|null> {
return this.http.post<{ presigned_url: string, file_key: string }>(
this.BACKEND_PATH + '/user/profile-picture?fileType=' + fileType,
null,
{
headers: this.createAuthorizationHeader(),
withCredentials: true
}
).pipe(
first(),
map((res) => {
if (!!res && !!res.presigned_url) {
return res.presigned_url;
}
return null
})
)
}
private async uploadProfilePicture(url: string, file: File): Promise<Observable<any>> {
const fileData = await this.readAsArrayBuffer(file);
let headers = new HttpHeaders({
'Content-Type': file.type
})
return this.http.put(
url,
fileData,
{
headers: headers,
}
);
}
private processProfilePicture() {
return this.http.post(
this.BACKEND_PATH + '/user/profile-picture/proccess',
null,
{
headers: this.createAuthorizationHeader(),
withCredentials: true
}
)
}
private createAuthorizationHeader(): HttpHeaders {
return new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + this.userAuthenticated.accessToken?.token
});
}
private async readAsArrayBuffer(file: File): Promise<ArrayBuffer> {
const reader = new FileReader();
reader.readAsArrayBuffer(file)
return new Promise<ArrayBuffer>((resolve, reject) => {
reader.onload = () => {
resolve(reader.result as ArrayBuffer);
};
reader.onerror = () => {
reject(reader.error);
};
});
}
}

2
src/app/shared/components/popup/popup.component.ts
View File

@@ -21,7 +21,7 @@ import { Component, ElementRef, EventEmitter, Input, Output, ViewEncapsulation }
animateChild(),
{ optional: true }
),
animate('125ms ease-in')
animate('250ms ease-in')
])
),
transition(

4
src/app/shared/model/httpError/httpError.model-ti.ts
View File

@@ -12,7 +12,7 @@ export const HttpError = t.iface([], {
"timestamp": "string",
});
const HttpErrorTI: t.ITypeSuite = {
const exportedTypeSuite: t.ITypeSuite = {
HttpError,
};
export default HttpErrorTI;
export default exportedTypeSuite;

4
src/app/shared/model/httpError/httpErrorChecker.ts
View File

@@ -1,5 +1,5 @@
import { createCheckers } from "ts-interface-checker";
import HttpErrorTI from "./httpError.model-ti";
import HttpError from "./httpError.model-ti";
const HttpErrorChecker = createCheckers(HttpErrorTI)['HttpError'];
const HttpErrorChecker = createCheckers(HttpError)['HttpError'];
export default HttpErrorChecker;

6
src/app/shared/model/user/user.checker.ts
View File

@@ -1,6 +1,6 @@
import { createCheckers } from "ts-interface-checker";
import TokenTI from "../token/token.model-ti";
import UserTI from "./user.model-ti";
import User from "./user.model-ti";
import Token from "../token/token.model-ti";
const UserChecker = createCheckers(UserTI, TokenTI)['User'];
const UserChecker = createCheckers(User, Token)['User'];
export default UserChecker;

9
src/app/shared/model/user/user.model-ti.ts
View File

@@ -10,14 +10,13 @@ export const User = t.iface([], {
"email": t.opt("string"),
"username": "string",
"password": t.opt("string"),
"profilePictureUrl": t.opt("string"),
"accessToken": t.opt("Token"),
"refreshToken": t.opt("Token"),
"authorities": t.opt(t.array(t.iface([], {
"authority": "string",
}))),
"roles": t.opt(t.array("string")),
});
const UserTI: t.ITypeSuite = {
const exportedTypeSuite: t.ITypeSuite = {
User,
};
export default UserTI;
export default exportedTypeSuite;

3
src/app/shared/model/user/user.model.ts
View File

@@ -6,8 +6,9 @@ export interface User {
email?: string,
username: string,
password?: string,
profilePictureUrl?: string,
accessToken?: Token,
refreshToken?: Token,
authorities?: Array<{authority: string}>,
roles?: Array<string>,
validateAccessToken?: () => Token | undefined;
};

1
src/index.html
View File

@@ -18,6 +18,7 @@
<meta name="apple-mobile-web-app-title" content="Hideyoshi">
<link rel="manifest" href="manifest.webmanifest">
<link rel="preconnect" href="https://hideyoshi-portfolio-dev.s3.amazonaws.com">
</head>
<body>

1
src/styles.css
View File

@@ -1,5 +1,4 @@
/* You can add global styles to this file, and also import other style files */
@import 'font-montserrat.css';
* {