From f8b530e0a523a0d9ff469ef716838374c395a360 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Fri, 4 Dec 2020 15:58:55 +0100 Subject: unify inputs requiring buttons like password inputs --- .../users/user-edit/user-edit.component.html | 7 +-- client/src/app/+login/login.component.html | 8 +-- .../my-account-applications.component.html | 8 ++- .../my-account-change-email.component.html | 13 ++--- .../my-account-change-email.component.scss | 11 +++- .../my-account-change-password.component.html | 27 +++++---- .../my-account-change-password.component.scss | 13 ++--- .../my-account-change-password.component.ts | 4 +- .../my-account-danger-zone.component.scss | 2 - .../+reset-password/reset-password.component.html | 16 +++--- .../+register/register-step-user.component.html | 8 +-- .../+video-edit/shared/video-edit.component.html | 4 +- .../app/shared/form-validators/user-validators.ts | 9 +++ .../shared-forms/dynamic-form-field.component.html | 2 +- client/src/app/shared/shared-forms/index.ts | 2 +- .../input-readonly-copy.component.html | 9 --- .../input-readonly-copy.component.scss | 3 - .../shared-forms/input-readonly-copy.component.ts | 18 ------ .../input-toggle-hidden.component.html | 13 +++++ .../input-toggle-hidden.component.scss | 11 ++++ .../shared-forms/input-toggle-hidden.component.ts | 66 ++++++++++++++++++++++ .../app/shared/shared-forms/shared-form.module.ts | 6 +- .../shared-share-modal/video-share.component.html | 8 +-- .../shared-share-modal/video-share.component.scss | 2 +- .../live-stream-information.component.html | 4 +- client/src/sass/application.scss | 3 +- 26 files changed, 177 insertions(+), 100 deletions(-) delete mode 100644 client/src/app/shared/shared-forms/input-readonly-copy.component.html delete mode 100644 client/src/app/shared/shared-forms/input-readonly-copy.component.scss delete mode 100644 client/src/app/shared/shared-forms/input-readonly-copy.component.ts create mode 100644 client/src/app/shared/shared-forms/input-toggle-hidden.component.html create mode 100644 client/src/app/shared/shared-forms/input-toggle-hidden.component.scss create mode 100644 client/src/app/shared/shared-forms/input-toggle-hidden.component.ts (limited to 'client') diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html index 0cb625b4a..819ced834 100644 --- a/client/src/app/+admin/users/user-edit/user-edit.component.html +++ b/client/src/app/+admin/users/user-edit/user-edit.component.html @@ -122,10 +122,9 @@ - +
{{ formErrors.password }}
diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html index 7ceae9311..390d77dd7 100644 --- a/client/src/app/+login/login.component.html +++ b/client/src/app/+login/login.component.html @@ -50,10 +50,10 @@
- + I forgot my password
diff --git a/client/src/app/+my-account/my-account-applications/my-account-applications.component.html b/client/src/app/+my-account/my-account-applications/my-account-applications.component.html index 3fbb79c71..68d094a4f 100644 --- a/client/src/app/+my-account/my-account-applications/my-account-applications.component.html +++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.html @@ -8,7 +8,7 @@

SUBSCRIPTION FEED

Use third-party feed aggregators to retrieve the list of videos from - channels you subscribed to. Make sure to keep your token private. + channels you subscribed to.
@@ -16,12 +16,14 @@
- +
- + + +
⚠️ Never share your feed token with anyone.
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 ce176d682..29823bdec 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 @@ -12,9 +12,8 @@
-
@@ -23,11 +22,11 @@
- - +
{{ formErrors['password'] }}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss index aec709ea0..a8b9be0d1 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss @@ -6,7 +6,11 @@ label { font-size: 100%; } -input[type=password], +my-input-toggle-hidden { + width: 340px; + display: block; +} + input[type=email] { @include peertube-input-text(340px); @@ -20,10 +24,13 @@ input[type=submit] { .current-email, .pending-email { - font-size: 16px; margin-bottom: 15px; .email { font-weight: $font-semibold; } } + +.form-group { + width: max-content; +} 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 4756cfecd..f1127b6a1 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,26 +3,29 @@ - +
{{ formErrors['current-password'] }}
- +
{{ formErrors['new-password'] }}
- +
{{ formErrors['new-confirmed-password'] }}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss index 381afae07..0d1f3094a 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss @@ -6,14 +6,14 @@ label { font-size: 100%; } -input[type=password] { - @include peertube-input-text(340px); +my-input-toggle-hidden { + width: 340px; display: block; +} - &#new-password, - &#new-confirmed-password { - margin-top: 15px; - } +#new-password, +#new-confirmed-password { + margin-top: 15px; } input[type=submit] { @@ -22,4 +22,3 @@ input[type=submit] { margin-top: 15px; } - diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts index ba68bab32..e034aedef 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts +++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts @@ -1,7 +1,7 @@ import { filter } from 'rxjs/operators' import { Component, OnInit } from '@angular/core' import { AuthService, Notifier, UserService } from '@app/core' -import { USER_CONFIRM_PASSWORD_VALIDATOR, USER_PASSWORD_VALIDATOR } from '@app/shared/form-validators/user-validators' +import { USER_CONFIRM_PASSWORD_VALIDATOR, USER_PASSWORD_VALIDATOR, USER_EXISTING_PASSWORD_VALIDATOR } from '@app/shared/form-validators/user-validators' import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' import { User } from '@shared/models' @@ -25,7 +25,7 @@ export class MyAccountChangePasswordComponent extends FormReactive implements On ngOnInit () { this.buildForm({ - 'current-password': USER_PASSWORD_VALIDATOR, + 'current-password': USER_EXISTING_PASSWORD_VALIDATOR, 'new-password': USER_PASSWORD_VALIDATOR, 'new-confirmed-password': USER_CONFIRM_PASSWORD_VALIDATOR }) diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss index fe78a57a4..d79ff690b 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss @@ -2,8 +2,6 @@ @import '_mixins'; .delete-me { - font-size: 15px; - button { @include peertube-button; @include danger-button; diff --git a/client/src/app/+reset-password/reset-password.component.html b/client/src/app/+reset-password/reset-password.component.html index af30af4a0..db9c74f89 100644 --- a/client/src/app/+reset-password/reset-password.component.html +++ b/client/src/app/+reset-password/reset-password.component.html @@ -6,10 +6,10 @@
- +
{{ formErrors.password }}
@@ -17,10 +17,10 @@
- +
{{ formErrors['password-confirm'] }}
diff --git a/client/src/app/+signup/+register/register-step-user.component.html b/client/src/app/+signup/+register/register-step-user.component.html index 55fc097d0..6eab4df0c 100644 --- a/client/src/app/+signup/+register/register-step-user.component.html +++ b/client/src/app/+signup/+register/register-step-user.component.html @@ -54,10 +54,10 @@
- +
{{ formErrors.password }}
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.html b/client/src/app/+videos/+video-edit/shared/video-edit.component.html index f62464d35..4747cec27 100644 --- a/client/src/app/+videos/+video-edit/shared/video-edit.component.html +++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.html @@ -213,12 +213,12 @@
- +
- +
⚠️ Never share your stream key with anyone.
diff --git a/client/src/app/shared/form-validators/user-validators.ts b/client/src/app/shared/form-validators/user-validators.ts index 9efc5180d..115930146 100644 --- a/client/src/app/shared/form-validators/user-validators.ts +++ b/client/src/app/shared/form-validators/user-validators.ts @@ -39,6 +39,15 @@ export const USER_EMAIL_VALIDATOR: BuildFormValidator = { } } +export const USER_EXISTING_PASSWORD_VALIDATOR: BuildFormValidator = { + VALIDATORS: [ + Validators.required + ], + MESSAGES: { + 'required': $localize`Password is required.` + } +} + export const USER_PASSWORD_VALIDATOR: BuildFormValidator = { VALIDATORS: [ Validators.required, 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 6a3c31637..658d8ce5b 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 @@ -5,7 +5,7 @@ - + diff --git a/client/src/app/shared/shared-forms/index.ts b/client/src/app/shared/shared-forms/index.ts index 66b426191..1d859b991 100644 --- a/client/src/app/shared/shared-forms/index.ts +++ b/client/src/app/shared/shared-forms/index.ts @@ -1,7 +1,7 @@ export * from './form-validator.service' export * from './form-reactive' export * from './select' -export * from './input-readonly-copy.component' +export * from './input-toggle-hidden.component' export * from './input-switch.component' export * from './markdown-textarea.component' export * from './peertube-checkbox.component' diff --git a/client/src/app/shared/shared-forms/input-readonly-copy.component.html b/client/src/app/shared/shared-forms/input-readonly-copy.component.html deleted file mode 100644 index 7a75bd70b..000000000 --- a/client/src/app/shared/shared-forms/input-readonly-copy.component.html +++ /dev/null @@ -1,9 +0,0 @@ -
- - -
- -
-
diff --git a/client/src/app/shared/shared-forms/input-readonly-copy.component.scss b/client/src/app/shared/shared-forms/input-readonly-copy.component.scss deleted file mode 100644 index 8dc4f113c..000000000 --- a/client/src/app/shared/shared-forms/input-readonly-copy.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -input.readonly { - font-size: 15px; -} diff --git a/client/src/app/shared/shared-forms/input-readonly-copy.component.ts b/client/src/app/shared/shared-forms/input-readonly-copy.component.ts deleted file mode 100644 index b04d69d05..000000000 --- a/client/src/app/shared/shared-forms/input-readonly-copy.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component, Input } from '@angular/core' -import { Notifier } from '@app/core' - -@Component({ - selector: 'my-input-readonly-copy', - templateUrl: './input-readonly-copy.component.html', - styleUrls: [ './input-readonly-copy.component.scss' ] -}) -export class InputReadonlyCopyComponent { - @Input() id: string - @Input() value = '' - - constructor (private notifier: Notifier) { } - - activateCopiedMessage () { - this.notifier.success($localize`Copied`) - } -} diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html new file mode 100644 index 000000000..f59dc6215 --- /dev/null +++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html @@ -0,0 +1,13 @@ +
+ + +
+ + +
+
diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss b/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss new file mode 100644 index 000000000..e20f69b86 --- /dev/null +++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss @@ -0,0 +1,11 @@ +@import '_variables'; +@import '_mixins'; + +input { + @include peertube-input-text(auto); + + // set again properties of peertube-input-text that are overriden by .input-group + font-size: 15px !important; + padding-left: 15px !important; + padding-right: 15px !important; +} diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.ts b/client/src/app/shared/shared-forms/input-toggle-hidden.component.ts new file mode 100644 index 000000000..0e974426b --- /dev/null +++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.ts @@ -0,0 +1,66 @@ +import { Component, forwardRef, Input } from '@angular/core' +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' +import { Notifier } from '@app/core' + +@Component({ + selector: 'my-input-toggle-hidden', + templateUrl: './input-toggle-hidden.component.html', + styleUrls: [ './input-toggle-hidden.component.scss' ], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => InputToggleHiddenComponent), + multi: true + } + ] +}) +export class InputToggleHiddenComponent implements ControlValueAccessor { + @Input() id = Math.random().toString(11).slice(2, 8) // id cannot be left empty or undefined + @Input() value = '' + @Input() autocomplete = 'off' + @Input() placeholder = '' + @Input() withToggle = true + @Input() withCopy = false + @Input() readonly = false + @Input() show = false + + constructor (private notifier: Notifier) { } + + get inputType () { + return this.show + ? 'text' + : 'password' + } + + get toggleTitle () { + return this.show + ? $localize`Hide` + : $localize`Show` + } + + toggle () { + this.show = !this.show + } + + activateCopiedMessage () { + this.notifier.success($localize`Copied`) + } + + propagateChange = (_: any) => { /* empty */ } + + writeValue (value: string) { + this.value = value + } + + registerOnChange (fn: (_: any) => void) { + this.propagateChange = fn + } + + registerOnTouched () { + // Unused + } + + update () { + this.propagateChange(this.value) + } +} diff --git a/client/src/app/shared/shared-forms/shared-form.module.ts b/client/src/app/shared/shared-forms/shared-form.module.ts index 060abc995..22e8dd05a 100644 --- a/client/src/app/shared/shared-forms/shared-form.module.ts +++ b/client/src/app/shared/shared-forms/shared-form.module.ts @@ -7,7 +7,7 @@ import { SharedGlobalIconModule } from '../shared-icons' import { SharedMainModule } from '../shared-main/shared-main.module' import { DynamicFormFieldComponent } from './dynamic-form-field.component' import { FormValidatorService } from './form-validator.service' -import { InputReadonlyCopyComponent } from './input-readonly-copy.component' +import { InputToggleHiddenComponent } from './input-toggle-hidden.component' import { InputSwitchComponent } from './input-switch.component' import { MarkdownTextareaComponent } from './markdown-textarea.component' import { PeertubeCheckboxComponent } from './peertube-checkbox.component' @@ -30,7 +30,7 @@ import { TimestampInputComponent } from './timestamp-input.component' ], declarations: [ - InputReadonlyCopyComponent, + InputToggleHiddenComponent, MarkdownTextareaComponent, PeertubeCheckboxComponent, PreviewUploadComponent, @@ -55,7 +55,7 @@ import { TimestampInputComponent } from './timestamp-input.component' InputMaskModule, NgSelectModule, - InputReadonlyCopyComponent, + InputToggleHiddenComponent, MarkdownTextareaComponent, PeertubeCheckboxComponent, PreviewUploadComponent, diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html index 80b4e446a..bcb1db4c4 100644 --- a/client/src/app/shared/shared-share-modal/video-share.component.html +++ b/client/src/app/shared/shared-share-modal/video-share.component.html @@ -18,7 +18,7 @@ @@ -38,7 +38,7 @@