aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-account
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-12-04 15:58:55 +0100
committerRigel Kent <sendmemail@rigelk.eu>2020-12-04 16:01:53 +0100
commitf8b530e0a523a0d9ff469ef716838374c395a360 (patch)
treea55d49365e539582dd5000a2c73b9351df93a52d /client/src/app/+my-account
parentaa5ee5017a83b280352f8dbcfed2d4741709a4fd (diff)
downloadPeerTube-f8b530e0a523a0d9ff469ef716838374c395a360.tar.gz
PeerTube-f8b530e0a523a0d9ff469ef716838374c395a360.tar.zst
PeerTube-f8b530e0a523a0d9ff469ef716838374c395a360.zip
unify inputs requiring buttons like password inputs
Diffstat (limited to 'client/src/app/+my-account')
-rw-r--r--client/src/app/+my-account/my-account-applications/my-account-applications.component.html8
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html13
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss11
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html27
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss13
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts4
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss2
7 files changed, 43 insertions, 35 deletions
diff --git a/client/src/app/+my-account/my-account-applications/my-account-applications.component.html b/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
index 3fbb79c71..68d094a4f 100644
--- a/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
+++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
@@ -8,7 +8,7 @@
8 <h2 i18n class="applications-title">SUBSCRIPTION FEED</h2> 8 <h2 i18n class="applications-title">SUBSCRIPTION FEED</h2>
9 <div i18n class="applications-description"> 9 <div i18n class="applications-description">
10 Use third-party feed aggregators to retrieve the list of videos from 10 Use third-party feed aggregators to retrieve the list of videos from
11 channels you subscribed to. Make sure to keep your token private. 11 channels you subscribed to.
12 </div> 12 </div>
13 </div> 13 </div>
14 14
@@ -16,12 +16,14 @@
16 16
17 <div class="form-group"> 17 <div class="form-group">
18 <label i18n for="feed-url">Feed URL</label> 18 <label i18n for="feed-url">Feed URL</label>
19 <my-input-readonly-copy [value]="feedUrl"></my-input-readonly-copy> 19 <my-input-toggle-hidden [value]="feedUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
20 </div> 20 </div>
21 21
22 <div class="form-group"> 22 <div class="form-group">
23 <label i18n for="feed-token">Feed Token</label> 23 <label i18n for="feed-token">Feed Token</label>
24 <my-input-readonly-copy [value]="feedToken"></my-input-readonly-copy> 24 <my-input-toggle-hidden [value]="feedToken" [withCopy]="true" [readonly]="true"></my-input-toggle-hidden>
25
26 <div class="form-group-description" i18n>⚠️ Never share your feed token with anyone.</div>
25 </div> 27 </div>
26 28
27 </div> 29 </div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
index ce176d682..29823bdec 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
@@ -12,9 +12,8 @@
12<form role="form" class="change-email" (ngSubmit)="changeEmail()" [formGroup]="form" *ngIf="user.pluginAuth === null"> 12<form role="form" class="change-email" (ngSubmit)="changeEmail()" [formGroup]="form" *ngIf="user.pluginAuth === null">
13 13
14 <div class="form-group"> 14 <div class="form-group">
15 <label i18n for="new-email">New email</label>
16 <input 15 <input
17 type="email" id="new-email" i18n-placeholder placeholder="Your new email" class="form-control" 16 type="email" id="new-email" i18n-placeholder placeholder="New email" class="form-control"
18 formControlName="new-email" [ngClass]="{ 'input-error': formErrors['new-email'] }" 17 formControlName="new-email" [ngClass]="{ 'input-error': formErrors['new-email'] }"
19 > 18 >
20 <div *ngIf="formErrors['new-email']" class="form-error"> 19 <div *ngIf="formErrors['new-email']" class="form-error">
@@ -23,11 +22,11 @@
23 </div> 22 </div>
24 23
25 <div class="form-group"> 24 <div class="form-group">
26 <label i18n for="new-email">Your current password</label> 25 <my-input-toggle-hidden formControlName="password"
27 <input 26 id="password"
28 type="password" id="password" i18n-placeholder placeholder="Your password" autocomplete="off" 27 i18n-placeholder placeholder="Current password"
29 formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }" class="form-control" 28 [ngClass]="{ 'input-error': formErrors['password'] }"
30 > 29 autocomplete="current-password"></my-input-toggle-hidden>
31 <div *ngIf="formErrors['password']" class="form-error"> 30 <div *ngIf="formErrors['password']" class="form-error">
32 {{ formErrors['password'] }} 31 {{ formErrors['password'] }}
33 </div> 32 </div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
index aec709ea0..a8b9be0d1 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
@@ -6,7 +6,11 @@ label {
6 font-size: 100%; 6 font-size: 100%;
7} 7}
8 8
9input[type=password], 9my-input-toggle-hidden {
10 width: 340px;
11 display: block;
12}
13
10input[type=email] { 14input[type=email] {
11 @include peertube-input-text(340px); 15 @include peertube-input-text(340px);
12 16
@@ -20,10 +24,13 @@ input[type=submit] {
20 24
21.current-email, 25.current-email,
22.pending-email { 26.pending-email {
23 font-size: 16px;
24 margin-bottom: 15px; 27 margin-bottom: 15px;
25 28
26 .email { 29 .email {
27 font-weight: $font-semibold; 30 font-weight: $font-semibold;
28 } 31 }
29} 32}
33
34.form-group {
35 width: max-content;
36}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
index 4756cfecd..f1127b6a1 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
@@ -3,26 +3,29 @@
3<form role="form" (ngSubmit)="changePassword()" [formGroup]="form"> 3<form role="form" (ngSubmit)="changePassword()" [formGroup]="form">
4 4
5 <label i18n for="current-password">Change password</label> 5 <label i18n for="current-password">Change password</label>
6 <input 6 <my-input-toggle-hidden formControlName="current-password"
7 type="password" id="current-password" i18n-placeholder placeholder="Current password" autocomplete="current-password" 7 id="current-password"
8 formControlName="current-password" [ngClass]="{ 'input-error': formErrors['current-password'] }" class="form-control" 8 i18n-placeholder placeholder="Current password"
9 > 9 [ngClass]="{ 'input-error': formErrors['current-password'] }"
10 autocomplete="current-password"></my-input-toggle-hidden>
10 <div *ngIf="formErrors['current-password']" class="form-error"> 11 <div *ngIf="formErrors['current-password']" class="form-error">
11 {{ formErrors['current-password'] }} 12 {{ formErrors['current-password'] }}
12 </div> 13 </div>
13 14
14 <input 15 <my-input-toggle-hidden formControlName="new-password"
15 type="password" id="new-password" i18n-placeholder placeholder="New password" autocomplete="new-password" 16 id="new-password"
16 formControlName="new-password" [ngClass]="{ 'input-error': formErrors['new-password'] }" class="form-control" 17 i18n-placeholder placeholder="New password"
17 > 18 [ngClass]="{ 'input-error': formErrors['new-password'] }"
19 autocomplete="new-password"></my-input-toggle-hidden>
18 <div *ngIf="formErrors['new-password']" class="form-error"> 20 <div *ngIf="formErrors['new-password']" class="form-error">
19 {{ formErrors['new-password'] }} 21 {{ formErrors['new-password'] }}
20 </div> 22 </div>
21 23
22 <input 24 <my-input-toggle-hidden formControlName="new-confirmed-password"
23 type="password" id="new-confirmed-password" i18n-placeholder placeholder="Confirm new password" autocomplete="new-password" 25 id="new-confirmed-password"
24 formControlName="new-confirmed-password" class="form-control" 26 i18n-placeholder placeholder="Confirm new password"
25 > 27 [ngClass]="{ 'input-error': formErrors['new-confirmed-password'] }"
28 autocomplete="new-password"></my-input-toggle-hidden>
26 <div *ngIf="formErrors['new-confirmed-password']" class="form-error"> 29 <div *ngIf="formErrors['new-confirmed-password']" class="form-error">
27 {{ formErrors['new-confirmed-password'] }} 30 {{ formErrors['new-confirmed-password'] }}
28 </div> 31 </div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
index 381afae07..0d1f3094a 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
@@ -6,14 +6,14 @@ label {
6 font-size: 100%; 6 font-size: 100%;
7} 7}
8 8
9input[type=password] { 9my-input-toggle-hidden {
10 @include peertube-input-text(340px); 10 width: 340px;
11 display: block; 11 display: block;
12}
12 13
13 &#new-password, 14#new-password,
14 &#new-confirmed-password { 15#new-confirmed-password {
15 margin-top: 15px; 16 margin-top: 15px;
16 }
17} 17}
18 18
19input[type=submit] { 19input[type=submit] {
@@ -22,4 +22,3 @@ input[type=submit] {
22 22
23 margin-top: 15px; 23 margin-top: 15px;
24} 24}
25
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
index ba68bab32..e034aedef 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
@@ -1,7 +1,7 @@
1import { filter } from 'rxjs/operators' 1import { filter } from 'rxjs/operators'
2import { Component, OnInit } from '@angular/core' 2import { Component, OnInit } from '@angular/core'
3import { AuthService, Notifier, UserService } from '@app/core' 3import { AuthService, Notifier, UserService } from '@app/core'
4import { USER_CONFIRM_PASSWORD_VALIDATOR, USER_PASSWORD_VALIDATOR } from '@app/shared/form-validators/user-validators' 4import { USER_CONFIRM_PASSWORD_VALIDATOR, USER_PASSWORD_VALIDATOR, USER_EXISTING_PASSWORD_VALIDATOR } from '@app/shared/form-validators/user-validators'
5import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' 5import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
6import { User } from '@shared/models' 6import { User } from '@shared/models'
7 7
@@ -25,7 +25,7 @@ export class MyAccountChangePasswordComponent extends FormReactive implements On
25 25
26 ngOnInit () { 26 ngOnInit () {
27 this.buildForm({ 27 this.buildForm({
28 'current-password': USER_PASSWORD_VALIDATOR, 28 'current-password': USER_EXISTING_PASSWORD_VALIDATOR,
29 'new-password': USER_PASSWORD_VALIDATOR, 29 'new-password': USER_PASSWORD_VALIDATOR,
30 'new-confirmed-password': USER_CONFIRM_PASSWORD_VALIDATOR 30 'new-confirmed-password': USER_CONFIRM_PASSWORD_VALIDATOR
31 }) 31 })
diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss
index fe78a57a4..d79ff690b 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss
@@ -2,8 +2,6 @@
2@import '_mixins'; 2@import '_mixins';
3 3
4.delete-me { 4.delete-me {
5 font-size: 15px;
6
7 button { 5 button {
8 @include peertube-button; 6 @include peertube-button;
9 @include danger-button; 7 @include danger-button;