Skip to content

Commit

Permalink
Update register form
Browse files Browse the repository at this point in the history
  • Loading branch information
@miladsoft
miladsoft committed Sep 14, 2024
1 parent a92b0fb commit ad3b7c9
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 169 deletions.
44 changes: 40 additions & 4 deletions src/app/components/auth/login/login.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,9 @@
{{ alert.message }}
</angor-alert>

<!-- Login form -->
<!-- Login form with Secret Key -->
<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>
Expand All @@ -40,7 +39,24 @@
<mat-form-field class="w-full">
<mat-label>Secret Key</mat-label>
<input matInput formControlName="secretKey" />
</mat-form-field>

<!-- Password field -->
<mat-form-field class="w-full">
<mat-label>Password</mat-label>
<input id="password" matInput type="password" [formControlName]="'password'" #secretPasswordField />
<button mat-icon-button type="button" (click)="
secretPasswordField.type === 'password'
? (secretPasswordField.type = 'text')
: (secretPasswordField.type = 'password')
" matSuffix>
<mat-icon *ngIf="secretPasswordField.type === 'password'" class="icon-size-5"
[svgIcon]="'heroicons_solid:eye'"></mat-icon>
<mat-icon *ngIf="secretPasswordField.type === 'text'" class="icon-size-5"
[svgIcon]="'heroicons_solid:eye-slash'"></mat-icon>
</button>
<mat-error *ngIf="SecretKeyLoginForm.get('password').hasError('required')"> Password is required
</mat-error>
</mat-form-field>

<!-- Submit button -->
Expand All @@ -59,14 +75,31 @@
</div>


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


<!-- Menemonic field -->
<mat-form-field class="w-full">
<mat-label>Menemonic</mat-label>
<input matInput formControlName="menemonic" />
</mat-form-field>

<!-- Password field -->
<mat-form-field class="w-full">
<mat-label>Password</mat-label>
<input id="password" matInput type="password" [formControlName]="'password'"
#menemonicPasswordField />
<button mat-icon-button type="button" (click)="
menemonicPasswordField.type === 'password'
? (menemonicPasswordField.type = 'text')
: (menemonicPasswordField.type = 'password')
" matSuffix>
<mat-icon *ngIf="menemonicPasswordField.type === 'password'" class="icon-size-5"
[svgIcon]="'heroicons_solid:eye'"></mat-icon>
<mat-icon *ngIf="menemonicPasswordField.type === 'text'" class="icon-size-5"
[svgIcon]="'heroicons_solid:eye-slash'"></mat-icon>
</button>
<mat-error *ngIf="MenemonicLoginForm.get('password').hasError('required')"> Password is required
</mat-error>
</mat-form-field>

<!-- Submit button -->
Expand All @@ -76,6 +109,9 @@
<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">
Expand Down
14 changes: 8 additions & 6 deletions src/app/components/auth/login/login.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,16 +50,17 @@ export class LoginComponent implements OnInit {

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

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

private checkNostrExtensionAvailability(): void {

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

if (globalContext.nostr && typeof globalContext.nostr.signEvent === 'function') {
Expand All @@ -69,13 +70,13 @@ export class LoginComponent implements OnInit {
}
}


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

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

this.loading = true;
this.showAlert = false;
Expand All @@ -96,7 +97,8 @@ export class LoginComponent implements OnInit {
return;
}

const menemonic = this.MenemonicLoginForm.get('menemonic').value;
const menemonic = this.MenemonicLoginForm.get('menemonic')?.value;
const password = this.MenemonicLoginForm.get('password')?.value;

this.loading = true;
this.showAlert = false;
Expand Down
188 changes: 62 additions & 126 deletions src/app/components/auth/register/register.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,186 +1,122 @@
<div
class="flex min-w-0 flex-auto flex-col items-center sm:flex-row sm:justify-center md:items-start md:justify-start"
>
<div class="flex min-w-0 flex-auto flex-col items-center sm:flex-row sm:justify-center md:items-start md:justify-start">
<div
class="w-full px-4 py-8 sm:bg-card sm:w-auto sm:rounded-2xl sm:p-12 sm:shadow md:flex md:h-full md:w-1/2 md:items-center md:justify-end md:rounded-none md:p-16 md:shadow-none"
>
class="w-full px-4 py-8 sm:bg-card sm:w-auto sm:rounded-2xl sm:p-12 sm:shadow md:flex md:h-full md:w-1/2 md:items-center md:justify-end md:rounded-none md:p-16 md:shadow-none">
<div class="mx-auto w-full max-w-80 sm:mx-0 sm:w-80">
<!-- Logo -->
<div class="w-12">
<img src="images/logo/logo.svg" />
</div>

<!-- Title -->
<div
class="mt-8 text-4xl font-extrabold leading-tight tracking-tight"
>
<div class="mt-8 text-4xl font-extrabold leading-tight tracking-tight">
Register
</div>
<div class="mt-0.5 flex items-baseline font-medium">
<div>Already have an account?</div>
<a
class="ml-1 text-primary-500 hover:underline"
[routerLink]="['/login']"
>Login
<a class="ml-1 text-primary-500 hover:underline" [routerLink]="['/login']">Login
</a>
</div>

<!-- Alert -->
@if (showAlert) {
<angor-alert
class="mt-8"
[appearance]="'outline'"
[showIcon]="false"
[type]="alert.type"
[@shake]="alert.type === 'error'"
>
{{ alert.message }}
</angor-alert>
<angor-alert class="mt-8" [appearance]="'outline'" [showIcon]="false" [type]="alert.type"
[@shake]="alert.type === 'error'">
{{ alert.message }}
</angor-alert>
}

<!-- Sign Up form -->
<form class="mt-8" [formGroup]="signUpForm" #signUpNgForm="ngForm">
<!-- Name field -->
<!-- Register form -->
<form class="mt-8" [formGroup]="registerForm" #registerNgForm="ngForm">
<!-- Name field (secretKey) -->
<mat-form-field class="w-full">
<mat-label>Full name</mat-label>
<input id="name" matInput [formControlName]="'name'" />
@if (signUpForm.get('name').hasError('required')) {
<mat-error> Full name is required </mat-error>
}
<mat-error *ngIf="registerForm.get('name').hasError('required')"> Full name is required </mat-error>
</mat-form-field>

<!-- Email field -->
<!-- Username field -->
<mat-form-field class="w-full">
<mat-label>Email address</mat-label>
<input id="email" matInput [formControlName]="'email'" />
@if (signUpForm.get('email').hasError('required')) {
<mat-error> Email address is required </mat-error>
}
@if (signUpForm.get('email').hasError('email')) {
<mat-error>
Please enter a valid email address
</mat-error>
}
<mat-label>Username</mat-label>
<input id="username" matInput [formControlName]="'username'" />
<mat-error *ngIf="registerForm.get('username').hasError('required')"> Username is required </mat-error>
</mat-form-field>

<!-- Password field -->
<!-- About field -->
<mat-form-field class="w-full">
<mat-label>About</mat-label>
<textarea id="about" matInput [formControlName]="'about'"></textarea>
</mat-form-field>

<!-- Avatar URL field -->
<mat-form-field class="w-full">
<mat-label>Avatar URL</mat-label>
<input id="avatarUrl" matInput [formControlName]="'avatarUrl'" />
</mat-form-field>
<!-- Password field -->
<mat-form-field class="w-full">
<mat-label>Password</mat-label>
<input
id="password"
matInput
type="password"
[formControlName]="'password'"
#passwordField
/>
<button
mat-icon-button
type="button"
(click)="
<input id="password" matInput type="password" [formControlName]="'password'" #passwordField />
<button mat-icon-button type="button" (click)="
passwordField.type === 'password'
? (passwordField.type = 'text')
: (passwordField.type = 'password')
"
matSuffix
>
@if (passwordField.type === 'password') {
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:eye'"
></mat-icon>
}
@if (passwordField.type === 'text') {
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:eye-slash'"
></mat-icon>
}
" matSuffix>
<mat-icon *ngIf="passwordField.type === 'password'" class="icon-size-5" [svgIcon]="'heroicons_solid:eye'"></mat-icon>
<mat-icon *ngIf="passwordField.type === 'text'" class="icon-size-5" [svgIcon]="'heroicons_solid:eye-slash'"></mat-icon>
</button>
<mat-error> Password is required </mat-error>
</mat-form-field>

<!-- Company field -->
<mat-form-field class="w-full">
<mat-label>Company</mat-label>
<input
id="company-confirm"
matInput
[formControlName]="'company'"
/>
<mat-error *ngIf="registerForm.get('password').hasError('required')"> Password is required </mat-error>
</mat-form-field>

<!-- ToS and PP -->
<div class="mt-1.5 inline-flex w-full items-end">
<mat-checkbox
class="-ml-2"
[color]="'primary'"
[formControlName]="'agreements'"
>
<mat-checkbox class="-ml-2" [color]="'primary'" [formControlName]="'agreements'">
<span>I agree with</span>
<a
class="ml-1 text-primary-500 hover:underline"
[routerLink]="['./']"
>Terms
</a>
<a class="ml-1 text-primary-500 hover:underline" [routerLink]="['./']">Terms</a>
<span>and</span>
<a
class="ml-1 text-primary-500 hover:underline"
[routerLink]="['./']"
>Privacy Policy
</a>
<a class="ml-1 text-primary-500 hover:underline" [routerLink]="['./']">Privacy Policy</a>
</mat-checkbox>
</div>

<!-- Submit button -->
<button
class="angor-mat-button-large mt-6 w-full"
mat-flat-button
[color]="'primary'"
[disabled]="signUpForm.disabled"
(click)="signUp()"
>
@if (!signUpForm.disabled) {
<span> Create your account </span>
}
@if (signUpForm.disabled) {
<mat-progress-spinner
[diameter]="24"
[mode]="'indeterminate'"
></mat-progress-spinner>
}
<button class="angor-mat-button-large mt-6 w-full" mat-flat-button [color]="'primary'"
[disabled]="registerForm.invalid" (click)="register()">
<span>Create your account</span>
<mat-progress-spinner *ngIf="registerForm.disabled" [diameter]="24" [mode]="'indeterminate'"></mat-progress-spinner>
</button>
</form>

</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"
>
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 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>
<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">
<!-- <div>Welcome to</div> -->
<div>Angor Hub</div>
</div>
<div class="mt-6 text-lg leading-6 tracking-tight text-gray-400">
Angor Hub is a Nostr client that is customized around the Angor protocol, a decentralized crowdfunding platform.
Angor Hub is a Nostr client that is customized around the Angor protocol, a decentralized crowdfunding
platform.
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit ad3b7c9

Please sign in to comment.