Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Framasoft
PeerTube
PeerTube
Commits
75084782
Verified
Commit
75084782
authored
Jun 20, 2022
by
Chocobozzz
Browse files
Handle input error in custom input text
parent
9bc36223
Changes
12
Hide whitespace changes
Inline
Side-by-side
client/src/app/+admin/overview/users/user-edit/user-edit.component.html
View file @
75084782
...
...
@@ -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"
>
...
...
client/src/app/+admin/overview/users/user-edit/user-password.component.html
View file @
75084782
<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'] }"
...
...
client/src/app/+login/login.component.html
View file @
75084782
...
...
@@ -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"
>
...
...
client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
View file @
75084782
...
...
@@ -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"
>
...
...
client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
View file @
75084782
...
...
@@ -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>
client/src/app/+reset-password/reset-password.component.html
View file @
75084782
...
...
@@ -7,10 +7,8 @@
<my-input-text
formControlName=
"password"
inputId=
"password"
i18n-placeholder
placeholder=
"Password"
[
ngClass]=
"{ 'input-e
rror
':
formErrors['password']
}
"
autocomplete=
"new-password"
[
formE
rror
]=
"
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-e
rror
':
formErrors['password-confirm']
}
"
autocomplete=
"new-password"
[
formE
rror
]=
"
formErrors['password-confirm']"
autocomplete=
"new-password"
></my-input-text>
<div
*ngIf=
"formErrors['password-confirm']"
class=
"form-error"
>
{{ formErrors['password-confirm'] }}
</div>
</div>
<input
...
...
client/src/app/+signup/+register/steps/register-step-user.component.html
View file @
75084782
...
...
@@ -64,10 +64,8 @@
<my-input-text
formControlName=
"password"
inputId=
"password"
[
ngClass]=
"{ 'input-e
rror
':
formErrors['password']
}
"
autocomplete=
"new-password"
[
formE
rror
]=
"
formErrors['password']"
autocomplete=
"new-password"
></my-input-text>
<div
*ngIf=
"formErrors.password"
class=
"form-error"
>
{{ formErrors.password }}
</div>
</div>
</div>
</form>
client/src/app/shared/shared-forms/dynamic-form-field.component.html
View file @
75084782
...
...
@@ -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>
...
...
client/src/app/shared/shared-forms/dynamic-form-field.component.ts
View file @
75084782
...
...
@@ -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
)
}
}
client/src/app/shared/shared-forms/input-text.component.html
View file @
75084782
...
...
@@ -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>
client/src/app/shared/shared-forms/input-text.component.ts
View file @
75084782
...
...
@@ -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
)
{
}
...
...
client/src/sass/class-helpers.scss
View file @
75084782
...
...
@@ -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
{
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment