-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1062 from ORCID/settingsComponent
Settings component
- Loading branch information
Showing
14 changed files
with
623 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| <div class="container"> | ||
| <div class="row justify-content-center"> | ||
| <div class="col-md-8"> | ||
| <h1 class="mt-3" jhiTranslate="settings.personalDetails.string">Personal details</h1> | ||
| <hr /> | ||
|
|
||
| <div class="alert alert-success" *ngIf="success" jhiTranslate="settings.messages.success.string"> | ||
| <strong>Settings saved!</strong> | ||
| </div> | ||
|
|
||
| <form name="form" role="form" (ngSubmit)="save()" [formGroup]="settingsForm" *ngIf="settingsForm.get('email')?.value" novalidate> | ||
| <div class="form-group"> | ||
| <label class="form-control-label" for="firstName" jhiTranslate="settings.form.firstname.label.string">First Name</label> | ||
| <!-- TODO: translate pipe removed --> | ||
| <input type="text" class="form-control" id="firstName" name="firstName" placeholder="{{'settings.form.firstname.placeholder.string' }}" | ||
| formControlName="firstName"> | ||
| <div *ngIf="settingsForm.get('firstName')?.invalid && (settingsForm.get('firstName')?.dirty || settingsForm.get('firstName')?.touched)"> | ||
| <small class="form-text text-danger" | ||
| *ngIf="settingsForm.get('firstName')?.errors!['required']" jhiTranslate="settings.messages.validate.firstname.required.string"> | ||
| Your first name is required. | ||
| </small> | ||
| <small class="form-text text-danger" | ||
| *ngIf="settingsForm.get('firstName')?.errors!['minlength']" jhiTranslate="settings.messages.validate.firstname.minlength.string"> | ||
| Your first name is required to be at least 1 character. | ||
| </small> | ||
| <small class="form-text text-danger" | ||
| *ngIf="settingsForm.get('firstName')?.errors!['maxlength']" jhiTranslate="settings.messages.validate.firstname.maxlength.string"> | ||
| Your first name cannot be longer than 50 characters. | ||
| </small> | ||
| </div> | ||
| </div> | ||
| <div class="form-group"> | ||
| <label class="form-control-label" for="lastName" jhiTranslate="settings.form.lastname.label.string">Last Name</label> | ||
| <!-- TODO: translate pipe removed --> | ||
|
|
||
| <input type="text" class="form-control" id="lastName" name="lastName" placeholder="{{'settings.form.lastname.placeholder.string'}}" | ||
| formControlName="lastName"> | ||
| <div *ngIf="settingsForm.get('lastName')?.invalid && (settingsForm.get('lastName')?.dirty || settingsForm.get('lastName')?.touched)"> | ||
| <small class="form-text text-danger" | ||
| *ngIf="settingsForm.get('lastName')?.errors!['required']" jhiTranslate="settings.messages.validate.lastname.required.string"> | ||
| Your last name is required. | ||
| </small> | ||
| <small class="form-text text-danger" | ||
| *ngIf="settingsForm.get('lastName')?.errors!['minlength']" jhiTranslate="settings.messages.validate.lastname.minlength.string"> | ||
| Your last name is required to be at least 1 character. | ||
| </small> | ||
| <small class="form-text text-danger" | ||
| *ngIf="settingsForm.get('lastName')?.errors!['maxlength']" jhiTranslate="settings.messages.validate.lastname.maxlength.string"> | ||
| Your last name cannot be longer than 50 characters. | ||
| </small> | ||
| </div> | ||
| </div> | ||
| <div class="form-group"> | ||
| <label class="form-control-label" for="email" jhiTranslate="global.form.email.label.string">Email</label> | ||
| <!-- TODO: translate pipe removed --> | ||
| <input type="email" class="form-control" id="email" name="email" placeholder="{{'global.form.email.placeholder.string'}}" | ||
| formControlName="email" readonly> | ||
|
|
||
| </div> | ||
| <div class="form-group" *ngIf="languages && languages.length > 0"> | ||
| <label class="form-control-label" for="langKey" jhiTranslate="settings.form.language.string">Language</label> | ||
| <select class="form-control" id="langKey" name="langKey" formControlName="langKey"> | ||
| <option *ngFor="let language of languages" [value]="language">{{language | findLanguageFromKey}}</option> | ||
| </select> | ||
| </div> | ||
| <button type="submit" [disabled]="settingsForm.invalid || settingsForm.pristine" class="btn btn-primary" jhiTranslate="settings.form.button.string">Save</button> | ||
| </form> | ||
| <hr /> | ||
|
|
||
| <form name="form" role="form" (ngSubmit)="saveMfa()" | ||
| [formGroup]="mfaForm" *ngIf="settingsForm.get('email')?.value" | ||
| novalidate> | ||
| <h1 class="mt-3" jhiTranslate="settings.security.heading.string">Security</h1> | ||
| <hr /> | ||
| <div class="form-group"> | ||
| <p jhiTranslate="settings.security.mfaExplain.string">Add extra security to your ORCID member portal account by enabling two-factor authentication. Each time you sign in, you'll be prompted to enter a six-digit code we send to your preferred authentication application.</p> | ||
| <label class="form-control-label" for="field_mfaEnabled" | ||
| jhiTranslate="settings.security.mfa.string">Two-factor | ||
| Authentication</label> | ||
| <input type="checkbox" class="form-control" | ||
| name="mfaEnabled" id="field_mfaEnabled" | ||
| formControlName="mfaEnabled" (change)="mfaEnabledStateChange()" /> | ||
| </div> | ||
| <div *ngIf="showMfaUpdated" jhiTranslate="settings.security.mfaUpdated.string">2FA settings updated</div> | ||
| <div class="row" *ngIf="showMfaSetup && !showMfaBackupCodes"> | ||
| <div class="col-md-8"> | ||
| <ul> | ||
| <li jhiTranslate="settings.security.mfaQrCodeSteps.one.string">Install a two-factor authentication app<br />A 2FA app is required to create the six-digit code you need to access your account each time you sign in. Most apps are for mobile devices; some are also available as desktop or web-based apps. Download and install your preferred 2FA app, such as <a href='https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2'>Google Authenticator</a>, <a href='https://freeotp.github.io/'>FreeOTP</a>, or <a href='https://authy.com/'>Authy</a>.</li> | ||
| <li jhiTranslate="settings.security.mfaQrCodeSteps.two.string">Scan this QR code with your device<br />Open your 2FA app and scan the image below.</li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| <div class="row" *ngIf="showMfaSetup && !showMfaBackupCodes"> | ||
| <div class="col-md-8"> | ||
| <img [src]="safeQrCode()" alt="QR Code" /> | ||
| </div> | ||
| </div> | ||
| <div class="row" *ngIf="showMfaSetup && !showMfaBackupCodes && showMfaTextCode"> | ||
| <div class="col-md-8"> | ||
| <p class="mfaSecret"><strong>{{ mfaSetup.secret }}</strong></p> | ||
| </div> | ||
| </div> | ||
| <div class="row" *ngIf="showMfaSetup && !showMfaBackupCodes"> | ||
| <div class="col-md-8"> | ||
| <ul> | ||
| <li><span jhiTranslate="settings.security.mfaCannotScan.one.string">Can't scan the QR code?</span><br /><a href="JavaScript:void(0);" (click)="toggleMfaTextCode()" jhiTranslate="settings.security.mfaCannotScan.two.string">Get a text code</a> <span jhiTranslate="settings.security.mfaCannotScan.three.string">and enter it into your 2FA app instead</span></li> | ||
| <li jhiTranslate="settings.security.mfaTextCodeSteps.one.string">Enter the six-digit code from the app<br />After scanning the QR code or entering in the text code, your 2FA app will display a six-digit code. Enter this code in the box below and click Save.</li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| <div class="form-group" *ngIf="showMfaSetup && !showMfaBackupCodes"> | ||
| <div class="col-md-8"> | ||
| <div *ngIf="mfaSetupFailure" class="alert alert-danger" jhiTranslate="settings.security.otpError.string"> | ||
| Incorrect verification code | ||
| </div> | ||
| <!-- TODO: translate pipe removed --> | ||
|
|
||
| <input class="indented" name="verificationCode" formControlName="verificationCode" | ||
| placeholder="{{'settings.security.verificationCode.string'}}" /> | ||
| </div> | ||
| </div> | ||
| <div class="row" *ngIf="showMfaBackupCodes && showMfaSetup"> | ||
| <div class="col-md-8"> | ||
| <p jhiTranslate="settings.security.backupCodes.string">Make a note of the following backup codes, this is the only time they will be shown.</p> | ||
| <table> | ||
| <tr *ngFor="let backupCode of mfaBackupCodes"> | ||
| <td>{{ backupCode }}</td> | ||
| </tr> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| <button [disabled]="mfaForm.pristine || showMfaBackupCodes" type="submit" class="btn btn-primary" jhiTranslate="settings.form.button.string">Save</button> | ||
| </form> | ||
| <hr /> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> |
Empty file.
Oops, something went wrong.