aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/src/app/account/account-settings/account-settings.component.html10
-rw-r--r--client/src/app/account/account-settings/account-settings.component.scss21
-rw-r--r--client/src/app/account/account-settings/account-settings.component.ts4
-rw-r--r--client/src/app/core/auth/auth.service.ts36
-rw-r--r--client/src/app/menu/menu.component.html2
-rw-r--r--client/src/app/menu/menu.component.scss8
-rw-r--r--client/src/app/menu/menu.component.ts4
-rw-r--r--client/src/app/shared/users/user.model.ts25
-rw-r--r--client/src/assets/default-avatar.pngbin0 -> 1674 bytes
-rw-r--r--client/src/sass/_mixins.scss5
10 files changed, 72 insertions, 43 deletions
diff --git a/client/src/app/account/account-settings/account-settings.component.html b/client/src/app/account/account-settings/account-settings.component.html
index 2509eb5aa..9e9f688d2 100644
--- a/client/src/app/account/account-settings/account-settings.component.html
+++ b/client/src/app/account/account-settings/account-settings.component.html
@@ -1,7 +1,13 @@
1<div class="user-info"> 1<div class="user">
2 {{ user.username }} 2 <img [src]="getAvatarPath()" alt="Avatar" />
3
4 <div class="user-info">
5 <div class="user-info-username">{{ user.username }}</div>
6 <div class="user-info-followers">{{ user.account.followersCount }} subscribers</div>
7 </div>
3</div> 8</div>
4 9
10
5<div class="account-title">Account settings</div> 11<div class="account-title">Account settings</div>
6<my-account-change-password></my-account-change-password> 12<my-account-change-password></my-account-change-password>
7 13
diff --git a/client/src/app/account/account-settings/account-settings.component.scss b/client/src/app/account/account-settings/account-settings.component.scss
index a0822631d..f514809b0 100644
--- a/client/src/app/account/account-settings/account-settings.component.scss
+++ b/client/src/app/account/account-settings/account-settings.component.scss
@@ -1,6 +1,21 @@
1.user-info { 1.user {
2 font-size: 20px; 2 display: flex;
3 font-weight: $font-bold; 3
4 img {
5 @include avatar(50px);
6 margin-right: 15px;
7 }
8
9 .user-info {
10 .user-info-username {
11 font-size: 20px;
12 font-weight: $font-bold;
13 }
14
15 .user-info-followers {
16 font-size: 15px;
17 }
18 }
4} 19}
5 20
6.account-title { 21.account-title {
diff --git a/client/src/app/account/account-settings/account-settings.component.ts b/client/src/app/account/account-settings/account-settings.component.ts
index c3b670e02..cba251000 100644
--- a/client/src/app/account/account-settings/account-settings.component.ts
+++ b/client/src/app/account/account-settings/account-settings.component.ts
@@ -15,4 +15,8 @@ export class AccountSettingsComponent implements OnInit {
15 ngOnInit () { 15 ngOnInit () {
16 this.user = this.authService.getUser() 16 this.user = this.authService.getUser()
17 } 17 }
18
19 getAvatarPath () {
20 return this.user.getAvatarPath()
21 }
18} 22}
diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts
index 9e6c6b888..fd2708c11 100644
--- a/client/src/app/core/auth/auth.service.ts
+++ b/client/src/app/core/auth/auth.service.ts
@@ -1,30 +1,25 @@
1import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'
1import { Injectable } from '@angular/core' 2import { Injectable } from '@angular/core'
2import { Router } from '@angular/router' 3import { Router } from '@angular/router'
3import { Observable } from 'rxjs/Observable' 4
4import { Subject } from 'rxjs/Subject' 5import { NotificationsService } from 'angular2-notifications'
5import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http' 6import 'rxjs/add/observable/throw'
6import { ReplaySubject } from 'rxjs/ReplaySubject'
7import 'rxjs/add/operator/do' 7import 'rxjs/add/operator/do'
8import 'rxjs/add/operator/map' 8import 'rxjs/add/operator/map'
9import 'rxjs/add/operator/mergeMap' 9import 'rxjs/add/operator/mergeMap'
10import 'rxjs/add/observable/throw' 10import { Observable } from 'rxjs/Observable'
11 11import { ReplaySubject } from 'rxjs/ReplaySubject'
12import { NotificationsService } from 'angular2-notifications' 12import { Subject } from 'rxjs/Subject'
13 13import { OAuthClientLocal, User as UserServerModel, UserRefreshToken, UserRole, VideoChannel } from '../../../../../shared'
14import { AuthStatus } from './auth-status.model' 14import { Account } from '../../../../../shared/models/accounts'
15import { AuthUser } from './auth-user.model' 15import { UserLogin } from '../../../../../shared/models/users/user-login.model'
16import {
17 OAuthClientLocal,
18 UserRole,
19 UserRefreshToken,
20 VideoChannel,
21 User as UserServerModel
22} from '../../../../../shared'
23// Do not use the barrel (dependency loop) 16// Do not use the barrel (dependency loop)
24import { RestExtractor } from '../../shared/rest' 17import { RestExtractor } from '../../shared/rest'
25import { UserLogin } from '../../../../../shared/models/users/user-login.model'
26import { UserConstructorHash } from '../../shared/users/user.model' 18import { UserConstructorHash } from '../../shared/users/user.model'
27 19
20import { AuthStatus } from './auth-status.model'
21import { AuthUser } from './auth-user.model'
22
28interface UserLoginWithUsername extends UserLogin { 23interface UserLoginWithUsername extends UserLogin {
29 access_token: string 24 access_token: string
30 refresh_token: string 25 refresh_token: string
@@ -42,10 +37,7 @@ interface UserLoginWithUserInformation extends UserLogin {
42 displayNSFW: boolean 37 displayNSFW: boolean
43 email: string 38 email: string
44 videoQuota: number 39 videoQuota: number
45 account: { 40 account: Account
46 id: number
47 uuid: string
48 }
49 videoChannels: VideoChannel[] 41 videoChannels: VideoChannel[]
50} 42}
51 43
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 0ed8ec518..7a80fa4de 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -1,5 +1,7 @@
1<menu> 1<menu>
2 <div *ngIf="isLoggedIn" class="logged-in-block"> 2 <div *ngIf="isLoggedIn" class="logged-in-block">
3 <img [src]="getUserAvatarPath()" alt="Avatar" />
4
3 <div class="logged-in-info"> 5 <div class="logged-in-info">
4 <a routerLink="/account/settings" class="logged-in-username">{{ user.username }}</a> 6 <a routerLink="/account/settings" class="logged-in-username">{{ user.username }}</a>
5 <div class="logged-in-email">{{ user.email }}</div> 7 <div class="logged-in-email">{{ user.email }}</div>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 9d67ca66c..5d6fd61c6 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -21,9 +21,15 @@ menu {
21 justify-content: center; 21 justify-content: center;
22 margin-bottom: 35px; 22 margin-bottom: 35px;
23 23
24 img {
25 margin-left: 20px;
26 margin-right: 10px;
27
28 @include avatar(34px);
29 }
30
24 .logged-in-info { 31 .logged-in-info {
25 flex-grow: 1; 32 flex-grow: 1;
26 margin-left: 40px;
27 33
28 .logged-in-username { 34 .logged-in-username {
29 font-size: 16px; 35 font-size: 16px;
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index 4c35bb3a5..8b8b714a8 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -51,6 +51,10 @@ export class MenuComponent implements OnInit {
51 ) 51 )
52 } 52 }
53 53
54 getUserAvatarPath () {
55 return this.user.getAvatarPath()
56 }
57
54 isRegistrationAllowed () { 58 isRegistrationAllowed () {
55 return this.serverService.getConfig().signup.allowed 59 return this.serverService.getConfig().signup.allowed
56 } 60 }
diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts
index b075ab717..83990d8b8 100644
--- a/client/src/app/shared/users/user.model.ts
+++ b/client/src/app/shared/users/user.model.ts
@@ -1,10 +1,5 @@
1import { 1import { hasUserRight, User as UserServerModel, UserRight, UserRole, VideoChannel } from '../../../../../shared'
2 User as UserServerModel, 2import { Account } from '../../../../../shared/models/accounts'
3 UserRole,
4 VideoChannel,
5 UserRight,
6 hasUserRight
7} from '../../../../../shared'
8 3
9export type UserConstructorHash = { 4export type UserConstructorHash = {
10 id: number, 5 id: number,
@@ -14,10 +9,7 @@ export type UserConstructorHash = {
14 videoQuota?: number, 9 videoQuota?: number,
15 displayNSFW?: boolean, 10 displayNSFW?: boolean,
16 createdAt?: Date, 11 createdAt?: Date,
17 account?: { 12 account?: Account,
18 id: number
19 uuid: string
20 },
21 videoChannels?: VideoChannel[] 13 videoChannels?: VideoChannel[]
22} 14}
23export class User implements UserServerModel { 15export class User implements UserServerModel {
@@ -27,10 +19,7 @@ export class User implements UserServerModel {
27 role: UserRole 19 role: UserRole
28 displayNSFW: boolean 20 displayNSFW: boolean
29 videoQuota: number 21 videoQuota: number
30 account: { 22 account: Account
31 id: number
32 uuid: string
33 }
34 videoChannels: VideoChannel[] 23 videoChannels: VideoChannel[]
35 createdAt: Date 24 createdAt: Date
36 25
@@ -61,4 +50,10 @@ export class User implements UserServerModel {
61 hasRight (right: UserRight) { 50 hasRight (right: UserRight) {
62 return hasUserRight(this.role, right) 51 return hasUserRight(this.role, right)
63 } 52 }
53
54 getAvatarPath () {
55 if (this.account && this.account.avatar) return this.account.avatar.path
56
57 return '/assets/default-avatar.png'
58 }
64} 59}
diff --git a/client/src/assets/default-avatar.png b/client/src/assets/default-avatar.png
new file mode 100644
index 000000000..4b7fd2c0a
--- /dev/null
+++ b/client/src/assets/default-avatar.png
Binary files differ
diff --git a/client/src/sass/_mixins.scss b/client/src/sass/_mixins.scss
index 5798b8f6e..e44cf064d 100644
--- a/client/src/sass/_mixins.scss
+++ b/client/src/sass/_mixins.scss
@@ -39,3 +39,8 @@
39 @include peertube-button; 39 @include peertube-button;
40 @include disable-default-a-behaviour; 40 @include disable-default-a-behaviour;
41} 41}
42
43@mixin avatar ($size) {
44 width: $size;
45 height: $size;
46}