6 files changed, 98 insertions, 4 deletions

diff --git a/client/src/app/shared/shared-forms/index.ts b/client/src/app/shared/shared-forms/index.ts
index b2c7fa9ba..66b426191 100644
--- a/client/src/app/shared/shared-forms/index.ts
+++ b/client/src/app/shared/shared-forms/index.ts
@@ -2,6 +2,7 @@ export * from './form-validator.service'
 export * from './form-reactive'
 export * from './select'
 export * from './input-readonly-copy.component'
+export * from './input-switch.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-switch.component.html b/client/src/app/shared/shared-forms/input-switch.component.html
new file mode 100644
index 000000000..ce1dee470
--- /dev/null
+++ b/client/src/app/shared/shared-forms/input-switch.component.html
@@ -0,0 +1,4 @@
+<div (click)="update()">
+  <input type="checkbox" [checked]="checked"/>
+  <label class="ml-auto">Toggle</label>
+</div>
diff --git a/client/src/app/shared/shared-forms/input-switch.component.scss b/client/src/app/shared/shared-forms/input-switch.component.scss
new file mode 100644
index 000000000..c14950bd7
--- /dev/null
+++ b/client/src/app/shared/shared-forms/input-switch.component.scss
@@ -0,0 +1,44 @@
+@import '_variables';
+@import '_mixins';
+
+input {
+  position: absolute;
+  visibility: hidden;
+
+  & + label {
+    cursor: pointer;
+    text-indent: -9999px;
+    width: 35px;
+    height: 20px;
+    background: #cccccc;
+    display: block;
+    border-radius: 100px;
+    position: relative;
+    margin: 0;
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: 3px;
+      left: 3px;
+      width: 14px;
+      height: 14px;
+      background: pvar(--mainBackgroundColor);
+      border-radius: 50%;
+      transition: 0.3s ease-out;
+    }
+
+    &:active:after {
+      width: 40px;
+    }
+  }
+
+  &:checked + label {
+    background: pvar(--mainColor);
+
+    &:after {
+      left: calc(100% - 3px);
+      transform: translateX(-100%);
+    }
+  }
+}
diff --git a/client/src/app/shared/shared-forms/input-switch.component.ts b/client/src/app/shared/shared-forms/input-switch.component.ts
new file mode 100644
index 000000000..abb96de62
--- /dev/null
+++ b/client/src/app/shared/shared-forms/input-switch.component.ts
@@ -0,0 +1,38 @@
+import { Component, forwardRef, Input } from '@angular/core'
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
+
+@Component({
+  selector: 'my-input-switch',
+  styleUrls: [ './input-switch.component.scss' ],
+  templateUrl: './input-switch.component.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => InputSwitchComponent),
+      multi: true
+    }
+  ]
+})
+export class InputSwitchComponent implements ControlValueAccessor {
+  @Input() checked = false
+  @Input() inputName: string
+
+  propagateChange = (_: any) => { /* empty */ }
+
+  writeValue (checked: boolean) {
+    this.checked = checked
+  }
+
+  registerOnChange (fn: (_: any) => void) {
+    this.propagateChange = fn
+  }
+
+  registerOnTouched () {
+    // Unused
+  }
+
+  update () {
+    this.checked = !this.checked
+    this.propagateChange(this.checked)
+  }
+}
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 a28988f87..060abc995 100644
--- a/client/src/app/shared/shared-forms/shared-form.module.ts
+++ b/client/src/app/shared/shared-forms/shared-form.module.ts
@@ -1,13 +1,14 @@
 
 import { InputMaskModule } from 'primeng/inputmask'
-import { InputSwitchModule } from 'primeng/inputswitch'
 import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgSelectModule } from '@ng-select/ng-select'
 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 { InputSwitchComponent } from './input-switch.component'
 import { MarkdownTextareaComponent } from './markdown-textarea.component'
 import { PeertubeCheckboxComponent } from './peertube-checkbox.component'
 import { PreviewUploadComponent } from './preview-upload.component'
@@ -15,7 +16,6 @@ import { ReactiveFileComponent } from './reactive-file.component'
 import { SelectChannelComponent, SelectCheckboxComponent, SelectOptionsComponent, SelectTagsComponent } from './select'
 import { TextareaAutoResizeDirective } from './textarea-autoresize.directive'
 import { TimestampInputComponent } from './timestamp-input.component'
-import { DynamicFormFieldComponent } from './dynamic-form-field.component'
 
 @NgModule({
   imports: [
@@ -23,7 +23,6 @@ import { DynamicFormFieldComponent } from './dynamic-form-field.component'
     ReactiveFormsModule,
 
     InputMaskModule,
-    InputSwitchModule,
     NgSelectModule,
 
     SharedMainModule,
@@ -39,6 +38,8 @@ import { DynamicFormFieldComponent } from './dynamic-form-field.component'
     TextareaAutoResizeDirective,
     TimestampInputComponent,
 
+    InputSwitchComponent,
+
     SelectChannelComponent,
     SelectOptionsComponent,
     SelectTagsComponent,
@@ -52,7 +53,6 @@ import { DynamicFormFieldComponent } from './dynamic-form-field.component'
     ReactiveFormsModule,
 
     InputMaskModule,
-    InputSwitchModule,
     NgSelectModule,
 
     InputReadonlyCopyComponent,
@@ -63,6 +63,8 @@ import { DynamicFormFieldComponent } from './dynamic-form-field.component'
     TextareaAutoResizeDirective,
     TimestampInputComponent,
 
+    InputSwitchComponent,
+
     SelectChannelComponent,
     SelectOptionsComponent,
     SelectTagsComponent,
diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.scss b/client/src/app/shared/shared-forms/timestamp-input.component.scss
index 8092b095b..66e9aa032 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.scss
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.scss
@@ -11,5 +11,10 @@ p-inputmask {
     &:focus {
       box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
     }
+
+    &:disabled {
+      background: pvar(--mainBackgroundColor);
+      opacity: 0.5;
+    }
   }
 }