1 <h1 class=
"sr-only" i18n
>Settings
</h1>
2 <div class=
"form-row"> <!-- profile grid -->
3 <div class=
"form-group col-12 col-lg-4 col-xl-3">
4 <h2 i18n
class=
"account-title">PROFILE
</h2>
7 <div class=
"form-group form-group-right col-12 col-lg-8 col-xl-9">
8 <my-actor-avatar-info [actor]=
"user.account" (avatarChange)=
"onAvatarChange($event)"></my-actor-avatar-info>
10 <div class=
"user-quota mb-3">
12 <div class=
"progress" i18n-title
title=
"Total video quota">
13 <div class=
"progress-bar" role=
"progressbar" [style]=
"{ width: userVideoQuotaPercentage + '%' }" [attr.aria-valuenow]=
"userVideoQuotaUsed" aria-valuemin=
"0" [attr.aria-valuemax]=
"user.videoQuota">{{ userVideoQuotaUsed | bytes:
0 }}
</div>
14 <span class=
"ml-auto mr-2">{{ userVideoQuota }}
</span>
18 <div *
ngIf=
"hasDailyQuota()" class=
"mt-3">
19 <div class=
"progress" i18n-title
title=
"Daily video quota">
20 <div class=
"progress-bar secondary" role=
"progressbar" [style]=
"{ width: userVideoQuotaDailyPercentage + '%' }" [attr.aria-valuenow]=
"userVideoQuotaUsedDaily" aria-valuemin=
"0" [attr.aria-valuemax]=
"user.videoQuotaDaily">{{ userVideoQuotaUsedDaily | bytes:
0 }}
</div>
21 <span class=
"ml-auto mr-2">{{ userVideoQuotaDaily }}
</span>
26 <my-account-profile [user]=
"user" [userInformationLoaded]=
"userInformationLoaded"></my-account-profile>
30 <div class=
"form-row mt-5"> <!-- video settings grid -->
31 <div class=
"form-group col-12 col-lg-4 col-xl-3">
32 <div class=
"anchor" id=
"video-settings"></div> <!-- video settings anchor -->
33 <h2 i18n
class=
"account-title">VIDEO SETTINGS
</h2>
36 <div class=
"form-group form-group-right col-12 col-lg-8 col-xl-9">
37 <my-user-video-settings [user]=
"user" [userInformationLoaded]=
"userInformationLoaded"></my-user-video-settings>
41 <div class=
"form-row mt-5"> <!-- notifications grid -->
42 <div class=
"form-group col-12 col-lg-4 col-xl-3">
43 <div class=
"anchor" id=
"notifications"></div> <!-- notifications anchor -->
44 <h2 i18n
class=
"account-title">NOTIFICATIONS
</h2>
47 <div class=
"form-group form-group-right col-12 col-lg-8 col-xl-9">
48 <my-account-notification-preferences [user]=
"user" [userInformationLoaded]=
"userInformationLoaded"></my-account-notification-preferences>
52 <div class=
"form-row mt-5"> <!-- interface grid -->
53 <div class=
"form-group col-12 col-lg-4 col-xl-3">
54 <h2 i18n
class=
"account-title">INTERFACE
</h2>
57 <div class=
"form-group form-group-right col-12 col-lg-8 col-xl-9">
58 <my-user-interface-settings [user]=
"user" [userInformationLoaded]=
"userInformationLoaded"></my-user-interface-settings>
62 <div class=
"form-row mt-5" *
ngIf=
"user.pluginAuth === null"> <!-- password grid -->
63 <div class=
"form-group col-12 col-lg-4 col-xl-3">
64 <h2 i18n
class=
"account-title">PASSWORD
</h2>
67 <div class=
"form-group form-group-right col-12 col-lg-8 col-xl-9">
68 <my-account-change-password></my-account-change-password>
72 <div class=
"form-row mt-5"> <!-- email grid -->
73 <div class=
"form-group col-12 col-lg-4 col-xl-3">
74 <h2 i18n
class=
"account-title">EMAIL
</h2>
77 <div class=
"form-group form-group-right col-12 col-lg-8 col-xl-9">
78 <my-account-change-email></my-account-change-email>
82 <div class=
"form-row mt-5"> <!-- danger zone grid -->
83 <div class=
"form-group col-12 col-lg-4 col-xl-3">
84 <h2 i18n
class=
"account-title">DANGER ZONE
</h2>
87 <div class=
"form-group form-group-right col-12 col-lg-8 col-xl-9">
88 <my-account-danger-zone [user]=
"user"></my-account-danger-zone>