Add signin component.

This commit is contained in:
2019-02-12 21:40:44 +01:00
parent 1a6ce6a929
commit 3e1c53b86b
8 changed files with 176 additions and 9 deletions

View File

@@ -76,8 +76,8 @@ public class AccountController {
}
@PostMapping("/signin")
public UserDTO signin(@RequestBody final UserDTO pUser, final HttpServletResponse pResponse) throws IOException {
return accountService.signin(pUser, pResponse);
public void signin(@RequestBody final User pUser, final HttpServletResponse pResponse) throws IOException {
accountService.signin(pUser, pResponse);
}
@PutMapping("/")

View File

@@ -112,22 +112,20 @@ public class AccountService {
return result;
}
public UserDTO signin(final UserDTO pUser, final HttpServletResponse pResponse) throws IOException {
User user = new User();
public void signin(final User pUser, final HttpServletResponse pResponse) throws IOException {
if(pUser.getName() == null || pUser.getEmail() == null || pUser.getPassword() == null || "".equals(pUser.getPassword().trim())) {
pResponse.sendError(HttpServletResponse.SC_BAD_REQUEST);
} else if(userRepository.findByEmail(pUser.getEmail()).isPresent()) {
pResponse.sendError(HttpServletResponse.SC_CONFLICT);
} else {
User user = new User();
user.setName(pUser.getName());
user.setEmail(pUser.getEmail());
user.setPassword(StringUtils.hashPassword(pUser.getPassword()));
user.setInscriptionDate(new Date());
userRepository.save(user);
}
return new UserDTO(user);
}
public void updateUser(final UserDTO pUser, final HttpServletRequest pRequest,

View File

@@ -36,7 +36,11 @@ public class SecurityConfiguration extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
.antMatchers("/api/account/login", "/api/account/logout").permitAll()
.antMatchers(
"/api/account/login",
"/api/account/logout",
"/api/account/signin"
).permitAll()
.antMatchers(
"/api/images/uploadAvatar",
"/api/images/myImages",
@@ -50,7 +54,7 @@ public class SecurityConfiguration extends WebSecurityConfigurerAdapter {
"/api/categories/**",
"/api/images/**",
"/api/posts/**"
).permitAll()
).permitAll()
.anyRequest().authenticated()
.and()
// Allow to avoid login form at authentication failure from Angular app

View File

@@ -22,6 +22,7 @@ import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { LoginComponent } from './login/login.component';
import { SigninComponent } from './signin/signin.component';
import { DisconnectionComponent } from './disconnection/disconnection.component';
import { HomeComponent } from './home/home.component';
import { MyPostsComponent } from './posts/myPosts/my-posts.component';
@@ -43,6 +44,7 @@ import { HeaderService } from './header/header.service';
import { AuthService } from './core/services/auth.service';
import { HomeService } from './home/home.service';
import { LoginService } from './login/login.service';
import { SigninService } from './signin/signin.service';
import { MyPostsService } from './posts/myPosts/my-posts.service';
import { ChangePasswordService } from './account-settings/change-password/change-password.service';
import { ProfilEditionService } from './account-settings/profil-edition/profil-edition.service';
@@ -57,6 +59,7 @@ import { VersionRevisionService } from './version-revisions/version-revisions.se
HeaderComponent,
FooterComponent,
LoginComponent,
SigninComponent,
DisconnectionComponent,
HomeComponent,
PostCardComponent,
@@ -89,6 +92,7 @@ import { VersionRevisionService } from './version-revisions/version-revisions.se
AuthService,
HomeService,
LoginService,
SigninService,
MyPostsService,
ChangePasswordService,
ProfilEditionService,

View File

@@ -3,6 +3,7 @@ import { Routes } from '@angular/router';
import { AuthGuard } from './core/guards/auth.guard';
import { LoginComponent } from './login/login.component';
import { SigninComponent } from './signin/signin.component';
import { HomeComponent } from './home/home.component';
import { DisconnectionComponent } from './disconnection/disconnection.component';
import { MyPostsComponent } from './posts/myPosts/my-posts.component';
@@ -16,6 +17,7 @@ import { VersionRevisionComponent } from './version-revisions/version-revisions.
export const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'signin', component: SigninComponent },
{ path: 'home', component: HomeComponent },
{ path: 'disconnection', component: DisconnectionComponent },
{ path: 'posts/new', component: CreateUpdatePostComponent, canActivate: [AuthGuard] },

View File

@@ -0,0 +1,76 @@
<div class="card col-md-8 offset-md-2 col-lg-6 offset-lg-3">
<div id="form" class="card-body">
<h4 class="card-title">Inscrition</h4>
<form (ngSubmit)="onSubmit()" #signinForm="ngForm">
<div class="md-form">
<i class="fa fa-id-badge prefix grey-text"></i>
<input mdbInputDirective
id="name"
name="name"
type="text"
class="form-control"
[(ngModel)]="model.name"
#name="ngModel"
data-error="Veuillez saisir un nom d'utilisateur"
[validateSuccess]="false"
required />
<label for="name">Nom d'utilisateur</label>
</div>
<div class="md-form">
<i class="fa fa-envelope prefix grey-text"></i>
<input mdbInputDirective
id="email"
name="email"
type="email"
class="form-control"
[(ngModel)]="model.email"
#email="ngModel"
data-error="Veuillez saisir une adresse email valide"
[validateSuccess]="false"
required />
<label for="email">Email</label>
</div>
<div class="md-form">
<i class="fa fa-lock prefix grey-text"></i>
<input mdbInputDirective
id="password"
name="password"
type="password"
class="form-control"
[(ngModel)]="model.password"
#password="ngModel"
data-error="Veuillez saisir votre mot de passe"
[validateSuccess]="false"
required />
<label for="password">Password</label>
</div>
<div class="md-form">
<i class="fa fa-lock prefix grey-text"></i>
<input mdbInputDirective
id="confirmPassword"
name="confirmPassword"
type="password"
class="form-control"
[(ngModel)]="confirmPassword"
data-error="Veuillez confirmer votre mot de passe"
[validateSuccess]="false"
required />
<label for="confirmPassword">Confirmez votre mot de passe</label>
</div>
<div id="errorMsg" class="card red lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">{{errorMsg}}</p>
</div>
</div>
<div class="col submitFormArea">
<a routerLink="/login" class="indigo-text">
Connexion
</a>
<button class="float-right waves-effect waves-light indigo btn"
type="submit" [disabled]="!signinForm.form.valid">
Suivant
</button>
</div>
</form>
</div>
</div>

View File

@@ -0,0 +1,69 @@
import { Component } from '@angular/core';
import { User } from '../core/entities';
import { SigninService } from './signin.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-signin',
templateUrl: './signin.component.html',
styles: [`
#form {
padding-bottom: 10px;
}
.submitFormArea {
line-height: 50px;
}
#errorMsg {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out;
margin: 0;
}
`]
})
export class SigninComponent {
model: User = new User('', '', '', '', '', null, null, '');
confirmPassword: string;
errorMsg: string;
constructor(
private signinService: SigninService,
private router: Router
) {}
onSubmit(): void {
if (this.confirmPassword && this.confirmPassword === this.model.password) {
this.signinService.signin(this.model).subscribe(() => {
this.router.navigate(['/login']);
}, error => {
// FIXME: Type the error to get the status.
switch (error.status) {
case 409:
this.setMessage('L\'adresse mail saisie n\'est pas disponible');
break;
default:
this.setMessage('Une erreur est survenue lors de l\'inscription, veuillez réessayer plus tard');
break;
}
});
} else {
this.setMessage('Les mots de passe saisis ne correspondent pas');
}
}
setMessage(message: string): void {
this.errorMsg = message;
const resultMsgDiv = document.getElementById('errorMsg');
resultMsgDiv.style.maxHeight = '64px';
setTimeout(() => {
resultMsgDiv.style.maxHeight = '0px';
setTimeout(() => {
this.errorMsg = undefined;
}, 550);
}, 3000);
}
}

View File

@@ -0,0 +1,14 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { User } from '../core/entities';
@Injectable()
export class SigninService {
constructor(private http: HttpClient) {}
signin(user: User): Observable<User> {
return this.http.post<User>('/api/account/signin', user);
}
}