unify inputs requiring buttons like password inputs

9 files changed, 95 insertions, 35 deletions

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 @@
 
   <input *ngIf="setting.type === 'input'" type="text" [id]="setting.name" [formControlName]="setting.name" />
 
-  <input *ngIf="setting.type === 'input-password'" type="password" [id]="setting.name" [formControlName]="setting.name" />
+  <my-input-toggle-hidden *ngIf="setting.type === 'input-password'" [formControlName]="setting.name" [id]="setting.name"></my-input-toggle-hidden>
 
   <textarea *ngIf="setting.type === 'input-textarea'" type="text" [id]="setting.name" [formControlName]="setting.name"></textarea>
 
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 @@
-<div class="input-group input-group-sm">
-  <input [id]="id" #urlInput (click)="urlInput.select()" type="text" class="form-control readonly" readonly [value]="value" />
-
-  <div class="input-group-append">
-    <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
-      <span class="glyphicon glyphicon-copy"></span>
-    </button>
-  </div>
-</div>
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 @@
+<div class="input-group input-group-sm">
+  <input [id]="id" [autocomplete]="autocomplete" [value]="value" [placeholder]="placeholder" [(ngModel)]="value" (ngModelChange)="update()" [ngClass]="{ 'readonly': readonly }" [readonly]="readonly"
+         #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control" />
+
+  <div *ngIf="withToggle || withCopy" class="input-group-append">
+    <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary" [title]="toggleTitle">
+      <span class="glyphicon glyphicon-eye-{{ show ? 'open' : 'close' }}"></span>
+    </button>
+    <button *ngIf="withCopy" [cdkCopyToClipboard]="input.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary" i18n-title title="Copy">
+      <span class="glyphicon glyphicon-copy"></span>
+    </button>
+  </div>
+</div>
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,