Disable Authentication & Login Page Rework (#619)

* Implemented the ability to disable authentication on a server instance. Admins will require authentication, but non-admin accounts can be setup without any password requirements.

* WIP for new login page.

* Reworked code to handle disabled auth better. First time user flow is moved into the user login component.

* Removed debug code

* Removed home component, shakeout testing is complete.

* remove a file accidently committed

* Fixed a code smell from last PR

* Code smells
This commit is contained in:
Joseph Milazzo 2021-10-02 09:23:58 -07:00 committed by GitHub
parent 83d76982f4
commit a5b6bf1b52
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 376 additions and 174 deletions

View file

@ -1,28 +1,44 @@
<div class="mx-auto login">
<div class="card p-3" style="width: 18rem;">
<div class="logo-container">
<img class="logo" src="assets/images/kavita-book-cropped.png" alt="Kavita logo"/>
<h3 class="card-title text-center">Kavita</h3>
<div class="display: inline-block" *ngIf="firstTimeFlow">
<h3 class="card-title text-center">Create an Admin Account</h3>
<div class="card p-3">
<p>Please create an admin account for yourself to start your reading journey.</p>
<app-register-member (created)="onAdminCreated($event)" [firstTimeFlow]="firstTimeFlow"></app-register-member>
</div>
<div class="card-text">
<form [formGroup]="loginForm" (ngSubmit)="login()">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" formControlName="username" id="username" type="text" autofocus>
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" formControlName="password" id="password" type="password">
</div>
<div class="float-right">
<button class="btn btn-primary alt" type="submit">Login</button>
</div>
</form>
</div>
</div>
<form [formGroup]="loginForm" (ngSubmit)="login()" novalidate class="needs-validation" *ngIf="!firstTimeFlow">
<div class="row row-cols-4 row-cols-md-4 row-cols-sm-2 row-cols-xs-2">
<ng-container *ngFor="let member of memberNames">
<div class="col align-self-center card p-3 m-3" style="width: 12rem;">
<span tabindex="0" (click)="select(member)" a11y-click="13,32">
<div class="logo-container">
<h3 class="card-title text-center">{{member | titlecase}}</h3>
</div>
</span>
<div class="card-text" #collapse="ngbCollapse" [(ngbCollapse)]="isCollapsed[member]" (keyup.enter)="$event.stopPropagation()">
<div class="form-group" style="display: none;">
<label for="username--{{member}}">Username</label>
<input class="form-control" formControlName="username" id="username--{{member}}" type="text" [readonly]="true">
</div>
<div class="form-group">
<label for="password--{{member}}">Password</label>
<input class="form-control" formControlName="password" id="password--{{member}}" type="password" autofocus>
<div *ngIf="authDisabled" class="invalid-feedback">
Authentication is disabled. Only type password if this is an admin account.
</div>
</div>
<div class="float-right">
<button class="btn btn-primary alt" type="submit--{{member}}">Login</button>
</div>
</div>
</div>
</ng-container>
</div>
</form>
</div>