Implement signup approval in client

16 files changed, 42 insertions, 89 deletions

diff --git a/client/src/app/shared/form-validators/user-validators.ts b/client/src/app/shared/form-validators/user-validators.ts
index b93de75ea..ed6e0582e 100644
--- a/client/src/app/shared/form-validators/user-validators.ts
+++ b/client/src/app/shared/form-validators/user-validators.ts
@@ -136,13 +136,6 @@ export const USER_DESCRIPTION_VALIDATOR: BuildFormValidator = {
   }
 }
 
-export const USER_TERMS_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [ Validators.requiredTrue ],
-  MESSAGES: {
-    required: $localize`You must agree with the instance terms in order to register on it.`
-  }
-}
-
 export const USER_BAN_REASON_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [
     Validators.minLength(3),
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.html b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
index 089be501d..2d3e26a25 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
@@ -8,7 +8,7 @@
 
       <span class="moderation-expanded-text">
         <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
-          class="chip"
+          class="chip me-1"
         >
           <my-actor-avatar size="18" [actor]="abuse.reporterAccount" actorType="account"></my-actor-avatar>
           <div>
@@ -29,7 +29,7 @@
       <span class="moderation-expanded-label" i18n>Reportee</span>
       <span class="moderation-expanded-text">
         <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
-          class="chip"
+          class="chip me-1"
         >
           <my-actor-avatar size="18" [actor]="abuse.flaggedAccount" actorType="account"></my-actor-avatar>
           <div>
@@ -63,7 +63,7 @@
     <div *ngIf="predefinedReasons" class="mt-2 d-flex">
       <span>
         <a *ngFor="let reason of predefinedReasons"  [routerLink]="[ '.' ]"
-          [queryParams]="{ 'search': 'tag:' + reason.id  }" class="chip rectangular bg-secondary text-light"
+          [queryParams]="{ 'search': 'tag:' + reason.id  }" class="pt-badge badge-secondary"
         >
           <div>{{ reason.label }}</div>
         </a>
diff --git a/client/src/app/shared/shared-main/account/index.ts b/client/src/app/shared/shared-main/account/index.ts
index b80ddb9f5..dd41a5f05 100644
--- a/client/src/app/shared/shared-main/account/index.ts
+++ b/client/src/app/shared/shared-main/account/index.ts
@@ -1,3 +1,4 @@
 export * from './account.model'
 export * from './account.service'
 export * from './actor.model'
+export * from './signup-label.component'
diff --git a/client/src/app/shared/shared-main/account/signup-label.component.html b/client/src/app/shared/shared-main/account/signup-label.component.html
new file mode 100644
index 000000000..35d6c5360
--- /dev/null
+++ b/client/src/app/shared/shared-main/account/signup-label.component.html
@@ -0,0 +1,2 @@
+<ng-container i18n *ngIf="requiresApproval">Request an account</ng-container>
+<ng-container i18n *ngIf="!requiresApproval">Create an account</ng-container>
diff --git a/client/src/app/shared/shared-main/account/signup-label.component.ts b/client/src/app/shared/shared-main/account/signup-label.component.ts
new file mode 100644
index 000000000..caacb9c6f
--- /dev/null
+++ b/client/src/app/shared/shared-main/account/signup-label.component.ts
@@ -0,0 +1,9 @@
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'my-signup-label',
+  templateUrl: './signup-label.component.html'
+})
+export class SignupLabelComponent {
+  @Input() requiresApproval: boolean
+}
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index c1523bc50..eb1642d97 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -16,7 +16,7 @@ import {
 import { LoadingBarModule } from '@ngx-loading-bar/core'
 import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
 import { SharedGlobalIconModule } from '../shared-icons'
-import { AccountService } from './account'
+import { AccountService, SignupLabelComponent } from './account'
 import {
   AutofocusDirective,
   BytesPipe,
@@ -113,6 +113,8 @@ import { VideoChannelService } from './video-channel'
     UserQuotaComponent,
     UserNotificationsComponent,
 
+    SignupLabelComponent,
+
     EmbedComponent,
 
     PluginPlaceholderComponent,
@@ -171,6 +173,8 @@ import { VideoChannelService } from './video-channel'
     UserQuotaComponent,
     UserNotificationsComponent,
 
+    SignupLabelComponent,
+
     EmbedComponent,
 
     PluginPlaceholderComponent,
diff --git a/client/src/app/shared/shared-main/users/user-notification.model.ts b/client/src/app/shared/shared-main/users/user-notification.model.ts
index bf8870a79..96e7b4dd0 100644
--- a/client/src/app/shared/shared-main/users/user-notification.model.ts
+++ b/client/src/app/shared/shared-main/users/user-notification.model.ts
@@ -83,6 +83,11 @@ export class UserNotification implements UserNotificationServer {
     latestVersion: string
   }
 
+  registration?: {
+    id: number
+    username: string
+  }
+
   createdAt: string
   updatedAt: string
 
@@ -97,6 +102,8 @@ export class UserNotification implements UserNotificationServer {
 
   accountUrl?: string
 
+  registrationsUrl?: string
+
   videoImportIdentifier?: string
   videoImportUrl?: string
 
@@ -135,6 +142,7 @@ export class UserNotification implements UserNotificationServer {
 
       this.plugin = hash.plugin
       this.peertube = hash.peertube
+      this.registration = hash.registration
 
       this.createdAt = hash.createdAt
       this.updatedAt = hash.updatedAt
@@ -208,6 +216,10 @@ export class UserNotification implements UserNotificationServer {
           this.accountUrl = this.buildAccountUrl(this.account)
           break
 
+        case UserNotificationType.NEW_USER_REGISTRATION_REQUEST:
+          this.registrationsUrl = '/admin/moderation/registrations/list'
+          break
+
         case UserNotificationType.NEW_FOLLOW:
           this.accountUrl = this.buildAccountUrl(this.actorFollow.follower)
           break
diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.html b/client/src/app/shared/shared-main/users/user-notifications.component.html
index e7cdb0183..a51e08292 100644
--- a/client/src/app/shared/shared-main/users/user-notifications.component.html
+++ b/client/src/app/shared/shared-main/users/user-notifications.component.html
@@ -215,6 +215,14 @@
         </div>
       </ng-container>
 
+      <ng-container *ngSwitchCase="20"> <!-- UserNotificationType.NEW_USER_REGISTRATION_REQUEST -->
+        <my-global-icon iconName="user-add" aria-hidden="true"></my-global-icon>
+
+        <div class="message" i18n>
+          User <a (click)="markAsRead(notification)" [routerLink]="notification.registrationsUrl">{{ notification.registration.username }}</a> wants to register on your instance
+        </div>
+      </ng-container>
+
       <ng-container *ngSwitchDefault>
         <my-global-icon iconName="alert" aria-hidden="true"></my-global-icon>
 
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.scss b/client/src/app/shared/shared-moderation/account-blocklist.component.scss
index 8b1239d34..00aaf3b9c 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.scss
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.scss
@@ -1,10 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.chip {
-  @include chip;
-}
-
 .unblock-button {
   @include peertube-button;
   @include grey-button;
diff --git a/client/src/app/shared/shared-moderation/moderation.scss b/client/src/app/shared/shared-moderation/moderation.scss
index eaf5a8250..7c1e308cf 100644
--- a/client/src/app/shared/shared-moderation/moderation.scss
+++ b/client/src/app/shared/shared-moderation/moderation.scss
@@ -40,10 +40,6 @@
   }
 }
 
-.chip {
-  @include chip;
-}
-
 my-action-dropdown.show {
   ::ng-deep .dropdown-root {
     display: block !important;
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.scss b/client/src/app/shared/shared-moderation/server-blocklist.component.scss
index e29668a23..1a6b0435f 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.scss
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.scss
@@ -24,7 +24,3 @@ a {
 .block-button {
   @include create-button;
 }
-
-.chip {
-  @include chip;
-}
diff --git a/client/src/app/shared/shared-users/index.ts b/client/src/app/shared/shared-users/index.ts
index 20e60486d..95d90e49e 100644
--- a/client/src/app/shared/shared-users/index.ts
+++ b/client/src/app/shared/shared-users/index.ts
@@ -1,5 +1,4 @@
 export * from './user-admin.service'
-export * from './user-signup.service'
 export * from './two-factor.service'
 
 export * from './shared-users.module'
diff --git a/client/src/app/shared/shared-users/shared-users.module.ts b/client/src/app/shared/shared-users/shared-users.module.ts
index 5a1675dc9..efffc6026 100644
--- a/client/src/app/shared/shared-users/shared-users.module.ts
+++ b/client/src/app/shared/shared-users/shared-users.module.ts
@@ -1,9 +1,7 @@
-
 import { NgModule } from '@angular/core'
 import { SharedMainModule } from '../shared-main/shared-main.module'
 import { TwoFactorService } from './two-factor.service'
 import { UserAdminService } from './user-admin.service'
-import { UserSignupService } from './user-signup.service'
 
 @NgModule({
   imports: [
@@ -15,7 +13,6 @@ import { UserSignupService } from './user-signup.service'
   exports: [],
 
   providers: [
-    UserSignupService,
     UserAdminService,
     TwoFactorService
   ]
diff --git a/client/src/app/shared/shared-users/user-signup.service.ts b/client/src/app/shared/shared-users/user-signup.service.ts
deleted file mode 100644
index 46fe34af1..000000000
--- a/client/src/app/shared/shared-users/user-signup.service.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { catchError, tap } from 'rxjs/operators'
-import { HttpClient } from '@angular/common/http'
-import { Injectable } from '@angular/core'
-import { RestExtractor, UserService } from '@app/core'
-import { UserRegister } from '@shared/models'
-
-@Injectable()
-export class UserSignupService {
-  constructor (
-    private authHttp: HttpClient,
-    private restExtractor: RestExtractor,
-    private userService: UserService
-  ) { }
-
-  signup (userCreate: UserRegister) {
-    return this.authHttp.post(UserService.BASE_USERS_URL + 'register', userCreate)
-               .pipe(
-                 tap(() => this.userService.setSignupInThisSession(true)),
-                 catchError(err => this.restExtractor.handleError(err))
-               )
-  }
-
-  verifyEmail (userId: number, verificationString: string, isPendingEmail: boolean) {
-    const url = `${UserService.BASE_USERS_URL}/${userId}/verify-email`
-    const body = {
-      verificationString,
-      isPendingEmail
-    }
-
-    return this.authHttp.post(url, body)
-               .pipe(catchError(res => this.restExtractor.handleError(res)))
-  }
-
-  askSendVerifyEmail (email: string) {
-    const url = UserService.BASE_USERS_URL + '/ask-send-verify-email'
-
-    return this.authHttp.post(url, { email })
-               .pipe(catchError(err => this.restExtractor.handleError(err)))
-  }
-
-  getNewUsername (oldDisplayName: string, newDisplayName: string, currentUsername: string) {
-    // Don't update display name, the user seems to have changed it
-    if (this.displayNameToUsername(oldDisplayName) !== currentUsername) return currentUsername
-
-    return this.displayNameToUsername(newDisplayName)
-  }
-
-  private displayNameToUsername (displayName: string) {
-    if (!displayName) return ''
-
-    return displayName
-      .toLowerCase()
-      .replace(/\s/g, '_')
-      .replace(/[^a-z0-9_.]/g, '')
-  }
-}
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
index 6fdf24b2d..227c12130 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
@@ -53,8 +53,8 @@
             <ng-container *ngIf="displayOptions.state">{{ getStateLabel(video) }}</ng-container>
           </div>
 
-          <div *ngIf="containedInPlaylists" class="video-contained-in-playlists">
-            <a *ngFor="let playlist of containedInPlaylists" class="chip rectangular bg-secondary text-light" [routerLink]="['/w/p/', playlist.playlistShortUUID]">
+          <div *ngIf="containedInPlaylists" class="fs-6">
+            <a *ngFor="let playlist of containedInPlaylists" class="pt-badge badge-secondary" [routerLink]="['/w/p/', playlist.playlistShortUUID]">
               {{ playlist.playlistDisplayName }}
             </a>
           </div>
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index ba2adfc5a..a397efdca 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -4,10 +4,6 @@
 
 $more-button-width: 40px;
 
-.chip {
-  @include chip;
-}
-
 .video-miniature {
   font-size: 14px;
 }