Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

gh-442 - create user registration page #459

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

gh-442 - create user registration page #459

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9d36c21
gh-442 - implement user registration page.
abwilson23 Sep 30, 2024
462e880
gh-442: Updated wording to match branding changes
NigelPalmer Oct 11, 2024
1e50d43
gh-442 - update registration page with new properties
abwilson23 Nov 21, 2024
96432ae
Merge branch 'develop' into feature/gh-442-user-registration-page
abwilson23 Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/app/pages/pages.module.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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>
342 changes: 342 additions & 0 deletions src/app/pages/user-registration/user-registration-form/user-registration-form.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,342 @@
<!--
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" required>
<mat-option *ngFor="let option of organisationOptions" [value]="option.value">
{{ 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="organisationName" required />
<mat-error *ngIf="organisationDetails.organisationName.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="organisationCountryOfOrigin" required />
<mat-error *ngIf="organisationDetails.organisationCountryOfOrigin.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 mockedDepartments" [value]="department.value">
{{ 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
Loading