aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-06-20 16:42:21 +0200
committerChocobozzz <me@florianbigard.com>2022-06-20 16:42:21 +0200
commit75084782b767f51f6158ada1984cf339c6302960 (patch)
tree178904ed08269de95683a063623d17cf87e56fad /client/src
parent9bc3622320dc43474ce4b60c222ec25e6e657b97 (diff)
downloadPeerTube-75084782b767f51f6158ada1984cf339c6302960.tar.gz
PeerTube-75084782b767f51f6158ada1984cf339c6302960.tar.zst
PeerTube-75084782b767f51f6158ada1984cf339c6302960.zip
Handle input error in custom input text
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/+admin/overview/users/user-edit/user-edit.component.html8
-rw-r--r--client/src/app/+admin/overview/users/user-edit/user-password.component.html1
-rw-r--r--client/src/app/+login/login.component.html10
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html12
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html36
-rw-r--r--client/src/app/+reset-password/reset-password.component.html8
-rw-r--r--client/src/app/+signup/+register/steps/register-step-user.component.html4
-rw-r--r--client/src/app/shared/shared-forms/dynamic-form-field.component.html4
-rw-r--r--client/src/app/shared/shared-forms/dynamic-form-field.component.ts11
-rw-r--r--client/src/app/shared/shared-forms/input-text.component.html3
-rw-r--r--client/src/app/shared/shared-forms/input-text.component.ts1
-rw-r--r--client/src/sass/class-helpers.scss8
12 files changed, 49 insertions, 57 deletions
diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
index bfa414164..e484ab8b0 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
@@ -123,13 +123,7 @@
123 </ng-template> 123 </ng-template>
124 </my-help> 124 </my-help>
125 125
126 <my-input-text 126 <my-input-text formControlName="password" inputId="password" [formError]="formErrors['password']" autocomplete="new-password"></my-input-text>
127 formControlName="password" inputId="password" [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
128 ></my-input-text>
129
130 <div *ngIf="formErrors.password" class="form-error">
131 {{ formErrors.password }}
132 </div>
133 </div> 127 </div>
134 128
135 <div class="form-group"> 129 <div class="form-group">
diff --git a/client/src/app/+admin/overview/users/user-edit/user-password.component.html b/client/src/app/+admin/overview/users/user-edit/user-password.component.html
index 35f36e465..13f57024b 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-password.component.html
+++ b/client/src/app/+admin/overview/users/user-edit/user-password.component.html
@@ -1,4 +1,5 @@
1<form role="form" (ngSubmit)="formValidated()" [formGroup]="form"> 1<form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
2
2 <div class="input-group"> 3 <div class="input-group">
3 <input id="password" [attr.type]="showPassword ? 'text' : 'password'" class="form-control" 4 <input id="password" [attr.type]="showPassword ? 'text' : 'password'" class="form-control"
4 formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }" 5 formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html
index 834ea6e51..aac2611c6 100644
--- a/client/src/app/+login/login.component.html
+++ b/client/src/app/+login/login.component.html
@@ -58,12 +58,10 @@
58 <div class="form-group"> 58 <div class="form-group">
59 <label i18n for="password">Password</label> 59 <label i18n for="password">Password</label>
60 60
61 <my-input-text formControlName="password" inputId="password" 61 <my-input-text
62 i18n-placeholder placeholder="Password" 62 formControlName="password" inputId="password" i18n-placeholder placeholder="Password"
63 [ngClass]="{ 'input-error': formErrors['password'] }" 63 [formError]="formErrors['password']" autocomplete="current-password" [tabindex]="2"
64 autocomplete="current-password" [tabindex]="2"></my-input-text> 64 ></my-input-text>
65
66 <div *ngIf="formErrors.password" class="form-error">{{ formErrors.password }}</div>
67 </div> 65 </div>
68 66
69 <input type="submit" class="peertube-button orange-button" i18n-value value="Login" [disabled]="!form.valid"> 67 <input type="submit" class="peertube-button orange-button" i18n-value value="Login" [disabled]="!form.valid">
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 c9f9d8f55..d85be846b 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
@@ -25,14 +25,10 @@
25 </div> 25 </div>
26 26
27 <div class="form-group"> 27 <div class="form-group">
28 <my-input-text formControlName="password" 28 <my-input-text
29 id="password" 29 formControlName="password" id="password" i18n-placeholder placeholder="Current password"
30 i18n-placeholder placeholder="Current password" 30 [formError]="formErrors['password']" autocomplete="current-password"
31 [ngClass]="{ 'input-error': formErrors['password'] }" 31 ></my-input-text>
32 autocomplete="current-password"></my-input-text>
33 <div *ngIf="formErrors['password']" class="form-error">
34 {{ formErrors['password'] }}
35 </div>
36 </div> 32 </div>
37 33
38 <input type="submit" i18n-value value="Change email" [disabled]="!form.valid"> 34 <input type="submit" i18n-value value="Change email" [disabled]="!form.valid">
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 f1deb4273..f961d3294 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,32 +3,20 @@
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 <my-input-text formControlName="current-password" 6 <my-input-text
7 inputId="current-password" 7 formControlName="current-password" inputId="current-password" i18n-placeholder placeholder="Current password"
8 i18n-placeholder placeholder="Current password" 8 [formError]="formErrors['current-password']" autocomplete="current-password"
9 [ngClass]="{ 'input-error': formErrors['current-password'] }" 9 ></my-input-text>
10 autocomplete="current-password"></my-input-text>
11 <div *ngIf="formErrors['current-password']" class="form-error">
12 {{ formErrors['current-password'] }}
13 </div>
14 10
15 <my-input-text formControlName="new-password" 11 <my-input-text
16 inputId="new-password" 12 formControlName="new-password" inputId="new-password" i18n-placeholder placeholder="New password"
17 i18n-placeholder placeholder="New password" 13 [formError]="formErrors['new-password']" autocomplete="new-password"
18 [ngClass]="{ 'input-error': formErrors['new-password'] }" 14 ></my-input-text>
19 autocomplete="new-password"></my-input-text>
20 <div *ngIf="formErrors['new-password']" class="form-error">
21 {{ formErrors['new-password'] }}
22 </div>
23 15
24 <my-input-text formControlName="new-confirmed-password" 16 <my-input-text
25 inputId="new-confirmed-password" 17 formControlName="new-confirmed-password" inputId="new-confirmed-password" i18n-placeholder placeholder="Confirm new password"
26 i18n-placeholder placeholder="Confirm new password" 18 [formError]="formErrors['new-confirmed-password']" autocomplete="new-password"
27 [ngClass]="{ 'input-error': formErrors['new-confirmed-password'] }" 19 ></my-input-text>
28 autocomplete="new-password"></my-input-text>
29 <div *ngIf="formErrors['new-confirmed-password']" class="form-error">
30 {{ formErrors['new-confirmed-password'] }}
31 </div>
32 20
33 <input type="submit" i18n-value value="Change password" [disabled]="!form.valid"> 21 <input type="submit" i18n-value value="Change password" [disabled]="!form.valid">
34</form> 22</form>
diff --git a/client/src/app/+reset-password/reset-password.component.html b/client/src/app/+reset-password/reset-password.component.html
index 130873593..fa53e7526 100644
--- a/client/src/app/+reset-password/reset-password.component.html
+++ b/client/src/app/+reset-password/reset-password.component.html
@@ -7,10 +7,8 @@
7 7
8 <my-input-text 8 <my-input-text
9 formControlName="password" inputId="password" i18n-placeholder placeholder="Password" 9 formControlName="password" inputId="password" i18n-placeholder placeholder="Password"
10 [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password" 10 [formError]="formErrors['password']" autocomplete="new-password"
11 ></my-input-text> 11 ></my-input-text>
12
13 <div *ngIf="formErrors.password" class="form-error">{{ formErrors.password }}</div>
14 </div> 12 </div>
15 13
16 <div class="form-group"> 14 <div class="form-group">
@@ -18,10 +16,8 @@
18 16
19 <my-input-text 17 <my-input-text
20 formControlName="password-confirm" inputId="password-confirm" i18n-placeholder placeholder="Confirmed password" 18 formControlName="password-confirm" inputId="password-confirm" i18n-placeholder placeholder="Confirmed password"
21 [ngClass]="{ 'input-error': formErrors['password-confirm'] }" autocomplete="new-password" 19 [formError]="formErrors['password-confirm']" autocomplete="new-password"
22 ></my-input-text> 20 ></my-input-text>
23
24 <div *ngIf="formErrors['password-confirm']" class="form-error">{{ formErrors['password-confirm'] }}</div>
25 </div> 21 </div>
26 22
27 <input 23 <input
diff --git a/client/src/app/+signup/+register/steps/register-step-user.component.html b/client/src/app/+signup/+register/steps/register-step-user.component.html
index bffcf0346..3e0d35006 100644
--- a/client/src/app/+signup/+register/steps/register-step-user.component.html
+++ b/client/src/app/+signup/+register/steps/register-step-user.component.html
@@ -64,10 +64,8 @@
64 64
65 <my-input-text 65 <my-input-text
66 formControlName="password" inputId="password" 66 formControlName="password" inputId="password"
67 [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password" 67 [formError]="formErrors['password']" autocomplete="new-password"
68 ></my-input-text> 68 ></my-input-text>
69
70 <div *ngIf="formErrors.password" class="form-error">{{ formErrors.password }}</div>
71 </div> 69 </div>
72 </div> 70 </div>
73</form> 71</form>
diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.html b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
index 61f9ae8ff..2dd6cf4ad 100644
--- a/client/src/app/shared/shared-forms/dynamic-form-field.component.html
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
@@ -18,7 +18,7 @@
18 </select> 18 </select>
19 </div> 19 </div>
20 20
21 <my-input-text *ngIf="setting.type === 'input-password'" [formControlName]="setting.name" [inputId]="setting.name"></my-input-text> 21 <my-input-text *ngIf="setting.type === 'input-password'" [formError]="formErrors['settings.name']" [formControlName]="setting.name" [inputId]="setting.name"></my-input-text>
22 22
23 <textarea *ngIf="setting.type === 'input-textarea'" type="text" [id]="setting.name" [formControlName]="setting.name"></textarea> 23 <textarea *ngIf="setting.type === 'input-textarea'" type="text" [id]="setting.name" [formControlName]="setting.name"></textarea>
24 24
@@ -40,7 +40,7 @@
40 40
41 <div *ngIf="setting.type === 'html'" [innerHTML]="setting.html"></div> 41 <div *ngIf="setting.type === 'html'" [innerHTML]="setting.html"></div>
42 42
43 <div *ngIf="setting.type !== 'markdown-text' && setting.type !== 'markdown-enhanced' && formErrors[setting.name]" class="form-error"> 43 <div *ngIf="hasDedicatedFormError() && formErrors[setting.name]" class="form-error">
44 {{ formErrors[setting.name] }} 44 {{ formErrors[setting.name] }}
45 </div> 45 </div>
46 46
diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.ts b/client/src/app/shared/shared-forms/dynamic-form-field.component.ts
index b63890797..e1a1f8034 100644
--- a/client/src/app/shared/shared-forms/dynamic-form-field.component.ts
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.ts
@@ -12,4 +12,15 @@ export class DynamicFormFieldComponent {
12 @Input() form: FormGroup 12 @Input() form: FormGroup
13 @Input() formErrors: any 13 @Input() formErrors: any
14 @Input() setting: RegisterClientFormFieldOptions 14 @Input() setting: RegisterClientFormFieldOptions
15
16 hasDedicatedFormError () {
17 const dedicated = new Set<RegisterClientFormFieldOptions['type']>([
18 'input-checkbox',
19 'input',
20 'select',
21 'input-textarea'
22 ])
23
24 return dedicated.has(this.setting.type)
25 }
15} 26}
diff --git a/client/src/app/shared/shared-forms/input-text.component.html b/client/src/app/shared/shared-forms/input-text.component.html
index f890c4f02..abb53a085 100644
--- a/client/src/app/shared/shared-forms/input-text.component.html
+++ b/client/src/app/shared/shared-forms/input-text.component.html
@@ -3,6 +3,7 @@
3 [id]="inputId" [autocomplete]="autocomplete" [value]="value" [placeholder]="placeholder" [tabindex]="tabindex" 3 [id]="inputId" [autocomplete]="autocomplete" [value]="value" [placeholder]="placeholder" [tabindex]="tabindex"
4 [(ngModel)]="value" (ngModelChange)="update()" [readonly]="readonly" 4 [(ngModel)]="value" (ngModelChange)="update()" [readonly]="readonly"
5 #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control" 5 #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control"
6 [ngClass]="{ 'input-error': formError }"
6 /> 7 />
7 8
8 <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary" [title]="toggleTitle"> 9 <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary" [title]="toggleTitle">
@@ -18,3 +19,5 @@
18 <span class="copy-text">Copy</span> 19 <span class="copy-text">Copy</span>
19 </button> 20 </button>
20</div> 21</div>
22
23<div *ngIf="formError" class="form-error">{{ formError }}</div>
diff --git a/client/src/app/shared/shared-forms/input-text.component.ts b/client/src/app/shared/shared-forms/input-text.component.ts
index ed4637c17..d667ed663 100644
--- a/client/src/app/shared/shared-forms/input-text.component.ts
+++ b/client/src/app/shared/shared-forms/input-text.component.ts
@@ -24,6 +24,7 @@ export class InputTextComponent implements ControlValueAccessor {
24 @Input() withCopy = false 24 @Input() withCopy = false
25 @Input() readonly = false 25 @Input() readonly = false
26 @Input() show = false 26 @Input() show = false
27 @Input() formError: string
27 28
28 constructor (private notifier: Notifier) { } 29 constructor (private notifier: Notifier) { }
29 30
diff --git a/client/src/sass/class-helpers.scss b/client/src/sass/class-helpers.scss
index f09d84882..2994a57ae 100644
--- a/client/src/sass/class-helpers.scss
+++ b/client/src/sass/class-helpers.scss
@@ -77,6 +77,10 @@
77 } 77 }
78} 78}
79 79
80.input-group .input-error {
81 z-index: 3;
82}
83
80.form-error, 84.form-error,
81.form-warning { 85.form-warning {
82 display: block; 86 display: block;
@@ -87,7 +91,9 @@
87 color: $red; 91 color: $red;
88} 92}
89 93
90.input-error:focus { 94// Disable red error on input focus
95.input-error:focus,
96.input-group:focus-within {
91 & + .form-error, 97 & + .form-error,
92 & + * + .form-error, // Markdown textarea 98 & + * + .form-error, // Markdown textarea
93 & + * + * + .form-error { 99 & + * + * + .form-error {