From 6f03f944c34f78b38a68128413b55186e0676949 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 14 Jun 2022 13:54:54 +0200 Subject: Redesign register steps --- client/src/app/+signup/+register/steps/index.ts | 4 ++ .../steps/register-step-about.component.html | 39 ++++++++++++ .../steps/register-step-about.component.scss | 53 ++++++++++++++++ .../steps/register-step-about.component.ts | 19 ++++++ .../steps/register-step-channel.component.html | 55 ++++++++++++++++ .../steps/register-step-channel.component.ts | 57 +++++++++++++++++ .../steps/register-step-terms.component.html | 16 +++++ .../steps/register-step-terms.component.ts | 48 ++++++++++++++ .../steps/register-step-user.component.html | 73 ++++++++++++++++++++++ .../steps/register-step-user.component.ts | 63 +++++++++++++++++++ .../+signup/+register/steps/step.component.scss | 27 ++++++++ 11 files changed, 454 insertions(+) create mode 100644 client/src/app/+signup/+register/steps/index.ts create mode 100644 client/src/app/+signup/+register/steps/register-step-about.component.html create mode 100644 client/src/app/+signup/+register/steps/register-step-about.component.scss create mode 100644 client/src/app/+signup/+register/steps/register-step-about.component.ts create mode 100644 client/src/app/+signup/+register/steps/register-step-channel.component.html create mode 100644 client/src/app/+signup/+register/steps/register-step-channel.component.ts create mode 100644 client/src/app/+signup/+register/steps/register-step-terms.component.html create mode 100644 client/src/app/+signup/+register/steps/register-step-terms.component.ts create mode 100644 client/src/app/+signup/+register/steps/register-step-user.component.html create mode 100644 client/src/app/+signup/+register/steps/register-step-user.component.ts create mode 100644 client/src/app/+signup/+register/steps/step.component.scss (limited to 'client/src/app/+signup/+register/steps') diff --git a/client/src/app/+signup/+register/steps/index.ts b/client/src/app/+signup/+register/steps/index.ts new file mode 100644 index 000000000..b5eae7468 --- /dev/null +++ b/client/src/app/+signup/+register/steps/index.ts @@ -0,0 +1,4 @@ +export * from './register-step-about.component' +export * from './register-step-channel.component' +export * from './register-step-terms.component' +export * from './register-step-user.component' diff --git a/client/src/app/+signup/+register/steps/register-step-about.component.html b/client/src/app/+signup/+register/steps/register-step-about.component.html new file mode 100644 index 000000000..f93de8ce9 --- /dev/null +++ b/client/src/app/+signup/+register/steps/register-step-about.component.html @@ -0,0 +1,39 @@ +
+

Why creating an account?

+ +

+ As you probably noticed: creating an account is not necessary to watch video son {{ instanceName }}. +
+ However, creating an account on {{ instanceName }} will allow you to: +

+ + +
+ +
+

You're using Mastodon, ActivityPub or a RSS feed aggregator?

+ +

+ You can already follow {{ instanceName }} using your favorite tool. +

+
+ +
+
+ mascot +
+ +
+

This website is a GAFAM alternative

+ +

+ {{ instanceName }} has been created using PeerTube, a video creation platform developed by Framasoft. + Framasoft is a french non-profit organization that offers alternatives to Big Tech's digital tools +

+
+
diff --git a/client/src/app/+signup/+register/steps/register-step-about.component.scss b/client/src/app/+signup/+register/steps/register-step-about.component.scss new file mode 100644 index 000000000..ab6d6dd4d --- /dev/null +++ b/client/src/app/+signup/+register/steps/register-step-about.component.scss @@ -0,0 +1,53 @@ +@use '_variables' as *; +@use '_mixins' as *; + +h3 { + font-weight: $font-bold; + font-size: 24px; +} + +h4 { + font-size: 18px; + font-weight: $font-bold; +} + +.why { + margin-bottom: 30px; +} + +.callout { + margin: 75px auto 25px; + border-width: 2px; + display: flex; + + .mascot-container { + position: relative; + + .mascot { + position: absolute; + top: -65px; + } + } + + .callout-content { + margin-left: 30px; + + p { + margin: 0; + } + } +} + +@media screen and (max-width: $small-view) { + .callout { + margin-top: 20px; + + .mascot-container { + display: none; + } + + .callout-content { + margin-left: 0; + } + } +} diff --git a/client/src/app/+signup/+register/steps/register-step-about.component.ts b/client/src/app/+signup/+register/steps/register-step-about.component.ts new file mode 100644 index 000000000..9a0941016 --- /dev/null +++ b/client/src/app/+signup/+register/steps/register-step-about.component.ts @@ -0,0 +1,19 @@ +import { Component, Input } from '@angular/core' +import { ServerService } from '@app/core' + +@Component({ + selector: 'my-register-step-about', + templateUrl: './register-step-about.component.html', + styleUrls: [ './register-step-about.component.scss' ] +}) +export class RegisterStepAboutComponent { + @Input() videoUploadDisabled: boolean + + constructor (private serverService: ServerService) { + + } + + get instanceName () { + return this.serverService.getHTMLConfig().instance.name + } +} diff --git a/client/src/app/+signup/+register/steps/register-step-channel.component.html b/client/src/app/+signup/+register/steps/register-step-channel.component.html new file mode 100644 index 000000000..c79256c68 --- /dev/null +++ b/client/src/app/+signup/+register/steps/register-step-channel.component.html @@ -0,0 +1,55 @@ +
+

+ You want to publish videos on {{ instanceName }}? Then you need to create your first channel. +

+ +

+ You might want to create a channel by theme: for example, you can create a channel named "SweetMelodies" + to publish your piano concerts and another one "Ecology" in which you publish your videos talking about ecology. +

+ +

+ {{ instanceName }} administrators allow you to publish up to {{ videoQuota | bytes: 0 }} of videos on their website. +

+
+ +
+ +
+ +
+ + +
This is the name that will be publicly visible by other users.
+ +
+ +
+ +
{{ formErrors.displayName }}
+
+ +
+ + +
This is the name that will be displayed in your profile URL.
+ +
+ +
@{{ instanceHost }}
+
+ +
{{ formErrors.name }}
+ +
+ Channel identifier cannot be the same as your account name. You can click on the first step to update your account name. +
+
+
+
diff --git a/client/src/app/+signup/+register/steps/register-step-channel.component.ts b/client/src/app/+signup/+register/steps/register-step-channel.component.ts new file mode 100644 index 000000000..c10b568ba --- /dev/null +++ b/client/src/app/+signup/+register/steps/register-step-channel.component.ts @@ -0,0 +1,57 @@ +import { concat, of } from 'rxjs' +import { pairwise } from 'rxjs/operators' +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' +import { FormGroup } from '@angular/forms' +import { VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR, VIDEO_CHANNEL_NAME_VALIDATOR } from '@app/shared/form-validators/video-channel-validators' +import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' +import { UserSignupService } from '@app/shared/shared-users' + +@Component({ + selector: 'my-register-step-channel', + templateUrl: './register-step-channel.component.html', + styleUrls: [ './step.component.scss' ] +}) +export class RegisterStepChannelComponent extends FormReactive implements OnInit { + @Input() username: string + @Input() instanceName: string + @Input() videoQuota: number + + @Output() formBuilt = new EventEmitter() + + constructor ( + protected formValidatorService: FormValidatorService, + private userSignupService: UserSignupService + ) { + super() + } + + get instanceHost () { + return window.location.host + } + + ngOnInit () { + this.buildForm({ + displayName: VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR, + name: VIDEO_CHANNEL_NAME_VALIDATOR + }) + + setTimeout(() => this.formBuilt.emit(this.form)) + + concat( + of(''), + this.form.get('displayName').valueChanges + ).pipe(pairwise()) + .subscribe(([ oldValue, newValue ]) => this.onDisplayNameChange(oldValue, newValue)) + } + + isSameThanUsername () { + return this.username && this.username === this.form.value['name'] + } + + private onDisplayNameChange (oldDisplayName: string, newDisplayName: string) { + const name = this.form.value['name'] || '' + + const newName = this.userSignupService.getNewUsername(oldDisplayName, newDisplayName, name) + this.form.patchValue({ name: newName }) + } +} diff --git a/client/src/app/+signup/+register/steps/register-step-terms.component.html b/client/src/app/+signup/+register/steps/register-step-terms.component.html new file mode 100644 index 000000000..f54ca77e2 --- /dev/null +++ b/client/src/app/+signup/+register/steps/register-step-terms.component.html @@ -0,0 +1,16 @@ +
+
+ + + + I am at least {{ minimumAge }} years old and agree + to the Terms + and to the Code of Conduct + of this instance + + + + +
{{ formErrors.terms }}
+
+
diff --git a/client/src/app/+signup/+register/steps/register-step-terms.component.ts b/client/src/app/+signup/+register/steps/register-step-terms.component.ts new file mode 100644 index 000000000..87d16696e --- /dev/null +++ b/client/src/app/+signup/+register/steps/register-step-terms.component.ts @@ -0,0 +1,48 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' +import { FormGroup } from '@angular/forms' +import { + USER_TERMS_VALIDATOR +} from '@app/shared/form-validators/user-validators' +import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' + +@Component({ + selector: 'my-register-step-terms', + templateUrl: './register-step-terms.component.html', + styleUrls: [ './step.component.scss' ] +}) +export class RegisterStepTermsComponent extends FormReactive implements OnInit { + @Input() hasCodeOfConduct = false + @Input() minimumAge = 16 + + @Output() formBuilt = new EventEmitter() + @Output() termsClick = new EventEmitter() + @Output() codeOfConductClick = new EventEmitter() + + constructor ( + protected formValidatorService: FormValidatorService + ) { + super() + } + + get instanceHost () { + return window.location.host + } + + ngOnInit () { + this.buildForm({ + terms: USER_TERMS_VALIDATOR + }) + + setTimeout(() => this.formBuilt.emit(this.form)) + } + + onTermsClick (event: Event) { + event.preventDefault() + this.termsClick.emit() + } + + onCodeOfConductClick (event: Event) { + event.preventDefault() + this.codeOfConductClick.emit() + } +} diff --git a/client/src/app/+signup/+register/steps/register-step-user.component.html b/client/src/app/+signup/+register/steps/register-step-user.component.html new file mode 100644 index 000000000..bffcf0346 --- /dev/null +++ b/client/src/app/+signup/+register/steps/register-step-user.component.html @@ -0,0 +1,73 @@ +
+ Video uploads are disabled on this instance, hence your account won't be able to upload videos. +
+ +
+
+ +
+ + +
+ This is the name that will be publicly visible by other users. +
+ +
+ +
+ +
{{ formErrors.displayName }}
+
+ +
+ + +
+ This is the name that will be displayed in your profile URL. +
+ +
+ + @{{ instanceHost }} +
+ +
{{ formErrors.username }}
+
+
+ +
+
+ + +
+ This email address will be used to validate your account. +
+ + + +
{{ formErrors.email }}
+
+ +
+ + +
{{ getMinPasswordLengthMessage() }}
+ + + +
{{ formErrors.password }}
+
+
+
diff --git a/client/src/app/+signup/+register/steps/register-step-user.component.ts b/client/src/app/+signup/+register/steps/register-step-user.component.ts new file mode 100644 index 000000000..b89e38a28 --- /dev/null +++ b/client/src/app/+signup/+register/steps/register-step-user.component.ts @@ -0,0 +1,63 @@ +import { concat, of } from 'rxjs' +import { pairwise } from 'rxjs/operators' +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' +import { FormGroup } from '@angular/forms' +import { + USER_DISPLAY_NAME_REQUIRED_VALIDATOR, + USER_EMAIL_VALIDATOR, + USER_PASSWORD_VALIDATOR, + USER_USERNAME_VALIDATOR +} from '@app/shared/form-validators/user-validators' +import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' +import { UserSignupService } from '@app/shared/shared-users' + +@Component({ + selector: 'my-register-step-user', + templateUrl: './register-step-user.component.html', + styleUrls: [ './step.component.scss' ] +}) +export class RegisterStepUserComponent extends FormReactive implements OnInit { + @Input() videoUploadDisabled = false + @Input() requiresEmailVerification = false + + @Output() formBuilt = new EventEmitter() + + constructor ( + protected formValidatorService: FormValidatorService, + private userSignupService: UserSignupService + ) { + super() + } + + get instanceHost () { + return window.location.host + } + + ngOnInit () { + this.buildForm({ + displayName: USER_DISPLAY_NAME_REQUIRED_VALIDATOR, + username: USER_USERNAME_VALIDATOR, + password: USER_PASSWORD_VALIDATOR, + email: USER_EMAIL_VALIDATOR + }) + + setTimeout(() => this.formBuilt.emit(this.form)) + + concat( + of(''), + this.form.get('displayName').valueChanges + ).pipe(pairwise()) + .subscribe(([ oldValue, newValue ]) => this.onDisplayNameChange(oldValue, newValue)) + } + + getMinPasswordLengthMessage () { + return USER_PASSWORD_VALIDATOR.MESSAGES.minlength + } + + private onDisplayNameChange (oldDisplayName: string, newDisplayName: string) { + const username = this.form.value['username'] || '' + + const newUsername = this.userSignupService.getNewUsername(oldDisplayName, newDisplayName, username) + this.form.patchValue({ username: newUsername }) + } +} diff --git a/client/src/app/+signup/+register/steps/step.component.scss b/client/src/app/+signup/+register/steps/step.component.scss new file mode 100644 index 000000000..35cfdae91 --- /dev/null +++ b/client/src/app/+signup/+register/steps/step.component.scss @@ -0,0 +1,27 @@ +@use '_variables' as *; +@use '_mixins' as *; + +input:not([type=submit]) { + @include peertube-input-text(100%); + display: block; + + &#username, + &#name { + width: auto !important; + flex-grow: 1; + } +} + +input[type=submit], +button { + @include peertube-button; +} + +label { + font-size: 18px; + margin-bottom: 5px; +} + +.row { + margin-bottom: 30px; +} -- cgit v1.2.3