input {
@include peertube-checkbox(1px);
-
- width: 10px;
- margin-right: 10px;
}
}
import { SortMeta } from 'primeng/api'
import { BytesPipe } from 'ngx-pipes'
import { I18n } from '@ngx-translate/i18n-polyfill'
+import { UserRegister } from '@shared/models/users/user-register.model'
@Injectable()
export class UserService {
.pipe(catchError(err => this.restExtractor.handleError(err)))
}
- signup (userCreate: UserCreate) {
+ signup (userCreate: UserRegister) {
return this.authHttp.post(UserService.BASE_USERS_URL + 'register', userCreate)
.pipe(
map(this.restExtractor.extractDataBool),
--- /dev/null
+<section class="container">
+ <header>
+ <ng-container *ngFor="let step of steps; let i = index; let isLast = last;">
+ <div
+ class="step-info" [ngClass]="{ active: selectedIndex === i, completed: isCompleted(step) }"
+ (click)="onClick(i)"
+ >
+ <div class="step-index">
+ <ng-container *ngIf="!isCompleted(step)">{{ i + 1 }}</ng-container>
+ <my-global-icon *ngIf="isCompleted(step)" iconName="tick"></my-global-icon>
+ </div>
+
+ <div class="step-label">{{ step.label }}</div>
+ </div>
+
+ <!-- Do no display if this is the last child -->
+ <div *ngIf="!isLast" class="connector"></div>
+ </ng-container>
+ </header>
+
+ <div [style.display]="selected ? 'block' : 'none'">
+ <ng-container [ngTemplateOutlet]="selected.content"></ng-container>
+ </div>
+
+</section>
--- /dev/null
+@import '_variables';
+@import '_mixins';
+
+$grey-color: #9CA3AB;
+$index-block-height: 32px;
+
+header {
+ display: flex;
+ justify-content: space-between;
+ font-size: 15px;
+ margin-bottom: 30px;
+
+ .step-info {
+ color: $grey-color;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: $index-block-height;
+
+ .step-index {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: $index-block-height;
+ height: $index-block-height;
+ border-radius: 100px;
+ border: 2px solid $grey-color;
+ margin-bottom: 10px;
+
+ my-global-icon {
+ @include apply-svg-color(var(--mainBackgroundColor));
+
+ width: 22px;
+ height: 22px;
+ }
+ }
+
+ .step-label {
+ width: max-content;
+ }
+
+ &.active,
+ &.completed {
+ .step-index {
+ border-color: var(--mainColor);
+ background-color: var(--mainColor);
+ color: var(--mainBackgroundColor);
+ }
+
+ .step-label {
+ color: var(--mainColor);
+ }
+ }
+
+ &.completed {
+ cursor: pointer;
+ }
+ }
+
+ .connector {
+ flex: auto;
+ margin: $index-block-height/2 10px 0 10px;
+ height: 2px;
+ background-color: $grey-color;
+ }
+}
--- /dev/null
+import { Component } from '@angular/core'
+import { CdkStep, CdkStepper } from '@angular/cdk/stepper'
+
+@Component({
+ selector: 'my-custom-stepper',
+ templateUrl: './custom-stepper.component.html',
+ styleUrls: [ './custom-stepper.component.scss' ],
+ providers: [ { provide: CdkStepper, useExisting: CustomStepperComponent } ]
+})
+export class CustomStepperComponent extends CdkStepper {
+
+ onClick (index: number): void {
+ this.selectedIndex = index
+ }
+
+ isCompleted (step: CdkStep) {
+ return step.stepControl && step.stepControl.dirty && step.stepControl.valid
+ }
+}
--- /dev/null
+<form role="form" [formGroup]="form">
+
+ <div class="channel-explanations">
+ <p i18n>
+ A channel is an entity in which you upload your videos. Creating several of them helps you to organize and separate your content.<br />
+ For example, you could decide to have a channel to publish your piano concerts, and another channel in which you publish your videos talking about ecology.
+ </p>
+
+ <p>
+ Other users can decide to subscribe any channel they want, to be notified when you publish a new video.
+ </p>
+ </div>
+
+ <div class="form-group">
+ <label for="name" i18n>Channel name</label>
+
+ <div class="input-group">
+ <input
+ type="text" id="name" i18n-placeholder placeholder="Example: my_super_channel"
+ formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }"
+ >
+ <div class="input-group-append">
+ <span class="input-group-text">@{{ instanceHost }}</span>
+ </div>
+ </div>
+
+ <div *ngIf="formErrors.name" class="form-error">
+ {{ formErrors.name }}
+ </div>
+
+ <div *ngIf="isSameThanUsername()" class="form-error" i18n>
+ Channel name cannot be the same than your account name. You can click on the first step to update your account name.
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label for="displayName" i18n>Channel display name</label>
+
+ <div class="input-group">
+ <input
+ type="text" id="displayName"
+ formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
+ >
+ </div>
+
+ <div *ngIf="formErrors.displayName" class="form-error">
+ {{ formErrors.displayName }}
+ </div>
+ </div>
+</form>
--- /dev/null
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { AuthService } from '@app/core'
+import { FormReactive, VideoChannelValidatorsService } from '../shared'
+import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
+import { FormGroup } from '@angular/forms'
+
+@Component({
+ selector: 'my-signup-step-channel',
+ templateUrl: './signup-step-channel.component.html',
+ styleUrls: [ './signup.component.scss' ]
+})
+export class SignupStepChannelComponent extends FormReactive implements OnInit {
+ @Input() username: string
+ @Output() formBuilt = new EventEmitter<FormGroup>()
+
+ constructor (
+ protected formValidatorService: FormValidatorService,
+ private authService: AuthService,
+ private videoChannelValidatorsService: VideoChannelValidatorsService
+ ) {
+ super()
+ }
+
+ get instanceHost () {
+ return window.location.host
+ }
+
+ isSameThanUsername () {
+ return this.username && this.username === this.form.value['name']
+ }
+
+ ngOnInit () {
+ this.buildForm({
+ name: this.videoChannelValidatorsService.VIDEO_CHANNEL_NAME,
+ displayName: this.videoChannelValidatorsService.VIDEO_CHANNEL_DISPLAY_NAME
+ })
+
+ setTimeout(() => this.formBuilt.emit(this.form))
+ }
+}
--- /dev/null
+<form role="form" [formGroup]="form">
+
+ <div class="form-group">
+ <label for="username" i18n>Username</label>
+
+ <div class="input-group">
+ <input
+ type="text" id="username" i18n-placeholder placeholder="Example: jane_doe"
+ formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
+ >
+ <div class="input-group-append">
+ <span class="input-group-text">@{{ instanceHost }}</span>
+ </div>
+ </div>
+
+ <div *ngIf="formErrors.username" class="form-error">
+ {{ formErrors.username }}
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label for="email" i18n>Email</label>
+ <input
+ type="text" id="email" i18n-placeholder placeholder="Email"
+ formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
+ >
+ <div *ngIf="formErrors.email" class="form-error">
+ {{ formErrors.email }}
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label for="password" i18n>Password</label>
+ <input
+ type="password" id="password" i18n-placeholder placeholder="Password"
+ formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
+ >
+ <div *ngIf="formErrors.password" class="form-error">
+ {{ formErrors.password }}
+ </div>
+ </div>
+
+ <div class="form-group form-group-terms">
+ <my-peertube-checkbox
+ inputName="terms" formControlName="terms"
+ i18n-labelHtml
+ labelHtml="I am at least 16 years old and agree to the <a href='/about/instance#terms-section' target='_blank'rel='noopener noreferrer'>Terms</a> of this instance"
+ ></my-peertube-checkbox>
+
+ <div *ngIf="formErrors.terms" class="form-error">
+ {{ formErrors.terms }}
+ </div>
+ </div>
+</form>
--- /dev/null
+import { Component, EventEmitter, OnInit, Output } from '@angular/core'
+import { AuthService } from '@app/core'
+import { FormReactive, UserValidatorsService } from '../shared'
+import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
+import { FormGroup } from '@angular/forms'
+
+@Component({
+ selector: 'my-signup-step-user',
+ templateUrl: './signup-step-user.component.html',
+ styleUrls: [ './signup.component.scss' ]
+})
+export class SignupStepUserComponent extends FormReactive implements OnInit {
+ @Output() formBuilt = new EventEmitter<FormGroup>()
+
+ constructor (
+ protected formValidatorService: FormValidatorService,
+ private authService: AuthService,
+ private userValidatorsService: UserValidatorsService
+ ) {
+ super()
+ }
+
+ get instanceHost () {
+ return window.location.host
+ }
+
+ ngOnInit () {
+ this.buildForm({
+ username: this.userValidatorsService.USER_USERNAME,
+ password: this.userValidatorsService.USER_PASSWORD,
+ email: this.userValidatorsService.USER_EMAIL,
+ terms: this.userValidatorsService.USER_TERMS
+ })
+
+ setTimeout(() => this.formBuilt.emit(this.form))
+ }
+}
Create an account
</div>
- <div *ngIf="info" class="alert alert-info">{{ info }}</div>
- <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
-
- <div class="d-flex justify-content-left flex-wrap">
- <form role="form" (ngSubmit)="signup()" [formGroup]="form">
- <div class="form-group">
- <label for="username" i18n>Username</label>
-
- <div class="input-group">
- <input
- type="text" id="username" i18n-placeholder placeholder="Example: jane_doe"
- formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
- >
- <div class="input-group-append">
- <span class="input-group-text">@{{ instanceHost }}</span>
- </div>
- </div>
-
- <div *ngIf="formErrors.username" class="form-error">
- {{ formErrors.username }}
- </div>
- </div>
- <div class="form-group">
- <label for="email" i18n>Email</label>
- <input
- type="text" id="email" i18n-placeholder placeholder="Email"
- formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
- >
- <div *ngIf="formErrors.email" class="form-error">
- {{ formErrors.email }}
- </div>
- </div>
+ <my-success *ngIf="signupDone"></my-success>
+ <div *ngIf="info" class="alert alert-info">{{ info }}</div>
+ <div *ngIf="success" class="alert alert-success">{{ success }}</div>
- <div class="form-group">
- <label for="password" i18n>Password</label>
- <input
- type="password" id="password" i18n-placeholder placeholder="Password"
- formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
- >
- <div *ngIf="formErrors.password" class="form-error">
- {{ formErrors.password }}
- </div>
- </div>
+ <div class="wrapper" *ngIf="!signupDone">
+ <div>
+ <my-custom-stepper linear *ngIf="!signupDone">
+ <cdk-step [stepControl]="formStepUser" i18n-label label="User information">
+ <my-signup-step-user (formBuilt)="onUserFormBuilt($event)"></my-signup-step-user>
- <div class="form-group form-group-terms">
- <my-peertube-checkbox
- inputName="terms" formControlName="terms"
- i18n-labelHtml labelHtml="I am at least 16 years old and agree to the <a href='/about/instance#terms-section' target='_blank'rel='noopener noreferrer'>Terms</a> of this instance"
- ></my-peertube-checkbox>
+ <button i18n cdkStepperNext [disabled]="!formStepUser || !formStepUser.valid">Next</button>
+ </cdk-step>
- <div *ngIf="formErrors.terms" class="form-error">
- {{ formErrors.terms }}
- </div>
- </div>
+ <cdk-step [stepControl]="formStepChannel" i18n-label label="Channel information">
+ <my-signup-step-channel (formBuilt)="onChannelFormBuilt($event)" [username]="getUsername()"></my-signup-step-channel>
- <input type="submit" i18n-value value="Signup" [disabled]="!form.valid || signupDone">
- </form>
+ <button i18n cdkStepperNext (click)="signup()"
+ [disabled]="!formStepChannel || !formStepChannel.valid || hasSameChannelAndAccountNames()"
+ >
+ Create my account
+ </button>
+ </cdk-step>
+
+ <cdk-step i18n-label label="Done" editable="false">
+ <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+ </cdk-step>
+ </my-custom-stepper>
+ </div>
<div>
<label i18n>Features found on this instance</label>
@import '_variables';
@import '_mixins';
+.alert {
+ font-size: 15px;
+ text-align: center;
+}
+
+.wrapper {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+
+ & > div {
+ margin-bottom: 40px;
+ width: 450px;
+
+ @media screen and (max-width: 500px) {
+ width: auto;
+ }
+ }
+}
+
my-instance-features-table {
display: block;
margin-bottom: 40px;
}
-form {
- margin: 0 60px 40px 0;
-}
-
.form-group-terms {
margin: 30px 0;
}
input:not([type=submit]) {
@include peertube-input-text(400px);
+
display: block;
- &#username {
- width: auto;
+ &#username,
+ &#name {
+ width: auto !important;
flex-grow: 1;
}
}
-input[type=submit] {
+input[type=submit],
+button {
@include peertube-button;
@include orange-button;
}
-import { Component, OnInit } from '@angular/core'
+import { Component } from '@angular/core'
import { AuthService, Notifier, RedirectService, ServerService } from '@app/core'
-import { UserCreate } from '../../../../shared'
-import { FormReactive, UserService, UserValidatorsService } from '../shared'
+import { UserService, UserValidatorsService } from '../shared'
import { I18n } from '@ngx-translate/i18n-polyfill'
-import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
+import { UserRegister } from '@shared/models/users/user-register.model'
+import { FormGroup } from '@angular/forms'
@Component({
selector: 'my-signup',
templateUrl: './signup.component.html',
styleUrls: [ './signup.component.scss' ]
})
-export class SignupComponent extends FormReactive implements OnInit {
+export class SignupComponent {
info: string = null
error: string = null
+ success: string = null
signupDone = false
+ formStepUser: FormGroup
+ formStepChannel: FormGroup
+
constructor (
- protected formValidatorService: FormValidatorService,
private authService: AuthService,
private userValidatorsService: UserValidatorsService,
private notifier: Notifier,
private redirectService: RedirectService,
private i18n: I18n
) {
- super()
- }
-
- get instanceHost () {
- return window.location.host
}
get requiresEmailVerification () {
return this.serverService.getConfig().signup.requiresEmailVerification
}
- ngOnInit () {
- this.buildForm({
- username: this.userValidatorsService.USER_USERNAME,
- password: this.userValidatorsService.USER_PASSWORD,
- email: this.userValidatorsService.USER_EMAIL,
- terms: this.userValidatorsService.USER_TERMS
- })
+ hasSameChannelAndAccountNames () {
+ return this.getUsername() === this.getChannelName()
+ }
+
+ getUsername () {
+ if (!this.formStepUser) return undefined
+
+ return this.formStepUser.value['username']
+ }
+
+ getChannelName () {
+ if (!this.formStepChannel) return undefined
+
+ return this.formStepChannel.value['name']
+ }
+
+ onUserFormBuilt (form: FormGroup) {
+ this.formStepUser = form
+ }
+
+ onChannelFormBuilt (form: FormGroup) {
+ this.formStepChannel = form
}
signup () {
this.error = null
- const userCreate: UserCreate = this.form.value
+ const body: UserRegister = Object.assign(this.formStepUser.value, this.formStepChannel.value)
- this.userService.signup(userCreate).subscribe(
+ this.userService.signup(body).subscribe(
() => {
this.signupDone = true
if (this.requiresEmailVerification) {
- this.info = this.i18n('Welcome! Now please check your emails to verify your account and complete signup.')
+ this.info = this.i18n('Now please check your emails to verify your account and complete signup.')
return
}
// Auto login
- this.authService.login(userCreate.username, userCreate.password)
+ this.authService.login(body.username, body.password)
.subscribe(
() => {
- this.notifier.success(this.i18n('You are now logged in as {{username}}!', { username: userCreate.username }))
-
- this.redirectService.redirectToHomepage()
+ this.success = this.i18n('You are now logged in as {{username}}!', { username: body.username })
},
err => this.error = err.message
import { NgModule } from '@angular/core'
-
import { SignupRoutingModule } from './signup-routing.module'
import { SignupComponent } from './signup.component'
import { SharedModule } from '../shared'
+import { CdkStepperModule } from '@angular/cdk/stepper'
+import { SignupStepChannelComponent } from '@app/signup/signup-step-channel.component'
+import { SignupStepUserComponent } from '@app/signup/signup-step-user.component'
+import { CustomStepperComponent } from '@app/signup/custom-stepper.component'
+import { SuccessComponent } from '@app/signup/success.component'
@NgModule({
imports: [
SignupRoutingModule,
- SharedModule
+ SharedModule,
+ CdkStepperModule
],
declarations: [
- SignupComponent
+ SignupComponent,
+ CustomStepperComponent,
+ SuccessComponent,
+ SignupStepChannelComponent,
+ SignupStepUserComponent
],
exports: [
--- /dev/null
+<!-- Thanks: Amit Singh Sansoya from https://codepen.io/amit3200/pen/zWMJOO -->
+
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
+ <circle class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
+ <polyline class="path check" fill="none" stroke="#73AF55" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
+</svg>
+
+<p class="success">Welcome on PeerTube!</p>
--- /dev/null
+svg {
+ width: 100px;
+ display: block;
+ margin: 40px auto 0;
+}
+
+.path {
+ stroke-dasharray: 1000;
+ stroke-dashoffset: 0;
+
+ &.circle {
+ -webkit-animation: dash .9s ease-in-out;
+ animation: dash .9s ease-in-out;
+ }
+
+ &.line {
+ stroke-dashoffset: 1000;
+ -webkit-animation: dash .9s .35s ease-in-out forwards;
+ animation: dash .9s .35s ease-in-out forwards;
+ }
+
+ &.check {
+ stroke-dashoffset: -100;
+ -webkit-animation: dash-check .9s .35s ease-in-out forwards;
+ animation: dash-check .9s .35s ease-in-out forwards;
+ }
+}
+
+p {
+ text-align: center;
+ margin: 20px 0 60px;
+ font-size: 1.25em;
+
+ &.success {
+ color: #73AF55;
+ }
+}
+
+
+@-webkit-keyframes dash {
+ 0% {
+ stroke-dashoffset: 1000;
+ }
+ 100% {
+ stroke-dashoffset: 0;
+ }
+}
+
+@keyframes dash {
+ 0% {
+ stroke-dashoffset: 1000;
+ }
+ 100% {
+ stroke-dashoffset: 0;
+ }
+}
+
+@-webkit-keyframes dash-check {
+ 0% {
+ stroke-dashoffset: -100;
+ }
+ 100% {
+ stroke-dashoffset: 900;
+ }
+}
+
+@keyframes dash-check {
+ 0% {
+ stroke-dashoffset: -100;
+ }
+ 100% {
+ stroke-dashoffset: 900;
+ }
+}
--- /dev/null
+import { Component } from '@angular/core'
+
+@Component({
+ selector: 'my-success',
+ templateUrl: './success.component.html',
+ styleUrls: [ './success.component.scss' ]
+})
+export class SuccessComponent {
+
+}
}
@mixin peertube-checkbox ($border-width) {
- display: none;
+ opacity: 0;
+ width: 0;
+
+ &:focus + span {
+ outline: auto;
+ }
& + span {
position: relative;
.end()
}
+ if (body.channel.name === body.username) {
+ return res.status(400)
+ .send({ error: 'Channel name cannot be the same than user username.' })
+ .end()
+ }
+
const existing = await ActorModel.loadLocalByName(body.channel.name)
if (existing) {
return res.status(409)
await makePostBodyRequest({ url: server.url, path: registrationPath, token: server.accessToken, fields })
})
+ it('Should fail with a channel name that is the same than user username', async function () {
+ const source = { username: 'super_user', channel: { name: 'super_user', displayName: 'display name' } }
+ const fields = immutableAssign(baseCorrectParams, source)
+
+ await makePostBodyRequest({ url: server.url, path: registrationPath, token: server.accessToken, fields })
+ })
+
it('Should fail with an existing channel', async function () {
const videoChannelAttributesArg = { name: 'existing_channel', displayName: 'hello', description: 'super description' }
await addVideoChannel(server.url, server.accessToken, videoChannelAttributesArg)
projects / oweals / peertube.git / commitdiff