Fix signup limit validator, and add warning message.

4 files changed, 20 insertions, 4 deletions

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 915d60090..d806ea355 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -234,6 +234,9 @@
               inputName="signupEnabled" formControlName="enabled"
               i18n-labelText labelText="Signup enabled"
             >
+              <ng-container ngProjectAs="description">
+                <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
+              </ng-container>
               <ng-container ngProjectAs="extra">
                 <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }"
                   inputName="signupRequiresEmailVerification" formControlName="requiresEmailVerification"
@@ -243,10 +246,11 @@
                 <div [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }" class="mt-3">
                   <label i18n for="signupLimit">Signup limit</label>
                   <input
-                    type="text" id="signupLimit"
+                    type="number" min="-1" id="signupLimit"
                     formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
                   >
                   <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
+                  <small *ngIf="form.value['signup']['limit'] === -1" class="text-muted">Signup won't be limited to a fixed number of users.</small>
                 </div>
               </ng-container>
             </my-peertube-checkbox>
@@ -318,7 +322,7 @@
                   i18n-labelText labelText="Blacklist new videos automatically"
                 >
                 <ng-container ngProjectAs="description">
-                  <span i18n>Videos of regular users will stay private until a moderator reviews them. Can be overriden per user.</span>
+                  <span i18n>Unless a user is marked as trusted, their videos will stay private until a moderator reviews them.</span>
                 </ng-container>
               </my-peertube-checkbox>
               </div>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index 60d608028..dd70f1c06 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -10,6 +10,11 @@ input[type=text] {
   display: block;
 }
 
+input[type=number] {
+  @include peertube-input-text(315px);
+  display: block;
+}
+
 input[type=checkbox] {
   @include peertube-checkbox(1px);
 }
diff --git a/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts b/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts
index 767e3f026..d20754d11 100644
--- a/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts
@@ -56,7 +56,7 @@ export class CustomConfigValidatorsService {
     }
 
     this.SIGNUP_LIMIT = {
-      VALIDATORS: [ Validators.required, Validators.min(1), Validators.pattern('[0-9]+') ],
+      VALIDATORS: [ Validators.required, Validators.min(-1), Validators.pattern('-?[0-9]+') ],
       MESSAGES: {
         'required': this.i18n('Signup limit is required.'),
         'min': this.i18n('Signup limit must be greater than 1.'),
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index ee86a32d4..317781e0e 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -77,6 +77,12 @@
   }
 }
 
+@mixin button-focus-visible-shadow($color) {
+  &.focus-visible {
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px $color;
+  }
+}
+
 @mixin peertube-input-text($width) {
   display: inline-block;
   height: $button-height;
@@ -118,6 +124,8 @@
 }
 
 @mixin orange-button {
+  @include button-focus-visible-shadow(var(--mainHoverColor));
+
   &, &:active, &:focus {
     color: #fff;
     background-color: var(--mainColor);
@@ -169,7 +177,6 @@
   text-align: center;
   padding: 0 17px 0 13px;
   cursor: pointer;
-  outline: 0;
 }
 
 @mixin peertube-button-link {