2020-12-28 10:11:25 +01:00
< div class = "container" >
< div class = "row justify-content-center mt-5 mb-5" >
< div class = "col-lg-6 col-md-8 col-sm-10" >
< div class = "card" >
<!-- Logo -->
< div class = "card-header pt-4 pb-4 text-center bg-dark" >
< a routerLink = "/" >
<!-- <span><img src="assets/images/logo.png" alt="" height="18"></span> -->
< h1 class = "text-white" > CIC CLIENT< / h1 >
< / a >
< / div >
< div class = "card-body p-4" >
< div class = "text-center w-75 m-auto" >
< h4 class = "text-dark-50 text-center mt-0 font-weight-bold" > Sign Up< / h4 >
< / div >
< form [ formGroup ] = " registerForm " ( ngSubmit ) = " onSubmit ( ) " >
< div class = "form-group" >
< label for = "emailaddress" > Email address< / label >
< input class = "form-control" type = "email" id = "emailaddress" required placeholder = "Enter your email" formControlName = "email" [ ngClass ] = " { ' is-invalid ' : submitted & & form . email . errors } " >
< div * ngIf = "submitted && form.email.errors" class = "invalid-feedback" >
< div * ngIf = "form.email.errors.required" > Email is required< / div >
< / div >
< / div >
< div class = "form-group" >
< label for = "password" > Password< / label >
< div class = "input-group input-group-merge" >
< input type = "password" id = "password" class = "form-control" placeholder = "Enter your password" formControlName = "password" [ ngClass ] = " { ' is-invalid ' : submitted & & form . password . errors } " required >
< div class = "input-group-append" data-password = "false" appPasswordToggle [ id ] = " ' password ' " [ iconId ] = " ' icon ' " >
< div class = "input-group-text" >
< span id = "icon" class = "fa fa-eye" > < / span >
< / div >
< / div >
< div * ngIf = "submitted && form.password.errors" class = "invalid-feedback" >
< div * ngIf = "form.password.errors.required" > Password is required< / div >
< div * ngIf = "form.password.errors.hasCapitalCase" > Should contain at least 1 uppercase alphabet< / div >
< div * ngIf = "form.password.errors.hasSmallCase" > Should contain at least 1 lowercase alphabet< / div >
< div * ngIf = "form.password.errors.hasNumber" > Should contain at least 1 number< / div >
< div * ngIf = "form.password.errors.minlength" > Should be at least 8 characters< / div >
< / div >
< / div >
< / div >
< div class = "form-group" >
< label for = "confirmPassword" > Confirm Password< / label >
< div class = "input-group input-group-merge" >
< input type = "password" id = "confirmPassword" class = "form-control" placeholder = "Enter your password" formControlName = "confirmPasword" [ ngClass ] = " { ' is-invalid ' : submitted & & form . confirmPassword . errors } " required >
< div class = "input-group-append" data-password = "false" >
< div class = "input-group-text" appPasswordToggle [ id ] = " ' confirmPassword ' " [ iconId ] = " ' icon2 ' " >
< span id = "icon2" class = "fa fa-eye" > < / span >
< / div >
< / div >
< div * ngIf = "submitted && form.confirmPassword.errors" class = "invalid-feedback" >
< div * ngIf = "form.confirmPassword.errors.required" > Password is required< / div >
< div * ngIf = "form.confirmPassword.errors.NoPasswordMatch" > Your passwords do not match< / div >
< / div >
< / div >
< / div >
< div class = "form-group" >
< div class = "custom-control custom-checkbox" >
< input type = "checkbox" class = "custom-control-input" id = "checkbox-signup" formControlName = "terms" [ ngClass ] = " { ' is-invalid ' : submitted & & form . terms . errors } " required >
< label class = "custom-control-label" for = "checkbox-signup" > I accept < a href = "#" class = "text-muted" > Terms and Conditions< / a > < / label >
< div * ngIf = "submitted && form.terms.errors" class = "invalid-feedback" >
< div * ngIf = "form.terms.errors.required" > Accept terms and conditions to continue!< / div >
< / div >
< / div >
< / div >
< div class = "form-group mb-0 text-center" >
< button matRipple mat-raised-button color = "primary" type = "submit" [ disabled ] = " loading " >
< span * ngIf = "loading" class = "spinner-border spinner-border-sm mr-1" > < / span >
Sign Up
< / button >
< / div >
< div * ngIf = "error" class = "alert alert-danger mt-3 mb-0" > {{ error }}< / div >
< / form >
< / div > <!-- end card - body -->
< / div >
<!-- end card -->
< div class = "row mt-3" >
< div class = "col-12 text-center" >
2021-01-15 05:58:39 +01:00
< p class = "text-muted" > Already have account? < a routerLink = "/auth/key" class = "text-muted ml-1" > < b > Log In< / b > < / a > < / p >
2020-12-28 10:11:25 +01:00
< / div > <!-- end col -->
< / div >
<!-- end row -->
< / div > <!-- end col -->
< / div >
<!-- end row -->
< / div >
<!-- end container -->
<!-- <app - footer></app - footer> -->