File size: 8,198 Bytes
38fa174 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 |
<section class="auth-page">
<div class="auth-box" role="dialog" aria-labelledby="suTitle">
<!-- Left (form) -->
<div class="panel-left">
<!-- Success Animation Overlay -->
<div class="success-overlay" *ngIf="showSuccessAnimation">
<div class="success-animation">
<div class="success-checkmark">
<div class="check-icon">
<span class="icon-line line-tip"></span>
<span class="icon-line line-long"></span>
</div>
</div>
</div>
<div class="success-message">Account Created Successfully!</div>
</div>
<div class="topTitle">
<img class="brand-mark" src="/assets/pykara-logo.png" alt="Brand" />
<p class="topHeader"><b>Let's get started!</b></p>
</div>
<h2 id="suTitle" class="title">Create an account</h2>
<form class="form" [formGroup]="form" (ngSubmit)="submit()" novalidate>
<!-- Name -->
<div class="field">
<label for="name">
Name<span *ngIf="controlHasError('name','required')" class="error">*</span>
</label>
<input id="name" type="text" placeholder="John"
formControlName="name" [attr.aria-invalid]="controlHasError('name')" />
<small *ngIf="controlHasError('name','minlength')" class="error">Enter at least 2 characters.</small>
</div>
<!-- Email/Phone (contact) -->
<div class="field">
<label for="contact">
Email<span *ngIf="controlHasError('contact','required')" class="error">*</span>
</label>
<input id="contact" type="text" placeholder="hello@gmail.com"
formControlName="contact" [attr.aria-invalid]="controlHasError('contact')" />
<small *ngIf="controlHasError('contact','pattern')" class="error">Enter a valid email/phone.</small>
</div>
<!-- Password -->
<div class="field">
<label for="password">
Password<span *ngIf="controlHasError('password','required')" class="error">*</span>
</label>
<div class="password-input-container">
<input id="password" [type]="showPassword ? 'text' : 'password'" placeholder="••••••••"
formControlName="password" [attr.aria-invalid]="controlHasError('password')"
(focus)="onPasswordFocus()"
(blur)="onPasswordBlur()" />
<!-- Eye icon for password visibility -->
<span class="password-toggle" *ngIf="control('password')?.value"
(click)="togglePasswordVisibility()"
[class.visible]="showPassword">
👁️
</span>
<!-- Password Requirements Tooltip -->
<div class="password-tooltip" *ngIf="showPasswordTooltip">
<div class="tooltip-content">
<div class="tooltip-layout">
<!-- Left side: Requirements -->
<div class="tooltip-left">
<small class="requirement-title">Password must contain:</small>
<ul class="requirement-list">
<li [class.valid]="getPasswordRequirementStatus().length">At least 8 characters</li>
<li [class.valid]="getPasswordRequirementStatus().upperCase">One uppercase letter (A-Z)</li>
<li [class.valid]="getPasswordRequirementStatus().lowerCase">One lowercase letter (a-z)</li>
<li [class.valid]="getPasswordRequirementStatus().number">One number (0-9)</li>
<li [class.valid]="getPasswordRequirementStatus().specialChar">One special character (e.g., @, #, $, %)</li>
<li [class.valid]="getPasswordRequirementStatus().noSpaces">No spaces</li>
</ul>
</div>
<!-- Right side: Strength & Errors -->
<div class="tooltip-right">
<!-- Password Strength Indicator -->
<div *ngIf="control('password')?.value" class="password-strength">
<div class="strength-bar" [class]="passwordStrength">
<div class="strength-fill"></div>
</div>
<small class="strength-text" [class]="passwordStrength">
Password strength: {{ passwordStrength | titlecase }}
</small>
</div>
<!-- Individual error messages -->
<div class="error-messages" *ngIf="control('password')?.invalid">
<small *ngIf="controlHasError('password','minlength')" class="error">• Use at least 8 characters</small>
<small *ngIf="controlHasError('password','missingUpperCase')" class="error">• Add an uppercase letter</small>
<small *ngIf="controlHasError('password','missingLowerCase')" class="error">• Add a lowercase letter</small>
<small *ngIf="controlHasError('password','missingNumber')" class="error">• Add a number</small>
<small *ngIf="controlHasError('password','missingSpecialChar')" class="error">• Add a special character</small>
<small *ngIf="controlHasError('password','hasSpaces')" class="error">• Remove spaces</small>
<small *ngIf="controlHasError('password','hasSequentialChars')" class="error">• Avoid sequential characters</small>
<small *ngIf="controlHasError('password','hasRepeatedChars')" class="error">• Avoid repeated characters</small>
<small *ngIf="controlHasError('password','hasCommonWord')" class="error">• Avoid common words</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Confirm password -->
<div class="field">
<label for="confirmPassword">
Confirm password
<span *ngIf="controlHasError('confirmPassword','required')" class="error">*</span>
<!-- Moved error message outside label -->
<span *ngIf="showPwdMismatch() && control('confirmPassword')?.touched && control('password')?.touched" class="error">
Passwords do not match.
</span>
</label>
<div class="password-input-container">
<input id="confirmPassword" [type]="showConfirmPassword ? 'text' : 'password'" placeholder="••••••••"
formControlName="confirmPassword" [attr.aria-invalid]="showPwdMismatch()" />
<!-- Eye icon for confirm password visibility -->
<span class="password-toggle" *ngIf="control('confirmPassword')?.value"
(click)="toggleConfirmPasswordVisibility()"
[class.visible]="showConfirmPassword">
👁️
</span>
</div>
</div>
<!-- Add this after the form closing tag but before the panel-left closing div -->
<div *ngIf="errorMessage()" class="error-message">
{{ errorMessage() }}
</div>
<button class="btn btn-primary" type="submit"
[disabled]="form.invalid || submitting()" [attr.aria-busy]="submitting()">
Sign up
</button>
</form>
</div>
<!-- Right (image) -->
<div class="panel-right">
<div class="right-image">
<img src="/assets/user.png" alt="Decorative" />
<!-- Footnote Container -->
<div class="footnote-container">
<p class="footnote">
Already have an account?
<!-- Use click handler instead of routerLink -->
<a href="#" (click)="goToLogin(); $event.preventDefault()" [class.pulse]="showSignInPulse()">Sign in</a>
</p>
</div>
</div>
</div>
</div>
</section>
|