Verified Commit 75084782 authored by Chocobozzz's avatar Chocobozzz
Browse files

Handle input error in custom input text

parent 9bc36223
......@@ -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">
......
<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'] }"
......
......@@ -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">
......
......@@ -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">
......
......@@ -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>
......@@ -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
......
......@@ -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>
......@@ -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>
......
......@@ -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,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>
......@@ -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) { }
......
......@@ -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 {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment