From 83149f64cc1d03c4da29cd76342adaacbee44a11 Mon Sep 17 00:00:00 2001 From: Crhistian Ramirez Date: Sun, 18 Nov 2018 18:18:02 -0600 Subject: [PATCH] split up shared-register component into register and me-update #304 --- .../Buyer/src/app/auth/auth-routing.module.ts | 2 +- src/UI/Buyer/src/app/auth/auth.module.ts | 2 + .../register/register.component.html | 52 ++---- .../register/register.component.scss | 0 .../register/register.component.spec.ts | 119 ++++++++++++++ .../containers/register/register.component.ts | 97 ++++++++++++ src/UI/Buyer/src/app/config/app.config.ts | 2 +- .../change-password-form.component.html | 0 .../change-password-form.component.scss | 0 .../change-password-form.component.spec.ts | 0 .../change-password-form.component.ts | 2 +- .../me-update/me-update.component.html | 83 ++++++++++ .../me-update/me-update.component.scss | 0 .../me-update/me-update.component.spec.ts} | 149 ++++-------------- .../me-update/me-update.component.ts} | 95 ++--------- .../src/app/profile/profile-routing.module.ts | 8 +- .../Buyer/src/app/profile/profile.module.ts | 10 +- src/UI/Buyer/src/app/shared/index.ts | 1 - src/UI/Buyer/src/app/shared/shared.module.ts | 5 - src/UI/Buyer/src/environments/environment.ts | 2 +- 20 files changed, 373 insertions(+), 256 deletions(-) rename src/UI/Buyer/src/app/{shared => auth}/containers/register/register.component.html (71%) rename src/UI/Buyer/src/app/{shared => auth}/containers/register/register.component.scss (100%) create mode 100644 src/UI/Buyer/src/app/auth/containers/register/register.component.spec.ts create mode 100644 src/UI/Buyer/src/app/auth/containers/register/register.component.ts rename src/UI/Buyer/src/app/{shared => profile}/components/change-password-form/change-password-form.component.html (100%) rename src/UI/Buyer/src/app/{shared => profile}/components/change-password-form/change-password-form.component.scss (100%) rename src/UI/Buyer/src/app/{shared => profile}/components/change-password-form/change-password-form.component.spec.ts (100%) rename src/UI/Buyer/src/app/{shared => profile}/components/change-password-form/change-password-form.component.ts (98%) create mode 100644 src/UI/Buyer/src/app/profile/containers/me-update/me-update.component.html create mode 100644 src/UI/Buyer/src/app/profile/containers/me-update/me-update.component.scss rename src/UI/Buyer/src/app/{shared/containers/register/register.component.spec.ts => profile/containers/me-update/me-update.component.spec.ts} (59%) rename src/UI/Buyer/src/app/{shared/containers/register/register.component.ts => profile/containers/me-update/me-update.component.ts} (57%) diff --git a/src/UI/Buyer/src/app/auth/auth-routing.module.ts b/src/UI/Buyer/src/app/auth/auth-routing.module.ts index c0262f4e..0810ec2c 100644 --- a/src/UI/Buyer/src/app/auth/auth-routing.module.ts +++ b/src/UI/Buyer/src/app/auth/auth-routing.module.ts @@ -5,7 +5,7 @@ import { RouterModule, Routes } from '@angular/router'; // auth components import { LoginComponent } from '@app-buyer/auth/containers/login/login.component'; import { ForgotPasswordComponent } from '@app-buyer/auth/containers/forgot-password/forgot-password.component'; -import { RegisterComponent } from '@app-buyer/shared'; +import { RegisterComponent } from '@app-buyer/auth/containers/register/register.component'; import { ResetPasswordComponent } from '@app-buyer/auth/containers/reset-password/reset-password.component'; const routes: Routes = [ diff --git a/src/UI/Buyer/src/app/auth/auth.module.ts b/src/UI/Buyer/src/app/auth/auth.module.ts index aa7cad02..41b23b27 100644 --- a/src/UI/Buyer/src/app/auth/auth.module.ts +++ b/src/UI/Buyer/src/app/auth/auth.module.ts @@ -4,6 +4,7 @@ import { SharedModule } from '@app-buyer/shared'; // components import { LoginComponent } from '@app-buyer/auth/containers/login/login.component'; +import { RegisterComponent } from '@app-buyer/auth/containers/register/register.component'; import { ForgotPasswordComponent } from '@app-buyer/auth/containers/forgot-password/forgot-password.component'; import { ResetPasswordComponent } from '@app-buyer/auth/containers/reset-password/reset-password.component'; @@ -14,6 +15,7 @@ import { AuthRoutingModule } from '@app-buyer/auth/auth-routing.module'; imports: [SharedModule, AuthRoutingModule], declarations: [ LoginComponent, + RegisterComponent, ForgotPasswordComponent, ResetPasswordComponent, ], diff --git a/src/UI/Buyer/src/app/shared/containers/register/register.component.html b/src/UI/Buyer/src/app/auth/containers/register/register.component.html similarity index 71% rename from src/UI/Buyer/src/app/shared/containers/register/register.component.html rename to src/UI/Buyer/src/app/auth/containers/register/register.component.html index cf214dbb..206de4a9 100644 --- a/src/UI/Buyer/src/app/shared/containers/register/register.component.html +++ b/src/UI/Buyer/src/app/auth/containers/register/register.component.html @@ -1,25 +1,19 @@ -
+

Already have an account?

{{appConfig.appname}}

-
-

Account Details

-
-
-

Sign Up

+
+

Sign Up

- Account Details class="error-message">Username is required
- Account Details class="error-message">Name can only contain characters Aa-Zz 0-9 - ' .
- Account Details class="error-message">Name can only contain characters Aa-Zz 0-9 - ' .
- Account Details class="error-message">Please enter a valid email
- Account Details Phone can only contain 20 numbers or "-" chars (no spaces)
-
-
-
+
Account Details Passwords must match
- -
-
- - - - - \ No newline at end of file +
\ No newline at end of file diff --git a/src/UI/Buyer/src/app/shared/containers/register/register.component.scss b/src/UI/Buyer/src/app/auth/containers/register/register.component.scss similarity index 100% rename from src/UI/Buyer/src/app/shared/containers/register/register.component.scss rename to src/UI/Buyer/src/app/auth/containers/register/register.component.scss diff --git a/src/UI/Buyer/src/app/auth/containers/register/register.component.spec.ts b/src/UI/Buyer/src/app/auth/containers/register/register.component.spec.ts new file mode 100644 index 00000000..1d42d976 --- /dev/null +++ b/src/UI/Buyer/src/app/auth/containers/register/register.component.spec.ts @@ -0,0 +1,119 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { RegisterComponent } from '@app-buyer/auth/containers/register/register.component'; +import { ReactiveFormsModule } from '@angular/forms'; +import { OcMeService, OcTokenService, MeUser } from '@ordercloud/angular-sdk'; +import { CookieModule } from 'ngx-cookie'; +import { + applicationConfiguration, + AppConfig, +} from '@app-buyer/config/app.config'; +import { InjectionToken, NO_ERRORS_SCHEMA } from '@angular/core'; +import { Router } from '@angular/router'; +import { ToastrService } from 'ngx-toastr'; +import { AppStateService, AppFormErrorService } from '@app-buyer/shared'; +import { of, Subject } from 'rxjs'; + +describe('RegisterComponent', () => { + let component: RegisterComponent; + let fixture: ComponentFixture; + + const appStateService = { userSubject: new Subject() }; + const ocMeService = { + Register: jasmine.createSpy('Register').and.returnValue(of(null)), + }; + const toastrService = { success: jasmine.createSpy('success') }; + const tokenService = { + GetAccess: jasmine.createSpy('GetAccess').and.returnValue('mockToken'), + }; + const router = { navigate: jasmine.createSpy('navigate') }; + const formErrorService = { + hasRequiredError: jasmine.createSpy('hasRequiredError'), + hasInvalidEmailError: jasmine.createSpy('hasInvalidEmailError'), + hasPasswordMismatchError: jasmine.createSpy('hasPasswordMismatchError'), + hasStrongPasswordError: jasmine.createSpy('hasStrongPasswordError'), + displayFormErrors: jasmine.createSpy('displayFormErrors'), + hasPatternError: jasmine.createSpy('hasPatternError'), + }; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [RegisterComponent], + imports: [ReactiveFormsModule, CookieModule.forRoot()], + providers: [ + { provide: AppFormErrorService, useValue: formErrorService }, + { provide: Router, useValue: router }, + { provide: OcTokenService, useValue: tokenService }, + { provide: OcMeService, useValue: ocMeService }, + { provide: AppStateService, useValue: appStateService }, + { provide: ToastrService, useValue: toastrService }, + { + provide: applicationConfiguration, + useValue: new InjectionToken('app.config'), + }, + ], + schemas: [NO_ERRORS_SCHEMA], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RegisterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + describe('ngOnInit', () => { + beforeEach(() => { + spyOn(component as any, 'setForm'); + }); + it('should call setForm', () => { + component.ngOnInit(); + expect(component['setForm']).toHaveBeenCalled(); + }); + }); + + describe('setForm', () => { + it('should initialize form', () => { + component['setForm'](); + expect(component.form.value).toEqual({ + Username: '', + FirstName: '', + LastName: '', + Email: '', + Phone: '', + Password: '', + ConfirmPassword: '', + }); + }); + }); + + describe('onSubmit', () => { + it('should call displayFormErrors if form is invalid', () => { + component.form.controls.FirstName.setValue(''); + component['onSubmit'](); + expect(formErrorService.displayFormErrors).toHaveBeenCalled(); + }); + it('should call meService.Register', () => { + component.form.controls.Username.setValue('crhistianr'); + component.form.controls.FirstName.setValue('Crhistian'); + component.form.controls.LastName.setValue('Ramirez'); + component.form.controls.Email.setValue( + 'crhistian-rawks@my-little-pony.com' + ); + component.form.controls.Phone.setValue('555-555-5555'); + component.form.controls.Password.setValue('easyguess123'); + component.form.controls.ConfirmPassword.setValue('easyguess123'); + component['onSubmit'](); + const mockMe = component.form.value; + mockMe.Active = true; + expect(ocMeService.Register).toHaveBeenCalledWith('mockToken', mockMe); + }); + it('should navigate to login', () => { + component['onSubmit'](); + expect(router.navigate).toHaveBeenCalledWith(['/login']); + }); + }); +}); diff --git a/src/UI/Buyer/src/app/auth/containers/register/register.component.ts b/src/UI/Buyer/src/app/auth/containers/register/register.component.ts new file mode 100644 index 00000000..401b7eb6 --- /dev/null +++ b/src/UI/Buyer/src/app/auth/containers/register/register.component.ts @@ -0,0 +1,97 @@ +import { Component, OnInit, Inject, OnDestroy } from '@angular/core'; +import { FormGroup, FormBuilder, Validators } from '@angular/forms'; +import { Router } from '@angular/router'; +import { ToastrService } from 'ngx-toastr'; +import { OcMeService, OcTokenService, MeUser } from '@ordercloud/angular-sdk'; +import { + applicationConfiguration, + AppConfig, +} from '@app-buyer/config/app.config'; +import { AppFormErrorService } from '@app-buyer/shared/services/form-error/form-error.service'; +import { AppMatchFieldsValidator } from '@app-buyer/shared/validators/match-fields/match-fields.validator'; +import { RegexService } from '@app-buyer/shared/services/regex/regex.service'; + +@Component({ + selector: 'auth-register', + templateUrl: './register.component.html', + styleUrls: ['./register.component.scss'], +}) +export class RegisterComponent implements OnInit, OnDestroy { + form: FormGroup; + me: MeUser; + alive = true; + + constructor( + private formBuilder: FormBuilder, + private formErrorService: AppFormErrorService, + private ocMeService: OcMeService, + private ocTokenService: OcTokenService, + private router: Router, + private toastrService: ToastrService, + private regexService: RegexService, + @Inject(applicationConfiguration) protected appConfig: AppConfig + ) {} + + ngOnInit() { + this.setForm(); + } + + private setForm() { + this.form = this.formBuilder.group( + { + Username: ['', Validators.required], + FirstName: [ + '', + [ + Validators.required, + Validators.pattern(this.regexService.HumanName), + ], + ], + LastName: [ + '', + [ + Validators.required, + Validators.pattern(this.regexService.HumanName), + ], + ], + Email: ['', [Validators.required, Validators.email]], + Phone: ['', Validators.pattern(this.regexService.Phone)], + Password: ['', [Validators.required, Validators.minLength(8)]], + ConfirmPassword: ['', [Validators.required, Validators.minLength(8)]], + }, + { + validator: AppMatchFieldsValidator('Password', 'ConfirmPassword'), + } + ); + } + + onSubmit() { + if (this.form.status === 'INVALID') { + return this.formErrorService.displayFormErrors(this.form); + } + + const me = this.form.value; + me.Active = true; + + this.ocMeService + .Register(this.ocTokenService.GetAccess(), me) + .subscribe(() => { + this.toastrService.success('New User Created'); + this.router.navigate(['/login']); + }); + } + + ngOnDestroy() { + this.alive = false; + } + + // control display of error messages + protected hasRequiredError = (controlName: string): boolean => + this.formErrorService.hasRequiredError(controlName, this.form); + protected hasEmailError = (): boolean => + this.formErrorService.hasInvalidEmailError(this.form.get('Email')); + protected hasPatternError = (controlName: string) => + this.formErrorService.hasPatternError(controlName, this.form); + protected passwordMismatchError = (): boolean => + this.formErrorService.hasPasswordMismatchError(this.form); +} diff --git a/src/UI/Buyer/src/app/config/app.config.ts b/src/UI/Buyer/src/app/config/app.config.ts index 493e9164..c7c7838d 100644 --- a/src/UI/Buyer/src/app/config/app.config.ts +++ b/src/UI/Buyer/src/app/config/app.config.ts @@ -5,7 +5,7 @@ import { environment } from '../../environments/environment'; export const ocAppConfig: AppConfig = { appname: 'OrderCloud', clientID: environment.clientID, - anonymousShoppingEnabled: false, + anonymousShoppingEnabled: true, premiumSearchEnabled: false, middlewareUrl: environment.middlewareUrl, scope: [ diff --git a/src/UI/Buyer/src/app/shared/components/change-password-form/change-password-form.component.html b/src/UI/Buyer/src/app/profile/components/change-password-form/change-password-form.component.html similarity index 100% rename from src/UI/Buyer/src/app/shared/components/change-password-form/change-password-form.component.html rename to src/UI/Buyer/src/app/profile/components/change-password-form/change-password-form.component.html diff --git a/src/UI/Buyer/src/app/shared/components/change-password-form/change-password-form.component.scss b/src/UI/Buyer/src/app/profile/components/change-password-form/change-password-form.component.scss similarity index 100% rename from src/UI/Buyer/src/app/shared/components/change-password-form/change-password-form.component.scss rename to src/UI/Buyer/src/app/profile/components/change-password-form/change-password-form.component.scss diff --git a/src/UI/Buyer/src/app/shared/components/change-password-form/change-password-form.component.spec.ts b/src/UI/Buyer/src/app/profile/components/change-password-form/change-password-form.component.spec.ts similarity index 100% rename from src/UI/Buyer/src/app/shared/components/change-password-form/change-password-form.component.spec.ts rename to src/UI/Buyer/src/app/profile/components/change-password-form/change-password-form.component.spec.ts diff --git a/src/UI/Buyer/src/app/shared/components/change-password-form/change-password-form.component.ts b/src/UI/Buyer/src/app/profile/components/change-password-form/change-password-form.component.ts similarity index 98% rename from src/UI/Buyer/src/app/shared/components/change-password-form/change-password-form.component.ts rename to src/UI/Buyer/src/app/profile/components/change-password-form/change-password-form.component.ts index 2b4c4446..e6c42b2a 100644 --- a/src/UI/Buyer/src/app/shared/components/change-password-form/change-password-form.component.ts +++ b/src/UI/Buyer/src/app/profile/components/change-password-form/change-password-form.component.ts @@ -7,7 +7,7 @@ import { MeUser } from '@ordercloud/angular-sdk'; import { ValidateStrongPassword } from '@app-buyer/shared/validators/strong-password/strong-password.validator'; @Component({ - selector: 'shared-change-password-form', + selector: 'profile-change-password-form', templateUrl: './change-password-form.component.html', styleUrls: ['./change-password-form.component.scss'], }) diff --git a/src/UI/Buyer/src/app/profile/containers/me-update/me-update.component.html b/src/UI/Buyer/src/app/profile/containers/me-update/me-update.component.html new file mode 100644 index 00000000..48f570db --- /dev/null +++ b/src/UI/Buyer/src/app/profile/containers/me-update/me-update.component.html @@ -0,0 +1,83 @@ +

Account Details

+
+
+
+
+ + + Username is required +
+
+ + + First Name is required + Name can only contain characters Aa-Zz 0-9 - ' . +
+
+ + + Last Name is required + Name can only contain characters Aa-Zz 0-9 - ' . +
+
+ + + Please enter a valid email +
+
+ + + Phone can only contain 20 numbers or "-" chars (no spaces) +
+ + +
+
+
+ + + + + \ No newline at end of file diff --git a/src/UI/Buyer/src/app/profile/containers/me-update/me-update.component.scss b/src/UI/Buyer/src/app/profile/containers/me-update/me-update.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/UI/Buyer/src/app/shared/containers/register/register.component.spec.ts b/src/UI/Buyer/src/app/profile/containers/me-update/me-update.component.spec.ts similarity index 59% rename from src/UI/Buyer/src/app/shared/containers/register/register.component.spec.ts rename to src/UI/Buyer/src/app/profile/containers/me-update/me-update.component.spec.ts index 22f2af63..9dd0326f 100644 --- a/src/UI/Buyer/src/app/shared/containers/register/register.component.spec.ts +++ b/src/UI/Buyer/src/app/profile/containers/me-update/me-update.component.spec.ts @@ -1,5 +1,5 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { RegisterComponent } from '@app-buyer/shared/containers/register/register.component'; +import { MeUpdateComponent } from '@app-buyer/profile/containers/me-update/me-update.component'; import { ReactiveFormsModule } from '@angular/forms'; import { OcMeService, @@ -12,15 +12,15 @@ import { AppConfig, } from '@app-buyer/config/app.config'; import { InjectionToken, NO_ERRORS_SCHEMA } from '@angular/core'; -import { Router, ActivatedRoute } from '@angular/router'; +import { Router } from '@angular/router'; import { ToastrService } from 'ngx-toastr'; import { AppStateService, AppFormErrorService } from '@app-buyer/shared'; -import { of, Subject, BehaviorSubject } from 'rxjs'; +import { of, Subject } from 'rxjs'; import { ModalService } from '@app-buyer/shared/services/modal/modal.service'; -describe('RegisterComponent', () => { - let component: RegisterComponent; - let fixture: ComponentFixture; +describe('MeUpdateComponent', () => { + let component: MeUpdateComponent; + let fixture: ComponentFixture; const appStateService = { userSubject: new Subject() }; const me = { @@ -29,18 +29,6 @@ describe('RegisterComponent', () => { LastName: 'Ramirez', Email: 'crhistian@gmail.com', Phone: '555-555-5555', - xp: { - age: '27', - zip: '55418', - getNewsletter: false, - interestedIn: { - guitars: true, - percussion: false, - band: true, - keyboards: true, - proSound: false, - }, - }, }; const ocMeService = { Get: jasmine.createSpy('Get').and.returnValue(of(me)), @@ -50,9 +38,6 @@ describe('RegisterComponent', () => { .createSpy('ResetPasswordByToken') .and.returnValue(of(null)), }; - const activatedRoute = { - data: new BehaviorSubject({ shouldAllowUpdate: true }), - }; const toastrService = { success: jasmine.createSpy('success') }; const tokenService = { GetAccess: jasmine.createSpy('GetAccess').and.returnValue('mockToken'), @@ -79,14 +64,13 @@ describe('RegisterComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [RegisterComponent], + declarations: [MeUpdateComponent], imports: [ReactiveFormsModule, CookieModule.forRoot()], providers: [ { provide: AppFormErrorService, useValue: formErrorService }, { provide: Router, useValue: router }, { provide: OcTokenService, useValue: tokenService }, { provide: OcMeService, useValue: ocMeService }, - { provide: ActivatedRoute, useValue: activatedRoute }, { provide: AppStateService, useValue: appStateService }, { provide: ToastrService, useValue: toastrService }, { provide: ModalService, useValue: modalService }, @@ -102,7 +86,7 @@ describe('RegisterComponent', () => { })); beforeEach(() => { - fixture = TestBed.createComponent(RegisterComponent); + fixture = TestBed.createComponent(MeUpdateComponent); component = fixture.componentInstance; fixture.detectChanges(); }); @@ -115,56 +99,19 @@ describe('RegisterComponent', () => { beforeEach(() => { spyOn(component as any, 'setForm'); spyOn(component as any, 'getMeData'); - spyOn(component as any, 'identifyShouldAllowUpdate'); }); it('should call setForm', () => { component.ngOnInit(); expect(component['setForm']).toHaveBeenCalled(); }); - it('should identify whether component should allow update or just creation', () => { - component.ngOnInit(); - expect(component['identifyShouldAllowUpdate']).toHaveBeenCalled(); - }); - it('should call getMeData if shouldAllowUpdate is true', () => { - activatedRoute.data.next({ shouldAllowUpdate: true }); + it('should call getMeData', () => { component.ngOnInit(); expect(component['getMeData']).toHaveBeenCalled(); }); - it('should not call getMeDate if shouldAllowUpdate is false', () => { - activatedRoute.data.next({ shouldAllowUpdate: false }); - component.ngOnInit(); - expect(component['getMeData']).not.toHaveBeenCalled(); - }); - }); - - describe('openChangePasswordModal', () => { - let mockModalId; - beforeEach(() => { - mockModalId = 'mock id'; - component.changePasswordModalId = mockModalId; - component.openChangePasswordModal(); - }); - it('should open modal', () => { - expect(modalService.open).toHaveBeenCalledWith(mockModalId); - }); }); describe('setForm', () => { - it('should set form with password and confirmPassword if shouldAllowUpdate is false', () => { - component.shouldAllowUpdate = false; - component['setForm'](); - expect(component.form.value).toEqual({ - Username: '', - FirstName: '', - LastName: '', - Email: '', - Phone: '', - Password: '', - ConfirmPassword: '', - }); - }); - it('should set form without password and confirmPassword if shouldAllowUpdate is true', () => { - component.shouldAllowUpdate = true; + it('should initialize form', () => { component['setForm'](); expect(component.form.value).toEqual({ Username: '', @@ -220,48 +167,29 @@ describe('RegisterComponent', () => { }); describe('onSubmit', () => { - beforeEach(() => { - activatedRoute.data.next({ shouldAllowUpdate: true }); - }); + beforeEach(() => {}); it('should call displayFormErrors if form is invalid', () => { component.form.controls.FirstName.setValue(''); component['onSubmit'](); expect(formErrorService.displayFormErrors).toHaveBeenCalled(); }); - it('should call update if shouldAllowUpdate is true', () => { - activatedRoute.data.next({ shouldAllowUpdate: true }); - spyOn(component as any, 'update'); - component['onSubmit'](); - expect(component['update']).toHaveBeenCalled(); - }); - it('should call register if shouldAllowUpdate is false', () => { - activatedRoute.data.next({ shouldAllowUpdate: false }); - spyOn(component as any, 'register'); - component['onSubmit'](); - expect(component['register']).toHaveBeenCalled(); - }); - }); - - describe('register', () => { - const mockMe = { ID: 'NewUser' }; - beforeEach(() => { - component['register'](mockMe); - }); - it('should call meService.Register', () => { - expect(ocMeService.Register).toHaveBeenCalledWith('mockToken', mockMe); - }); - it('should navigate to login', () => { - expect(router.navigate).toHaveBeenCalledWith(['/login']); - }); - }); - - describe('update', () => { - const mockMe = { ID: 'NewUser' }; - beforeEach(() => { - component['update'](mockMe); - }); it('should call meService.Patch', () => { - expect(ocMeService.Patch).toHaveBeenCalledWith(mockMe); + component.form.controls.Username.setValue('crhistianr'); + component.form.controls.FirstName.setValue('Crhistian'); + component.form.controls.LastName.setValue('Ramirez'); + component.form.controls.Phone.setValue('5555555555'); + component.form.controls.Email.setValue( + 'crhistian-rawks@my-little-pony.com' + ); + component['onSubmit'](); + expect(ocMeService.Patch).toHaveBeenCalledWith({ + Username: 'crhistianr', + FirstName: 'Crhistian', + LastName: 'Ramirez', + Phone: '5555555555', + Email: 'crhistian-rawks@my-little-pony.com', + Active: true, + }); }); }); @@ -283,27 +211,4 @@ describe('RegisterComponent', () => { }); }); }); - - describe('hasRequiredError', () => { - beforeEach(() => { - component['hasRequiredError']('firstName'); - }); - it('should call formErrorService.hasRequiredError', () => { - expect(formErrorService.hasRequiredError).toHaveBeenCalledWith( - 'firstName', - component.form - ); - }); - }); - - describe('passwordMismatchError', () => { - beforeEach(() => { - component['passwordMismatchError'](); - }); - it('should call formErrorService.hasRequiredError', () => { - expect(formErrorService.hasPasswordMismatchError).toHaveBeenCalledWith( - component.form - ); - }); - }); }); diff --git a/src/UI/Buyer/src/app/shared/containers/register/register.component.ts b/src/UI/Buyer/src/app/profile/containers/me-update/me-update.component.ts similarity index 57% rename from src/UI/Buyer/src/app/shared/containers/register/register.component.ts rename to src/UI/Buyer/src/app/profile/containers/me-update/me-update.component.ts index d38d9f0e..c3233e89 100644 --- a/src/UI/Buyer/src/app/shared/containers/register/register.component.ts +++ b/src/UI/Buyer/src/app/profile/containers/me-update/me-update.component.ts @@ -1,84 +1,47 @@ import { Component, OnInit, Inject, OnDestroy } from '@angular/core'; import { FormGroup, FormBuilder, Validators } from '@angular/forms'; -import { Router, ActivatedRoute } from '@angular/router'; import { ToastrService } from 'ngx-toastr'; -import { - OcMeService, - OcTokenService, - MeUser, - OcAuthService, -} from '@ordercloud/angular-sdk'; -import { tap, takeWhile, flatMap } from 'rxjs/operators'; +import { OcMeService, MeUser, OcAuthService } from '@ordercloud/angular-sdk'; +import { flatMap } from 'rxjs/operators'; import { applicationConfiguration, AppConfig, } from '@app-buyer/config/app.config'; import { AppStateService } from '@app-buyer/shared/services/app-state/app-state.service'; import { AppFormErrorService } from '@app-buyer/shared/services/form-error/form-error.service'; -import { AppMatchFieldsValidator } from '@app-buyer/shared/validators/match-fields/match-fields.validator'; import { ModalService } from '@app-buyer/shared/services/modal/modal.service'; import { RegexService } from '@app-buyer/shared/services/regex/regex.service'; @Component({ - selector: 'shared-register', - templateUrl: './register.component.html', - styleUrls: ['./register.component.scss'], + selector: 'profile-meupdate', + templateUrl: './me-update.component.html', + styleUrls: ['./me-update.component.scss'], }) -export class RegisterComponent implements OnInit, OnDestroy { +export class MeUpdateComponent implements OnInit, OnDestroy { form: FormGroup; me: MeUser; alive = true; - appName: string; - shouldAllowUpdate: boolean; changePasswordModalId = 'forgotPasswordModal'; constructor( - private activatedRoute: ActivatedRoute, private appStateService: AppStateService, private formBuilder: FormBuilder, private formErrorService: AppFormErrorService, private modalService: ModalService, private ocAuthService: OcAuthService, private ocMeService: OcMeService, - private ocTokenService: OcTokenService, - private router: Router, private toastrService: ToastrService, private regexService: RegexService, - @Inject(applicationConfiguration) private appConfig: AppConfig - ) { - this.appName = this.appConfig.appname; - } + @Inject(applicationConfiguration) protected appConfig: AppConfig + ) {} ngOnInit() { - this.identifyShouldAllowUpdate(); this.setForm(); - if (this.shouldAllowUpdate) { - this.getMeData(); - } - } - - private identifyShouldAllowUpdate() { - /** - * this component is used in two places: - * in auth when first registering (!shouldAllowUpdate) - * in profile when editing current user (shouldAllowUpdate) - */ - this.activatedRoute.data - .pipe( - takeWhile(() => this.alive), - tap(({ shouldAllowUpdate }) => { - this.shouldAllowUpdate = shouldAllowUpdate; - }) - ) - .subscribe(); - } - - openChangePasswordModal() { - this.modalService.open(this.changePasswordModalId); + this.getMeData(); } private setForm() { - const formObj = { + this.form = this.formBuilder.group({ Username: ['', Validators.required], FirstName: [ '', @@ -90,18 +53,7 @@ export class RegisterComponent implements OnInit, OnDestroy { ], Email: ['', [Validators.required, Validators.email]], Phone: ['', Validators.pattern(this.regexService.Phone)], - }; - - const validatorObj = this.shouldAllowUpdate - ? {} - : { validator: AppMatchFieldsValidator('Password', 'ConfirmPassword') }; - if (!this.shouldAllowUpdate) { - Object.assign(formObj, { - Password: ['', [Validators.required, Validators.minLength(8)]], - ConfirmPassword: ['', [Validators.required, Validators.minLength(8)]], - }); - } - this.form = this.formBuilder.group(formObj, validatorObj); + }); } onChangePassword({ currentPassword, newPassword }) { @@ -113,11 +65,11 @@ export class RegisterComponent implements OnInit, OnDestroy { this.appConfig.scope ) .pipe( - flatMap(() => { - return this.ocMeService.ResetPasswordByToken({ + flatMap(() => + this.ocMeService.ResetPasswordByToken({ NewPassword: newPassword, - }); - }) + }) + ) ) .subscribe(() => { this.toastrService.success('Account Info Updated', 'Success'); @@ -133,23 +85,6 @@ export class RegisterComponent implements OnInit, OnDestroy { const me = this.form.value; me.Active = true; - if (this.shouldAllowUpdate) { - this.update(me); - } else { - this.register(me); - } - } - - private register(me) { - this.ocMeService - .Register(this.ocTokenService.GetAccess(), me) - .subscribe(() => { - this.toastrService.success('New User Created'); - this.router.navigate(['/login']); - }); - } - - private update(me) { this.ocMeService.Patch(me).subscribe((res) => { this.appStateService.userSubject.next(res); this.toastrService.success('Account Info Updated'); diff --git a/src/UI/Buyer/src/app/profile/profile-routing.module.ts b/src/UI/Buyer/src/app/profile/profile-routing.module.ts index a4f4f379..b82463fc 100644 --- a/src/UI/Buyer/src/app/profile/profile-routing.module.ts +++ b/src/UI/Buyer/src/app/profile/profile-routing.module.ts @@ -4,7 +4,7 @@ import { RouterModule, Routes } from '@angular/router'; import { ProfileComponent } from '@app-buyer/profile/containers/profile/profile.component'; import { AddressListComponent } from '@app-buyer/profile/containers/address-list/address-list.component'; -import { RegisterComponent } from '@app-buyer/shared/containers/register/register.component'; +import { MeUpdateComponent } from '@app-buyer/profile/containers/me-update/me-update.component'; import { PaymentListComponent } from '@app-buyer/profile/containers/payment-list/payment-list.component'; const routes: Routes = [ @@ -13,11 +13,7 @@ const routes: Routes = [ component: ProfileComponent, children: [ { path: '', redirectTo: 'details' }, - { - path: 'details', - component: RegisterComponent, - data: { shouldAllowUpdate: true }, - }, + { path: 'details', component: MeUpdateComponent }, { path: 'addresses', component: AddressListComponent }, { path: 'payment-methods', component: PaymentListComponent }, { path: 'orders', loadChildren: '../order/order.module#OrderModule' }, diff --git a/src/UI/Buyer/src/app/profile/profile.module.ts b/src/UI/Buyer/src/app/profile/profile.module.ts index ebdc847a..ae16d971 100644 --- a/src/UI/Buyer/src/app/profile/profile.module.ts +++ b/src/UI/Buyer/src/app/profile/profile.module.ts @@ -5,9 +5,17 @@ import { ProfileRoutingModule } from '@app-buyer/profile/profile-routing.module' import { ProfileComponent } from '@app-buyer/profile/containers/profile/profile.component'; import { AddressListComponent } from '@app-buyer/profile/containers/address-list/address-list.component'; import { PaymentListComponent } from '@app-buyer/profile/containers/payment-list/payment-list.component'; +import { MeUpdateComponent } from './containers/me-update/me-update.component'; +import { ChangePasswordFormComponent } from './components/change-password-form/change-password-form.component'; @NgModule({ imports: [SharedModule, ProfileRoutingModule], - declarations: [ProfileComponent, AddressListComponent, PaymentListComponent], + declarations: [ + ProfileComponent, + AddressListComponent, + PaymentListComponent, + MeUpdateComponent, + ChangePasswordFormComponent, + ], }) export class ProfileModule {} diff --git a/src/UI/Buyer/src/app/shared/index.ts b/src/UI/Buyer/src/app/shared/index.ts index bb687602..ec2bfe4a 100644 --- a/src/UI/Buyer/src/app/shared/index.ts +++ b/src/UI/Buyer/src/app/shared/index.ts @@ -1,5 +1,4 @@ // components -export * from '@app-buyer/shared/containers/register/register.component'; export * from '@app-buyer/shared/components/page-title/page-title.component'; // models diff --git a/src/UI/Buyer/src/app/shared/shared.module.ts b/src/UI/Buyer/src/app/shared/shared.module.ts index 5eff6847..42f2b888 100644 --- a/src/UI/Buyer/src/app/shared/shared.module.ts +++ b/src/UI/Buyer/src/app/shared/shared.module.ts @@ -42,7 +42,6 @@ import { LineItemCardComponent } from '@app-buyer/shared/components/line-item-ca import { LineItemListWrapperComponent } from '@app-buyer/shared/components/lineitem-list-wrapper/lineitem-list-wrapper.component'; // containers -import { RegisterComponent } from '@app-buyer/shared/containers/register/register.component'; import { ShipperTrackingPipe, ShipperTrackingSupportedPipe, @@ -58,7 +57,6 @@ import { ResetDirective, } from '@app-buyer/shared/components/modal/modal.component'; import { OrderPaymentListComponent } from '@app-buyer/shared/components/payment-list/order-payment-list.component'; -import { ChangePasswordFormComponent } from '@app-buyer/shared/components/change-password-form/change-password-form.component'; import { NoResultsComponent } from './components/no-results/no-results.component'; @NgModule({ @@ -110,7 +108,6 @@ import { NoResultsComponent } from './components/no-results/no-results.component NoResultsComponent, SearchComponent, - RegisterComponent, PageTitleComponent, OrderStatusDisplayPipe, PaymentMethodDisplayPipe, @@ -135,8 +132,6 @@ import { NoResultsComponent } from './components/no-results/no-results.component OrderPaymentListComponent, ], declarations: [ - ChangePasswordFormComponent, - RegisterComponent, OrderStatusDisplayPipe, PaymentMethodDisplayPipe, MapToIterablePipe, diff --git a/src/UI/Buyer/src/environments/environment.ts b/src/UI/Buyer/src/environments/environment.ts index bee9d8bb..348df95e 100644 --- a/src/UI/Buyer/src/environments/environment.ts +++ b/src/UI/Buyer/src/environments/environment.ts @@ -4,6 +4,6 @@ export const environment = { production: false, - clientID: '73FDFC1E-6FD5-4AFA-8751-C42C5CF47B57', + clientID: 'E955D6EC-59C8-4442-948E-16CCC5FD27AE', middlewareUrl: 'my-middleware-url.com/api', };