-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fixed white bg nav focus being white, updated layout of auth, resetpw…
… and setpw templates. Also fixed eslint issues
- Loading branch information
1 parent
d6be947
commit 8875620
Showing
19 changed files
with
147 additions
and
415 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
132 changes: 58 additions & 74 deletions
132
src/app/features/public/auth/login/login.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,87 +1,71 @@ | ||
| <app-layout-public-header [light_theme]="true"></app-layout-public-header> | ||
| <section class="login-page"> | ||
| <div class="login-page-section"> | ||
| <h2 class="login-page-title">Log in to Ingenium</h2> | ||
| </div> | ||
| <header><app-layout-public-header [light_theme]="true" /></header> | ||
|
|
||
| <!-- | ||
| <div class="login-page-section"> | ||
| <div id="ua-button"> | ||
| <div id="logo"> | ||
| <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | ||
| viewBox="0 0 29 29" style="enable-background:new 0 0 29 29;" xml:space="preserve"> | ||
| <style type="text/css"> | ||
| .st0{fill:#EA2C38;} | ||
| .st1{fill:#FFFFFF;} | ||
| </style> | ||
| <g><path class="st0" d="M27.55,29H1.45C0.65,29,0,28.35,0,27.55V1.45C0,0.65,0.65,0,1.45,0h26.1C28.35,0,29,0.65,29,1.45v26.1C29,28.35,28.35,29,27.55,29z"/><path class="st1" d="M18.61,15.36c0.12,3.51-1.32,6.04-4.5,6.04c-2.47,0-4.98-1.85-4.98-5.53V6.01H5.05v10.07c0,3.81,2.55,7.72,8.44,7.72c5.71,0,8.01-4.1,8.03-7.5c4.17,0.64,6.08-2.47,5.54-4.59c-0.73,0.84-1.89,1.59-5.53,0.55V6.01h-2.92v5.27c-5.71-1.88-7.07,3.33-7.07,3.33S14.21,13.14,18.61,15.36"/></g> | ||
| </svg> | ||
| </div> | ||
| <a (click)="loginUAntwerp()">Login met je UAntwerp ID</a> | ||
| </div> | ||
| </div> | ||
| --> | ||
| <div class="login-page-section login-section-border"> | ||
| <ng-container *ngIf="! this.embeddedBrowser"> | ||
| <asl-google-signin-button | ||
| type='standard' size='medium' | ||
| [width]="266" theme="outline" | ||
| text='continue_with' shape="rectangular"> | ||
| </asl-google-signin-button> | ||
| </ng-container> | ||
| <ng-container *ngIf="this.embeddedBrowser"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/><path d="M1 1h22v22H1z" fill="none"/></svg> | ||
| Doorgaan met Google | ||
| </ng-container> | ||
| </div> | ||
|
|
||
| <div *ngIf="embeddedBrowser" class="login-page-section floating-text"> | ||
| <span class="text-red-600 font-bold embedded-browser"> | ||
| Open de website in je browser!<br> | ||
| Google login werkt soms niet in Facebook/Instagram! | ||
| </span> | ||
| </div> | ||
|
|
||
| <div class="login-page-section floating-text"> | ||
| <span>or</span> | ||
| </div> | ||
| <div class="flex justify-center items-center flex-1"> | ||
| <main class="px-1 sm:px-0 sm:mx-auto sm:w-full sm:max-w-sm md:max-w-md"> | ||
| <h1 class="white-section-title white-section-title-blue white-section-title-large mb-7 text-center">Aanmelden op IngeniumUA</h1> | ||
|
|
||
| <form [formGroup]="form" (ngSubmit)="onSubmit()"> | ||
| <div class="login-page-section"> | ||
| <label class="hubformfield-white"> | ||
| <input type="text" formControlName="email" placeholder="Email" [ngClass]="{ 'is-invalid': submitted && f['email'].errors }"/> | ||
| </label> | ||
| <div class="flex justify-center"> | ||
| <ng-container *ngIf="!this.embeddedBrowser"> | ||
| <asl-google-signin-button | ||
| type='standard' size='medium' | ||
| [width]="266" theme="outline" | ||
| text='continue_with' shape="rectangular"> | ||
| </asl-google-signin-button> | ||
| </ng-container> | ||
| <ng-container *ngIf="this.embeddedBrowser" class="w-full"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/><path d="M1 1h22v22H1z" fill="none"/></svg> | ||
| Doorgaan met Google | ||
| </ng-container> | ||
| </div> | ||
|
|
||
| <div class="login-page-section"> | ||
| <label class="hubformfield-white"> | ||
| <input type="password" formControlName="password" placeholder="Password" [ngClass]="{ 'is-invalid': submitted && f['password'].errors }"/> | ||
| </label> | ||
| <div *ngIf="embeddedBrowser" class="login-page-section floating-text"> | ||
| <span class="text-red-600 font-bold embedded-browser"> | ||
| Open de website in je browser!<br> | ||
| Google login werkt soms niet in Facebook/Instagram! | ||
| </span> | ||
| </div> | ||
|
|
||
| <div class="login-page-section"> | ||
| <button class="button button-primary w-full button-inline" | ||
| [disabled]="this.loading" | ||
| [ngStyle]="this.loading && {'background-color': 'var(--ingenium-blue)'} || null"> | ||
| <span class="text-white">{{ this.loading ? "Logging in..." : "Log In" }}</span> | ||
| </button> | ||
| </div> | ||
| <div *ngIf="this.form_error !== null"> | ||
| <span class="error-message">{{ this.form_error }}</span> | ||
| <div class="relative flex py-5 items-center"> | ||
| <div class="flex-grow border-t border-gray-200"></div> | ||
| <span class="flex-shrink mx-4 text-gray-400">of</span> | ||
| <div class="flex-grow border-t border-gray-200"></div> | ||
| </div> | ||
|
|
||
| </form> | ||
|
|
||
| <div class="login-page-section floating-text"> | ||
| <span> | ||
| No account? <a [routerLink]="['/auth/register']">Create one</a> <br> | ||
| <a [routerLink]="['/auth/reset']">Reset Password</a> | ||
| </span> | ||
| </div> | ||
| <form [formGroup]="form" (ngSubmit)="onSubmit()" class="space-y-6"> | ||
| <div class="alert alert-info alert-border" *ngIf="this.form_error !== null"> | ||
| <span class="text-sm text-yellow-700">{{ this.form_error }}</span> | ||
| </div> | ||
|
|
||
| <div [ngClass]="{ 'form-field': true, 'is-invalid': f['email'].errors }"> | ||
| <label for="email">E-mailadres</label> | ||
| <input id="email" type="email" formControlName="email" email="true" [attr.aria-invalid]="f['email'].errors !== null" [attr.aria-errormessage]="f['email'].errors !== null ? 'email-Errors' : ''" /> | ||
|
|
||
| <div class="login-page-section floating-text" *ngIf="loginHint !== null" style="margin-top: 2rem;"> | ||
| <!-- Error messages --> | ||
| <ul *ngIf="f['email'].errors" class="field-error-message-list" id="email-errors"> | ||
| <li *ngIf="f['email'].errors?.['email'] || f['email'].errors?.['required']">Vul een geldig e-mailadres in</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div [ngClass]="{ 'form-field': true, 'is-invalid': f['password'].errors }"> | ||
| <label for="password">Wachtwoord</label> | ||
| <input id="password" type="password" formControlName="password" [attr.aria-invalid]="f['password'].errors !== null" /> | ||
| </div> | ||
|
|
||
| <div class="form-field"> | ||
| <button type="submit" class="button button-primary w-full button-inline" [disabled]="this.loading">Aanmelden</button> | ||
| </div> | ||
| </form> | ||
|
|
||
| <div class="mt-6 space-y-1.5"> | ||
| <a [routerLink]="['/auth/register']" class="block">Account aanmaken</a> | ||
| <a [routerLink]="['/auth/reset']" class="block">Wachtwoord vergeten?</a> | ||
| </div> | ||
|
|
||
| <div class="login-page-section floating-text" *ngIf="loginHint !== null" style="margin-top: 2rem;"> | ||
| <span class="success-message"> | ||
| {{ loginHint }} | ||
| </span> | ||
| </div> | ||
| </section> | ||
| </div> | ||
| </main> | ||
| </div> |
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.