Skip to content

Commit

Permalink
Update login form
Browse files Browse the repository at this point in the history
  • Loading branch information
@miladsoft
miladsoft committed Sep 14, 2024
1 parent b3684fd commit a92b0fb
Show file tree
Hide file tree
Showing 6 changed files with 169 additions and 78 deletions.
86 changes: 70 additions & 16 deletions src/app/components/auth/login/login.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<!-- Alert -->
<angor-alert class="mt-8" [appearance]="'outline'" [showIcon]="false" [type]="'info'">
Privet key test = <strong>123</strong> <br>
Public key test = <strong>321</strong> <br>
Menemonic test = <strong>321</strong> <br>
</angor-alert>


Expand All @@ -28,39 +28,93 @@
{{ alert.message }}
</angor-alert>

<!-- Sign in form -->
<form class="mt-8" [formGroup]="signInForm" (ngSubmit)="signIn()">
<!-- Login form -->
<form class="mt-8" [formGroup]="SecretKeyLoginForm" (ngSubmit)="loginWithSecretKey()">
<!-- secret key field -->
<!-- Separator -->
<div class="mt-8 flex items-center">
<div class="mt-px flex-auto border-t"></div>
<div class="text-secondary mx-2">Enter secret key</div>
<div class="mt-px flex-auto border-t"></div>
</div>
<mat-form-field class="w-full">
<mat-label>Secret Key</mat-label>
<input matInput formControlName="privateKey" />
<mat-error *ngIf="
signInForm.get('privateKey').hasError('required')
">
Secret Key is required
</mat-error>
<input matInput formControlName="secretKey" />

</mat-form-field>

<!-- public key field -->
<!-- Submit button -->
<button class="angor-mat-button-large mt-6 w-full" mat-flat-button color="primary"
[disabled]="SecretKeyLoginForm.invalid">
<span *ngIf="!loading">Login</span>
<mat-progress-spinner *ngIf="loading" diameter="24" mode="indeterminate"></mat-progress-spinner>
</button>
</form>


<div class="mt-8 flex items-center">
<div class="mt-px flex-auto border-t"></div>
<div class="text-secondary mx-2">Or enter menemonic</div>
<div class="mt-px flex-auto border-t"></div>
</div>


<form class="mt-8" [formGroup]="MenemonicLoginForm" (ngSubmit)="loginWithMenemonic()">


<!-- Menemonic field -->
<mat-form-field class="w-full">
<mat-label>Public Key</mat-label>
<input matInput formControlName="publicKey" />
<mat-error *ngIf="signInForm.get('publicKey').hasError('required')">
Public key is required
</mat-error>
<mat-label>Menemonic</mat-label>
<input matInput formControlName="menemonic" />

</mat-form-field>

<!-- Submit button -->
<button class="angor-mat-button-large mt-6 w-full" mat-flat-button color="primary"
[disabled]="signInForm.invalid">
[disabled]="MenemonicLoginForm.invalid">
<span *ngIf="!loading">Login</span>
<mat-progress-spinner *ngIf="loading" diameter="24" mode="indeterminate"></mat-progress-spinner>
</button>
</form>
<div *ngIf="isInstalledExtension">
<!-- Separator -->
<div class="mt-8 flex items-center">
<div class="mt-px flex-auto border-t"></div>
<div class="text-secondary mx-2">Or login with extension</div>
<div class="mt-px flex-auto border-t"></div>
</div>

<!-- Single sign-on buttons -->
<div class="mt-8 flex items-center space-x-4">
<button class="flex-auto" type="button" mat-stroked-button>
<mat-icon class="icon-size-5" [svgIcon]="'feather:zap'"></mat-icon>
</button>
</div>
</div>

</div>
</div>
<div
class="relative hidden h-full w-1/2 flex-auto items-center justify-center overflow-hidden bg-gray-800 p-16 dark:border-l md:flex lg:px-28">

<svg class="absolute inset-0 pointer-events-none" viewBox="0 0 960 540" width="100%" height="100%"
preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg">
<g class="text-gray-700 opacity-25" fill="none" stroke="currentColor" stroke-width="100">
<circle r="234" cx="196" cy="23"></circle>
<circle r="234" cx="790" cy="491"></circle>
</g>
</svg>

<svg class="absolute -top-16 -right-16 text-gray-700" viewBox="0 0 220 192" width="220" height="192"
fill="none">
<defs>
<pattern id="837c3e70-6c3a-44e6-8854-cc48c737b659" x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="4" height="4" fill="currentColor"></rect>
</pattern>
</defs>
<rect width="220" height="192" fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"></rect>
</svg>
<!-- Background and Content -->
<div class="relative z-10 w-full max-w-2xl">
<div class="text-7xl font-bold leading-none text-gray-100">
Expand Down
66 changes: 53 additions & 13 deletions src/app/components/auth/login/login.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { AngorAlertComponent } from '@angor/components/alert';
import { CommonModule, I18nPluralPipe } from '@angular/common';
import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
Expand Down Expand Up @@ -30,10 +30,12 @@ import { SignerService } from 'app/services/signer.service';
],
})
export class LoginComponent implements OnInit {
signInForm: FormGroup;
SecretKeyLoginForm: FormGroup;
MenemonicLoginForm: FormGroup;
alert = { type: 'error', message: '' };
showAlert = false;
loading = false;
isInstalledExtension = false;

constructor(
private _formBuilder: FormBuilder,
Expand All @@ -42,32 +44,70 @@ export class LoginComponent implements OnInit {
) { }

ngOnInit(): void {
this.signInForm = this._formBuilder.group({
privateKey: ['', Validators.required],
publicKey: ['', Validators.required],
this.initializeForms();
this.checkNostrExtensionAvailability();
}

private initializeForms(): void {
this.SecretKeyLoginForm = this._formBuilder.group({
secretKey: ['', [Validators.required, Validators.minLength(64)]],
});

this.MenemonicLoginForm = this._formBuilder.group({
menemonic: ['', [Validators.required, Validators.minLength(12)]],
});
}

signIn(): void {
if (this.signInForm.invalid) {
private checkNostrExtensionAvailability(): void {

const globalContext = globalThis as unknown as { nostr?: { signEvent?: Function } };

if (globalContext.nostr && typeof globalContext.nostr.signEvent === 'function') {
this.isInstalledExtension = true;
} else {
this.isInstalledExtension = false;
}
}


loginWithSecretKey(): void {
if (this.SecretKeyLoginForm.invalid) {
return;
}

const secretKey = this.SecretKeyLoginForm.get('secretKey').value;

this.loading = true;
this.showAlert = false;

this._signerService.saveSecretKeyToSession(secretKey);

if (this._signerService.getPublicKey()) {
this._router.navigateByUrl('/home');
} else {
this.loading = false;
this.alert.message = 'Secret key is missing or invalid.';
this.showAlert = true;
}
}

loginWithMenemonic(): void {
if (this.MenemonicLoginForm.invalid) {
return;
}

const privateKey = this.signInForm.get('privateKey').value;
const publicKey = this.signInForm.get('publicKey').value;
const menemonic = this.MenemonicLoginForm.get('menemonic').value;

this.loading = true;
this.showAlert = false;

// Save private and public keys in the service
this._signerService.savePrivateKeyToSession(privateKey);
this._signerService.savePublicKeyToSession(publicKey);
this._signerService.saveSecretKeyToSession(menemonic);

if (this._signerService.getPublicKey()) {
this._router.navigateByUrl('/home');
} else {
this.loading = false;
this.alert.message = 'Public key is missing or invalid.';
this.alert.message = 'Menemonic is missing or invalid.';
this.showAlert = true;
}
}
Expand Down
39 changes: 18 additions & 21 deletions src/app/components/auth/register/register.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,27 +155,24 @@
<div
class="relative hidden h-full w-1/2 flex-auto items-center justify-center overflow-hidden bg-gray-800 p-16 dark:border-l md:flex lg:px-28"
>
<!-- Background -->
<!-- Rings -->
<!-- prettier-ignore -->
<svg class="absolute inset-0 pointer-events-none"
viewBox="0 0 960 540" width="100%" height="100%" preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg">
<g class="text-gray-700 opacity-25" fill="none" stroke="currentColor" stroke-width="100">
<circle r="234" cx="196" cy="23"></circle>
<circle r="234" cx="790" cy="491"></circle>
</g>
</svg>
<!-- Dots -->
<!-- prettier-ignore -->
<svg class="absolute -top-16 -right-16 text-gray-700"
viewBox="0 0 220 192" width="220" height="192" fill="none">
<defs>
<pattern id="837c3e70-6c3a-44e6-8854-cc48c737b659" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="4" height="4" fill="currentColor"></rect>
</pattern>
</defs>
<rect width="220" height="192" fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"></rect>
</svg>

<svg class="absolute inset-0 pointer-events-none"
viewBox="0 0 960 540" width="100%" height="100%" preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg">
<g class="text-gray-700 opacity-25" fill="none" stroke="currentColor" stroke-width="100">
<circle r="234" cx="196" cy="23"></circle>
<circle r="234" cx="790" cy="491"></circle>
</g>
</svg>

<svg class="absolute -top-16 -right-16 text-gray-700"
viewBox="0 0 220 192" width="220" height="192" fill="none">
<defs>
<pattern id="837c3e70-6c3a-44e6-8854-cc48c737b659" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="4" height="4" fill="currentColor"></rect>
</pattern>
</defs>
<rect width="220" height="192" fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"></rect>
</svg>
<!-- Content -->
<div class="relative z-10 w-full max-w-2xl">
<div class="text-7xl font-bold leading-none text-gray-100">
Expand Down
2 changes: 1 addition & 1 deletion src/app/core/auth/auth.guard.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export const authGuard = () => {
const signerService = inject(SignerService);
const router = inject(Router);

if (signerService.getPublicKey() !== "") {
if (signerService.getSecretKey() !== "") {
return true;
}

Expand Down
8 changes: 4 additions & 4 deletions src/app/mock-api/common/auth/api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,12 @@ export class AuthMockApi {
.reply(() => [200, true]);

// -----------------------------------------------------------------------------------------------------
// @ Sign in - POST
// @ Login - POST
// -----------------------------------------------------------------------------------------------------
this._angorMockApiService
.onPost('api/auth/sign-in', 1500)
.reply(({ request }) => {
// Sign in successful
// Login successful
if (
request.body.email === '[email protected]' &&
request.body.password === 'admin'
Expand All @@ -71,7 +71,7 @@ export class AuthMockApi {
});

// -----------------------------------------------------------------------------------------------------
// @ Sign in using the access token - POST
// @ Login using the access token - POST
// -----------------------------------------------------------------------------------------------------
this._angorMockApiService
.onPost('api/auth/sign-in-with-token')
Expand Down Expand Up @@ -114,7 +114,7 @@ export class AuthMockApi {
this._angorMockApiService
.onPost('api/auth/unlock-session', 1500)
.reply(({ request }) => {
// Sign in successful
// Login successful
if (
request.body.email === '[email protected]' &&
request.body.password === 'admin'
Expand Down
Loading

0 comments on commit a92b0fb

Please sign in to comment.