diff --git a/src/app/components/creator/content-creator/content-creator.component.html b/src/app/components/creator/content-creator/content-creator.component.html
index 07825b2ae3c6f80a9b60af1143084646e94bec70..0510eea61809a09e624a2edd9e4bc5c9800397fb 100644
--- a/src/app/components/creator/content-creator/content-creator.component.html
+++ b/src/app/components/creator/content-creator/content-creator.component.html
@@ -9,7 +9,7 @@
</mat-form-field>
<markdown [data]="content.body"></markdown>
<mat-form-field>
- <input matInput #group matInput [formControl]="myControl" [matAutocomplete]="auto"
+ <input matInput #group [formControl]="myControl" [matAutocomplete]="auto"
placeholder="{{'content.collection' | translate}}" value="{{lastCollection}}" />
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let collection of contentGroups" [value]="collection.name">
diff --git a/src/app/components/home/_dialogs/register/register.component.html b/src/app/components/home/_dialogs/register/register.component.html
index 6d65d3d4230421a07c16ac70e85a5a6c52104867..4bab2f8cc0a1092ac4f05bbffa1758185bd13402 100644
--- a/src/app/components/home/_dialogs/register/register.component.html
+++ b/src/app/components/home/_dialogs/register/register.component.html
@@ -11,6 +11,14 @@
</mat-error>
</mat-form-field>
+ <mat-form-field class="input-block">
+ <input matInput #userName2 placeholder="{{ 'register.email-verify' | translate }}" [formControl]="username2FormControl"
+ [errorStateMatcher]="matcher">
+ <mat-error *ngIf="username2FormControl.hasError('emailIsEqual') && !username2FormControl.hasError('required')">
+ {{ 'register.email-unmatch' | translate }}
+ </mat-error>
+ </mat-form-field>
+
<mat-form-field class="input-block">
<input matInput type="password" #userPassword1 placeholder="{{ 'register.password' | translate }}"
[formControl]="password1FormControl" [errorStateMatcher]="matcher">
diff --git a/src/app/components/home/_dialogs/register/register.component.ts b/src/app/components/home/_dialogs/register/register.component.ts
index fb58693558c793ab18ede34cc6bc71806cd80361..72bd99337c51aa68f8fadc5b6ddd9ae3e2f57ec7 100644
--- a/src/app/components/home/_dialogs/register/register.component.ts
+++ b/src/app/components/home/_dialogs/register/register.component.ts
@@ -29,6 +29,23 @@ function validatePassword(password1: FormControl) {
};
}
+function validateEmail(email1: FormControl) {
+ return (formControl: FormControl) => {
+ const email1Value = email1.value;
+ const email2Value = formControl.value;
+
+ if (email1Value !== email2Value) {
+ return {
+ emailIsEqual: {
+ isEqual: false
+ }
+ };
+ } else {
+ return null;
+ }
+ };
+}
+
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
@@ -37,6 +54,7 @@ function validatePassword(password1: FormControl) {
export class RegisterComponent implements OnInit {
usernameFormControl = new FormControl('', [Validators.required, Validators.email]);
+ username2FormControl = new FormControl('', [Validators.required, validateEmail(this.usernameFormControl)]);
password1FormControl = new FormControl('', [Validators.required]);
password2FormControl = new FormControl('', [Validators.required, validatePassword(this.password1FormControl)]);
@@ -58,13 +76,14 @@ export class RegisterComponent implements OnInit {
register(username: string, password: string): void {
if (!this.usernameFormControl.hasError('required') && !this.usernameFormControl.hasError('email') &&
+ !this.username2FormControl.hasError('required') && !this.username2FormControl.hasError('emailIsEqual') &&
!this.password1FormControl.hasError('required') &&
!this.password2FormControl.hasError('required') && !this.password2FormControl.hasError('passwordIsEqual')) {
this.authenticationService.register(username, password).subscribe(() => {
this.translationService.get('register.register-successful').subscribe(message => {
this.notificationService.show(message);
});
- this.dialogRef.close({username: username, password: password});
+ this.dialogRef.close({ username: username, password: password });
});
} else {
this.translationService.get('register.register-unsuccessful').subscribe(message => {
diff --git a/src/app/components/home/login-page/login-page.component.html b/src/app/components/home/login-page/login-page.component.html
index c090c7eb3f850e93e6309b0d48ff51b3eb6bf715..0a2a466d31d74277613b67f1ed1101003b49510e 100644
--- a/src/app/components/home/login-page/login-page.component.html
+++ b/src/app/components/home/login-page/login-page.component.html
@@ -1,36 +1,46 @@
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
<div fxLayout="row" fxLayoutAlign="center">
- <mat-tab-group class="login-tab-group">
- <mat-tab label="{{ 'login-page.creator' | translate }}">
- <div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px">
- <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
- <app-login fxFill [role]="UserRole.CREATOR" [username]="username" [password]="password"></app-login>
- </div>
- <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
- <button mat-button color="primary" (click)="openRegisterDialog()">
- {{ 'login-page.register' | translate }}
- </button>
- <button mat-button color="primary" (click)="openPasswordDialog()">
- {{ 'login-page.password-reset' | translate }}
- </button>
- </div>
- </div>
- </mat-tab>
- <mat-tab label="{{ 'login-page.participant' | translate }}">
- <div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px">
- <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
- <app-login fxFill [role]="UserRole.PARTICIPANT"></app-login>
- </div>
- <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
- <button mat-button color="primary" (click)="openRegisterDialog()">
- {{ 'login-page.register' | translate }}
- </button>
- <button mat-button color="primary" (click)="openPasswordDialog()">
- {{ 'login-page.password-reset' | translate }}
- </button>
+ <mat-card>
+ <mat-card-header fxlayoutalign="center">
+ <mat-card-title fxlayoutalign="center">
+ <h1 class="main-heading">
+ <span class="main-heading-secondary">{{ 'login-page.welcome' | translate }}</span>
+ <span class="main-heading-primary">ARSnova</span>
+ </h1>
+ </mat-card-title>
+ </mat-card-header>
+ <mat-card-content>
+ <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
+ <div fxLayout="row" fxLayoutAlign="center">
+ <mat-card class="inner">
+ <mat-tab-group class="login-tab-group">
+ <mat-tab label="{{ 'login-page.creator' | translate }}">
+ <div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px">
+ <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
+ <app-login fxFill [role]="UserRole.CREATOR" [username]="username" [password]="password"></app-login>
+ </div>
+ </div>
+ </mat-tab>
+ <mat-tab label="{{ 'login-page.participant' | translate }}">
+ <div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px">
+ <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
+ <app-login fxFill [role]="UserRole.PARTICIPANT"></app-login>
+ </div>
+ </div>
+ </mat-tab>
+ </mat-tab-group>
+ <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="18px">
+ <button mat-raised-button class="regButton" color="primary" (click)="openRegisterDialog()">
+ {{ 'login-page.register' | translate }}
+ </button>
+ <button mat-raised-button class="pwButton" color="primary" (click)="openPasswordDialog()">
+ {{ 'login-page.password-reset' | translate }}
+ </button>
+ </div>
+ </mat-card>
</div>
</div>
- </mat-tab>
- </mat-tab-group>
+ </mat-card-content>
+ </mat-card>
</div>
</div>
diff --git a/src/app/components/home/login-page/login-page.component.scss b/src/app/components/home/login-page/login-page.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..338ea901ed7ab3ceb275684376bd7d3db568e916 100644
--- a/src/app/components/home/login-page/login-page.component.scss
+++ b/src/app/components/home/login-page/login-page.component.scss
@@ -0,0 +1,73 @@
+@import '../../../../styles';
+
+.mat-raised-button {
+ margin-top: 2%;
+}
+
+.inner {
+ min-width: 323px;
+}
+
+.main-heading {
+ text-align: center;
+}
+
+.main-heading-primary {
+ display: block;
+ font-size: 150%;
+ font-weight: bold;
+ text-align: center;
+ letter-spacing: 10px;
+ color: mat-color($arsnova-primary,500);
+ animation: moveInLeft 2s ease-out;
+}
+
+.main-heading-secondary {
+ font-family: sans-serif;
+ display: block;
+ font-size: 50%;
+ text-align: center;
+ letter-spacing: 10px;
+ color: mat-color($arsnova-accent,500);
+ animation: moveInRight 1s ease-out;
+}
+
+@keyframes moveInLeft {
+ 0% {
+ opacity: 0;
+ transform: translateX(-100px);
+ }
+
+ 80% {
+ transform: translateX(10px);
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translate(0);
+ }
+}
+
+@keyframes moveInRight {
+ 0% {
+ opacity: 0;
+ transform: translateX(100px);
+ }
+
+ 80% {
+ transform: translateX(-10px);
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translate(0);
+ }
+}
+
+.regButton {
+ min-width: 107px;
+}
+
+.pwButton {
+ min-width: 178px;
+}
diff --git a/src/assets/i18n/home/de.json b/src/assets/i18n/home/de.json
index 35d9ff68230f2cf2aad3dc091cc4ccf231139b01..0c415f7a774d22e54f884a2637378a1e7090a69b 100644
--- a/src/assets/i18n/home/de.json
+++ b/src/assets/i18n/home/de.json
@@ -11,7 +11,8 @@
"creator": "Dozent/in",
"participant": "Student/in",
"password-reset": "Passwort zurücksetzen",
- "register": "Registrieren"
+ "register": "Registrieren",
+ "welcome": "Wilkommen bei"
},
"login": {
"email": "E-Mail",
@@ -39,8 +40,10 @@
},
"register": {
"email": "E-Mail",
+ "email-verify": "E-Mail bestätigen",
"email-invalid": "E-Mail Adresse ist nicht gültig",
"email-required": "E-Mail Adresse ist erforderlich",
+ "email-unmatch": "E-Mail Adressen stimmen nicht überein",
"password": "Passwort",
"password-required": "Passwort ist erforderlich",
"password-unmatch": "Passwörter stimmen nicht überein",
diff --git a/src/assets/i18n/home/en.json b/src/assets/i18n/home/en.json
index 349b5ed0f702778940bd82602db4693c7f43aac5..35a9826397aa820b0a249e64e969f19eb93c0f62 100644
--- a/src/assets/i18n/home/en.json
+++ b/src/assets/i18n/home/en.json
@@ -11,7 +11,8 @@
"creator": "Creator",
"participant": "Participant",
"password-reset": "Reset password",
- "register": "Register"
+ "register": "Register",
+ "welcome": "welcome to"
},
"login": {
"email": "E-Mail",
@@ -39,8 +40,10 @@
},
"register": {
"email": "E-Mail",
+ "email-verify": "Verify E-Mail",
"email-invalid": "E-Mail is not valid",
"email-required": "E-Mail is required",
+ "email-unmatch": "E-Mails do not match",
"password": "Password",
"password-required": "Password is required",
"password-unmatch": "Passwords do not match",