You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
5.3 KiB
94 lines
5.3 KiB
<div class="login-container">
|
|
<ion-grid class="ion-align-items-center">
|
|
<ion-row class="ion-align-items-center" style="height: 100%" *ngIf="step === 'greeter'">
|
|
<ion-col class="ion-align-items-end" style="text-align: right">
|
|
<img [src]="logoUrl" alt="Noded" width="200">
|
|
</ion-col>
|
|
<ion-col style="padding: 40px;">
|
|
<div class="hero" style="font-size: 2em;"><b style="font-size: 1.5em;">Noded</b><br>is your information, organized.</div>
|
|
<button
|
|
(click)="advance()"
|
|
title="Click to get started"
|
|
style="padding: 20px 0; margin: 0; color: #3171e0"
|
|
>Get started <i class="fa fa-chevron-right" style="font-size: 0.8em; margin-left: 10px;"></i></button>
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row class="ion-align-items-center" style="height: 100%" *ngIf="step === 'username' || step === 'password' || step === 'create-account'">
|
|
<ion-col class="ion-align-items-center" style="text-align: center">
|
|
<img [src]="logoUrl" alt="Noded" height="100" style="margin-bottom: 20px;">
|
|
<p class="message">{{ stepMessages[step] }}</p>
|
|
<ion-item>
|
|
<ion-input
|
|
#usernameInput
|
|
[(ngModel)]="username"
|
|
[disabled]="step !== 'username'"
|
|
placeholder="Username"
|
|
></ion-input>
|
|
</ion-item>
|
|
<ion-item *ngIf="step === 'password'" style="padding-top: 10px;">
|
|
<ion-input
|
|
#passwordInput
|
|
[(ngModel)]="password"
|
|
placeholder="Password"
|
|
type="password"
|
|
></ion-input>
|
|
</ion-item>
|
|
<ion-item *ngIf="step === 'create-account'" style="padding-top: 10px;">
|
|
<ion-input
|
|
#nameInput
|
|
[(ngModel)]="fullName"
|
|
placeholder="Full Name"
|
|
type="text"
|
|
></ion-input>
|
|
</ion-item>
|
|
<ion-item *ngIf="step === 'create-account'" style="padding-top: 10px;">
|
|
<ion-input
|
|
[(ngModel)]="password"
|
|
placeholder="Create a Password"
|
|
type="password"
|
|
></ion-input>
|
|
</ion-item>
|
|
<ion-item *ngIf="step === 'create-account'" style="padding-top: 10px;">
|
|
<ion-input
|
|
[(ngModel)]="passwordConfirm"
|
|
placeholder="Confirm Password"
|
|
type="password"
|
|
></ion-input>
|
|
</ion-item>
|
|
<div class="buttons" style="text-align: right;">
|
|
<div class="button" style="display: flex; flex-direction: row;" *ngIf="step !== 'username'">
|
|
<button
|
|
(click)="back()"
|
|
style="text-align: left; margin: 20px 0 0 0;"
|
|
><i class="fa fa-chevron-left" style="font-size: 0.8em; margin-left: 10px; color: #3171e0"></i></button>
|
|
<button
|
|
(click)="advance()"
|
|
title="Click to sign-in to the system"
|
|
style="flex: 1; padding: 20px 0 0 0; margin: 0; text-align: right;"
|
|
[ngStyle]="{'color': ((!password || (step !== 'password' && (password !== passwordConfirm || !fullName))) ? '#666' : '#3171e0')}"
|
|
[disabled]="!password || (step !== 'password' && (password !== passwordConfirm || !fullName))"
|
|
>{{ step === 'password' ? 'Sign-in' : 'Create account' }} <i class="fa fa-chevron-right" style="font-size: 0.8em; margin-left: 10px;"></i></button>
|
|
</div>
|
|
<div class="button" *ngIf="step === 'username'">
|
|
<button
|
|
(click)="advance()"
|
|
title="Click to continue"
|
|
style="padding: 20px 0 0 0; margin: 0;"
|
|
[ngStyle]="{'color': (username ? '#3171e0' : '#666')}"
|
|
[disabled]="!username"
|
|
>Continue <i class="fa fa-chevron-right" style="font-size: 0.8em; margin-left: 10px;"></i></button>
|
|
</div>
|
|
<div class="button">
|
|
<button
|
|
(click)="coreid()"
|
|
*ngIf="step === 'username'"
|
|
title="Click to sign-in with Starship CoreID instead"
|
|
style="padding: 20px 0 0 0; margin: 0; color: #3171e0;"
|
|
>Sign-in with CoreID <i class="fa fa-chevron-right" style="font-size: 0.8em; margin-left: 10px;"></i></button>
|
|
</div>
|
|
</div>
|
|
<p class="error-message" *ngIf="errorMessage" style="color: darkred; font-size: 0.9em; margin-top: 30px;">{{ errorMessage }}</p>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
</div> |