Rename input toggle hidden to input text
It's more than just an hidden toggle
This commit is contained in:
parent
b15fcd49bf
commit
a70bf3bd33
|
@ -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 }}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -6,7 +6,7 @@ label {
|
|||
font-size: 100%;
|
||||
}
|
||||
|
||||
my-input-toggle-hidden {
|
||||
my-input-text {
|
||||
width: 340px;
|
||||
display: block;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -3,18 +3,18 @@ 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' ],
|
||||
selector: 'my-input-text',
|
||||
templateUrl: './input-text.component.html',
|
||||
styleUrls: [ './input-text.component.scss' ],
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
useExisting: forwardRef(() => InputToggleHiddenComponent),
|
||||
useExisting: forwardRef(() => InputTextComponent),
|
||||
multi: true
|
||||
}
|
||||
]
|
||||
})
|
||||
export class InputToggleHiddenComponent implements ControlValueAccessor {
|
||||
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'
|
|
@ -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,
|
||||
|
|
|
@ -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).
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
@use '_mixins' as *;
|
||||
@use '_variables' as *;
|
||||
|
||||
my-input-toggle-hidden {
|
||||
my-input-text {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -151,7 +151,7 @@ code {
|
|||
}
|
||||
|
||||
.input-error,
|
||||
my-input-toggle-hidden ::ng-deep input {
|
||||
my-input-text ::ng-deep input {
|
||||
border-color: $red !important;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue