-
Notifications
You must be signed in to change notification settings - Fork 383
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
42 changed files
with
350 additions
and
293 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,46 +1,44 @@ | ||
| <div class="login-container d-flex align-items-center justify-content-center" | ||
| [ngStyle]="{'background': backgroundStyle}"> | ||
| <div class="card card-body mx-2 login-card"> | ||
| <img class="homebridge-logo mx-auto my-3" src="/assets/homebridge-color-round.svg" alt="Homebridge Logo"> | ||
| <form novalidate (ngSubmit)="onSubmit()" [formGroup]="form"> | ||
| <p class="h4 text-center mb-4">Homebridge</p> | ||
|
|
||
| <h3 class="mb-4 text-center">{{ 'setup_wizard.welcome_to_homebridge' | translate }}</h3> | ||
| <div *ngIf="!twoFactorCodeRequired"> | ||
| <div class="md-form"> | ||
| <i class="fas fa-fw fa-user prefix grey-text"></i> | ||
| <div class="input-group mb-4"> | ||
| <span class="input-group-text custom-input"><i class="fas fa-fw fa-user primary-text fa-lg"></i></span> | ||
| <input #username formControlName="username" type="text" id="form-username" autofocus autocomplete="username" | ||
| autocapitalize="none" tabindex="1" class="form-control px-0" [ngClass]="{ | ||
| autocapitalize="none" tabindex="1" class="form-control custom-input" [ngClass]="{ | ||
| 'is-invalid': form.controls.username.dirty && form.controls.username.errors | ||
| }"> | ||
| <label for="form-username">{{ 'login.label_username' | translate }}</label> | ||
| }" placeholder="{{ 'login.label_username' | translate }}" required> | ||
| </div> | ||
| <div class="md-form"> | ||
| <i class="fas fa-fw fa-lock prefix grey-text"></i> | ||
| <div class="input-group mb-4"> | ||
| <span class="input-group-text custom-input"><i class="fas fa-fw fa-lock primary-text fa-lg"></i></span> | ||
| <input #password formControlName="password" type="password" id="form-pass" autocomplete="current-password" | ||
| tabindex="2" class="form-control px-0" [ngClass]="{ | ||
| tabindex="2" class="form-control custom-input" [ngClass]="{ | ||
| 'is-invalid': form.controls.password.dirty && form.controls.password.errors | ||
| }"> | ||
| <label for="form-pass">{{ 'login.label_password' | translate }}</label> | ||
| }" placeholder="{{ 'login.label_password' | translate }}" required> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div *ngIf="twoFactorCodeRequired"> | ||
| <p class="text-center">{{ 'users.setup_2fa_enter_code' | translate }}</p> | ||
| <div class="md-form"> | ||
| <i class="fas fa-fw fa-key prefix grey-text"></i> | ||
| <input #otp formControlName="otp" type="text" id="form-ota" autocomplete="one-time-code" autocapitalize="none" | ||
| inputmode="numeric" pattern="[0-9]*" tabindex="1" class="form-control px-0" [ngClass]="{ | ||
| 'is-invalid': form.controls.otp.dirty && form.controls.otp.errors | ||
| }"> | ||
| <label for="form-ota">{{ 'login.label_2fa_code' | translate }}</label> | ||
| <div class="input-group mb-4"> | ||
| <span class="input-group-text custom-input"><i class="fas fa-fw fa-key primary-text fa-lg"></i></span> | ||
| <input #otp formControlName="otp" type="text" id="form-ota" autofocus autocomplete="one-time-code" | ||
| autocapitalize="none" inputmode="numeric" pattern="[0-9]*" tabindex="1" class="form-control custom-input" | ||
| placeholder="{{ 'login.label_2fa_code' | translate }}"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="alert alert-error p-2 mb-4" role="alert" *ngIf="invalidCredentials"> | ||
| <small>{{ 'login.message_invalid_username_or_password' | translate }}</small> | ||
| </div> | ||
| <div class="alert alert-error p-2 mb-4" role="alert" *ngIf="invalid2faCode"> | ||
| <small>{{ 'login.message_invalid_2fa_code' | translate }}</small> | ||
| </div> | ||
| <div class="text-center"> | ||
| <p class="red-text" *ngIf="invalidCredentials"><small>{{ 'login.message_invalid_username_or_password' | translate }}</small></p> | ||
| <p class="red-text" *ngIf="invalid2faCode"><small>{{ 'login.message_invalid_2fa_code' | translate }}</small></p> | ||
| <button tabindex="3" class="btn btn-primary" type="submit" [disabled]="form.invalid">{{ 'login.button_login' | translate }}</button> | ||
| <button tabindex="3" class="btn btn-primary mb-4" type="submit" [disabled]="form.invalid"> | ||
| {{ 'login.button_login' | translate }} | ||
| </button> | ||
| </div> | ||
|
|
||
| </form> | ||
| </div> | ||
| </div> |
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
102 changes: 48 additions & 54 deletions
102
ui/src/app/modules/setup-wizard/setup-wizard.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,102 +1,96 @@ | ||
| <div class="setup-container d-flex align-items-center justify-content-center"> | ||
| <div class="w-100 setup-card d-flex py-5"> | ||
| <div class="w-100 setup-card d-flex py-4 flex-column"> | ||
| <img class="homebridge-logo mx-auto" src="/assets/homebridge-color-round.svg" alt="Homebridge Logo"> | ||
| <div class="progress w-100 my-4"> | ||
| <div class="progress-bar progress-bar-striped bg-success" role="progressbar" [style.width]="progress + '%'" | ||
| [attr.aria-valuenow]="progress" aria-valuemin="0" aria-valuemax="100" [ngClass]="{ | ||
| 'progress-bar-animated': loading || restoreUploading | ||
| }"></div> | ||
| </div> | ||
| <div *ngIf="step === 'welcome'" class="w-100 d-flex flex-column align-items-center"> | ||
| <img class="homebridge-logo mx-auto" src="/assets/homebridge-color-round.svg" alt="hb logo"> | ||
| <h3 class="pt-4 pb-3 text-center">{{ 'setup_wizard.welcome_to_homebridge' | translate }}</h3> | ||
| <button type="button" class="btn btn-lg btn-primary" (click)="onClickGettingStarted()"> | ||
| <h3 class="mb-4 text-center">{{ 'setup_wizard.welcome_to_homebridge' | translate }}</h3> | ||
| <button type="button" class="btn btn-lg btn-primary mb-3" (click)="onClickGettingStarted()"> | ||
| {{ 'setup_wizard.button_get_started' | translate }} | ||
| </button> | ||
| <small class="mt-3"> | ||
| <a href="javascript:void(0)" class="grey-text" (click)="onClickRestoreBackup()">{{ 'setup_wizard_message_restore' | translate }}</a> | ||
| </small> | ||
| <a href="javascript:void(0)" class="grey-text" (click)="onClickRestoreBackup()">{{ 'setup_wizard_message_restore' | translate }}</a> | ||
| </div> | ||
|
|
||
| <div *ngIf="step === 'create-account'" class="w-100 d-flex flex-column align-items-center"> | ||
| <img class="homebridge-logo homebridge-logo-small mx-auto" src="/assets/homebridge-color-round.svg" alt="hb logo"> | ||
| <h3 class="pt-4 pb-3 text-center">{{ 'setup_wizard.create_account' | translate }}</h3> | ||
|
|
||
| <h3 class="mb-3 text-center">{{ 'setup_wizard.create_account' | translate }}</h3> | ||
| <div class="w-100"> | ||
| <p>{{ 'setup_wizard.create_account_reason' | translate }}</p> | ||
| <p class="text-center">{{ 'setup_wizard.create_account_reason' | translate }}</p> | ||
| <form novalidate (ngSubmit)="createFirstUser()" [formGroup]="createUserForm"> | ||
| <div class="md-form"> | ||
| <i class="fas fa-fw fa-user prefix grey-text"></i> | ||
| <div class="input-group mb-4"> | ||
| <span class="input-group-text custom-input"><i class="fas fa-fw fa-user primary-text fa-lg"></i></span> | ||
| <input formControlName="username" type="text" id="form-username" autocomplete="username" | ||
| autocapitalize="none" tabindex="1" class="form-control px-0" [readonly]="loading" [ngClass]="{ | ||
| autocapitalize="none" tabindex="1" class="form-control custom-input" [readonly]="loading" [ngClass]="{ | ||
| 'is-valid': (createUserForm.controls.username.dirty) && createUserForm.controls.username.valid, | ||
| 'is-invalid': (createUserForm.controls.username.dirty) && createUserForm.controls.username.invalid | ||
| }"> | ||
| <label for="form-username">{{ 'users.label_username' | translate }}</label> | ||
| }" placeholder="{{ 'login.label_username' | translate }}" required> | ||
| </div> | ||
|
|
||
| <div class="md-form"> | ||
| <i class="fas fa-fw fa-lock prefix grey-text"></i> | ||
| <div class="input-group mb-4"> | ||
| <span class="input-group-text custom-input"><i class="fas fa-fw fa-lock fa-lg"></i></span> | ||
| <input formControlName="password" type="password" id="form-pass" autocomplete="new-password" tabindex="2" | ||
| class="form-control px-0" [readonly]="loading" [ngClass]="{ | ||
| class="form-control custom-input" [readonly]="loading" [ngClass]="{ | ||
| 'is-valid': (createUserForm.controls.password.dirty) && createUserForm.controls.password.valid, | ||
| 'is-invalid': (createUserForm.controls.password.dirty) && createUserForm.controls.password.errors | ||
| }"> | ||
| <label for="form-pass">{{ 'users.label_password' | translate }}</label> | ||
| }" placeholder="{{ 'login.label_password' | translate }}" required> | ||
| </div> | ||
|
|
||
| <div class="md-form"> | ||
| <i class="fas fa-fw fa-lock prefix grey-text"></i> | ||
| <div class="input-group mb-4"> | ||
| <span class="input-group-text custom-input"><i class="fas fa-fw fa-lock fa-lg"></i></span> | ||
| <input formControlName="passwordConfirm" type="password" id="form-pass-confirm" autocomplete="new-password" | ||
| tabindex="2" class="form-control px-0" [readonly]="loading" [ngClass]="{ | ||
| tabindex="2" class="form-control custom-input" [readonly]="loading" [ngClass]="{ | ||
| 'is-valid': (createUserForm.controls.passwordConfirm.dirty) && createUserForm.controls.passwordConfirm.valid, | ||
| 'is-invalid': (createUserForm.controls.passwordConfirm.dirty) && createUserForm.controls.passwordConfirm.errors | ||
| }"> | ||
| <label for="form-pass-confirm">{{ 'users.label_confirm_password' | translate }}</label> | ||
| }" placeholder="{{ 'users.label_confirm_password' | translate }}" required> | ||
| </div> | ||
|
|
||
| <div class="w-100 text-center"> | ||
| <div class="mt-3 w-100 d-flex justify-content-between"> | ||
| <button type="button" class="btn btn-elegant ms-0" [disabled]="restoreUploading" (click)="onClickCancelRestore()"> | ||
| {{ 'form.button_back' | translate }} | ||
| </button> | ||
| <button type="submit" class="btn btn-primary" [disabled]="createUserForm.invalid || loading" [ngClass]="{ | ||
| 'button-loading': loading | ||
| }"> | ||
| {{ 'setup_wizard.create_account' | translate }} | ||
| {{ 'form.button_continue' | translate }} | ||
| <i class="button-loading-overlay fas fa-fw fa-spinner fa-pulse"></i> | ||
| </button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div *ngIf="step === 'restore-backup'" class="w-100 d-flex flex-column align-items-center"> | ||
| <img class="homebridge-logo homebridge-logo-small mx-auto" src="/assets/homebridge-color-round.svg" alt="hb logo"> | ||
| <h3 class="pt-4 pb-3 text-center">{{ 'backup.title_restore' | translate }}</h3> | ||
| <p>{{ 'backup.restore_help_one' | translate }}</p> | ||
|
|
||
| <input type="file" class="form-control" id="restoreFileUpload" accept="application/gzip, .gz" | ||
| <h3 class="mb-3 text-center">{{ 'setup_wizard_message_restore' | translate }}</h3> | ||
| <p class="text-center mb-4">{{ 'backup.restore_help_one' | translate }}</p> | ||
| <input type="file" class="form-control custom-input mb-3" id="restoreFileUpload" accept="application/gzip, .gz" | ||
| (change)="handleRestoreFileInput($event.target.files)"> | ||
|
|
||
| <div class="mt-3 w-100 d-flex justify-content-between"> | ||
| <button type="button" class="btn btn-elegant ms-0" [disabled]="restoreUploadStarted" (click)="onClickCancelRestore()"> | ||
| {{ 'form.button_cancel' | translate }} | ||
| <button type="button" class="btn btn-elegant ms-0" [disabled]="restoreUploading" (click)="onClickCancelRestore()"> | ||
| {{ 'form.button_back' | translate }} | ||
| </button> | ||
|
|
||
| <button type="button" class="btn btn-primary me-0" (click)="onRestoreBackupClick()" | ||
| [disabled]="restoreUploading || !selectedFile"> | ||
| <span *ngIf="restoreUploading"> | ||
| <i class="fas fa-fw fa-spinner fa-pulse"></i> | ||
| {{ 'backup.label_uploading' | translate }} | ||
| </span> | ||
| <span *ngIf="!restoreUploading">{{ 'backup.button_restore_backup' | translate }}</span> | ||
| <span *ngIf="!restoreUploading">{{ 'form.button_continue' | translate }}</span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div *ngIf="step === 'restoring'" class="w-100 d-flex flex-column align-items-center"> | ||
| <h3 class="mb-3 text-center">{{ 'setup_wizard_message_restoring' | translate }}</h3> | ||
| </div> | ||
| <div *ngIf="step === 'restarting'" class="w-100 d-flex flex-column align-items-center"> | ||
| <img class="homebridge-logo homebridge-logo-small mx-auto" src="/assets/homebridge-color-round.svg" alt="hb logo"> | ||
| <h3 class="pt-4 pb-3 text-center">{{ 'restart.title_restart' | translate }}</h3> | ||
| <h1> | ||
| <i class="fas fa-fw fa-spinner fa-pulse"></i> | ||
| </h1> | ||
| <h3 class="mb-3 text-center">{{ 'restart.title_restart' | translate }}</h3> | ||
| </div> | ||
|
|
||
| <div *ngIf="step === 'setup-complete'" class="w-100 d-flex flex-column align-items-center"> | ||
| <img class="homebridge-logo homebridge-logo-small mx-auto" src="/assets/homebridge-color-round.svg" alt="hb logo"> | ||
| <h3 class="pt-4 pb-3">{{ 'setup_wizard_message_complete_title' | translate }}</h3> | ||
| <div *ngIf="step === 'setup-complete' || step === 'restore-complete'" class="w-100 d-flex flex-column align-items-center"> | ||
| <h3 class="mb-3">{{ 'setup_wizard_message_complete_title' | translate }}</h3> | ||
| <p class="text-center">{{ 'setup_wizard_message_complete_message' | translate }}</p> | ||
| <a class="btn btn-lg btn-primary mt-3" routerLink="/">{{ 'setup_wizard.open_dashboard' | translate }}</a> | ||
| <a class="btn btn-lg btn-primary mt-3" *ngIf="step === 'restore-complete'" href="/login"> | ||
| {{ 'form.button_continue' | translate }} | ||
| </a> | ||
| <a class="btn btn-lg btn-primary mt-3" routerLink="/" *ngIf="step === 'setup-complete'"> | ||
| {{ 'form.button_continue' | translate }} | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> |
Oops, something went wrong.