aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/signup
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-05-29 14:39:49 +0200
committerChocobozzz <me@florianbigard.com>2019-05-29 14:39:49 +0200
commitb247a132709eb212fef4f77c4912dc0ec108f36b (patch)
treeb2700e6ed55e00cd213c44e8afdeea4c327ae904 /client/src/app/signup
parent1d5342abc43df02cf0bd69b1e865c0f179182eef (diff)
downloadPeerTube-b247a132709eb212fef4f77c4912dc0ec108f36b.tar.gz
PeerTube-b247a132709eb212fef4f77c4912dc0ec108f36b.tar.zst
PeerTube-b247a132709eb212fef4f77c4912dc0ec108f36b.zip
Add success icon on registration
Diffstat (limited to 'client/src/app/signup')
-rw-r--r--client/src/app/signup/custom-stepper.component.html25
-rw-r--r--client/src/app/signup/custom-stepper.component.scss66
-rw-r--r--client/src/app/signup/custom-stepper.component.ts19
-rw-r--r--client/src/app/signup/index.ts3
-rw-r--r--client/src/app/signup/signup-routing.module.ts27
-rw-r--r--client/src/app/signup/signup-step-channel.component.html50
-rw-r--r--client/src/app/signup/signup-step-channel.component.ts40
-rw-r--r--client/src/app/signup/signup-step-user.component.html54
-rw-r--r--client/src/app/signup/signup-step-user.component.ts37
-rw-r--r--client/src/app/signup/signup.component.html43
-rw-r--r--client/src/app/signup/signup.component.scss58
-rw-r--r--client/src/app/signup/signup.component.ts89
-rw-r--r--client/src/app/signup/signup.module.ts33
-rw-r--r--client/src/app/signup/success.component.html8
-rw-r--r--client/src/app/signup/success.component.scss74
-rw-r--r--client/src/app/signup/success.component.ts10
16 files changed, 0 insertions, 636 deletions
diff --git a/client/src/app/signup/custom-stepper.component.html b/client/src/app/signup/custom-stepper.component.html
deleted file mode 100644
index bf507fc4f..000000000
--- a/client/src/app/signup/custom-stepper.component.html
+++ /dev/null
@@ -1,25 +0,0 @@
1<section class="container">
2 <header>
3 <ng-container *ngFor="let step of steps; let i = index; let isLast = last;">
4 <div
5 class="step-info" [ngClass]="{ active: selectedIndex === i, completed: isCompleted(step) }"
6 (click)="onClick(i)"
7 >
8 <div class="step-index">
9 <ng-container *ngIf="!isCompleted(step)">{{ i + 1 }}</ng-container>
10 <my-global-icon *ngIf="isCompleted(step)" iconName="tick"></my-global-icon>
11 </div>
12
13 <div class="step-label">{{ step.label }}</div>
14 </div>
15
16 <!-- Do no display if this is the last child -->
17 <div *ngIf="!isLast" class="connector"></div>
18 </ng-container>
19 </header>
20
21 <div [style.display]="selected ? 'block' : 'none'">
22 <ng-container [ngTemplateOutlet]="selected.content"></ng-container>
23 </div>
24
25</section>
diff --git a/client/src/app/signup/custom-stepper.component.scss b/client/src/app/signup/custom-stepper.component.scss
deleted file mode 100644
index 2371c8ae5..000000000
--- a/client/src/app/signup/custom-stepper.component.scss
+++ /dev/null
@@ -1,66 +0,0 @@
1@import '_variables';
2@import '_mixins';
3
4$grey-color: #9CA3AB;
5$index-block-height: 32px;
6
7header {
8 display: flex;
9 justify-content: space-between;
10 font-size: 15px;
11 margin-bottom: 30px;
12
13 .step-info {
14 color: $grey-color;
15 display: flex;
16 flex-direction: column;
17 align-items: center;
18 width: $index-block-height;
19
20 .step-index {
21 display: flex;
22 justify-content: center;
23 align-items: center;
24 width: $index-block-height;
25 height: $index-block-height;
26 border-radius: 100px;
27 border: 2px solid $grey-color;
28 margin-bottom: 10px;
29
30 my-global-icon {
31 @include apply-svg-color(var(--mainBackgroundColor));
32
33 width: 22px;
34 height: 22px;
35 }
36 }
37
38 .step-label {
39 width: max-content;
40 }
41
42 &.active,
43 &.completed {
44 .step-index {
45 border-color: var(--mainColor);
46 background-color: var(--mainColor);
47 color: var(--mainBackgroundColor);
48 }
49
50 .step-label {
51 color: var(--mainColor);
52 }
53 }
54
55 &.completed {
56 cursor: pointer;
57 }
58 }
59
60 .connector {
61 flex: auto;
62 margin: $index-block-height/2 10px 0 10px;
63 height: 2px;
64 background-color: $grey-color;
65 }
66}
diff --git a/client/src/app/signup/custom-stepper.component.ts b/client/src/app/signup/custom-stepper.component.ts
deleted file mode 100644
index 2ae40f3a9..000000000
--- a/client/src/app/signup/custom-stepper.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
1import { Component } from '@angular/core'
2import { CdkStep, CdkStepper } from '@angular/cdk/stepper'
3
4@Component({
5 selector: 'my-custom-stepper',
6 templateUrl: './custom-stepper.component.html',
7 styleUrls: [ './custom-stepper.component.scss' ],
8 providers: [ { provide: CdkStepper, useExisting: CustomStepperComponent } ]
9})
10export class CustomStepperComponent extends CdkStepper {
11
12 onClick (index: number): void {
13 this.selectedIndex = index
14 }
15
16 isCompleted (step: CdkStep) {
17 return step.stepControl && step.stepControl.dirty && step.stepControl.valid
18 }
19}
diff --git a/client/src/app/signup/index.ts b/client/src/app/signup/index.ts
deleted file mode 100644
index b0aca9723..000000000
--- a/client/src/app/signup/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
1export * from './signup-routing.module'
2export * from './signup.component'
3export * from './signup.module'
diff --git a/client/src/app/signup/signup-routing.module.ts b/client/src/app/signup/signup-routing.module.ts
deleted file mode 100644
index 820d16d4d..000000000
--- a/client/src/app/signup/signup-routing.module.ts
+++ /dev/null
@@ -1,27 +0,0 @@
1import { NgModule } from '@angular/core'
2import { RouterModule, Routes } from '@angular/router'
3import { MetaGuard } from '@ngx-meta/core'
4import { SignupComponent } from './signup.component'
5import { ServerConfigResolver } from '@app/core/routing/server-config-resolver.service'
6
7const signupRoutes: Routes = [
8 {
9 path: 'signup',
10 component: SignupComponent,
11 canActivate: [ MetaGuard ],
12 data: {
13 meta: {
14 title: 'Signup'
15 }
16 },
17 resolve: {
18 serverConfigLoaded: ServerConfigResolver
19 }
20 }
21]
22
23@NgModule({
24 imports: [ RouterModule.forChild(signupRoutes) ],
25 exports: [ RouterModule ]
26})
27export class SignupRoutingModule {}
diff --git a/client/src/app/signup/signup-step-channel.component.html b/client/src/app/signup/signup-step-channel.component.html
deleted file mode 100644
index 68ea4473a..000000000
--- a/client/src/app/signup/signup-step-channel.component.html
+++ /dev/null
@@ -1,50 +0,0 @@
1<form role="form" [formGroup]="form">
2
3 <div class="channel-explanations">
4 <p i18n>
5 A channel is an entity in which you upload your videos. Creating several of them helps you to organize and separate your content.<br />
6 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.
7 </p>
8
9 <p>
10 Other users can decide to subscribe any channel they want, to be notified when you publish a new video.
11 </p>
12 </div>
13
14 <div class="form-group">
15 <label for="name" i18n>Channel name</label>
16
17 <div class="input-group">
18 <input
19 type="text" id="name" i18n-placeholder placeholder="Example: my_super_channel"
20 formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }"
21 >
22 <div class="input-group-append">
23 <span class="input-group-text">@{{ instanceHost }}</span>
24 </div>
25 </div>
26
27 <div *ngIf="formErrors.name" class="form-error">
28 {{ formErrors.name }}
29 </div>
30
31 <div *ngIf="isSameThanUsername()" class="form-error" i18n>
32 Channel name cannot be the same than your account name. You can click on the first step to update your account name.
33 </div>
34 </div>
35
36 <div class="form-group">
37 <label for="displayName" i18n>Channel display name</label>
38
39 <div class="input-group">
40 <input
41 type="text" id="displayName"
42 formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
43 >
44 </div>
45
46 <div *ngIf="formErrors.displayName" class="form-error">
47 {{ formErrors.displayName }}
48 </div>
49 </div>
50</form>
diff --git a/client/src/app/signup/signup-step-channel.component.ts b/client/src/app/signup/signup-step-channel.component.ts
deleted file mode 100644
index a49b7f36f..000000000
--- a/client/src/app/signup/signup-step-channel.component.ts
+++ /dev/null
@@ -1,40 +0,0 @@
1import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
2import { AuthService } from '@app/core'
3import { FormReactive, VideoChannelValidatorsService } from '../shared'
4import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
5import { FormGroup } from '@angular/forms'
6
7@Component({
8 selector: 'my-signup-step-channel',
9 templateUrl: './signup-step-channel.component.html',
10 styleUrls: [ './signup.component.scss' ]
11})
12export class SignupStepChannelComponent extends FormReactive implements OnInit {
13 @Input() username: string
14 @Output() formBuilt = new EventEmitter<FormGroup>()
15
16 constructor (
17 protected formValidatorService: FormValidatorService,
18 private authService: AuthService,
19 private videoChannelValidatorsService: VideoChannelValidatorsService
20 ) {
21 super()
22 }
23
24 get instanceHost () {
25 return window.location.host
26 }
27
28 isSameThanUsername () {
29 return this.username && this.username === this.form.value['name']
30 }
31
32 ngOnInit () {
33 this.buildForm({
34 name: this.videoChannelValidatorsService.VIDEO_CHANNEL_NAME,
35 displayName: this.videoChannelValidatorsService.VIDEO_CHANNEL_DISPLAY_NAME
36 })
37
38 setTimeout(() => this.formBuilt.emit(this.form))
39 }
40}
diff --git a/client/src/app/signup/signup-step-user.component.html b/client/src/app/signup/signup-step-user.component.html
deleted file mode 100644
index cd0c78bfa..000000000
--- a/client/src/app/signup/signup-step-user.component.html
+++ /dev/null
@@ -1,54 +0,0 @@
1<form role="form" [formGroup]="form">
2
3 <div class="form-group">
4 <label for="username" i18n>Username</label>
5
6 <div class="input-group">
7 <input
8 type="text" id="username" i18n-placeholder placeholder="Example: jane_doe"
9 formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
10 >
11 <div class="input-group-append">
12 <span class="input-group-text">@{{ instanceHost }}</span>
13 </div>
14 </div>
15
16 <div *ngIf="formErrors.username" class="form-error">
17 {{ formErrors.username }}
18 </div>
19 </div>
20
21 <div class="form-group">
22 <label for="email" i18n>Email</label>
23 <input
24 type="text" id="email" i18n-placeholder placeholder="Email"
25 formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
26 >
27 <div *ngIf="formErrors.email" class="form-error">
28 {{ formErrors.email }}
29 </div>
30 </div>
31
32 <div class="form-group">
33 <label for="password" i18n>Password</label>
34 <input
35 type="password" id="password" i18n-placeholder placeholder="Password"
36 formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
37 >
38 <div *ngIf="formErrors.password" class="form-error">
39 {{ formErrors.password }}
40 </div>
41 </div>
42
43 <div class="form-group form-group-terms">
44 <my-peertube-checkbox
45 inputName="terms" formControlName="terms"
46 i18n-labelHtml
47 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"
48 ></my-peertube-checkbox>
49
50 <div *ngIf="formErrors.terms" class="form-error">
51 {{ formErrors.terms }}
52 </div>
53 </div>
54</form>
diff --git a/client/src/app/signup/signup-step-user.component.ts b/client/src/app/signup/signup-step-user.component.ts
deleted file mode 100644
index 54855d8a7..000000000
--- a/client/src/app/signup/signup-step-user.component.ts
+++ /dev/null
@@ -1,37 +0,0 @@
1import { Component, EventEmitter, OnInit, Output } from '@angular/core'
2import { AuthService } from '@app/core'
3import { FormReactive, UserValidatorsService } from '../shared'
4import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
5import { FormGroup } from '@angular/forms'
6
7@Component({
8 selector: 'my-signup-step-user',
9 templateUrl: './signup-step-user.component.html',
10 styleUrls: [ './signup.component.scss' ]
11})
12export class SignupStepUserComponent extends FormReactive implements OnInit {
13 @Output() formBuilt = new EventEmitter<FormGroup>()
14
15 constructor (
16 protected formValidatorService: FormValidatorService,
17 private authService: AuthService,
18 private userValidatorsService: UserValidatorsService
19 ) {
20 super()
21 }
22
23 get instanceHost () {
24 return window.location.host
25 }
26
27 ngOnInit () {
28 this.buildForm({
29 username: this.userValidatorsService.USER_USERNAME,
30 password: this.userValidatorsService.USER_PASSWORD,
31 email: this.userValidatorsService.USER_EMAIL,
32 terms: this.userValidatorsService.USER_TERMS
33 })
34
35 setTimeout(() => this.formBuilt.emit(this.form))
36 }
37}
diff --git a/client/src/app/signup/signup.component.html b/client/src/app/signup/signup.component.html
deleted file mode 100644
index ae3a595e9..000000000
--- a/client/src/app/signup/signup.component.html
+++ /dev/null
@@ -1,43 +0,0 @@
1<div class="margin-content">
2
3 <div i18n class="title-page title-page-single">
4 Create an account
5 </div>
6
7
8 <my-success *ngIf="signupDone"></my-success>
9 <div *ngIf="info" class="alert alert-info">{{ info }}</div>
10 <div *ngIf="success" class="alert alert-success">{{ success }}</div>
11
12 <div class="wrapper" *ngIf="!signupDone">
13 <div>
14 <my-custom-stepper linear *ngIf="!signupDone">
15 <cdk-step [stepControl]="formStepUser" i18n-label label="User information">
16 <my-signup-step-user (formBuilt)="onUserFormBuilt($event)"></my-signup-step-user>
17
18 <button i18n cdkStepperNext [disabled]="!formStepUser || !formStepUser.valid">Next</button>
19 </cdk-step>
20
21 <cdk-step [stepControl]="formStepChannel" i18n-label label="Channel information">
22 <my-signup-step-channel (formBuilt)="onChannelFormBuilt($event)" [username]="getUsername()"></my-signup-step-channel>
23
24 <button i18n cdkStepperNext (click)="signup()"
25 [disabled]="!formStepChannel || !formStepChannel.valid || hasSameChannelAndAccountNames()"
26 >
27 Create my account
28 </button>
29 </cdk-step>
30
31 <cdk-step i18n-label label="Done" editable="false">
32 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
33 </cdk-step>
34 </my-custom-stepper>
35 </div>
36
37 <div>
38 <label i18n>Features found on this instance</label>
39 <my-instance-features-table></my-instance-features-table>
40 </div>
41 </div>
42
43</div>
diff --git a/client/src/app/signup/signup.component.scss b/client/src/app/signup/signup.component.scss
deleted file mode 100644
index 6f61b78f7..000000000
--- a/client/src/app/signup/signup.component.scss
+++ /dev/null
@@ -1,58 +0,0 @@
1@import '_variables';
2@import '_mixins';
3
4.alert {
5 font-size: 15px;
6 text-align: center;
7}
8
9.wrapper {
10 display: flex;
11 justify-content: space-between;
12 flex-wrap: wrap;
13
14 & > div {
15 margin-bottom: 40px;
16 width: 450px;
17
18 @media screen and (max-width: 500px) {
19 width: auto;
20 }
21 }
22}
23
24my-instance-features-table {
25 display: block;
26
27 margin-bottom: 40px;
28}
29
30.form-group-terms {
31 margin: 30px 0;
32}
33
34.input-group {
35 @include peertube-input-group(400px);
36}
37
38.input-group-append {
39 height: 30px;
40}
41
42input:not([type=submit]) {
43 @include peertube-input-text(400px);
44
45 display: block;
46
47 &#username,
48 &#name {
49 width: auto !important;
50 flex-grow: 1;
51 }
52}
53
54input[type=submit],
55button {
56 @include peertube-button;
57 @include orange-button;
58}
diff --git a/client/src/app/signup/signup.component.ts b/client/src/app/signup/signup.component.ts
deleted file mode 100644
index 11eaa8521..000000000
--- a/client/src/app/signup/signup.component.ts
+++ /dev/null
@@ -1,89 +0,0 @@
1import { Component } from '@angular/core'
2import { AuthService, Notifier, RedirectService, ServerService } from '@app/core'
3import { UserService, UserValidatorsService } from '../shared'
4import { I18n } from '@ngx-translate/i18n-polyfill'
5import { UserRegister } from '@shared/models/users/user-register.model'
6import { FormGroup } from '@angular/forms'
7
8@Component({
9 selector: 'my-signup',
10 templateUrl: './signup.component.html',
11 styleUrls: [ './signup.component.scss' ]
12})
13export class SignupComponent {
14 info: string = null
15 error: string = null
16 success: string = null
17 signupDone = false
18
19 formStepUser: FormGroup
20 formStepChannel: FormGroup
21
22 constructor (
23 private authService: AuthService,
24 private userValidatorsService: UserValidatorsService,
25 private notifier: Notifier,
26 private userService: UserService,
27 private serverService: ServerService,
28 private redirectService: RedirectService,
29 private i18n: I18n
30 ) {
31 }
32
33 get requiresEmailVerification () {
34 return this.serverService.getConfig().signup.requiresEmailVerification
35 }
36
37 hasSameChannelAndAccountNames () {
38 return this.getUsername() === this.getChannelName()
39 }
40
41 getUsername () {
42 if (!this.formStepUser) return undefined
43
44 return this.formStepUser.value['username']
45 }
46
47 getChannelName () {
48 if (!this.formStepChannel) return undefined
49
50 return this.formStepChannel.value['name']
51 }
52
53 onUserFormBuilt (form: FormGroup) {
54 this.formStepUser = form
55 }
56
57 onChannelFormBuilt (form: FormGroup) {
58 this.formStepChannel = form
59 }
60
61 signup () {
62 this.error = null
63
64 const body: UserRegister = Object.assign(this.formStepUser.value, this.formStepChannel.value)
65
66 this.userService.signup(body).subscribe(
67 () => {
68 this.signupDone = true
69
70 if (this.requiresEmailVerification) {
71 this.info = this.i18n('Now please check your emails to verify your account and complete signup.')
72 return
73 }
74
75 // Auto login
76 this.authService.login(body.username, body.password)
77 .subscribe(
78 () => {
79 this.success = this.i18n('You are now logged in as {{username}}!', { username: body.username })
80 },
81
82 err => this.error = err.message
83 )
84 },
85
86 err => this.error = err.message
87 )
88 }
89}
diff --git a/client/src/app/signup/signup.module.ts b/client/src/app/signup/signup.module.ts
deleted file mode 100644
index fccaf7ce1..000000000
--- a/client/src/app/signup/signup.module.ts
+++ /dev/null
@@ -1,33 +0,0 @@
1import { NgModule } from '@angular/core'
2import { SignupRoutingModule } from './signup-routing.module'
3import { SignupComponent } from './signup.component'
4import { SharedModule } from '../shared'
5import { CdkStepperModule } from '@angular/cdk/stepper'
6import { SignupStepChannelComponent } from '@app/signup/signup-step-channel.component'
7import { SignupStepUserComponent } from '@app/signup/signup-step-user.component'
8import { CustomStepperComponent } from '@app/signup/custom-stepper.component'
9import { SuccessComponent } from '@app/signup/success.component'
10
11@NgModule({
12 imports: [
13 SignupRoutingModule,
14 SharedModule,
15 CdkStepperModule
16 ],
17
18 declarations: [
19 SignupComponent,
20 CustomStepperComponent,
21 SuccessComponent,
22 SignupStepChannelComponent,
23 SignupStepUserComponent
24 ],
25
26 exports: [
27 SignupComponent
28 ],
29
30 providers: [
31 ]
32})
33export class SignupModule { }
diff --git a/client/src/app/signup/success.component.html b/client/src/app/signup/success.component.html
deleted file mode 100644
index 68eb72b61..000000000
--- a/client/src/app/signup/success.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
1<!-- Thanks: Amit Singh Sansoya from https://codepen.io/amit3200/pen/zWMJOO -->
2
3<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
4 <circle class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
5 <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 "/>
6</svg>
7
8<p class="success">Welcome on PeerTube!</p>
diff --git a/client/src/app/signup/success.component.scss b/client/src/app/signup/success.component.scss
deleted file mode 100644
index 7c66e08cf..000000000
--- a/client/src/app/signup/success.component.scss
+++ /dev/null
@@ -1,74 +0,0 @@
1svg {
2 width: 100px;
3 display: block;
4 margin: 40px auto 0;
5}
6
7.path {
8 stroke-dasharray: 1000;
9 stroke-dashoffset: 0;
10
11 &.circle {
12 -webkit-animation: dash .9s ease-in-out;
13 animation: dash .9s ease-in-out;
14 }
15
16 &.line {
17 stroke-dashoffset: 1000;
18 -webkit-animation: dash .9s .35s ease-in-out forwards;
19 animation: dash .9s .35s ease-in-out forwards;
20 }
21
22 &.check {
23 stroke-dashoffset: -100;
24 -webkit-animation: dash-check .9s .35s ease-in-out forwards;
25 animation: dash-check .9s .35s ease-in-out forwards;
26 }
27}
28
29p {
30 text-align: center;
31 margin: 20px 0 60px;
32 font-size: 1.25em;
33
34 &.success {
35 color: #73AF55;
36 }
37}
38
39
40@-webkit-keyframes dash {
41 0% {
42 stroke-dashoffset: 1000;
43 }
44 100% {
45 stroke-dashoffset: 0;
46 }
47}
48
49@keyframes dash {
50 0% {
51 stroke-dashoffset: 1000;
52 }
53 100% {
54 stroke-dashoffset: 0;
55 }
56}
57
58@-webkit-keyframes dash-check {
59 0% {
60 stroke-dashoffset: -100;
61 }
62 100% {
63 stroke-dashoffset: 900;
64 }
65}
66
67@keyframes dash-check {
68 0% {
69 stroke-dashoffset: -100;
70 }
71 100% {
72 stroke-dashoffset: 900;
73 }
74}
diff --git a/client/src/app/signup/success.component.ts b/client/src/app/signup/success.component.ts
deleted file mode 100644
index 2674e1e30..000000000
--- a/client/src/app/signup/success.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
1import { Component } from '@angular/core'
2
3@Component({
4 selector: 'my-success',
5 templateUrl: './success.component.html',
6 styleUrls: [ './success.component.scss' ]
7})
8export class SuccessComponent {
9
10}
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-04 22:07:42 +0000