|
376 | 376 | </transition> |
377 | 377 | </div> |
378 | 378 |
|
| 379 | + <div v-if="passwordVerification"> |
| 380 | + <transition name="modal"> |
| 381 | + <div class="modal-mask"> |
| 382 | + <div class="modal-wrapper"> |
| 383 | + <div class="modal-dialog"> |
| 384 | + <div class="modal-content"> |
| 385 | + <div class="modal-header text-center"> |
| 386 | + <h4 class="modal-title"><i class="warningTriangle fa-solid fa-triangle-exclamation"></i> Confirm your password</h4> |
| 387 | + </div> |
| 388 | + <div class="modal-body"> |
| 389 | + <div class="model-body-container"> |
| 390 | + <p> |
| 391 | + To continue with the upload please verify your identity by entering your password. |
| 392 | + </p> |
| 393 | + </div> |
| 394 | + <div> |
| 395 | + <div class="form-group password-div-width" v-bind:class="{ 'input-validation-error': $v.currentPassword.$error}"> |
| 396 | + <label for="confirmPassword" class="pt-10">Current password</label> |
| 397 | + <div class="error-text" v-if="$v.currentPassword.$invalid && $v.currentPassword.$dirty"> |
| 398 | + <span class="text-danger">Enter a valid password.</span> |
| 399 | + </div> |
| 400 | + <input type="password" class="form-control" id="currentPassword" aria-describedby="currentPassword" autocomplete="off" maxlength="1000" |
| 401 | + v-model.trim="currentPassword" |
| 402 | + placeholder="Current password" |
| 403 | + @blur="$v.currentPassword.$touch()" |
| 404 | + v-bind:class="{ 'input-validation-error': $v.currentPassword.$error}"> |
| 405 | + </div> |
| 406 | + |
| 407 | + <div class="row" v-if="showError"> |
| 408 | + <div class="form-group col-12 text-danger" v-html="errorMessage" /> |
| 409 | + </div> |
| 410 | + </div> |
| 411 | + </div> |
| 412 | + <div class="modal-footer modal-footer--buttons"> |
| 413 | + <button type="button" class="nhsuk-button nhsuk-button--secondary" @click="passwordVerification=false">Cancel</button> |
| 414 | + <button type="button" class="nhsuk-button" @click="submitPassword">Continue</button> |
| 415 | + </div> |
| 416 | + </div> |
| 417 | + </div> |
| 418 | + </div> |
| 419 | + </div> |
| 420 | + </transition> |
| 421 | + </div> |
| 422 | + |
379 | 423 | </div> |
380 | 424 |
|
381 | 425 | <div v-if="!resourceLoading" class="limit-width px-xl-0 mx-xl-0 pb-5"> |
|
427 | 471 | import GenericFileUploader from './GenericFileUploader.vue'; |
428 | 472 | import { UploadResourceType, ResourceType, VersionStatus } from '../constants'; |
429 | 473 | import { resourceData } from '../data/resource'; |
| 474 | + import { userData } from '../data/user'; |
430 | 475 | import { FileTypeModel } from "../models/contribute/fileTypeModel"; |
431 | 476 | import { FileUploadResult } from "../models/contribute/FileUploadResult"; |
432 | 477 | import { FlagModel } from '../models/flagModel'; |
|
490 | 535 | displayType: '' as string, |
491 | 536 | commonContentKey: 0, |
492 | 537 | avUnavailableMessage: false, |
| 538 | + passwordVerification: false, |
| 539 | + currentPassword: '', |
493 | 540 | // Some of the Content components have local state |
494 | 541 | // which isn't in the vuex store. |
495 | 542 | // This means those fields are validated using an |
|
573 | 620 | closeAfterSave(): boolean { |
574 | 621 | return this.$store.state.closeAfterSave; |
575 | 622 | }, |
576 | | - isFileAlreadyUploaded(): boolean { |
| 623 | + isFileAlreadyUploaded(): boolean { |
577 | 624 | switch (this.selectedResourceType) { |
578 | 625 | case this.resourceType.GENERICFILE: |
579 | 626 | return this.$store.state.genericFileDetail.file.fileName !== ''; |
|
739 | 786 | this.processPublish(); |
740 | 787 | } |
741 | 788 | }, |
| 789 | + submitPassword() { |
| 790 | + this.$v.currentPassword.$touch(); |
| 791 | + if (!this.$v.currentPassword.$invalid) { |
| 792 | + this.validatePassword(); |
| 793 | + } |
| 794 | + }, |
742 | 795 | async processPublish() { |
743 | 796 | this.showError = false; |
744 | 797 | let publishSuccess = await resourceData.publishResource(this.resourceVersionId, this.publishNotes); |
|
758 | 811 | this.errorMessage = "An error occurred whilst trying to publish the resource."; |
759 | 812 | } |
760 | 813 | }, |
| 814 | + async validatePassword() { |
| 815 | + this.showError = false; |
| 816 | + let isValidUser = await userData.IsValidUser(this.currentPassword); |
| 817 | + if (isValidUser) { |
| 818 | + this.acceptUploadedFile(); |
| 819 | + this.passwordVerification = false; |
| 820 | + } |
| 821 | + else { |
| 822 | + this.showError = true; |
| 823 | + this.errorMessage = "Enter a valid password."; |
| 824 | + } |
| 825 | + }, |
761 | 826 | deleteResource() { |
762 | 827 | this.deleteWarning = true; |
763 | 828 | this.showError = false; |
|
822 | 887 | this.fileUploadRef.value = null; |
823 | 888 | (this.$refs.fileUploader as any).uploadResourceFile(this.file); |
824 | 889 | }, |
| 890 | + confirmPassword() { |
| 891 | + this.currentPassword = ''; |
| 892 | + this.passwordVerification = true; |
| 893 | + }, |
825 | 894 | async fileUploadComplete(uploadResult: FileUploadResult) { |
826 | 895 | if (!uploadResult.invalid) { |
827 | 896 | if (uploadResult.resourceType != ResourceType.SCORM) { |
|
900 | 969 | this.fileErrorType = FileErrorTypeEnum.InvalidScormType; |
901 | 970 | return; |
902 | 971 | } |
903 | | - this.acceptUploadedFile(); |
| 972 | + this.confirmPassword(); |
904 | 973 | } else { |
905 | | - this.acceptUploadedFile(); |
| 974 | + this.confirmPassword(); |
906 | 975 | } |
907 | 976 | } |
908 | 977 | } |
|
948 | 1017 | this.fileTypeChangeWarning = true; |
949 | 1018 | } |
950 | 1019 | } else { |
951 | | - this.acceptUploadedFile(); |
| 1020 | + this.confirmPassword(); |
952 | 1021 | } |
953 | 1022 | } else { |
954 | | - this.acceptUploadedFile(); |
| 1023 | + this.confirmPassword(); |
955 | 1024 | } |
956 | 1025 | } |
957 | 1026 | } |
|
1062 | 1131 | }, |
1063 | 1132 | publishNotes: { |
1064 | 1133 | required |
| 1134 | + }, |
| 1135 | + currentPassword: { |
| 1136 | + required |
1065 | 1137 | } |
1066 | 1138 | }, |
1067 | 1139 | watch: { |
|
1105 | 1177 | max-height: 90vh; |
1106 | 1178 | overflow-y: auto; |
1107 | 1179 | } |
| 1180 | + .password-div-width{ |
| 1181 | + max-width:70% !important; |
| 1182 | + } |
1108 | 1183 | </style> |
0 commit comments