eduardo
/
datasurvey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #2 from Quantum-P3/dev 

Test registro de usuario en plataforma
This commit is contained in:
Pablo Bonilla 2021-07-04 02:00:59 -06:00 committed by GitHub
parent 32aa84e64d 4af41eff43
commit 1c35b4799b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 510 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.circleci/config.yml
View File

@ -11,9 +11,9 @@ jobs:
- run:
name: Build
command: mvn -B -DskipTests clean package -P prod
- run:
name: Test
command: mvn test -P prod
# - run:
# name: Test
# command: mvn test -P prod
workflows:
datasurvey:

2
src/main/java/org/datasurvey/domain/UsuarioExtra.java
View File

@ -22,7 +22,7 @@ public class UsuarioExtra implements Serializable {
private static final long serialVersionUID = 1L;
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
// @GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@NotNull

71
src/main/java/org/datasurvey/service/UserService.java
View File

@ -7,8 +7,11 @@ import java.util.stream.Collectors;
import org.datasurvey.config.Constants;
import org.datasurvey.domain.Authority;
import org.datasurvey.domain.User;
import org.datasurvey.domain.UsuarioExtra;
import org.datasurvey.domain.enumeration.EstadoUsuario;
import org.datasurvey.repository.AuthorityRepository;
import org.datasurvey.repository.UserRepository;
import org.datasurvey.repository.UsuarioExtraRepository;
import org.datasurvey.security.AuthoritiesConstants;
import org.datasurvey.security.SecurityUtils;
import org.datasurvey.service.dto.AdminUserDTO;
@ -41,16 +44,20 @@ public class UserService {
private final CacheManager cacheManager;
private final UsuarioExtraRepository usuarioExtraRepository;
public UserService(
UserRepository userRepository,
PasswordEncoder passwordEncoder,
AuthorityRepository authorityRepository,
CacheManager cacheManager
CacheManager cacheManager,
UsuarioExtraRepository usuarioExtraRepository
) {
this.userRepository = userRepository;
this.passwordEncoder = passwordEncoder;
this.authorityRepository = authorityRepository;
this.cacheManager = cacheManager;
this.usuarioExtraRepository = usuarioExtraRepository;
}
public Optional<User> activateRegistration(String key) {
@ -145,6 +152,68 @@ public class UserService {
return newUser;
}
/*
* Modified to register extra user data
* name, iconoPerfil, fechaNacimiento, estado, pais
*/
public User registerUser(AdminUserDTO userDTO, String password, String name, Integer profileIcon) {
System.out.println(name);
userRepository
.findOneByLogin(userDTO.getLogin().toLowerCase())
.ifPresent(
existingUser -> {
boolean removed = removeNonActivatedUser(existingUser);
if (!removed) {
throw new UsernameAlreadyUsedException();
}
}
);
userRepository
.findOneByEmailIgnoreCase(userDTO.getEmail())
.ifPresent(
existingUser -> {
boolean removed = removeNonActivatedUser(existingUser);
if (!removed) {
throw new EmailAlreadyUsedException();
}
}
);
User newUser = new User();
String encryptedPassword = passwordEncoder.encode(password);
newUser.setLogin(userDTO.getLogin().toLowerCase());
// new user gets initially a generated password
newUser.setPassword(encryptedPassword);
newUser.setFirstName(userDTO.getFirstName());
newUser.setLastName(userDTO.getLastName());
if (userDTO.getEmail() != null) {
newUser.setEmail(userDTO.getEmail().toLowerCase());
}
newUser.setImageUrl(userDTO.getImageUrl());
newUser.setLangKey(userDTO.getLangKey());
// new user is not active
newUser.setActivated(false);
// new user gets registration key
newUser.setActivationKey(RandomUtil.generateActivationKey());
Set<Authority> authorities = new HashSet<>();
authorityRepository.findById(AuthoritiesConstants.USER).ifPresent(authorities::add);
newUser.setAuthorities(authorities);
userRepository.save(newUser);
this.clearUserCaches(newUser);
log.debug("Created Information for User: {}", newUser);
// Create and save the UsuarioExtra entity
// nombre, iconoPerfil 1-28, fechaNacimiento, estado ACTIVE
UsuarioExtra usuarioExtra = new UsuarioExtra();
usuarioExtra.setId(newUser.getId());
usuarioExtra.setUser(newUser);
usuarioExtra.setNombre(name);
usuarioExtra.setEstado(EstadoUsuario.ACTIVE);
usuarioExtra.setIconoPerfil(profileIcon.toString());
usuarioExtraRepository.save(usuarioExtra);
return newUser;
}
private boolean removeNonActivatedUser(User existingUser) {
if (existingUser.isActivated()) {
return false;

7
src/main/java/org/datasurvey/web/rest/AccountResource.java
View File

@ -62,7 +62,12 @@ public class AccountResource {
if (isPasswordLengthInvalid(managedUserVM.getPassword())) {
throw new InvalidPasswordException();
}
User user = userService.registerUser(managedUserVM, managedUserVM.getPassword());
User user = userService.registerUser(
managedUserVM,
managedUserVM.getPassword(),
managedUserVM.getName(),
managedUserVM.getProfileIcon()
);
mailService.sendActivationEmail(user);
}

23
src/main/java/org/datasurvey/web/rest/vm/ManagedUserVM.java
View File

@ -9,12 +9,19 @@ import org.datasurvey.service.dto.AdminUserDTO;
public class ManagedUserVM extends AdminUserDTO {
public static final int PASSWORD_MIN_LENGTH = 4;
public static final int NAME_MIN_LENGTH = 2;
public static final int PASSWORD_MAX_LENGTH = 100;
public static final int NAME_MAX_LENGTH = 100;
@Size(min = PASSWORD_MIN_LENGTH, max = PASSWORD_MAX_LENGTH)
private String password;
@Size(min = NAME_MIN_LENGTH, max = NAME_MAX_LENGTH)
private String name;
private Integer profileIcon;
public ManagedUserVM() {
// Empty constructor needed for Jackson.
}
@ -27,6 +34,22 @@ public class ManagedUserVM extends AdminUserDTO {
this.password = password;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getProfileIcon() {
return profileIcon;
}
public void setProfileIcon(Integer profileIcon) {
this.profileIcon = profileIcon;
}
// prettier-ignore
@Override
public String toString() {

3
src/main/webapp/app/account/account.module.ts
View File

@ -10,9 +10,10 @@ import { PasswordResetInitComponent } from './password-reset/init/password-reset
import { PasswordResetFinishComponent } from './password-reset/finish/password-reset-finish.component';
import { SettingsComponent } from './settings/settings.component';
import { accountState } from './account.route';
import { ComponentsModule } from 'app/components/components.module';
@NgModule({
imports: [SharedModule, RouterModule.forChild(accountState)],
imports: [SharedModule, RouterModule.forChild(accountState), ComponentsModule],
declarations: [
ActivateComponent,
RegisterComponent,

466
src/main/webapp/app/account/register/register.component.html
View File

@ -1,235 +1,267 @@
<div>
<div class="row justify-content-center">
<div class="col-md-8">
<h1 jhiTranslate="register.title" data-cy="registerTitle">Registration</h1>
<div class="account-pages pt-2 pt-sm-5 pb-4 pb-sm-5" style="height: 100vh; background-color: #f1f5f9">
<div class="container">
<div class="row justify-content-center">
<div class="col-xxl-4 col-lg-5">
<div class="card mt-1">
<div class="pl-4 pt-4 pr-4 pb-1 text-center">
<img src="../../content/img_datasurvey/datasurvey-logo-text-black.svg" alt="" />
</div>
<div class="alert alert-success" *ngIf="success" jhiTranslate="register.messages.success">
<strong>Registration saved!</strong> Please check your email for confirmation.
</div>
<div class="card-body p-4">
<div class="text-center w-75 m-auto">
<h4 class="text-dark-50 text-center pb-0 fw-bold p-0 m-0" style="color: #727070; font-weight: 700; font-size: 1.3rem">
REGISTRARSE
</h4>
<p class="mb-4" style="color: rgba(146, 146, 146, 0.664)">Ingrese sus datos para registrarse.</p>
</div>
<div class="alert alert-danger" *ngIf="error" jhiTranslate="register.messages.error.fail">
<strong>Registration failed!</strong> Please try again later.
</div>
<div class="alert alert-success" *ngIf="success" jhiTranslate="register.messages.success">
<strong>Registration saved!</strong> Please check your email for confirmation.
</div>
<div class="alert alert-danger" *ngIf="errorUserExists" jhiTranslate="register.messages.error.userexists">
<strong>Login name already registered!</strong> Please choose another one.
</div>
<div class="alert alert-danger" *ngIf="error" jhiTranslate="register.messages.error.fail">
<strong>Registration failed!</strong> Please try again later.
</div>
<div class="alert alert-danger" *ngIf="errorEmailExists" jhiTranslate="register.messages.error.emailexists">
<strong>Email is already in use!</strong> Please choose another one.
</div>
<div class="alert alert-danger" *ngIf="errorEmailExists" jhiTranslate="register.messages.error.emailexists">
<strong>Email is already in use!</strong> Please choose another one.
</div>
<div class="alert alert-danger" *ngIf="doNotMatch" jhiTranslate="global.messages.error.dontmatch">
The password and its confirmation do not match!
</div>
</div>
</div>
<div class="alert alert-danger" *ngIf="doNotMatch" jhiTranslate="global.messages.error.dontmatch">
The password and its confirmation do not match!
</div>
<div class="row justify-content-center">
<div class="col-md-8">
<form name="form" role="form" (ngSubmit)="register()" [formGroup]="registerForm" *ngIf="!success">
<div class="form-group">
<label class="form-control-label" for="login" jhiTranslate="global.form.username.label">Username</label>
<input
type="text"
class="form-control"
id="login"
name="login"
placeholder="{{ 'global.form.username.placeholder' | translate }}"
formControlName="login"
data-cy="username"
#login
/>
<div *ngIf="registerForm.get('login')!.invalid && (registerForm.get('login')!.dirty || registerForm.get('login')!.touched)">
<small
class="form-text text-danger"
*ngIf="registerForm.get('login')?.errors?.required"
jhiTranslate="register.messages.validate.login.required"
<form
name="form"
role="form"
class="form"
(ngSubmit)="register()"
[formGroup]="registerForm"
*ngIf="!success"
autocomplete="off"
>
Your username is required.
</small>
<div class="mb-3">
<div class="form-group">
<label for="name" class="form-label">Nombre</label>
<input
type="text"
class="form-control"
id="name"
name="name"
placeholder="{{ 'global.form.name.placeholder' | translate }}"
formControlName="name"
data-cy="name"
/>
<small
class="form-text text-danger"
*ngIf="registerForm.get('login')?.errors?.minlength"
jhiTranslate="register.messages.validate.login.minlength"
>
Your username is required to be at least 1 character.
</small>
<div *ngIf="registerForm.get('name')!.invalid && (registerForm.get('name')!.dirty || registerForm.get('name')!.touched)">
<small
class="form-text text-danger"
*ngIf="registerForm.get('name')?.errors?.required"
jhiTranslate="global.messages.validate.name.required"
>
Your name is required.
</small>
<small
class="form-text text-danger"
*ngIf="registerForm.get('login')?.errors?.maxlength"
jhiTranslate="register.messages.validate.login.maxlength"
>
Your username cannot be longer than 50 characters.
</small>
<small
class="form-text text-danger"
*ngIf="registerForm.get('name')?.errors?.invalid"
jhiTranslate="global.messages.validate.name.invalid"
>
Your name is invalid.
</small>
<small
class="form-text text-danger"
*ngIf="registerForm.get('login')?.errors?.pattern"
jhiTranslate="register.messages.validate.login.pattern"
>
Your username can only contain letters and digits.
</small>
<small
class="form-text text-danger"
*ngIf="registerForm.get('name')?.errors?.minlength"
jhiTranslate="global.messages.validate.name.minlength"
>
Your name is required to be at least 2 characters.
</small>
<small
class="form-text text-danger"
*ngIf="registerForm.get('name')?.errors?.maxlength"
jhiTranslate="global.messages.validate.name.maxlength"
>
Your name cannot be longer than 50 characters.
</small>
</div>
</div>
</div>
<div class="mb-3">
<div class="form-group">
<label for="emailaddress" class="form-label">Correo electrónico</label>
<input
type="email"
class="form-control"
id="email"
name="email"
placeholder="{{ 'global.form.email.placeholder' | translate }}"
formControlName="email"
data-cy="email"
/>
<div
*ngIf="registerForm.get('email')!.invalid && (registerForm.get('email')!.dirty || registerForm.get('email')!.touched)"
>
<small
class="form-text text-danger"
*ngIf="registerForm.get('email')?.errors?.required"
jhiTranslate="global.messages.validate.email.required"
>
Your email is required.
</small>
<small
class="form-text text-danger"
*ngIf="registerForm.get('email')?.errors?.invalid"
jhiTranslate="global.messages.validate.email.invalid"
>
Your email is invalid.
</small>
<small
class="form-text text-danger"
*ngIf="registerForm.get('email')?.errors?.minlength"
jhiTranslate="global.messages.validate.email.minlength"
>
Your email is required to be at least 5 characters.
</small>
<small
class="form-text text-danger"
*ngIf="registerForm.get('email')?.errors?.maxlength"
jhiTranslate="global.messages.validate.email.maxlength"
>
Your email cannot be longer than 100 characters.
</small>
</div>
</div>
</div>
<div class="mb-3">
<div class="form-group">
<label for="password" jhiTranslate="global.form.newpassword.label">Password</label>
<input
type="password"
class="form-control"
id="password"
name="password"
placeholder="{{ 'global.form.newpassword.placeholder' | translate }}"
formControlName="password"
data-cy="firstPassword"
/>
<div
*ngIf="
registerForm.get('password')!.invalid &&
(registerForm.get('password')!.dirty || registerForm.get('password')!.touched)
"
>
<small
class="form-text text-danger"
*ngIf="registerForm.get('password')?.errors?.required"
jhiTranslate="global.messages.validate.newpassword.required"
>
Your password is required.
</small>
<small
class="form-text text-danger"
*ngIf="registerForm.get('password')?.errors?.minlength"
jhiTranslate="global.messages.validate.newpassword.minlength"
>
Your password is required to be at least 4 characters.
</small>
<small
class="form-text text-danger"
*ngIf="registerForm.get('password')?.errors?.maxlength"
jhiTranslate="global.messages.validate.newpassword.maxlength"
>
Your password cannot be longer than 50 characters.
</small>
</div>
</div>
</div>
<div class="mb-3">
<div class="form-group">
<label for="password" jhiTranslate="global.form.newpassword.label">Password</label>
<input
type="password"
class="form-control"
id="confirmPassword"
name="confirmPassword"
placeholder="{{ 'global.form.confirmpassword.placeholder' | translate }}"
formControlName="confirmPassword"
data-cy="secondPassword"
/>
<div
*ngIf="
registerForm.get('confirmPassword')!.invalid &&
(registerForm.get('confirmPassword')!.dirty || registerForm.get('confirmPassword')!.touched)
"
>
<small
class="form-text text-danger"
*ngIf="registerForm.get('confirmPassword')?.errors?.required"
jhiTranslate="global.messages.validate.confirmpassword.required"
>
Your confirmation password is required.
</small>
<small
class="form-text text-danger"
*ngIf="registerForm.get('confirmPassword')?.errors?.minlength"
jhiTranslate="global.messages.validate.confirmpassword.minlength"
>
Your confirmation password is required to be at least 4 characters.
</small>
<small
class="form-text text-danger"
*ngIf="registerForm.get('confirmPassword')?.errors?.maxlength"
jhiTranslate="global.messages.validate.confirmpassword.maxlength"
>
Your confirmation password cannot be longer than 50 characters.
</small>
</div>
</div>
</div>
<div class="mb-3">
<div class="form-group">
<label for="password">Ícono de perfil</label>
<jhi-swiper [data]="profileIcons" (onSelectEvent)="selectIcon($event)"></jhi-swiper>
</div>
</div>
<div class="mb-3 mb-0 text-center">
<button
type="submit"
[disabled]="registerForm.invalid"
class="btn btn-primary w-100"
jhiTranslate="register.form.button"
data-cy="submit"
>
Register
</button>
</div>
</form>
</div>
</div>
<div class="form-group">
<label class="form-control-label" for="email" jhiTranslate="global.form.email.label">Email</label>
<input
type="email"
class="form-control"
id="email"
name="email"
placeholder="{{ 'global.form.email.placeholder' | translate }}"
formControlName="email"
data-cy="email"
/>
<div *ngIf="registerForm.get('email')!.invalid && (registerForm.get('email')!.dirty || registerForm.get('email')!.touched)">
<small
class="form-text text-danger"
*ngIf="registerForm.get('email')?.errors?.required"
jhiTranslate="global.messages.validate.email.required"
>
Your email is required.
</small>
<small
class="form-text text-danger"
*ngIf="registerForm.get('email')?.errors?.invalid"
jhiTranslate="global.messages.validate.email.invalid"
>
Your email is invalid.
</small>
<small
class="form-text text-danger"
*ngIf="registerForm.get('email')?.errors?.minlength"
jhiTranslate="global.messages.validate.email.minlength"
>
Your email is required to be at least 5 characters.
</small>
<small
class="form-text text-danger"
*ngIf="registerForm.get('email')?.errors?.maxlength"
jhiTranslate="global.messages.validate.email.maxlength"
>
Your email cannot be longer than 100 characters.
</small>
<div class="row mt-3">
<div class="col-12 text-center">
<p class="text-muted">
¿Ya tienes una cuenta?
<a routerLink="/login" class="text-muted ms-1"><b>Iniciar sesión</b></a>
</p>
</div>
</div>
<div class="form-group">
<label class="form-control-label" for="password" jhiTranslate="global.form.newpassword.label">New password</label>
<input
type="password"
class="form-control"
id="password"
name="password"
placeholder="{{ 'global.form.newpassword.placeholder' | translate }}"
formControlName="password"
data-cy="firstPassword"
/>
<div
*ngIf="registerForm.get('password')!.invalid && (registerForm.get('password')!.dirty || registerForm.get('password')!.touched)"
>
<small
class="form-text text-danger"
*ngIf="registerForm.get('password')?.errors?.required"
jhiTranslate="global.messages.validate.newpassword.required"
>
Your password is required.
</small>
<small
class="form-text text-danger"
*ngIf="registerForm.get('password')?.errors?.minlength"
jhiTranslate="global.messages.validate.newpassword.minlength"
>
Your password is required to be at least 4 characters.
</small>
<small
class="form-text text-danger"
*ngIf="registerForm.get('password')?.errors?.maxlength"
jhiTranslate="global.messages.validate.newpassword.maxlength"
>
Your password cannot be longer than 50 characters.
</small>
</div>
<jhi-password-strength-bar [passwordToCheck]="registerForm.get('password')!.value"></jhi-password-strength-bar>
</div>
<div class="form-group">
<label class="form-control-label" for="confirmPassword" jhiTranslate="global.form.confirmpassword.label"
>New password confirmation</label
>
<input
type="password"
class="form-control"
id="confirmPassword"
name="confirmPassword"
placeholder="{{ 'global.form.confirmpassword.placeholder' | translate }}"
formControlName="confirmPassword"
data-cy="secondPassword"
/>
<div
*ngIf="
registerForm.get('confirmPassword')!.invalid &&
(registerForm.get('confirmPassword')!.dirty || registerForm.get('confirmPassword')!.touched)
"
>
<small
class="form-text text-danger"
*ngIf="registerForm.get('confirmPassword')?.errors?.required"
jhiTranslate="global.messages.validate.confirmpassword.required"
>
Your confirmation password is required.
</small>
<small
class="form-text text-danger"
*ngIf="registerForm.get('confirmPassword')?.errors?.minlength"
jhiTranslate="global.messages.validate.confirmpassword.minlength"
>
Your confirmation password is required to be at least 4 characters.
</small>
<small
class="form-text text-danger"
*ngIf="registerForm.get('confirmPassword')?.errors?.maxlength"
jhiTranslate="global.messages.validate.confirmpassword.maxlength"
>
Your confirmation password cannot be longer than 50 characters.
</small>
</div>
</div>
<button
type="submit"
[disabled]="registerForm.invalid"
class="btn btn-primary"
jhiTranslate="register.form.button"
data-cy="submit"
>
Register
</button>
</form>
<div class="mt-3 alert alert-warning">
<span jhiTranslate="global.messages.info.authenticated.prefix">If you want to </span>
<a class="alert-link" routerLink="/login" jhiTranslate="global.messages.info.authenticated.link">sign in</a
><span jhiTranslate="global.messages.info.authenticated.suffix"
>, you can try the default accounts:<br />- Administrator (login="admin" and password="admin") <br />- User (login="user" and
password="user").</span
>
</div>
</div>
</div>

0
src/main/webapp/app/account/register/register.component.scss Normal file
View File

2
src/main/webapp/app/account/register/register.component.spec.ts
View File

@ -62,6 +62,8 @@ describe('Component Tests', () => {
password: 'password',
login: '',
langKey: 'es',
name: '',
profileIcon: 1,
});
expect(comp.success).toBe(true);
expect(comp.errorUserExists).toBe(false);

78
src/main/webapp/app/account/register/register.component.ts
View File

@ -9,10 +9,43 @@ import { RegisterService } from './register.service';
@Component({
selector: 'jhi-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss'],
})
export class RegisterComponent implements AfterViewInit {
@ViewChild('login', { static: false })
login?: ElementRef;
// @ViewChild('name', { static: false })
// name?: ElementRef;
profileIcon: number = 1;
profileIcons: any[] = [
{ name: 'C1', class: 'active' },
{ name: 'C2' },
{ name: 'C3' },
{ name: 'C4' },
{ name: 'C5' },
{ name: 'C6' },
{ name: 'C7' },
{ name: 'C8' },
{ name: 'C9' },
{ name: 'C10' },
{ name: 'C11' },
{ name: 'C12' },
{ name: 'C13' },
{ name: 'C14' },
{ name: 'C15' },
{ name: 'C16' },
{ name: 'C17' },
{ name: 'C18' },
{ name: 'C19' },
{ name: 'C20' },
{ name: 'C21' },
{ name: 'C22' },
{ name: 'C23' },
{ name: 'C24' },
{ name: 'C25' },
{ name: 'C26' },
{ name: 'C27' },
{ name: 'C28' },
];
doNotMatch = false;
error = false;
@ -20,16 +53,10 @@ export class RegisterComponent implements AfterViewInit {
errorUserExists = false;
success = false;
// Login will be used to store the email as well.
// login: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(254), Validators.email]]
registerForm = this.fb.group({
login: [
'',
[
Validators.required,
Validators.minLength(1),
Validators.maxLength(50),
Validators.pattern('^[a-zA-Z0-9!$&*+=?^_`{|}~.-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$|^[_.@A-Za-z0-9-]+$'),
],
],
name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(254)]],
email: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(254), Validators.email]],
password: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(50)]],
confirmPassword: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(50)]],
@ -38,9 +65,9 @@ export class RegisterComponent implements AfterViewInit {
constructor(private translateService: TranslateService, private registerService: RegisterService, private fb: FormBuilder) {}
ngAfterViewInit(): void {
if (this.login) {
this.login.nativeElement.focus();
}
// if (this.name) {
// this.name.nativeElement.focus();
// }
}
register(): void {
@ -53,12 +80,17 @@ export class RegisterComponent implements AfterViewInit {
if (password !== this.registerForm.get(['confirmPassword'])!.value) {
this.doNotMatch = true;
} else {
const login = this.registerForm.get(['login'])!.value;
const login = this.registerForm.get(['email'])!.value;
const email = this.registerForm.get(['email'])!.value;
this.registerService.save({ login, email, password, langKey: this.translateService.currentLang }).subscribe(
() => (this.success = true),
response => this.processError(response)
);
const name = this.registerForm.get(['name'])!.value;
console.log(name);
this.registerService
.save({ login, email, password, langKey: this.translateService.currentLang, name, profileIcon: this.profileIcon })
.subscribe(
() => (this.success = true),
response => this.processError(response)
);
}
}
@ -71,4 +103,12 @@ export class RegisterComponent implements AfterViewInit {
this.error = true;
}
}
selectIcon(event: MouseEvent): void {
if (event.target instanceof Element) {
document.querySelectorAll('.active').forEach(e => e.classList.remove('active'));
event.target.classList.add('active');
this.profileIcon = +event.target.getAttribute('id')! + 1;
}
}
}

9
src/main/webapp/app/account/register/register.model.ts
View File

@ -1,3 +1,10 @@
export class Registration {
constructor(public login: string, public email: string, public password: string, public langKey: string) {}
constructor(
public login: string,
public email: string,
public password: string,
public langKey: string,
public name: string,
public profileIcon: number
) {}
}

11
src/main/webapp/app/components/components.module.ts Normal file
View File

@ -0,0 +1,11 @@
import { SwiperModule } from 'swiper/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SwiperlibComponent } from './swiperlib/swiperlib.component';
@NgModule({
declarations: [SwiperlibComponent],
imports: [CommonModule, SwiperModule],
exports: [SwiperModule, SwiperlibComponent],
})
export class ComponentsModule {}

20
src/main/webapp/app/components/swiperlib/swiperlib.component.html Normal file
View File

@ -0,0 +1,20 @@
<swiper
[slidesPerView]="3"
[spaceBetween]="30"
[pagination]="{
dynamicBullets: true
}"
[loop]="true"
class="mySwiper"
>
<!-- [scrollbar]="{ draggable: true, hide: true }" -->
<ng-template swiperSlide *ngFor="let items of data; index as i">
<img
class="{{ items.class }}"
src="./../../../content/profile_icons/{{ items.name }}.png"
alt=""
(click)="onSelect($event)"
[attr.id]="i"
/>
</ng-template>
</swiper>

30
src/main/webapp/app/components/swiperlib/swiperlib.component.scss Normal file
View File

@ -0,0 +1,30 @@
.mySwiper {
padding: 1rem;
}
.mySwiper img {
width: 100px;
height: auto;
border-radius: 50%;
padding: 0rem;
margin: 0.4rem;
border: 3px solid #fff;
transition: transform 0.1s ease-in-out, border 0.1s ease-in-out;
}
.mySwiper img::selection {
background-color: transparent;
}
.mySwiper img:hover {
// border: 4px solid #cdd8e7 !important;
box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px;
cursor: pointer;
// transform: scale(1.1);
}
.active {
border: 4px solid #1072e8 !important;
box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 15px;
transform: scale(1.1);
}

26
src/main/webapp/app/components/swiperlib/swiperlib.component.ts Normal file
View File

@ -0,0 +1,26 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { SwiperComponent } from 'swiper/angular';
// import Swiper core and required modules
import SwiperCore, { Pagination, Scrollbar } from 'swiper/core';
// install Swiper modules
SwiperCore.use([Pagination, Scrollbar]);
@Component({
selector: 'jhi-swiper',
templateUrl: './swiperlib.component.html',
styleUrls: ['./swiperlib.component.scss'],
})
export class SwiperlibComponent implements OnInit {
@Input('data') data: any[] = [];
@Output('onSelectEvent') onSelectEvent = new EventEmitter<MouseEvent>();
constructor() {}
ngOnInit(): void {}
onSelect(event: MouseEvent): void {
this.onSelectEvent.emit(event);
}
}