Add success icon on registration
This commit is contained in:
parent
1d5342abc4
commit
b247a13270
|
@ -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 {}
|
|
@ -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>()
|
||||
|
|
@ -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 (
|
|
@ -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()"
|
|
@ -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(
|
||||
() => {
|
|
@ -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 { }
|
|
@ -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>
|
|
@ -40,9 +40,6 @@ export class VerifyAccountEmailComponent implements OnInit {
|
|||
.subscribe(
|
||||
() => {
|
||||
this.success = true
|
||||
setTimeout(() => {
|
||||
this.router.navigate([ '/login' ])
|
||||
}, 2000)
|
||||
},
|
||||
|
||||
err => {
|
|
@ -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 = [
|
||||
{
|
|
@ -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 {
|
||||
}
|
|
@ -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 { }
|
|
@ -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 |
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -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
|
||||
}
|
|
@ -1,2 +0,0 @@
|
|||
export * from '@app/+verify-account/verify-account-routing.module'
|
||||
export * from '@app/+verify-account/verify-account.module'
|
|
@ -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 { }
|
|
@ -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
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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()
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
|
@ -1,3 +0,0 @@
|
|||
export * from './signup-routing.module'
|
||||
export * from './signup.component'
|
||||
export * from './signup.module'
|
|
@ -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 { }
|
|
@ -1,10 +0,0 @@
|
|||
import { Component } from '@angular/core'
|
||||
|
||||
@Component({
|
||||
selector: 'my-success',
|
||||
templateUrl: './success.component.html',
|
||||
styleUrls: [ './success.component.scss' ]
|
||||
})
|
||||
export class SuccessComponent {
|
||||
|
||||
}
|
Loading…
Reference in New Issue