</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'] }"
<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">
</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">
<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>
<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">
<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
<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>
</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>
<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>
@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)
+ }
}
[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">
<span class="copy-text">Copy</span>
</button>
</div>
+
+<div *ngIf="formError" class="form-error">{{ formError }}</div>
@Input() withCopy = false
@Input() readonly = false
@Input() show = false
+ @Input() formError: string
constructor (private notifier: Notifier) { }
}
}
+.input-group .input-error {
+ z-index: 3;
+}
+
.form-error,
.form-warning {
display: block;
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 {