OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

Handle input error in custom input text

pull/5023/head
Chocobozzz 2022-06-20 16:42:21 +02:00
parent 9bc3622320
commit 75084782b7
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
12 changed files with 49 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/app/+admin/overview/users/user-edit/user-edit.component.html
View File

@ -123,13 +123,7 @@
</ng-template>
</my-help>
<my-input-text
formControlName="password" inputId="password" [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
></my-input-text>
<div *ngIf="formErrors.password" class="form-error">
{{ formErrors.password }}
</div>
<my-input-text formControlName="password" inputId="password" [formError]="formErrors['password']" autocomplete="new-password"></my-input-text>
</div>
<div class="form-group">

1
client/src/app/+admin/overview/users/user-edit/user-password.component.html
View File

@ -1,4 +1,5 @@
<form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
<div class="input-group">
<input id="password" [attr.type]="showPassword ? 'text' : 'password'" class="form-control"
formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"

10
client/src/app/+login/login.component.html
View File

@ -58,12 +58,10 @@
<div class="form-group">
<label i18n for="password">Password</label>
<my-input-text formControlName="password" inputId="password"
i18n-placeholder placeholder="Password"
[ngClass]="{ 'input-error': formErrors['password'] }"
autocomplete="current-password" [tabindex]="2"></my-input-text>
<div *ngIf="formErrors.password" class="form-error">{{ formErrors.password }}</div>
<my-input-text
formControlName="password" inputId="password" i18n-placeholder placeholder="Password"
[formError]="formErrors['password']" autocomplete="current-password" [tabindex]="2"
></my-input-text>
</div>
<input type="submit" class="peertube-button orange-button" i18n-value value="Login" [disabled]="!form.valid">

12
client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
View File

@ -25,14 +25,10 @@
</div>
<div class="form-group">
<my-input-text formControlName="password"
id="password"
i18n-placeholder placeholder="Current password"
[ngClass]="{ 'input-error': formErrors['password'] }"
autocomplete="current-password"></my-input-text>
<div *ngIf="formErrors['password']" class="form-error">
{{ formErrors['password'] }}
</div>
<my-input-text
formControlName="password" id="password" i18n-placeholder placeholder="Current password"
[formError]="formErrors['password']" autocomplete="current-password"
></my-input-text>
</div>
<input type="submit" i18n-value value="Change email" [disabled]="!form.valid">

36
client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
View File

@ -3,32 +3,20 @@
<form role="form" (ngSubmit)="changePassword()" [formGroup]="form">
<label i18n for="current-password">Change password</label>
<my-input-text formControlName="current-password"
inputId="current-password"
i18n-placeholder placeholder="Current password"
[ngClass]="{ 'input-error': formErrors['current-password'] }"
autocomplete="current-password"></my-input-text>
<div *ngIf="formErrors['current-password']" class="form-error">
{{ formErrors['current-password'] }}
</div>
<my-input-text
formControlName="current-password" inputId="current-password" i18n-placeholder placeholder="Current password"
[formError]="formErrors['current-password']" autocomplete="current-password"
></my-input-text>
<my-input-text formControlName="new-password"
inputId="new-password"
i18n-placeholder placeholder="New password"
[ngClass]="{ 'input-error': formErrors['new-password'] }"
autocomplete="new-password"></my-input-text>
<div *ngIf="formErrors['new-password']" class="form-error">
{{ formErrors['new-password'] }}
</div>
<my-input-text
formControlName="new-password" inputId="new-password" i18n-placeholder placeholder="New password"
[formError]="formErrors['new-password']" autocomplete="new-password"
></my-input-text>
<my-input-text formControlName="new-confirmed-password"
inputId="new-confirmed-password"
i18n-placeholder placeholder="Confirm new password"
[ngClass]="{ 'input-error': formErrors['new-confirmed-password'] }"
autocomplete="new-password"></my-input-text>
<div *ngIf="formErrors['new-confirmed-password']" class="form-error">
{{ formErrors['new-confirmed-password'] }}
</div>
<my-input-text
formControlName="new-confirmed-password" inputId="new-confirmed-password" i18n-placeholder placeholder="Confirm new password"
[formError]="formErrors['new-confirmed-password']" autocomplete="new-password"
></my-input-text>
<input type="submit" i18n-value value="Change password" [disabled]="!form.valid">
</form>

8
client/src/app/+reset-password/reset-password.component.html
View File

@ -7,10 +7,8 @@
<my-input-text
formControlName="password" inputId="password" i18n-placeholder placeholder="Password"
[ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
[formError]="formErrors['password']" autocomplete="new-password"
></my-input-text>
<div *ngIf="formErrors.password" class="form-error">{{ formErrors.password }}</div>
</div>
<div class="form-group">
@ -18,10 +16,8 @@
<my-input-text
formControlName="password-confirm" inputId="password-confirm" i18n-placeholder placeholder="Confirmed password"
[ngClass]="{ 'input-error': formErrors['password-confirm'] }" autocomplete="new-password"
[formError]="formErrors['password-confirm']" autocomplete="new-password"
></my-input-text>
<div *ngIf="formErrors['password-confirm']" class="form-error">{{ formErrors['password-confirm'] }}</div>
</div>
<input

4
client/src/app/+signup/+register/steps/register-step-user.component.html
View File

@ -64,10 +64,8 @@
<my-input-text
formControlName="password" inputId="password"
[ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
[formError]="formErrors['password']" autocomplete="new-password"
></my-input-text>
<div *ngIf="formErrors.password" class="form-error">{{ formErrors.password }}</div>
</div>
</div>
</form>

4
client/src/app/shared/shared-forms/dynamic-form-field.component.html
View File

@ -18,7 +18,7 @@
</select>
</div>
<my-input-text *ngIf="setting.type === 'input-password'" [formControlName]="setting.name" [inputId]="setting.name"></my-input-text>
<my-input-text *ngIf="setting.type === 'input-password'" [formError]="formErrors['settings.name']" [formControlName]="setting.name" [inputId]="setting.name"></my-input-text>
<textarea *ngIf="setting.type === 'input-textarea'" type="text" [id]="setting.name" [formControlName]="setting.name"></textarea>
@ -40,7 +40,7 @@
<div *ngIf="setting.type === 'html'" [innerHTML]="setting.html"></div>
<div *ngIf="setting.type !== 'markdown-text' && setting.type !== 'markdown-enhanced' && formErrors[setting.name]" class="form-error">
<div *ngIf="hasDedicatedFormError() && formErrors[setting.name]" class="form-error">
{{ formErrors[setting.name] }}
</div>

11
client/src/app/shared/shared-forms/dynamic-form-field.component.ts
View File

@ -12,4 +12,15 @@ export class DynamicFormFieldComponent {
@Input() form: FormGroup
@Input() formErrors: any
@Input() setting: RegisterClientFormFieldOptions
hasDedicatedFormError () {
const dedicated = new Set<RegisterClientFormFieldOptions['type']>([
'input-checkbox',
'input',
'select',
'input-textarea'
])
return dedicated.has(this.setting.type)
}
}

3
client/src/app/shared/shared-forms/input-text.component.html
View File

@ -3,6 +3,7 @@
[id]="inputId" [autocomplete]="autocomplete" [value]="value" [placeholder]="placeholder" [tabindex]="tabindex"
[(ngModel)]="value" (ngModelChange)="update()" [readonly]="readonly"
#input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control"
[ngClass]="{ 'input-error': formError }"
/>
<button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary" [title]="toggleTitle">
@ -18,3 +19,5 @@
<span class="copy-text">Copy</span>
</button>
</div>
<div *ngIf="formError" class="form-error">{{ formError }}</div>

1
client/src/app/shared/shared-forms/input-text.component.ts
View File

@ -24,6 +24,7 @@ export class InputTextComponent implements ControlValueAccessor {
@Input() withCopy = false
@Input() readonly = false
@Input() show = false
@Input() formError: string
constructor (private notifier: Notifier) { }

8
client/src/sass/class-helpers.scss
View File

@ -77,6 +77,10 @@
}
}
.input-group .input-error {
z-index: 3;
}
.form-error,
.form-warning {
display: block;
@ -87,7 +91,9 @@
color: $red;
}
.input-error:focus {
// Disable red error on input focus
.input-error:focus,
.input-group:focus-within {
& + .form-error,
& + * + .form-error, // Markdown textarea
& + * + * + .form-error {