Add success icon on registration

This commit is contained in:
Chocobozzz 2019-05-29 14:39:49 +02:00
parent 1d5342abc4
commit b247a13270
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
33 changed files with 178 additions and 125 deletions

View File

@ -1,17 +1,18 @@
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
import { MetaGuard } from '@ngx-meta/core'
import { SignupComponent } from './signup.component'
import { RegisterComponent } from './register.component'
import { ServerConfigResolver } from '@app/core/routing/server-config-resolver.service'
import { UnloggedGuard } from '@app/core/routing/unlogged-guard.service'
const signupRoutes: Routes = [
const registerRoutes: Routes = [
{
path: 'signup',
component: SignupComponent,
canActivate: [ MetaGuard ],
path: '',
component: RegisterComponent,
canActivate: [ MetaGuard, UnloggedGuard ],
data: {
meta: {
title: 'Signup'
title: 'Register'
}
},
resolve: {
@ -21,7 +22,7 @@ const signupRoutes: Routes = [
]
@NgModule({
imports: [ RouterModule.forChild(signupRoutes) ],
imports: [ RouterModule.forChild(registerRoutes) ],
exports: [ RouterModule ]
})
export class SignupRoutingModule {}
export class RegisterRoutingModule {}

View File

@ -1,15 +1,15 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
import { AuthService } from '@app/core'
import { FormReactive, VideoChannelValidatorsService } from '../shared'
import { FormReactive, VideoChannelValidatorsService } from '@app/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' ]
selector: 'my-register-step-channel',
templateUrl: './register-step-channel.component.html',
styleUrls: [ './register.component.scss' ]
})
export class SignupStepChannelComponent extends FormReactive implements OnInit {
export class RegisterStepChannelComponent extends FormReactive implements OnInit {
@Input() username: string
@Output() formBuilt = new EventEmitter<FormGroup>()

View File

@ -1,15 +1,15 @@
import { Component, EventEmitter, OnInit, Output } from '@angular/core'
import { AuthService } from '@app/core'
import { FormReactive, UserValidatorsService } from '../shared'
import { FormReactive, UserValidatorsService } from '@app/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' ]
selector: 'my-register-step-user',
templateUrl: './register-step-user.component.html',
styleUrls: [ './register.component.scss' ]
})
export class SignupStepUserComponent extends FormReactive implements OnInit {
export class RegisterStepUserComponent extends FormReactive implements OnInit {
@Output() formBuilt = new EventEmitter<FormGroup>()
constructor (

View File

@ -4,22 +4,20 @@
Create an account
</div>
<my-success *ngIf="signupDone"></my-success>
<my-signup-success *ngIf="signupDone" [message]="success"></my-signup-success>
<div *ngIf="info" class="alert alert-info">{{ info }}</div>
<div *ngIf="success" class="alert alert-success">{{ success }}</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>
<my-register-step-user (formBuilt)="onUserFormBuilt($event)"></my-register-step-user>
<button i18n cdkStepperNext [disabled]="!formStepUser || !formStepUser.valid">Next</button>
</cdk-step>
<cdk-step [stepControl]="formStepChannel" i18n-label label="Channel information">
<my-signup-step-channel (formBuilt)="onChannelFormBuilt($event)" [username]="getUsername()"></my-signup-step-channel>
<my-register-step-channel (formBuilt)="onChannelFormBuilt($event)" [username]="getUsername()"></my-register-step-channel>
<button i18n cdkStepperNext (click)="signup()"
[disabled]="!formStepChannel || !formStepChannel.valid || hasSameChannelAndAccountNames()"

View File

@ -1,16 +1,16 @@
import { Component } from '@angular/core'
import { AuthService, Notifier, RedirectService, ServerService } from '@app/core'
import { UserService, UserValidatorsService } from '../shared'
import { UserService, UserValidatorsService } from '@app/shared'
import { I18n } from '@ngx-translate/i18n-polyfill'
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' ]
selector: 'my-register',
templateUrl: './register.component.html',
styleUrls: [ './register.component.scss' ]
})
export class SignupComponent {
export class RegisterComponent {
info: string = null
error: string = null
success: string = null
@ -61,7 +61,7 @@ export class SignupComponent {
signup () {
this.error = null
const body: UserRegister = Object.assign(this.formStepUser.value, this.formStepChannel.value)
const body: UserRegister = Object.assign(this.formStepUser.value, { channel: this.formStepChannel.value })
this.userService.signup(body).subscribe(
() => {

View File

@ -0,0 +1,33 @@
import { NgModule } from '@angular/core'
import { RegisterRoutingModule } from './register-routing.module'
import { RegisterComponent } from './register.component'
import { SharedModule } from '@app/shared'
import { CdkStepperModule } from '@angular/cdk/stepper'
import { RegisterStepChannelComponent } from './register-step-channel.component'
import { RegisterStepUserComponent } from './register-step-user.component'
import { CustomStepperComponent } from './custom-stepper.component'
import { SignupSharedModule } from '@app/+signup/shared/signup-shared.module'
@NgModule({
imports: [
RegisterRoutingModule,
SharedModule,
CdkStepperModule,
SignupSharedModule
],
declarations: [
RegisterComponent,
CustomStepperComponent,
RegisterStepChannelComponent,
RegisterStepUserComponent
],
exports: [
RegisterComponent
],
providers: [
]
})
export class RegisterModule { }

View File

@ -3,9 +3,9 @@
Verify account email confirmation
</div>
<div i18n *ngIf="success; else verificationError">
Your email has been verified and you may now login. Redirecting...
</div>
<my-signup-success i18n *ngIf="success; else verificationError" message="Your email has been verified and you may now login.">
</my-signup-success>
<ng-template #verificationError>
<div>
<span i18n>An error occurred. </span>

View File

@ -40,9 +40,6 @@ export class VerifyAccountEmailComponent implements OnInit {
.subscribe(
() => {
this.success = true
setTimeout(() => {
this.router.navigate([ '/login' ])
}, 2000)
},
err => {

View File

@ -1,12 +1,8 @@
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
import { MetaGuard } from '@ngx-meta/core'
import { VerifyAccountEmailComponent } from '@app/+verify-account/verify-account-email/verify-account-email.component'
import {
VerifyAccountAskSendEmailComponent
} from '@app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component'
import { VerifyAccountEmailComponent } from './verify-account-email/verify-account-email.component'
import { VerifyAccountAskSendEmailComponent } from './verify-account-ask-send-email/verify-account-ask-send-email.component'
const verifyAccountRoutes: Routes = [
{

View File

@ -0,0 +1,25 @@
import { NgModule } from '@angular/core'
import { VerifyAccountRoutingModule } from './verify-account-routing.module'
import { VerifyAccountEmailComponent } from './verify-account-email/verify-account-email.component'
import { VerifyAccountAskSendEmailComponent } from './verify-account-ask-send-email/verify-account-ask-send-email.component'
import { SharedModule } from '@app/shared'
import { SignupSharedModule } from '@app/+signup/shared/signup-shared.module'
@NgModule({
imports: [
VerifyAccountRoutingModule,
SharedModule,
SignupSharedModule
],
declarations: [
VerifyAccountEmailComponent,
VerifyAccountAskSendEmailComponent
],
exports: [],
providers: []
})
export class VerifyAccountModule {
}

View File

@ -0,0 +1,21 @@
import { NgModule } from '@angular/core'
import { SignupSuccessComponent } from '../shared/signup-success.component'
import { SharedModule } from '@app/shared'
@NgModule({
imports: [
SharedModule
],
declarations: [
SignupSuccessComponent
],
exports: [
SignupSuccessComponent
],
providers: [
]
})
export class SignupSharedModule { }

View File

@ -5,4 +5,12 @@
<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>
<p class="bottom-message">Welcome on PeerTube!</p>
<div *ngIf="message" class="alert alert-success">
<p>{{ message }}</p>
<p i18n>
If you need help to use PeerTube, you can take a look to the <a href="https://docs.joinpeertube.org/#/use-setup-account" target="_blank" rel="noopener noreferrer">documentation</a>.
</p>
</div>

Before

Width:  |  Height:  |  Size: 510 B

After

Width:  |  Height:  |  Size: 803 B

View File

@ -26,14 +26,16 @@ svg {
}
}
p {
.bottom-message {
text-align: center;
margin: 20px 0 60px;
font-size: 1.25em;
color: #73AF55;
}
&.success {
color: #73AF55;
}
.alert {
font-size: 15px;
text-align: center;
}

View File

@ -0,0 +1,10 @@
import { Component, Input } from '@angular/core'
@Component({
selector: 'my-signup-success',
templateUrl: './signup-success.component.html',
styleUrls: [ './signup-success.component.scss' ]
})
export class SignupSuccessComponent {
@Input() message: string
}

View File

@ -1,2 +0,0 @@
export * from '@app/+verify-account/verify-account-routing.module'
export * from '@app/+verify-account/verify-account.module'

View File

@ -1,27 +0,0 @@
import { NgModule } from '@angular/core'
import { VerifyAccountRoutingModule } from '@app/+verify-account/verify-account-routing.module'
import { VerifyAccountEmailComponent } from '@app/+verify-account/verify-account-email/verify-account-email.component'
import {
VerifyAccountAskSendEmailComponent
} from '@app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component'
import { SharedModule } from '@app/shared'
@NgModule({
imports: [
VerifyAccountRoutingModule,
SharedModule
],
declarations: [
VerifyAccountEmailComponent,
VerifyAccountAskSendEmailComponent
],
exports: [
],
providers: [
]
})
export class VerifyAccountModule { }

View File

@ -16,7 +16,7 @@ const routes: Routes = [
},
{
path: 'verify-account',
loadChildren: './+verify-account/verify-account.module#VerifyAccountModule'
loadChildren: './+signup/+verify-account/verify-account.module#VerifyAccountModule'
},
{
path: 'accounts',
@ -30,6 +30,10 @@ const routes: Routes = [
path: 'about',
loadChildren: './+about/about.module#AboutModule'
},
{
path: 'signup',
loadChildren: './+signup/+register/register.module#RegisterModule'
},
{
path: '',
component: AppComponent // Avoid 404, app component will redirect dynamically

View File

@ -14,7 +14,6 @@ import { HeaderComponent } from './header'
import { LoginModule } from './login'
import { AvatarNotificationComponent, LanguageChooserComponent, MenuComponent } from './menu'
import { SharedModule } from './shared'
import { SignupModule } from './signup'
import { VideosModule } from './videos'
import { buildFileLocale, getCompleteLocale, isDefaultLocale } from '../../../shared/models/i18n'
import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
@ -53,7 +52,6 @@ export function metaFactory (serverService: ServerService): MetaLoader {
CoreModule,
LoginModule,
ResetPasswordModule,
SignupModule,
SearchModule,
SharedModule,
VideosModule,

View File

@ -20,6 +20,7 @@ import { Notifier } from './notification'
import { MessageService } from 'primeng/api'
import { UserNotificationSocket } from '@app/core/notification/user-notification-socket.service'
import { ServerConfigResolver } from './routing/server-config-resolver.service'
import { UnloggedGuard } from '@app/core/routing/unlogged-guard.service'
@NgModule({
imports: [
@ -58,6 +59,8 @@ import { ServerConfigResolver } from './routing/server-config-resolver.service'
ThemeService,
LoginGuard,
UserRightGuard,
UnloggedGuard,
RedirectService,
Notifier,
MessageService,

View File

@ -42,7 +42,14 @@ export class RedirectService {
}
redirectToPreviousRoute () {
if (this.previousUrl) return this.router.navigateByUrl(this.previousUrl)
const exceptions = [
'/verify-account'
]
if (this.previousUrl) {
const isException = exceptions.find(e => this.previousUrl.startsWith(e))
if (!isException) return this.router.navigateByUrl(this.previousUrl)
}
return this.redirectToHomepage()
}

View File

@ -0,0 +1,25 @@
import { Injectable } from '@angular/core'
import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, Router, RouterStateSnapshot } from '@angular/router'
import { AuthService } from '../auth/auth.service'
import { RedirectService } from './redirect.service'
@Injectable()
export class UnloggedGuard implements CanActivate, CanActivateChild {
constructor (
private router: Router,
private auth: AuthService,
private redirectService: RedirectService
) {}
canActivate (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (this.auth.isLoggedIn() === false) return true
this.redirectService.redirectToHomepage()
return false
}
canActivateChild (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
return this.canActivate(route, state)
}
}

View File

@ -1,3 +0,0 @@
export * from './signup-routing.module'
export * from './signup.component'
export * from './signup.module'

View File

@ -1,33 +0,0 @@
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,
CdkStepperModule
],
declarations: [
SignupComponent,
CustomStepperComponent,
SuccessComponent,
SignupStepChannelComponent,
SignupStepUserComponent
],
exports: [
SignupComponent
],
providers: [
]
})
export class SignupModule { }

View File

@ -1,10 +0,0 @@
import { Component } from '@angular/core'
@Component({
selector: 'my-success',
templateUrl: './success.component.html',
styleUrls: [ './success.component.scss' ]
})
export class SuccessComponent {
}