Skip to content

Commit

Permalink
Merge pull request #2330 from ORCID/lmendoza/update-inst-signin
Browse files Browse the repository at this point in the history 
update-inst-signin
  • Loading branch information
@leomendoza123
leomendoza123 authored Aug 27, 2024
2 parents a8e1f55 + 1ea6ad3 commit 1d83213
Show file tree
Hide file tree
Showing 21 changed files with 652 additions and 226 deletions.
3 changes: 1 addition & 2 deletions src/app/cdk/platform-info/browserlist.regexp.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,2 @@
// tslint:disable-next-line: max-line-length
export const BROWSERLIST_REGEXP =
/((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(13[_.]4|13[_.]([5-9]|\d{2,})|13[_.]7|13[_.]([8-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})[_.]\d+|14[_.]0|14[_.]([1-9]|\d{2,})|14[_.]4|14[_.]([5-9]|\d{2,})|14[_.]8|14[_.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_.]\d+|15[_.]0|15[_.]([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_.]\d+|16[_.]0|16[_.]([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})[_.]\d+|17[_.]0|17[_.]([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})[_.]\d+)(?:[_.]\d+)?)|((?:Chrome).*OPR\/(74|(7[5-9]|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Edge\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))(?:\.\d+)?)|((Chromium|Chrome)\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))\.\d+(?:\.\d+)?)|(Version\/(13\.1|13\.([2-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+|14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+|16\.0|16\.([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})\.\d+|17\.0|17\.([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)? Safari\/)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+(pre|[ab]\d+[a-z]*)?)/
export const BROWSERLIST_REGEXP = /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(13[_.]4|13[_.]([5-9]|\d{2,})|13[_.]7|13[_.]([8-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})[_.]\d+|14[_.]0|14[_.]([1-9]|\d{2,})|14[_.]4|14[_.]([5-9]|\d{2,})|14[_.]8|14[_.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_.]\d+|15[_.]0|15[_.]([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_.]\d+|16[_.]0|16[_.]([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})[_.]\d+|17[_.]0|17[_.]([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})[_.]\d+)(?:[_.]\d+)?)|((?:Chrome).*OPR\/(74|(7[5-9]|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Edge\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))(?:\.\d+)?)|((Chromium|Chrome)\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))\.\d+(?:\.\d+)?)|(Version\/(13\.1|13\.([2-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+|14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+|16\.0|16\.([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})\.\d+|17\.0|17\.([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)? Safari\/)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+(pre|[ab]\d+[a-z]*)?)/
2 changes: 2 additions & 0 deletions src/app/institutional/institutional.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/lega
import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar'
import { InstitutionalRoutingModule } from './institutional-routing.module'
import { A11yLinkModule } from '../cdk/a11y-link/a11y-link.module'
import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner'

@NgModule({
declarations: [InstitutionalComponent],
Expand All @@ -25,6 +26,7 @@ import { A11yLinkModule } from '../cdk/a11y-link/a11y-link.module'
MatProgressBarModule,
InstitutionalRoutingModule,
A11yLinkModule,
MatProgressSpinnerModule
],
})
export class InstitutionalModule {}
190 changes: 132 additions & 58 deletions src/app/institutional/pages/institutional/institutional.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,69 +8,120 @@
mode="indeterminate"
></mat-progress-bar>
<mat-card-header>
<mat-card-title i18n="@@institutional.title"
>Access through your institution
<mat-card-title class="header-container">
<div class="icon">
<img
src="assets/vectors/institutional-generic-logo.svg"
role="presentation"
/>
<img
class="arrow-icon"
src="assets/vectors/translucent-arrow.svg"
role="presentation"
/>
<img
src="assets/vectors/orcid.logo.icon.svg"
alt=""
role="presentation"
/>
</div>
<h1 i18n="@@institutional.title" class="orc-font-heading-small">
Access through your institution
</h1>
<a
class="mat-button-font institution-name-link underline"
(click)="back()"
i18n="@@institutional.signWithEmailid"
>
Sign in with email/iD and password
</a>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<form [formGroup]="institutionalForm" (ngSubmit)="onSubmit()">
<div class="form-container">
<p class="mat-body-1">
<p class="mat-body-1 first-paragrapah">
<ng-container i18n="@@institutional.account">
You may sign into the ORCID Registry using institutional
You may sign in to the ORCID Registry using institutional
accounts you already have, like one from your university. If
you don't already have an ORCID iD, you will be prompted to
create one.
you don’t have an ORCID iD, you will be prompted to create
one.
</ng-container>
<a
class="mat-button-font"
i18n="@@institutional.learn"
href="https://support.orcid.org/hc/en-us/articles/360006972693"
>Learn more about different ways to sign in to ORCID.
</a>
</p>
<div *ngIf="userSelectedInstitutions.length > 0">
<p class="mat-body-1" i18n="@@institutional.suggested">
Use a suggested selection
</p>
<h2 class="orc-font-body" i18n="@@institutional.suggestedOrg">
Suggested organization
</h2>
<ng-container
*ngFor="let institution of userSelectedInstitutions"
>
<div class="col l12 m8 s4 institutional-logo">
<mat-progress-spinner
*ngIf="!imageLoadingFinish"
mode="indeterminate"
diameter="50"
>
</mat-progress-spinner>
<img
*ngIf="institution.Logos && institution.Logos[0]"
src="{{ institution.Logos[0].value }}"
src="assets/vectors/organization-no-logo.svg"
alt="institution logo"
(click)="selectInstitution(institution)"
*ngIf="
imageLoadingFinish && imageLoadingTimeOut;
else elseBlock
"
el
/>
<a
class="mat-button-font institution-name"

<ng-template #elseBlock>
<img
src="{{ institution.Logos[0].value }}"
alt="institution logo"
(click)="selectInstitution(institution)"
(error)="handleImgError($event)"
(load)="imgLoading($event)"
/>
</ng-template>

<p
class="mat-button-font institution-name-link underline"
id="institutionName"
(click)="selectInstitution(institution)"
>
{{ getNameInstitution(institution).value }}
</p>
<a
class="mat-button-font institution-name-link underline"
(click)="selectInstitution(institution)"
i18n="@@institutional.signInWithThisOrganization"
>
Sign in with this organization
</a>
<div class="divider">
<span class="orc-font-body" i18n="@@institutional.or"
>OR</span
>
</div>
</div>
</ng-container>
<p class="mat-body-1" i18n="@@institutional.orEnterOrgName">
Or enter your organization's name
</p>
</div>
<div class="col l12 m8 s4 horizontal-center">
<img
*ngIf="logoInstitution"
src="{{ logoInstitution }}"
alt="institution logo"
/>
</div>

<mat-label
i18n="@@institutional.organization"
class="orc-font-small-print"
[ngClass]="{
error:
institutionFormTouched &&
institutionFormEmails.valid === false
}"
>
Organization
</mat-label>
<mat-form-field
appearance="outline"
class="row institutional-input"
class="mat-form-field-min input-container row institutional-input"
>
<mat-label i18n="@@institution.organization"
>Organization's name
</mat-label>
<input
[attr.placeholder]="placeholderInstitution"
matInput
[attr.aria-label]="labelInstitution"
[formControl]="institutionFormControl"
Expand All @@ -81,12 +132,19 @@
#auto="matAutocomplete"
(optionSelected)="selected($event.option.value)"
>
<mat-option
*ngFor="let option of filteredOptions | async"
[value]="option"
<ng-container
*ngIf="filteredOptions"
id="cy-org-filtered-options"
>
{{ option }}
</mat-option>
<mat-option
*ngFor="let option of filteredOptions | async"
[value]="option"
>
<div class="row orc-font-body-small title">
{{ option }}
</div>
</mat-option>
</ng-container>
</mat-autocomplete>
<button
mat-button
Expand All @@ -102,38 +160,37 @@
<mat-error
i18n="@@institution.organizationRequired"
*ngIf="institutionFormControl.hasError('required')"
>Organization's name is required
>Please enter an organization name
</mat-error>
<mat-error
i18n="@@institution.invalidInstitution"
*ngIf="
institutionFormControl.hasError('invalidInstitution')
"
>Invalid Organization Name
>We can’t identify this organization. Please try entering
the organization name again.
</mat-error>
</mat-form-field>
<div class="institutional-buttons">
<button
mat-button
color="primary"
type="button"
i18n="@@institutional.goBack"
(click)="back()"
id="go-back-button"
>
Go back
</button>
<div class="step-actions">
<button
mat-raised-button
(click)="onSubmit()"
color="primary"
class="row mat-elevation-z0"
type="submit"
[disabled]="loading"
type="button"
i18n="@@institutional.continue"
id="step-a-back-button"
(click)="onSubmit()"
>
CONTINUE
Continue
</button>

<i>
<a
i18n="@@institutional.cancelInstituional"
class="mat-button-font institution-name-link underline"
(click)="back()"
>
Cancel institutional sign in</a
>
</i>
</div>
</div>
</form>
Expand All @@ -143,3 +200,20 @@
</div>
</div>
</main>

<!-- THE FOLLOWING IS A PLACEHOLDE IMAGE -->
<!-- The purpose of it is to try loading the image to know wether it loads or not -->
<!-- With it trigger handleImgError or imgLoading-->
<img
*ngIf="
institution &&
institution.Logos &&
institution.Logos[0] &&
!imageLoadingFinish
"
src="{{ institution.Logos[0].value }}"
alt="institution logo"
(error)="handleImgError($event)"
(load)="imgLoading($event)"
class="institutional-logo-placeholder"
/>
Loading

0 comments on commit 1d83213

Please sign in to comment.