1 files changed, 31 insertions, 0 deletions
diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html
new file mode 100644
index 0000000..bc3aaf0
--- /dev/null
+++ b/ufund-ui/src/app/components/signup/signup.component.html
@@ -0,0 +1,31 @@
+<div id="box">
+    <h1>Create an account</h1>
+    <div>
+        <input placeholder="Username" type="text" (input)="validate(username.value, confirmPass.value, password.value)" #username>
+        <span *ngIf="usernameStatusText">{{usernameStatusText | async}}</span>
+    </div>
+
+    <div>
+        <div>
+            <input placeholder="Password" type="password" (input)="validate(username.value, confirmPass.value, password.value)" #password>
+            <progress [ngClass]="'color' + strength.getValue()" id="bar" [value]="strength | async" max="6">  </progress>
+            <span *ngIf="passwordStatusText">{{passwordStatusText | async}}</span>
+        </div>
+
+        <div id="passReq">
+            <span *ngFor="let requirement of Object.values(passwordRequirements)" [style.color]="requirement.value ? 'green' : 'red'"><span class="icon">{{requirement.value?"check":"close"}}</span> {{requirement.title}}</span>
+        </div>
+    </div>
+
+    <div>
+        <input placeholder="Confirm password" type="password" (input)="validate(username.value, confirmPass.value, password.value)" #confirmPass>
+        <span [style.color]="(passwordsMatch|async) ? 'green' : 'red'" *ngIf="passwordsMatch"><span class="icon">{{(passwordsMatch|async)?"check":"close"}}</span> Passwords match</span>
+    </div>
+
+    <div>
+        <button [disabled]="!(ableToCreateAccount | async)" (click)="signup(username.value, password.value)">Create Account</button>
+        <span *ngIf="showSuccessMessage | async">Account created <a routerLink="/login">Proceed to login</a></span>
+        <span *ngIf="statusText | async">{{statusText | async}}</span>
+    </div>
+    <span>Already have an account? <a routerLink="/login">Log in</a></span>
+</div>