From a70bf3bd3337406704af5907a015ba385df0483d Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Fri, 10 Jun 2022 15:58:38 +0200
Subject: Rename input toggle hidden to input text

It's more than just an hidden toggle
---
 .../users/user-edit/user-edit.component.html       |  4 +-
 .../users/user-edit/user-edit.component.scss       |  2 +-
 client/src/app/+login/login.component.html         |  4 +-
 .../my-account-applications.component.html         |  4 +-
 .../my-account-change-email.component.html         |  4 +-
 .../my-account-change-email.component.scss         |  2 +-
 .../my-account-change-password.component.html      | 12 ++--
 .../my-account-change-password.component.scss      |  4 +-
 .../+reset-password/reset-password.component.html  |  8 +--
 .../+register/register-step-user.component.html    |  4 +-
 .../+video-edit/shared/video-edit.component.html   |  6 +-
 .../shared-forms/dynamic-form-field.component.html |  2 +-
 client/src/app/shared/shared-forms/index.ts        |  2 +-
 .../shared/shared-forms/input-text.component.html  | 19 ++++++
 .../shared/shared-forms/input-text.component.scss  | 22 +++++++
 .../shared/shared-forms/input-text.component.ts    | 67 ++++++++++++++++++++++
 .../input-toggle-hidden.component.html             | 19 ------
 .../input-toggle-hidden.component.scss             | 22 -------
 .../shared-forms/input-toggle-hidden.component.ts  | 67 ----------------------
 .../app/shared/shared-forms/shared-form.module.ts  |  6 +-
 .../shared-share-modal/video-share.component.html  | 12 ++--
 .../shared-share-modal/video-share.component.scss  |  2 +-
 .../live-stream-information.component.html         |  6 +-
 .../video-download.component.html                  |  8 +--
 client/src/sass/application.scss                   |  2 +-
 25 files changed, 155 insertions(+), 155 deletions(-)
 create mode 100644 client/src/app/shared/shared-forms/input-text.component.html
 create mode 100644 client/src/app/shared/shared-forms/input-text.component.scss
 create mode 100644 client/src/app/shared/shared-forms/input-text.component.ts
 delete mode 100644 client/src/app/shared/shared-forms/input-toggle-hidden.component.html
 delete mode 100644 client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
 delete mode 100644 client/src/app/shared/shared-forms/input-toggle-hidden.component.ts

(limited to 'client')

diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
index 7e0eaf280..bfa414164 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
@@ -123,9 +123,9 @@
             </ng-template>
           </my-help>
 
-          <my-input-toggle-hidden
+          <my-input-text
             formControlName="password" inputId="password" [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
-          ></my-input-toggle-hidden>
+          ></my-input-text>
 
           <div *ngIf="formErrors.password" class="form-error">
             {{ formErrors.password }}
diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss b/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
index d7932154b..f9f4474a2 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
+++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
@@ -22,7 +22,7 @@ input:not([type=submit]) {
   display: block;
 }
 
-my-input-toggle-hidden {
+my-input-text {
   @include responsive-width($form-base-input-width);
 
   display: block;
diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html
index dc74354d8..a2d8dae2a 100644
--- a/client/src/app/+login/login.component.html
+++ b/client/src/app/+login/login.component.html
@@ -36,10 +36,10 @@
 
           <div class="form-group">
             <label i18n for="password">Password</label>
-            <my-input-toggle-hidden formControlName="password" inputId="password"
+            <my-input-text formControlName="password" inputId="password"
                                     i18n-placeholder placeholder="Password"
                                     [ngClass]="{ 'input-error': formErrors['password'] }"
-                                    autocomplete="current-password" [tabindex]="2"></my-input-toggle-hidden>
+                                    autocomplete="current-password" [tabindex]="2"></my-input-text>
             <div *ngIf="formErrors.password" class="form-error">
               {{ formErrors.password }}
             </div>
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 8f3a55be5..2fc691707 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
@@ -17,12 +17,12 @@
 
     <div class="form-group">
       <label i18n for="feed-url">Feed URL</label>
-      <my-input-toggle-hidden [value]="feedUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+      <my-input-text [value]="feedUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
     </div>
 
     <div class="form-group">
       <label i18n for="feed-token">Feed Token</label>
-      <my-input-toggle-hidden [value]="feedToken" [withCopy]="true" [readonly]="true"></my-input-toggle-hidden>
+      <my-input-text [value]="feedToken" [withCopy]="true" [readonly]="true"></my-input-text>
 
       <div class="form-group-description" i18n>⚠️ Never share your feed token with anyone.</div>
     </div>
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 6d2d7d46e..b0a9dbb38 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
@@ -23,11 +23,11 @@
   </div>
 
   <div class="form-group">
-    <my-input-toggle-hidden formControlName="password"
+    <my-input-text formControlName="password"
                             id="password"
                             i18n-placeholder placeholder="Current password"
                             [ngClass]="{ 'input-error': formErrors['password'] }"
-                            autocomplete="current-password"></my-input-toggle-hidden>
+                            autocomplete="current-password"></my-input-text>
     <div *ngIf="formErrors['password']" class="form-error">
       {{ formErrors['password'] }}
     </div>
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 788db02ad..9be9056b8 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,7 @@ label {
   font-size: 100%;
 }
 
-my-input-toggle-hidden {
+my-input-text {
   width: 340px;
   display: block;
 }
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 43facb7ed..f1deb4273 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,29 +3,29 @@
 <form role="form" (ngSubmit)="changePassword()" [formGroup]="form">
 
   <label i18n for="current-password">Change password</label>
-  <my-input-toggle-hidden formControlName="current-password"
+  <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-toggle-hidden>
+                          autocomplete="current-password"></my-input-text>
   <div *ngIf="formErrors['current-password']" class="form-error">
     {{ formErrors['current-password'] }}
   </div>
 
-  <my-input-toggle-hidden formControlName="new-password"
+  <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-toggle-hidden>
+                          autocomplete="new-password"></my-input-text>
   <div *ngIf="formErrors['new-password']" class="form-error">
     {{ formErrors['new-password'] }}
   </div>
 
-  <my-input-toggle-hidden formControlName="new-confirmed-password"
+  <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-toggle-hidden>
+                          autocomplete="new-password"></my-input-text>
   <div *ngIf="formErrors['new-confirmed-password']" class="form-error">
     {{ formErrors['new-confirmed-password'] }}
   </div>
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 c46aae266..ab6a43b57 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,12 +6,12 @@ label {
   font-size: 100%;
 }
 
-my-input-toggle-hidden {
+my-input-text {
   width: 340px;
   display: block;
 }
 
-my-input-toggle-hidden + my-input-toggle-hidden {
+my-input-text + my-input-text {
   margin-top: 15px;
 }
 
diff --git a/client/src/app/+reset-password/reset-password.component.html b/client/src/app/+reset-password/reset-password.component.html
index 143f426ec..1910ebd15 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 @@
   <form role="form" (ngSubmit)="resetPassword()" [formGroup]="form">
     <div class="form-group">
       <label i18n for="password">Password</label>
-      <my-input-toggle-hidden formControlName="password" inputId="password"
+      <my-input-text formControlName="password" inputId="password"
                               i18n-placeholder placeholder="Password"
                               [ngClass]="{ 'input-error': formErrors['password'] }"
-                              autocomplete="new-password"></my-input-toggle-hidden>
+                              autocomplete="new-password"></my-input-text>
       <div *ngIf="formErrors.password" class="form-error">
         {{ formErrors.password }}
       </div>
@@ -17,10 +17,10 @@
 
     <div class="form-group">
       <label i18n for="password-confirm">Confirm password</label>
-      <my-input-toggle-hidden formControlName="password-confirm" inputId="password-confirm"
+      <my-input-text formControlName="password-confirm" inputId="password-confirm"
                               i18n-placeholder placeholder="Confirmed password"
                               [ngClass]="{ 'input-error': formErrors['password-confirm'] }"
-                              autocomplete="new-password"></my-input-toggle-hidden>
+                              autocomplete="new-password"></my-input-text>
       <div *ngIf="formErrors['password-confirm']" class="form-error">
         {{ formErrors['password-confirm'] }}
       </div>
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 745b37c10..6e367b4c7 100644
--- a/client/src/app/+signup/+register/register-step-user.component.html
+++ b/client/src/app/+signup/+register/register-step-user.component.html
@@ -52,10 +52,10 @@
 
   <div class="form-group">
     <label for="password" i18n>Password</label>
-    <my-input-toggle-hidden formControlName="password" inputId="password"
+    <my-input-text formControlName="password" inputId="password"
                             i18n-placeholder placeholder="Password"
                             [ngClass]="{ 'input-error': formErrors['password'] }"
-                            autocomplete="new-password"></my-input-toggle-hidden>
+                            autocomplete="new-password"></my-input-text>
     <div *ngIf="formErrors.password" class="form-error">
       {{ formErrors.password }}
     </div>
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 44004eb21..26bfaa583 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
@@ -243,17 +243,17 @@
 
             <div *ngIf="liveVideo.rtmpUrl" class="form-group">
               <label for="liveVideoRTMPUrl" i18n>Live RTMP Url</label>
-              <my-input-toggle-hidden inputId="liveVideoRTMPUrl" [value]="liveVideo.rtmpUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+              <my-input-text inputId="liveVideoRTMPUrl" [value]="liveVideo.rtmpUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
             </div>
 
             <div *ngIf="liveVideo.rtmpsUrl" class="form-group">
               <label for="liveVideoRTMPSUrl" i18n>Live RTMPS Url</label>
-              <my-input-toggle-hidden inputId="liveVideoRTMPSUrl" [value]="liveVideo.rtmpsUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+              <my-input-text inputId="liveVideoRTMPSUrl" [value]="liveVideo.rtmpsUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
             </div>
 
             <div class="form-group">
               <label for="liveVideoStreamKey" i18n>Live stream key</label>
-              <my-input-toggle-hidden inputId="liveVideoStreamKey" [value]="liveVideo.streamKey" [withCopy]="true" [readonly]="true"></my-input-toggle-hidden>
+              <my-input-text inputId="liveVideoStreamKey" [value]="liveVideo.streamKey" [withCopy]="true" [readonly]="true"></my-input-text>
 
               <div class="form-group-description" i18n>⚠️ Never share your stream key with anyone.</div>
             </div>
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 2ef61ecfc..2ec436ac6 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
@@ -18,7 +18,7 @@
     </select>
   </div>
 
-  <my-input-toggle-hidden *ngIf="setting.type === 'input-password'" [formControlName]="setting.name" [inputId]="setting.name"></my-input-toggle-hidden>
+  <my-input-text *ngIf="setting.type === 'input-password'" [formControlName]="setting.name" [inputId]="setting.name"></my-input-text>
 
   <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 727416a40..495785e7b 100644
--- a/client/src/app/shared/shared-forms/index.ts
+++ b/client/src/app/shared/shared-forms/index.ts
@@ -3,7 +3,7 @@ export * from './form-reactive'
 export * from './form-validator.service'
 export * from './form-validator.service'
 export * from './input-switch.component'
-export * from './input-toggle-hidden.component'
+export * from './input-text.component'
 export * from './markdown-textarea.component'
 export * from './peertube-checkbox.component'
 export * from './preview-upload.component'
diff --git a/client/src/app/shared/shared-forms/input-text.component.html b/client/src/app/shared/shared-forms/input-text.component.html
new file mode 100644
index 000000000..f7f9ce403
--- /dev/null
+++ b/client/src/app/shared/shared-forms/input-text.component.html
@@ -0,0 +1,19 @@
+<div class="input-group">
+  <input
+    [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"
+  />
+
+  <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary eye-button" [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 text-uppercase" i18n-title title="Copy"
+  >
+    <my-global-icon iconName="copy"></my-global-icon>
+    <span class="copy-text">Copy</span>
+  </button>
+</div>
diff --git a/client/src/app/shared/shared-forms/input-text.component.scss b/client/src/app/shared/shared-forms/input-text.component.scss
new file mode 100644
index 000000000..cc1646a69
--- /dev/null
+++ b/client/src/app/shared/shared-forms/input-text.component.scss
@@ -0,0 +1,22 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+input {
+  @include peertube-input-text(auto);
+  @include padding-left(15px !important);
+  @include padding-right(15px !important);
+}
+
+.btn {
+  font-size: 15px;
+}
+
+my-global-icon {
+  width: 18px;
+}
+
+.copy-text {
+  font-size: 14px;
+  margin-left: 5px;
+  vertical-align: top;
+}
diff --git a/client/src/app/shared/shared-forms/input-text.component.ts b/client/src/app/shared/shared-forms/input-text.component.ts
new file mode 100644
index 000000000..ed4637c17
--- /dev/null
+++ b/client/src/app/shared/shared-forms/input-text.component.ts
@@ -0,0 +1,67 @@
+import { Component, forwardRef, Input } from '@angular/core'
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
+import { Notifier } from '@app/core'
+
+@Component({
+  selector: 'my-input-text',
+  templateUrl: './input-text.component.html',
+  styleUrls: [ './input-text.component.scss' ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => InputTextComponent),
+      multi: true
+    }
+  ]
+})
+export class InputTextComponent implements ControlValueAccessor {
+  @Input() inputId = Math.random().toString(11).slice(2, 8) // id cannot be left empty or undefined
+  @Input() value = ''
+  @Input() autocomplete = 'off'
+  @Input() placeholder = ''
+  @Input() tabindex = 0
+  @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/input-toggle-hidden.component.html b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
deleted file mode 100644
index f7f9ce403..000000000
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<div class="input-group">
-  <input
-    [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"
-  />
-
-  <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary eye-button" [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 text-uppercase" i18n-title title="Copy"
-  >
-    <my-global-icon iconName="copy"></my-global-icon>
-    <span class="copy-text">Copy</span>
-  </button>
-</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
deleted file mode 100644
index cc1646a69..000000000
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@use '_variables' as *;
-@use '_mixins' as *;
-
-input {
-  @include peertube-input-text(auto);
-  @include padding-left(15px !important);
-  @include padding-right(15px !important);
-}
-
-.btn {
-  font-size: 15px;
-}
-
-my-global-icon {
-  width: 18px;
-}
-
-.copy-text {
-  font-size: 14px;
-  margin-left: 5px;
-  vertical-align: top;
-}
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
deleted file mode 100644
index e03353fe1..000000000
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-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() inputId = Math.random().toString(11).slice(2, 8) // id cannot be left empty or undefined
-  @Input() value = ''
-  @Input() autocomplete = 'off'
-  @Input() placeholder = ''
-  @Input() tabindex = 0
-  @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 60c2f66ae..81f076db6 100644
--- a/client/src/app/shared/shared-forms/shared-form.module.ts
+++ b/client/src/app/shared/shared-forms/shared-form.module.ts
@@ -9,7 +9,7 @@ import { AdvancedInputFilterComponent } from './advanced-input-filter.component'
 import { DynamicFormFieldComponent } from './dynamic-form-field.component'
 import { FormValidatorService } from './form-validator.service'
 import { InputSwitchComponent } from './input-switch.component'
-import { InputToggleHiddenComponent } from './input-toggle-hidden.component'
+import { InputTextComponent } from './input-text.component'
 import { MarkdownTextareaComponent } from './markdown-textarea.component'
 import { PeertubeCheckboxComponent } from './peertube-checkbox.component'
 import { PreviewUploadComponent } from './preview-upload.component'
@@ -40,7 +40,7 @@ import { TimestampInputComponent } from './timestamp-input.component'
   ],
 
   declarations: [
-    InputToggleHiddenComponent,
+    InputTextComponent,
     MarkdownTextareaComponent,
     PeertubeCheckboxComponent,
     PreviewUploadComponent,
@@ -71,7 +71,7 @@ import { TimestampInputComponent } from './timestamp-input.component'
     InputMaskModule,
     NgSelectModule,
 
-    InputToggleHiddenComponent,
+    InputTextComponent,
     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 572c03129..0658ae962 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
@@ -25,7 +25,7 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-              <my-input-toggle-hidden [value]="getPlaylistUrl()" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+              <my-input-text [value]="getPlaylistUrl()" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
             </div>
           </ng-template>
         </ng-container>
@@ -45,10 +45,10 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-              <my-input-toggle-hidden
+              <my-input-text
                 [value]="customizations.onlyEmbedUrl ? getPlaylistEmbedUrl() : getPlaylistIframeCode()" (change)="updateEmbedCode()"
                 [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
-              ></my-input-toggle-hidden>
+              ></my-input-text>
 
               <div i18n *ngIf="notSecure()" class="alert alert-warning">
                 The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
@@ -102,7 +102,7 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-              <my-input-toggle-hidden [value]="getVideoUrl()" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+              <my-input-text [value]="getVideoUrl()" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
             </div>
           </ng-template>
         </ng-container>
@@ -122,10 +122,10 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-              <my-input-toggle-hidden
+              <my-input-text
                 [value]="customizations.onlyEmbedUrl ? getVideoEmbedUrl() : getVideoIframeCode()" (ngModelChange)="updateEmbedCode()"
                 [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
-              ></my-input-toggle-hidden>
+              ></my-input-text>
 
               <div i18n *ngIf="notSecure()" class="alert alert-warning">
                 The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.scss b/client/src/app/shared/shared-share-modal/video-share.component.scss
index abb78b09b..6123bc517 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.scss
+++ b/client/src/app/shared/shared-share-modal/video-share.component.scss
@@ -1,7 +1,7 @@
 @use '_mixins' as *;
 @use '_variables' as *;
 
-my-input-toggle-hidden {
+my-input-text {
   width: 100%;
 }
 
diff --git a/client/src/app/shared/shared-video-live/live-stream-information.component.html b/client/src/app/shared/shared-video-live/live-stream-information.component.html
index 28396915a..6505e50e2 100644
--- a/client/src/app/shared/shared-video-live/live-stream-information.component.html
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.html
@@ -17,17 +17,17 @@
 
     <div *ngIf="live.rtmpUrl" class="form-group">
       <label for="liveVideoRTMPUrl" i18n>Live RTMP Url</label>
-      <my-input-toggle-hidden inputId="liveVideoRTMPUrl" [value]="live.rtmpUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+      <my-input-text inputId="liveVideoRTMPUrl" [value]="live.rtmpUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
     </div>
 
     <div *ngIf="live.rtmpsUrl" class="form-group">
       <label for="liveVideoRTMPSUrl" i18n>Live RTMPS Url</label>
-      <my-input-toggle-hidden inputId="liveVideoRTMPSUrl" [value]="live.rtmpsUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+      <my-input-text inputId="liveVideoRTMPSUrl" [value]="live.rtmpsUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
     </div>
 
     <div class="form-group">
       <label for="liveVideoStreamKey" i18n>Live stream key</label>
-      <my-input-toggle-hidden inputId="liveVideoStreamKey" [value]="live.streamKey" [withCopy]="true" [readonly]="true"></my-input-toggle-hidden>
+      <my-input-text inputId="liveVideoStreamKey" [value]="live.streamKey" [withCopy]="true" [readonly]="true"></my-input-text>
 
       <div class="form-group-description" i18n>⚠️ Never share your stream key with anyone.</div>
     </div>
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.html b/client/src/app/shared/shared-video-miniature/video-download.component.html
index bf971229e..e8990747a 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.html
@@ -28,10 +28,10 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-              <my-input-toggle-hidden
+              <my-input-text
                 *ngIf="!isConfidentialVideo()"
                 [show]="true" [readonly]="true" [withCopy]="true" [withToggle]="false" [value]="getLink()"
-              ></my-input-toggle-hidden>
+              ></my-input-text>
             </div>
           </ng-template>
         </ng-container>
@@ -48,10 +48,10 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-              <my-input-toggle-hidden
+              <my-input-text
                 *ngIf="!isConfidentialVideo()"
                 [show]="true" [readonly]="true" [withCopy]="true" [withToggle]="false" [value]="getLink()"
-              ></my-input-toggle-hidden>
+              ></my-input-text>
             </div>
           </ng-template>
         </ng-container>
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 460356422..d288d2a21 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -151,7 +151,7 @@ code {
 }
 
 .input-error,
-my-input-toggle-hidden ::ng-deep input {
+my-input-text ::ng-deep input {
   border-color: $red !important;
 }
 
-- 
cgit v1.2.3