Skip to content

Commit

Permalink
Merge pull request #459 from MauroDataMapper/feature/gh-442-user-regi…
Browse files Browse the repository at this point in the history 
…stration-page

gh-442 - create user registration page
  • Loading branch information
@NigelPalmer
NigelPalmer authored Jan 15, 2025
2 parents c2bff3b + 422b4c4 commit fbf94c8
Show file tree
Hide file tree
Showing 11 changed files with 844 additions and 0 deletions.
2 changes: 2 additions & 0 deletions src/app/pages/pages.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ import { TemplateDataSpecificationDetailComponent } from './template-data-specif
import { SdeMainComponent } from './sde-main/sde-main.component';
import { SecureDataEnvironmentModule } from '../secure-data-environment/secure-data-environment.module';
import { SdeAuthenticationFinalizeComponent } from './sde-authentication-finalize/sde-authentication-finalize.component';
import { UserRegistrationComponent } from './user-registration/user-registration.component';

@NgModule({
declarations: [
Expand All @@ -60,6 +61,7 @@ import { SdeAuthenticationFinalizeComponent } from './sde-authentication-finaliz
ServerErrorComponent,
MyBookmarksComponent,
SignInComponent,
UserRegistrationComponent,
ForgotPasswordComponent,
StaticContentComponent,
BrowseComponent,
Expand Down
5 changes: 5 additions & 0 deletions src/app/pages/pages.routes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ import { TemplateDataSpecificationsComponent } from './template-data-specificati
import { TemplateDataSpecificationDetailComponent } from './template-data-specification-detail/template-data-specification-detail.component';
import { SdeMainComponent } from './sde-main/sde-main.component';
import { SdeAuthenticationFinalizeComponent } from './sde-authentication-finalize/sde-authentication-finalize.component';
import { UserRegistrationComponent } from './user-registration/user-registration.component';

export const buildStaticContentRoute = (path: string, staticAssetPath: string): Route => {
return {
Expand Down Expand Up @@ -114,6 +115,10 @@ export const routes: Route[] = [
path: 'sign-in',
component: SignInComponent,
},
{
path: 'user-registration',
component: UserRegistrationComponent,
},
{
path: 'forgot-password',
component: ForgotPasswordComponent,
Expand Down
5 changes: 5 additions & 0 deletions src/app/pages/sign-in/sign-in.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,11 @@ <h1>Sign in</h1>
(openIdConnectClicked)="authenticateWithOpenIdConnect($event)"
>
</mdm-sign-in-form>
<hr />
<h3>New to the Secure Data Environment User Portal?</h3>
<button type="button" mat-stroked-button color="primary" routerLink="/user-registration">
Create your Secure Data Environment User Portal account
</button>
</div>
</div>
</div>
352 changes: 352 additions & 0 deletions src/app/pages/user-registration/user-registration-form/user-registration-form.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,352 @@
<!--
Copyright 2022-2023 University of Oxford
and Health and Social Care Information Centre, also known as NHS Digital
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
SPDX-License-Identifier: Apache-2.0
-->
<h2>Personal details</h2>
<form
[formGroup]="registrationForm"
(submit)="submit()"
role="form"
autocomplete="on"
name="contactForm"
>
<div formGroupName="personalDetails">
<div class="row">
<div class="col-md-6">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>First name</mat-label>
<input
matInput
type="text"
name="firstName"
formControlName="firstName"
autocomplete="on"
/>
<mat-error *ngIf="personalDetails.firstName?.errors?.required">
First name is required
</mat-error>
</mat-form-field>
</div>
<div class="col-md-6">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>Last name</mat-label>
<input
matInput
type="text"
name="lastName"
formControlName="lastName"
autocomplete="on"
/>
<mat-error *ngIf="personalDetails.lastName?.errors?.required">
Last name is required
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>Email</mat-label>
<input matInput type="email" name="email" formControlName="email" autocomplete="on" />
<mat-error *ngIf="personalDetails.email?.errors?.required">
Email is required
</mat-error>
<mat-error *ngIf="personalDetails.email?.errors?.email">
Please enter a valid email address
</mat-error>
</mat-form-field>
</div>
</div>
<div class="col-md-6">
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>Phone number</mat-label>
<input
matInput
type="tel"
name="phoneNumber"
formControlName="phoneNumber"
autocomplete="on"
/>
<mat-error *ngIf="personalDetails.phoneNumber?.errors?.required">
Phone number is required
</mat-error>
</mat-form-field>
</div>
</div>
</div>
<div class="row">
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>Job Title</mat-label>
<input
matInput
type="text"
name="jobTitle"
formControlName="jobTitle"
autocomplete="on"
/>
<mat-error *ngIf="personalDetails.jobTitle.errors?.required">
Job title is required
</mat-error>
</mat-form-field>
</div>
</div>
<h2>Licenses and Accreditations</h2>
<div class="row">
<div class="col-md-6">
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>ORCID Id</mat-label>
<input
matInput
type="text"
name="orcidId"
formControlName="orcidId"
autocomplete="on"
/>
<mat-error *ngIf="personalDetails.orcidId.errors?.required">
OrcidId is required
</mat-error>
</mat-form-field>
</div>
</div>
<div class="col-md-6">
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>GMC Number</mat-label>
<input
matInput
type="text"
name="gmcNumber"
formControlName="gmcNumber"
autocomplete="on"
/>
<mat-error *ngIf="personalDetails.gmcNumber.errors?.required">
GMC Number is required
</mat-error>
</mat-form-field>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>NMC Number</mat-label>
<input
matInput
type="text"
name="nmcNumber"
formControlName="nmcNumber"
autocomplete="on"
/>
<mat-error *ngIf="personalDetails.nmcNumber.errors?.required">
NMC Number is required
</mat-error>
</mat-form-field>
</div>
</div>
<div class="col-md-6">
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>HCPC Number</mat-label>
<input
matInput
type="text"
name="hcpcNumber"
formControlName="hcpcNumber"
autocomplete="on"
/>
<mat-error *ngIf="personalDetails.hcpcNumber.errors?.required">
HCPC Number is required
</mat-error>
</mat-form-field>
</div>
</div>
</div>
<div class="row">
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>AR Number</mat-label>
<input
matInput
type="text"
name="arNumber"
formControlName="arNumber"
autocomplete="on"
/>
<mat-error *ngIf="personalDetails.arNumber.errors?.required">
AR Number is required
</mat-error>
</mat-form-field>
</div>
</div>
</div>

<!-- Organisation section -->
<h2>Organisation</h2>
<p>Would you like to join an existing organisation or create a new one?</p>
<div class="mb-lg-3">
<mat-radio-group
[value]="isCreatingNewOrganisation"
(change)="toggleOrganisationCreation($event.value)"
>
<div class="row">
<div class="col text-left">
<mat-radio-button [value]="false">Join existing organisation</mat-radio-button>
</div>
<div class="col text-right">
<mat-radio-button [value]="true">Create new organisation</mat-radio-button>
</div>
</div>
</mat-radio-group>
</div>

<div formGroupName="organisationDetails">
<div *ngIf="!isCreatingNewOrganisation">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>Organisation</mat-label>
<mat-select
formControlName="organisation"
(selectionChange)="onOrganisationChange($event)"
required
>
<mat-option *ngFor="let option of organisationOptions" [value]="option">
{{ option.displayValue }}
</mat-option>
</mat-select>
<mat-error *ngIf="organisationDetails.organisation.errors?.required"
>Organisation is required</mat-error
>
</mat-form-field>
</div>

<div *ngIf="isCreatingNewOrganisation">
<div class="row">
<div class="col-md-6">
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>Organisation Name</mat-label>
<input matInput type="text" formControlName="organisationFriendlyName" required />
<mat-error *ngIf="organisationDetails.organisationFriendlyName.errors?.required"
>Organisation name is required</mat-error
>
</mat-form-field>
</div>
</div>
<div class="col-md-6">
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>Organisation Legal Name</mat-label>
<input matInput type="text" formControlName="organisationLegalName" required />
<mat-error *ngIf="organisationDetails.organisationLegalName.errors?.required"
>Organisation legal name is required</mat-error
>
</mat-form-field>
</div>
</div>
</div>

<div class="row">
<div class="col-md-6">
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>Website</mat-label>
<input matInput type="url" formControlName="organisationWebsite" required />
<mat-error *ngIf="organisationDetails.organisationWebsite.errors?.required"
>Website is required</mat-error
>
</mat-form-field>
</div>
</div>
<div class="col-md-6">
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>Organisations country of origin</mat-label>
<input
matInput
type="text"
formControlName="organisationCountryOfRegistration"
required
/>
<mat-error
*ngIf="organisationDetails.organisationCountryOfRegistration.errors?.required"
>Country of origin is required</mat-error
>
</mat-form-field>
</div>
</div>
</div>
<div class="form-input">
<mat-form-field [appearance]="formFieldAppearance">
<mat-label>Organisation Type</mat-label>
<mat-select formControlName="organisationType">
<mat-option *ngFor="let type of organisationTypeOptions" [value]="type.value">
{{ type.displayName }}
</mat-option>
</mat-select>
<mat-error *ngIf="organisationDetails.organisationType.errors?.required"
>Organisation type is required</mat-error
>
</mat-form-field>
</div>
<div class="form-input mb-2">
<mat-checkbox formControlName="organisationIsSmb"
>Does your company have Small/Medium Business status?</mat-checkbox
>
</div>
</div>
</div>

<!-- Organisation section -->
<h2>Department</h2>
<p *ngIf="isCreatingNewOrganisation">
Every organisation must have at least one department, please enter the name of the department at
your organisation that you would like to be affiliated with.
</p>
<p *ngIf="!isCreatingNewOrganisation">Please select which department you would like to join.</p>
<div formGroupName="departmentDetails">
<mat-form-field *ngIf="isCreatingNewOrganisation" [appearance]="formFieldAppearance">
<mat-label>Department Name</mat-label>
<input matInput formControlName="departmentName" />
<mat-error *ngIf="departmentDetails.departmentName.invalid"
>Department Name is required</mat-error
>
</mat-form-field>
<mat-form-field *ngIf="!isCreatingNewOrganisation" [appearance]="formFieldAppearance">
<mat-label>Department</mat-label>
<mat-select formControlName="department">
<mat-option *ngFor="let department of departmentOptions" [value]="department">
{{ department.displayValue }}
</mat-option>
</mat-select>
<mat-error *ngIf="departmentDetails.department.invalid">Department is required</mat-error>
</mat-form-field>
</div>

<div class="form-submit">
<button mat-flat-button color="primary" type="submit" class="button-wide">
<!-- [disabled]="state === 'sending' || registrationForm.invalid" -->
Request account
</button>
</div>
<!-- <div *ngIf="state === 'sending'" class="form-working">
<mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
</div> -->
</form>
Loading

0 comments on commit fbf94c8

Please sign in to comment.