-
- Email
-
-
-
-
- Username
-
-
+
+
+
+ Email
+
+
+
+
+ Username
+
+
+
+
+
+
+
![Profile picture]()
+
+
+
-
+
diff --git a/src/app/account/account.component.scss b/src/app/account/account.component.scss
index e69de29b..388e1340 100644
--- a/src/app/account/account.component.scss
+++ b/src/app/account/account.component.scss
@@ -0,0 +1,38 @@
+*
+{
+ box-sizing: border-box;
+ outline: none !important;
+}
+
+*:before, *:after
+{
+ box-sizing: border-box;
+}
+
+.upload_picture
+{
+ position: absolute;
+ bottom: 2%;
+ left: 0;
+ right: 0;
+ margin: auto;
+}
+
+.profilePicture
+{
+ padding-top: 100%;
+ height: 0;
+ position: relative;
+
+ > img
+ {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ }
+}
\ No newline at end of file
diff --git a/src/app/account/account.component.ts b/src/app/account/account.component.ts
index 52cb8def..9e0e026d 100644
--- a/src/app/account/account.component.ts
+++ b/src/app/account/account.component.ts
@@ -1,6 +1,7 @@
-import {Component, Inject} from '@angular/core';
+import {Component, ElementRef, Inject, ViewChild} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
import {Account} from "../../models/account";
+import {HttpClient} from "@angular/common/http";
@Component({
@@ -10,10 +11,37 @@ import {Account} from "../../models/account";
})
export class AccountComponent
{
- constructor(public dialogRef: MatDialogRef
, @Inject(MAT_DIALOG_DATA) public account: Account) {}
+ selectedPicture: File;
+ @ViewChild("accountImg") accountImg: ElementRef;
+
+ constructor(public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public account: Account, private http: HttpClient) {}
+ finish()
+ {
+ let data = new FormData();
+ data.append("email", this.account.email);
+ data.append("username", this.account.username);
+ data.append("picture", this.selectedPicture);
+
+ this.http.post("api/account/update", data).subscribe(() =>
+ {
+ this.dialogRef.close(this.account);
+ });
+ }
+
cancel()
{
this.dialogRef.close();
}
+
+ onPictureSelected(event: any)
+ {
+ this.selectedPicture = event.target.files[0];
+ const reader = new FileReader();
+ reader.onloadend = () =>
+ {
+ this.accountImg.nativeElement.src = reader.result;
+ };
+ reader.readAsDataURL(this.selectedPicture);
+ }
}
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 8383adf0..185c71ab 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -13,8 +13,6 @@ import { ShowResolverService } from './services/show-resolver.service';
import { StreamResolverService } from "./services/stream-resolver.service";
import { ShowDetailsComponent } from './show-details/show-details.component';
import {LoginComponent} from "./login/login.component";
-import {AccountComponent} from "./account/account.component";
-import {AuthenticatedGuard} from "./guards/authenticated-guard.service";
import {UnauthorizedComponent} from "./unauthorized/unauthorized.component";
import {LogoutComponent} from "./logout/logout.component";
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 58330f31..08b28072 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -25,14 +25,12 @@
-
-
+
+ ![]()
-
-
+
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index ab3ba9ec..4450c99f 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -93,4 +93,18 @@ input::-webkit-search-cancel-button
cursor: pointer;
opacity: 1;
}
+}
+
+.profilePicture
+{
+ width: 24px;
+ height: 24px;
+ display: inline-block;
+ vertical-align: middle;
+ border-radius: 50%;
+}
+
+.dropButton
+{
+ outline: none;
}
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 6fc985bd..d64c1904 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -19,7 +19,7 @@ export class AppComponent
isLoading: boolean = false;
account: Account;
- constructor(http: HttpClient, private router: Router, private location: Location, private authManager: AuthService, public dialog: MatDialog)
+ constructor(private http: HttpClient, private router: Router, private location: Location, private authManager: AuthService, public dialog: MatDialog)
{
http.get("api/libraries").subscribe(result =>
{
@@ -81,7 +81,11 @@ export class AppComponent
openAccountDialog()
{
- this.dialog.open(AccountComponent, {width: "500px", data: this.account});
+ const dialog = this.dialog.open(AccountComponent, {width: "500px", data: this.account});
+ dialog.afterClosed().subscribe((result: Account) =>
+ {
+ this.account = result;
+ });
}
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 51e188ee..614507ab 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -38,10 +38,11 @@ import {
OpenIdConfiguration
} from "angular-auth-oidc-client";
import { AccountComponent } from './account/account.component';
-import {AuthenticatedGuard} from "./guards/authenticated-guard.service";
import { UnauthorizedComponent } from './unauthorized/unauthorized.component';
import { LogoutComponent } from './logout/logout.component';
import {MatDialogModule} from '@angular/material/dialog';
+import {FallbackDirective} from "./misc/fallback.directive";
+import {AuthenticatedGuard} from "./misc/guards/authenticated-guard.service";
export function loadConfig(oidcConfigService: OidcConfigService)
{
@@ -64,7 +65,8 @@ export function loadConfig(oidcConfigService: OidcConfigService)
PasswordValidator,
AccountComponent,
UnauthorizedComponent,
- LogoutComponent
+ LogoutComponent,
+ FallbackDirective
],
imports: [
BrowserModule,
diff --git a/src/app/misc/fallback.directive.ts b/src/app/misc/fallback.directive.ts
new file mode 100644
index 00000000..d20307e4
--- /dev/null
+++ b/src/app/misc/fallback.directive.ts
@@ -0,0 +1,18 @@
+import {Directive, ElementRef, HostListener, Input} from '@angular/core';
+
+@Directive({
+ selector: 'img[fallback]'
+})
+export class FallbackDirective
+{
+ @Input() fallback: string;
+
+ constructor(private img: ElementRef) { }
+
+ @HostListener("error")
+ onError()
+ {
+ const html: HTMLImageElement = this.img.nativeElement;
+ html.src = this.fallback;
+ }
+}
diff --git a/src/app/guards/authenticated-guard.service.ts b/src/app/misc/guards/authenticated-guard.service.ts
similarity index 94%
rename from src/app/guards/authenticated-guard.service.ts
rename to src/app/misc/guards/authenticated-guard.service.ts
index ac2266ef..079ac760 100644
--- a/src/app/guards/authenticated-guard.service.ts
+++ b/src/app/misc/guards/authenticated-guard.service.ts
@@ -10,7 +10,7 @@ import {
Router
} from '@angular/router';
import { Observable } from 'rxjs';
-import {AuthService} from "../services/auth.service";
+import {AuthService} from "../../services/auth.service";
@Injectable({
providedIn: 'root'
diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts
index bf12f4dd..465cfc61 100644
--- a/src/app/services/auth.service.ts
+++ b/src/app/services/auth.service.ts
@@ -57,6 +57,6 @@ export class AuthService
if (!this.isAuthenticated)
return null;
console.log(this.user);
- return {email: this.user.email, username: this.user.username};
+ return {email: this.user.email, username: this.user.username, picture: this.user.picture};
}
}
diff --git a/src/models/account.ts b/src/models/account.ts
index 139af1f5..f441c859 100644
--- a/src/models/account.ts
+++ b/src/models/account.ts
@@ -2,4 +2,5 @@ export interface Account
{
username: string;
email: string;
+ picture: string;
}
diff --git a/src/script.js b/src/script.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/test.ts b/src/test.ts
deleted file mode 100644
index ec1961f2..00000000
--- a/src/test.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/dist/zone-testing';
-import { getTestBed } from '@angular/core/testing';
-import {
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-declare const require: any;
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting()
-);
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
diff --git a/static/account.svg b/static/account.svg
new file mode 100644
index 00000000..7a42fa5a
--- /dev/null
+++ b/static/account.svg
@@ -0,0 +1 @@
+
\ No newline at end of file