@posiwise/user-module 0.0.139 → 0.0.140
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -452,7 +452,7 @@ class AccountDetailsComponent extends AppBaseComponent {
|
|
|
452
452
|
});
|
|
453
453
|
}
|
|
454
454
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: AccountDetailsComponent, deps: [{ token: i2.UntypedFormBuilder }, { token: i1.NgbModal }, { token: i1$1.AuthService }, { token: i1$1.GeoService }, { token: i1$1.ProfileService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
455
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: AccountDetailsComponent, isStandalone: false, selector: "pw-account-details", viewQueries: [{ propertyName: "placesRef", first: true, predicate: ["ngxPlaces"], descendants: true }, { propertyName: "passwordRef", first: true, predicate: ["password"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center\">\n <ng-template [ngIf]=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n</div>\n<div class=\"row d-flex flex-row\">\n <div class=\"col-md-8 order-md-first order-sm-last\">\n <section id=\"email-section\">\n <div class=\"row\">\n <div class=\"col-sm-12 col-md-8 col-lg-8\">\n <h2>{{ 'User.Account.RegisteredEmail' | transloco }}</h2>\n <!-- Email Form -->\n <section id=\"email-form\">\n <form [formGroup]=\"emailForm\"\n (ngSubmit)=\"onEmailFormSubmit()\">\n <!-- Email Address -->\n <div class=\"mt-0\">\n <label class=\"me-3\" id=\"account-primary-email-label\">{{ 'User.Account.PrimaryEmail' | transloco }}:\n </label>\n <strong>{{ validatedEmail }}</strong>\n <div class=\"mt-1\">\n <ng-container *ngIf=\"!toggleEmail\">\n <a class=\"btn btn-raised btn-outline-primary\"\n aria-label=\"Navigate to Target\"\n (click)=\"shouldUserChangeEmail()\">\n {{ 'User.Account.ChangeEmail' | transloco }}</a>\n </ng-container>\n <ng-container *ngIf=\"toggleEmail\">\n <div class=\"row\">\n <div class=\"clearfix\"></div>\n <div class=\"col-12 mb-3\">\n <input type=\"password\"\n class=\"form-control\"\n id=\"account-email-current-password\"\n name=\"currentPassword\"\n #password\n *ngIf=\"!passwordVerified\"\n placeholder=\"Current Password\"\n autocomplete=\"current-password\"\n (keyup)=\"checkValidity()\" />\n <input type=\"text\"\n class=\"form-control\"\n id=\"account-new-email\"\n name=\"newEmail\"\n *ngIf=\"passwordVerified\"\n placeholder=\"New Email\"\n autocomplete=\"email\"\n formControlName=\"email\" />\n </div>\n <div class=\"col-12\">\n <a *ngIf=\"toggleEmail\"\n class=\"btn btn-raised btn-outline-default my-2 me-2\"\n aria-label=\"Navigate to Target\"\n (click)=\"onToggleEmail()\">{{ 'Button.Cancel' | transloco }}</a>\n <button class=\"btn btn-raised btn-primary\"\n type=\"submit\"\n [buttonBusy]=\"validatePasswordBusyButton\"\n (click)=\"validatePassword()\"\n *ngIf=\"!passwordVerified\"\n [disabled]=\"isCurrentPasswordValid\">\n {{ 'User.Account.Validate' | transloco }}\n </button>\n <button type=\"submit\"\n class=\"btn btn-raised btn-primary\"\n [buttonBusy]=\"emailBusyButton\"\n *ngIf=\"passwordVerified\">\n {{\n 'User.Account.SendVerification' | transloco\n }}\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n <section id=\"slug\"\n class=\"mb-2 mt-3\">\n <div>\n <label class=\"me-3\" id=\"account-nickname-label\">{{ 'User.Account.NickName' | transloco }}:\n </label>\n <strong>{{ slug }}</strong>\n <div>\n <ng-container *ngIf=\"!toggleNickName\">\n <a class=\"btn btn-raised btn-outline-primary me-2\"\n aria-label=\"Navigate to Target\"\n (click)=\"toggleNickName = true\">\n {{ 'User.Account.ChangeNickname' | transloco }}</a>\n </ng-container>\n <ng-container *ngIf=\"toggleNickName\">\n <div class=\"mb-3\">\n <input type=\"text\"\n id=\"account-nickname\"\n name=\"nickname\"\n class=\"form-control slug-input\"\n aria-labelledby=\"account-nickname-label\"\n [(ngModel)]=\"slug\"\n [ngModelOptions]=\"{ standalone: true }\" />\n </div>\n <div>\n <button type=\"button\"\n class=\"btn btn-raised btn-outline-default\"\n (click)=\"toggleNickName = false\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"button\"\n class=\"btn btn-raised btn-primary ms-2\"\n [buttonBusy]=\"slugBusyButton\"\n [disabled]=\"slug?.length < 2\"\n (click)=\"onUpdateSlug()\">\n {{ 'User.Account.UpdateNickname' | transloco }}\n </button>\n </div>\n </ng-container>\n </div>\n </div>\n </section>\n </form>\n </section>\n </div>\n </div>\n <section id=\"password-change\"\n class=\"mt-1\">\n <form [formGroup]=\"passwordForm\"\n (ngSubmit)=\"onPasswordFormSubmit()\">\n <div class=\"row\">\n <div class=\"col-sm-12 col-md-8 col-lg-8 mt-4\">\n <h2>{{ 'User.Account.ChangePassword' | transloco }}</h2>\n </div>\n <ng-container *ngIf=\"!user?.has_password\">\n <div class=\"text-danger mx-3 my-2\">\n <div>\n You don't have a password set, click on\n <em>{{ 'User.Account.ChangePassword' | transloco }}</em>.\n </div>\n <div>{{ 'User.Profile.PictureMessage' | transloco }}</div>\n </div>\n </ng-container>\n <div class=\"col-sm-12 col-md-8 col-lg-8\"\n *ngIf=\"user?.has_password\">\n <ng-container *ngIf=\"togglePassword\">\n <div class=\"mb-3\">\n <label for=\"account-current-password\">{{ 'User.Account.CurrentPassword' | transloco }}</label>\n <input type=\"password\"\n id=\"account-current-password\"\n class=\"form-control\"\n formControlName=\"currentPassword\"\n autocomplete=\"current-password\" name=\"input_currentPassword_4\"/>\n <small class=\"form-text text-muted danger\"\n *ngIf=\"\n !passwordForm.get('currentPassword').valid &&\n (passwordForm.get('currentPassword').dirty ||\n passwordForm.get('currentPassword').touched)\n \">\n {{ 'User.Account.Required' | transloco }}\n </small>\n </div>\n <div class=\"mb-3\">\n <label for=\"account-new-password\">{{ 'User.Account.NewPassword' | transloco }}</label>\n <input type=\"password\"\n id=\"account-new-password\"\n class=\"form-control\"\n formControlName=\"newPassword\"\n autocomplete=\"new-password\" name=\"input_newPassword_5\"/>\n <small class=\"form-text text-muted danger\"\n *ngIf=\"\n !passwordForm.get('newPassword').valid &&\n (passwordForm.get('newPassword').dirty ||\n passwordForm.get('newPassword').touched)\n \">{{ 'User.Account.Validation.StrongPassword' | transloco }}\n </small>\n </div>\n <div class=\"mb-3\">\n <label for=\"account-confirm-password\">{{\n 'User.Account.ConfirmPassword' | transloco\n }}</label>\n <input type=\"password\"\n id=\"account-confirm-password\"\n class=\"form-control\"\n formControlName=\"confirmPassword\"\n autocomplete=\"new-password\" name=\"input_confirmPassword_6\"/>\n <div class=\"text-danger\"\n *ngIf=\"\n passwordForm.get('confirmPassword').touched &&\n passwordForm.get('confirmPassword').errors\n ?.MatchPassword\n \">\n {{ 'User.Account.Validation.PasswordsMatch' | transloco }}\n </div>\n </div>\n <div class=\"mb-3\">\n <a class=\"btn btn-raised btn-outline-default\"\n aria-label=\"Navigate to Target\"\n data-bs-target=\"\"\n *ngIf=\"togglePassword\"\n (click)=\"onTogglePassword()\">\n {{ 'Button.Cancel' | transloco }}</a>\n <button class=\"btn btn-raised btn-primary ms-2\"\n [buttonBusy]=\"passwordBusyButton\"\n [disabled]=\"!passwordForm.valid\">\n {{ 'User.Account.UpdatePassword' | transloco }}\n </button>\n </div>\n </ng-container>\n <div>\n <a class=\"btn btn-raised btn-outline-primary\"\n aria-label=\"Navigate to Target\"\n data-bs-target=\"\"\n *ngIf=\"!togglePassword\"\n (click)=\"togglePassword = !togglePassword\">\n {{ 'User.Account.ChangePassword' | transloco }}</a>\n </div>\n </div>\n <div class=\"col-sm-12 col-md-8 col-lg-8\"\n *ngIf=\"!user?.has_password\">\n <a class=\"btn btn-raised btn-primary me-2\"\n aria-label=\"Navigate to Target\"\n data-bs-target=\"\"\n (click)=\"sendMailToResetPassword()\">\n {{ 'User.Account.ChangePassword' | transloco }}</a>\n </div>\n </div>\n </form>\n </section>\n <ng-container *ngIf=\"user?.api_keys?.api_hits_max > 0\">\n <section id=\"api-credentials\"\n class=\"mt-4\">\n <div class=\"row\">\n <div class=\"col-12\">\n <h3>{{ 'User.Subscriptions.APICredentials.Title' | transloco }}</h3>\n <p>\n {{ 'User.Subscriptions.APICredentials.Description' | transloco }}\n </p>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"account-api-token\">{{ 'User.Subscriptions.APICredentials.AccessToken' | transloco }}</label>\n <div class=\"input-group\">\n <input type=\"text\"\n id=\"account-api-token\"\n name=\"api_token\"\n class=\"form-control\"\n [value]=\"showApiToken ? user?.api_keys?.api_user_token || ('User.Subscriptions.APICredentials.NoTokenAvailable' | transloco) : '*************************'\"\n readonly />\n <button type=\"button\"\n class=\"btn btn-outline-secondary\"\n (click)=\"toggleApiTokenVisibility()\">\n {{ showApiToken ? ('User.Subscriptions.APICredentials.Hide' | transloco) : ('User.Subscriptions.APICredentials.View' | transloco) }}\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"account-api-client-id\">{{ 'User.Subscriptions.APICredentials.ClientId' | transloco }}</label>\n <div class=\"input-group\">\n <input type=\"text\"\n id=\"account-api-client-id\"\n name=\"api_client_id\"\n class=\"form-control\"\n [value]=\"showApiClientId ? user?.api_keys?.api_user_id || ('User.Subscriptions.APICredentials.NoClientIdAvailable' | transloco) : '*************************'\"\n readonly />\n <button type=\"button\"\n class=\"btn btn-outline-secondary\"\n (click)=\"toggleApiClientIdVisibility()\">\n {{ showApiClientId ? ('User.Subscriptions.APICredentials.Hide' | transloco) : ('User.Subscriptions.APICredentials.View' | transloco) }}\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-12 mt-3\">\n <div class=\"d-flex align-items-center gap-3\">\n <button type=\"button\"\n class=\"btn btn-warning\"\n (click)=\"refreshApiTokens()\"\n [disabled]=\"refreshingTokens\">\n <i class=\"fas fa-sync-alt me-2\" [class.fa-spin]=\"refreshingTokens\"></i>\n {{ refreshingTokens ? ('User.Subscriptions.APICredentials.Refreshing' | transloco) : ('User.Subscriptions.APICredentials.RefreshTokens' | transloco) }}\n </button>\n\n <div class=\"d-flex align-items-center gap-2\">\n <ng-container *ngIf=\"user?.api_keys?.api_hits !== null\">\n <span class=\"text-muted\">{{ 'User.Subscriptions.APICredentials.ApiHits' | transloco }}:</span>\n <span class=\"fw-bold\">{{ user.api_keys.api_hits | number }}</span>\n </ng-container>\n\n <ng-container *ngIf=\"user?.api_keys?.api_hits_max !== null\">\n <span class=\"text-muted\">{{ 'User.Subscriptions.APICredentials.ApiHitsMax' | transloco }}:</span>\n <span class=\"fw-bold\">{{ user.api_keys.api_hits_max | number }}</span>\n </ng-container>\n\n <!-- Show utilization percentage when both values exist -->\n <ng-container *ngIf=\"user?.api_keys?.api_hits !== null && user?.api_keys?.api_hits_max !== null && user?.api_keys?.api_hits_max > 0\">\n <span class=\"text-muted ms-2\">(</span>\n <span class=\"fw-bold\" [ngClass]=\"{\n 'text-success': (user.api_keys.api_hits / user.api_keys.api_hits_max) <= 0.8,\n 'text-warning': (user.api_keys.api_hits / user.api_keys.api_hits_max) > 0.8 && (user.api_keys.api_hits / user.api_keys.api_hits_max) <= 0.9,\n 'text-danger': (user.api_keys.api_hits / user.api_keys.api_hits_max) > 0.9\n }\">\n {{ (user.api_keys.api_hits / user.api_keys.api_hits_max * 100) | number:'1.0-0' }}% consumed\n </span>\n <span class=\"text-muted\">)</span>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </section>\n </ng-container>\n </section>\n </div>\n <!-- Avatar -->\n <div class=\"mt-4 mt-sm-0 col-md-4 text-center order-md-last order-sm-first\">\n <h2>{{ 'User.Profile.Avatar' | transloco }}</h2>\n <div class=\"text-center mt-1\">\n <div class=\"image-container\">\n <img [src]=\"image\"\n width=\"150\"\n height=\"150\"\n class=\"image rounded-circle\"\n alt=\"User Male\"\n (error)=\"handleImageError($event, 'assets/img/icons/male.png')\" />\n <div class=\"overlay\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">\n <div class=\"overlay-text\">{{ 'User.Profile.Change' | transloco }}</div>\n </div>\n </div>\n <h4 class=\"mt-2\">{{ user?.first_name }} {{ user?.last_name }}</h4>\n <a aria-label=\"Navigate to Target\"\n class=\"d-inline-block mb-2\"\n (click)=\"openModal(content)\">\n {{ 'User.Profile.EditAvatar' | transloco }}</a>\n <br />\n </div>\n </div>\n</div>\n<br />\n<section id=\"user-profile\"\n class=\"mt-2\">\n <div class=\"row\">\n <div class=\"col-12\">\n <form [formGroup]=\"profileForm\"\n (ngSubmit)=\"onProfileFormSubmit()\">\n <h2>{{ 'User.Profile.UserProfile' | transloco }}</h2>\n <div class=\"row mt-3\">\n <div class=\"col-sm-12 col-md-6 col-lg-6\">\n <pw-input-container label=\"First Name\"\n name=\"first_name\"\n controlId=\"account-first_name\"\n errorMsg=\"Please enter first Name\">\n <input type=\"text\"\n id=\"account-first_name\"\n class=\"form-control\"\n formControlName=\"first_name\"\n autocomplete=\"given-name\" name=\"input_first_name_9\"/>\n </pw-input-container>\n <pw-input-container label=\"Preferred name\"\n name=\"preferred_name\"\n controlId=\"account-preferred_name\"\n errorMsg=\"Please enter preferred Name\">\n <input type=\"text\"\n id=\"account-preferred_name\"\n class=\"form-control\"\n formControlName=\"preferred_name\"\n autocomplete=\"username\" name=\"input_preferred_name_10\"/>\n </pw-input-container>\n <ng-container *ngIf=\"countries$ | async as countries\">\n <pw-input-container label=\"Country\"\n name=\"country\"\n controlId=\"account-country\"\n [useAriaLabelledbyOnly]=\"true\"\n errorMsg=\"Please select a country\">\n <p-select\n [attr.aria-labelledby]=\"'account-country-label'\"\n [options]=\"countries\"\n optionLabel=\"name\"\n optionValue=\"code\"\n formControlName=\"country\"\n (onChange)=\"getRegion($event.value)\"\n placeholder=\"{{ 'User.Profile.SelectCountry' | transloco }}\">\n </p-select>\n </pw-input-container>\n </ng-container>\n <pw-input-container label=\"Province\"\n name=\"province\"\n controlId=\"account-province\"\n errorMsg=\"Please enter province\">\n <input type=\"text\"\n id=\"account-province\"\n class=\"form-control\"\n formControlName=\"province\"\n autocomplete=\"postal-code\" name=\"input_province_11\"/>\n </pw-input-container>\n <pw-input-container label=\"Website Url\"\n name=\"website_url\"\n controlId=\"account-website_url\"\n errorMsg=\"Please enter Website\">\n <input type=\"text\"\n id=\"account-website_url\"\n class=\"form-control\"\n formControlName=\"website_url\"\n autocomplete=\"url\" name=\"input_website_url_12\"/>\n </pw-input-container>\n </div>\n <div class=\"col-sm-12 col-md-6 col-lg-6\">\n <pw-input-container label=\"Last Name\"\n name=\"last_name\"\n controlId=\"account-last_name\"\n errorMsg=\"Please enter last Name\">\n <input type=\"text\"\n id=\"account-last_name\"\n class=\"form-control\"\n formControlName=\"last_name\"\n autocomplete=\"family-name\" name=\"input_last_name_13\"/>\n </pw-input-container>\n <pw-input-container label=\"Date of Birth\"\n name=\"dob\"\n controlId=\"account-dob\"\n errorMsg=\"Please enter date of birth\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"account-dob\"\n name=\"dob\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"dob\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n [maxDate]=\"{ day: 31, month: 12, year: 2018 }\" />\n <div class=\"input-group-append\">\n <button class=\"btn btn-primary\"\n type=\"button\"\n id=\"account-dob-trigger\"\n aria-label=\"Open date picker for date of birth\"\n (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </pw-input-container>\n <pw-input-container label=\"State\"\n name=\"state\"\n controlId=\"account-state\"\n [useAriaLabelledbyOnly]=\"true\"\n errorMsg=\"Please select a state\">\n <p-select\n [attr.aria-labelledby]=\"'account-state-label'\"\n [options]=\"states\"\n [(ngModel)]=\"selectedState\"\n optionLabel=\"name\"\n optionValue=\"code\"\n formControlName=\"state\"\n [placeholder]=\"'User.Profile.SelectState' | transloco\">\n </p-select>\n\n </pw-input-container>\n <!-- Location -->\n <pw-input-container label=\"Location\"\n name=\"location\"\n controlId=\"account-location\"\n [useAriaLabelledbyOnly]=\"true\">\n <input ngx-gp-autocomplete\n id=\"account-location\"\n name=\"location\"\n class=\"form-control\"\n [attr.aria-labelledby]=\"'account-location-label'\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\" />\n </pw-input-container>\n <pw-input-container label=\"Phone Number\"\n name=\"phone_number\"\n controlId=\"account-phone_number\"\n errorMsg=\"Please enter phone number\">\n <input type=\"text\"\n id=\"account-phone_number\"\n class=\"form-control\"\n formControlName=\"phone_number\"\n autocomplete=\"tel\" name=\"input_phone_number_16\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 text-end\">\n <div class=\"mb-3\">\n <button class=\"btn btn-raised btn-primary\" [buttonBusy]=\"profileBusyButton\">\n {{ 'Button.Save' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </form>\n </div>\n </div>\n</section>\n<ng-template #content\n let-modal>\n <div class=\"card m-0\">\n <div class=\"card-content\">\n <div class=\"card-title\">\n <h3 class=\"modal-title\">{{ 'User.Profile.ProfilePicture' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"card-header\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile\n aspectRatio=\"auto\"\n (imageSelectionEvent)=\"onImageSelection($event)\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".overlay{left:50%;opacity:0;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);transition:.5s ease}.image-container{position:relative}.image-container:hover .image{opacity:.3}.image-container:hover .overlay{opacity:0}.overlay-text{background:#f0efef80;border-radius:50%;color:#000;font-size:16px;height:150px;line-height:150px;text-align:center;vertical-align:middle;width:150px}@media screen and (max-width: 767px){.card-body{padding:20px!important}}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$1.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: i6$2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9$1.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.DecimalPipe, name: "number" }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
|
|
455
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: AccountDetailsComponent, isStandalone: false, selector: "pw-account-details", viewQueries: [{ propertyName: "placesRef", first: true, predicate: ["ngxPlaces"], descendants: true }, { propertyName: "passwordRef", first: true, predicate: ["password"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center\">\n <ng-template [ngIf]=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n</div>\n<div class=\"row d-flex flex-row\">\n <div class=\"col-md-8 order-md-first order-sm-last\">\n <section id=\"email-section\">\n <div class=\"row\">\n <div class=\"col-sm-12 col-md-8 col-lg-8\">\n <h2>{{ 'User.Account.RegisteredEmail' | transloco }}</h2>\n <!-- Email Form -->\n <section id=\"email-form\">\n <form [formGroup]=\"emailForm\"\n (ngSubmit)=\"onEmailFormSubmit()\">\n <!-- Email Address -->\n <div class=\"mt-0\">\n <span id=\"account-primary-email-label\" class=\"me-3 pw-label-style\">{{ 'User.Account.PrimaryEmail' | transloco }}:\n </span>\n <strong>{{ validatedEmail }}</strong>\n <div class=\"mt-1\">\n <ng-container *ngIf=\"!toggleEmail\">\n <a class=\"btn btn-raised btn-outline-primary\"\n aria-label=\"Navigate to Target\"\n (click)=\"shouldUserChangeEmail()\">\n {{ 'User.Account.ChangeEmail' | transloco }}</a>\n </ng-container>\n <ng-container *ngIf=\"toggleEmail\">\n <div class=\"row\">\n <div class=\"clearfix\"></div>\n <div class=\"col-12 mb-3\">\n <input type=\"password\"\n class=\"form-control\"\n id=\"account-email-current-password\"\n name=\"currentPassword\"\n #password\n *ngIf=\"!passwordVerified\"\n placeholder=\"Current Password\"\n autocomplete=\"current-password\"\n (keyup)=\"checkValidity()\" />\n <input type=\"text\"\n class=\"form-control\"\n id=\"account-new-email\"\n name=\"newEmail\"\n *ngIf=\"passwordVerified\"\n placeholder=\"New Email\"\n autocomplete=\"email\"\n formControlName=\"email\" />\n </div>\n <div class=\"col-12\">\n <a *ngIf=\"toggleEmail\"\n class=\"btn btn-raised btn-outline-default my-2 me-2\"\n aria-label=\"Navigate to Target\"\n (click)=\"onToggleEmail()\">{{ 'Button.Cancel' | transloco }}</a>\n <button class=\"btn btn-raised btn-primary\"\n type=\"submit\"\n [buttonBusy]=\"validatePasswordBusyButton\"\n (click)=\"validatePassword()\"\n *ngIf=\"!passwordVerified\"\n [disabled]=\"isCurrentPasswordValid\">\n {{ 'User.Account.Validate' | transloco }}\n </button>\n <button type=\"submit\"\n class=\"btn btn-raised btn-primary\"\n [buttonBusy]=\"emailBusyButton\"\n *ngIf=\"passwordVerified\">\n {{\n 'User.Account.SendVerification' | transloco\n }}\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n <section id=\"slug\"\n class=\"mb-2 mt-3\">\n <div>\n <span class=\"me-3 pw-label-style\" id=\"account-nickname-label\">{{ 'User.Account.NickName' | transloco }}:\n </span>\n <strong>{{ slug }}</strong>\n <div>\n <ng-container *ngIf=\"!toggleNickName\">\n <a class=\"btn btn-raised btn-outline-primary me-2\"\n aria-label=\"Navigate to Target\"\n (click)=\"toggleNickName = true\">\n {{ 'User.Account.ChangeNickname' | transloco }}</a>\n </ng-container>\n <ng-container *ngIf=\"toggleNickName\">\n <div class=\"mb-3\">\n <input type=\"text\"\n id=\"account-nickname\"\n name=\"nickname\"\n class=\"form-control slug-input\"\n aria-labelledby=\"account-nickname-label\"\n [(ngModel)]=\"slug\"\n [ngModelOptions]=\"{ standalone: true }\" />\n </div>\n <div>\n <button type=\"button\"\n class=\"btn btn-raised btn-outline-default\"\n (click)=\"toggleNickName = false\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"button\"\n class=\"btn btn-raised btn-primary ms-2\"\n [buttonBusy]=\"slugBusyButton\"\n [disabled]=\"slug?.length < 2\"\n (click)=\"onUpdateSlug()\">\n {{ 'User.Account.UpdateNickname' | transloco }}\n </button>\n </div>\n </ng-container>\n </div>\n </div>\n </section>\n </form>\n </section>\n </div>\n </div>\n <section id=\"password-change\"\n class=\"mt-1\">\n <form [formGroup]=\"passwordForm\"\n (ngSubmit)=\"onPasswordFormSubmit()\">\n <div class=\"row\">\n <div class=\"col-sm-12 col-md-8 col-lg-8 mt-4\">\n <h2>{{ 'User.Account.ChangePassword' | transloco }}</h2>\n </div>\n <ng-container *ngIf=\"!user?.has_password\">\n <div class=\"text-danger mx-3 my-2\">\n <div>\n You don't have a password set, click on\n <em>{{ 'User.Account.ChangePassword' | transloco }}</em>.\n </div>\n <div>{{ 'User.Profile.PictureMessage' | transloco }}</div>\n </div>\n </ng-container>\n <div class=\"col-sm-12 col-md-8 col-lg-8\"\n *ngIf=\"user?.has_password\">\n <ng-container *ngIf=\"togglePassword\">\n <div class=\"mb-3\">\n <label for=\"account-current-password\">{{ 'User.Account.CurrentPassword' | transloco }}</label>\n <input type=\"password\"\n id=\"account-current-password\"\n class=\"form-control\"\n formControlName=\"currentPassword\"\n autocomplete=\"current-password\" name=\"input_currentPassword_4\"/>\n <small class=\"form-text text-muted danger\"\n *ngIf=\"\n !passwordForm.get('currentPassword').valid &&\n (passwordForm.get('currentPassword').dirty ||\n passwordForm.get('currentPassword').touched)\n \">\n {{ 'User.Account.Required' | transloco }}\n </small>\n </div>\n <div class=\"mb-3\">\n <label for=\"account-new-password\">{{ 'User.Account.NewPassword' | transloco }}</label>\n <input type=\"password\"\n id=\"account-new-password\"\n class=\"form-control\"\n formControlName=\"newPassword\"\n autocomplete=\"new-password\" name=\"input_newPassword_5\"/>\n <small class=\"form-text text-muted danger\"\n *ngIf=\"\n !passwordForm.get('newPassword').valid &&\n (passwordForm.get('newPassword').dirty ||\n passwordForm.get('newPassword').touched)\n \">{{ 'User.Account.Validation.StrongPassword' | transloco }}\n </small>\n </div>\n <div class=\"mb-3\">\n <label for=\"account-confirm-password\">{{\n 'User.Account.ConfirmPassword' | transloco\n }}</label>\n <input type=\"password\"\n id=\"account-confirm-password\"\n class=\"form-control\"\n formControlName=\"confirmPassword\"\n autocomplete=\"new-password\" name=\"input_confirmPassword_6\"/>\n <div class=\"text-danger\"\n *ngIf=\"\n passwordForm.get('confirmPassword').touched &&\n passwordForm.get('confirmPassword').errors\n ?.MatchPassword\n \">\n {{ 'User.Account.Validation.PasswordsMatch' | transloco }}\n </div>\n </div>\n <div class=\"mb-3\">\n <a class=\"btn btn-raised btn-outline-default\"\n aria-label=\"Navigate to Target\"\n data-bs-target=\"\"\n *ngIf=\"togglePassword\"\n (click)=\"onTogglePassword()\">\n {{ 'Button.Cancel' | transloco }}</a>\n <button class=\"btn btn-raised btn-primary ms-2\"\n [buttonBusy]=\"passwordBusyButton\"\n [disabled]=\"!passwordForm.valid\">\n {{ 'User.Account.UpdatePassword' | transloco }}\n </button>\n </div>\n </ng-container>\n <div>\n <a class=\"btn btn-raised btn-outline-primary\"\n aria-label=\"Navigate to Target\"\n data-bs-target=\"\"\n *ngIf=\"!togglePassword\"\n (click)=\"togglePassword = !togglePassword\">\n {{ 'User.Account.ChangePassword' | transloco }}</a>\n </div>\n </div>\n <div class=\"col-sm-12 col-md-8 col-lg-8\"\n *ngIf=\"!user?.has_password\">\n <a class=\"btn btn-raised btn-primary me-2\"\n aria-label=\"Navigate to Target\"\n data-bs-target=\"\"\n (click)=\"sendMailToResetPassword()\">\n {{ 'User.Account.ChangePassword' | transloco }}</a>\n </div>\n </div>\n </form>\n </section>\n <ng-container *ngIf=\"user?.api_keys?.api_hits_max > 0\">\n <section id=\"api-credentials\"\n class=\"mt-4\">\n <div class=\"row\">\n <div class=\"col-12\">\n <h3>{{ 'User.Subscriptions.APICredentials.Title' | transloco }}</h3>\n <p>\n {{ 'User.Subscriptions.APICredentials.Description' | transloco }}\n </p>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"account-api-token\">{{ 'User.Subscriptions.APICredentials.AccessToken' | transloco }}</label>\n <div class=\"input-group\">\n <input type=\"text\"\n id=\"account-api-token\"\n name=\"api_token\"\n class=\"form-control\"\n [value]=\"showApiToken ? user?.api_keys?.api_user_token || ('User.Subscriptions.APICredentials.NoTokenAvailable' | transloco) : '*************************'\"\n readonly />\n <button type=\"button\"\n class=\"btn btn-outline-secondary\"\n (click)=\"toggleApiTokenVisibility()\">\n {{ showApiToken ? ('User.Subscriptions.APICredentials.Hide' | transloco) : ('User.Subscriptions.APICredentials.View' | transloco) }}\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"account-api-client-id\">{{ 'User.Subscriptions.APICredentials.ClientId' | transloco }}</label>\n <div class=\"input-group\">\n <input type=\"text\"\n id=\"account-api-client-id\"\n name=\"api_client_id\"\n class=\"form-control\"\n [value]=\"showApiClientId ? user?.api_keys?.api_user_id || ('User.Subscriptions.APICredentials.NoClientIdAvailable' | transloco) : '*************************'\"\n readonly />\n <button type=\"button\"\n class=\"btn btn-outline-secondary\"\n (click)=\"toggleApiClientIdVisibility()\">\n {{ showApiClientId ? ('User.Subscriptions.APICredentials.Hide' | transloco) : ('User.Subscriptions.APICredentials.View' | transloco) }}\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-12 mt-3\">\n <div class=\"d-flex align-items-center gap-3\">\n <button type=\"button\"\n class=\"btn btn-warning\"\n (click)=\"refreshApiTokens()\"\n [disabled]=\"refreshingTokens\">\n <i class=\"fas fa-sync-alt me-2\" [class.fa-spin]=\"refreshingTokens\"></i>\n {{ refreshingTokens ? ('User.Subscriptions.APICredentials.Refreshing' | transloco) : ('User.Subscriptions.APICredentials.RefreshTokens' | transloco) }}\n </button>\n\n <div class=\"d-flex align-items-center gap-2\">\n <ng-container *ngIf=\"user?.api_keys?.api_hits !== null\">\n <span class=\"text-muted\">{{ 'User.Subscriptions.APICredentials.ApiHits' | transloco }}:</span>\n <span class=\"fw-bold\">{{ user.api_keys.api_hits | number }}</span>\n </ng-container>\n\n <ng-container *ngIf=\"user?.api_keys?.api_hits_max !== null\">\n <span class=\"text-muted\">{{ 'User.Subscriptions.APICredentials.ApiHitsMax' | transloco }}:</span>\n <span class=\"fw-bold\">{{ user.api_keys.api_hits_max | number }}</span>\n </ng-container>\n\n <!-- Show utilization percentage when both values exist -->\n <ng-container *ngIf=\"user?.api_keys?.api_hits !== null && user?.api_keys?.api_hits_max !== null && user?.api_keys?.api_hits_max > 0\">\n <span class=\"text-muted ms-2\">(</span>\n <span class=\"fw-bold\" [ngClass]=\"{\n 'text-success': (user.api_keys.api_hits / user.api_keys.api_hits_max) <= 0.8,\n 'text-warning': (user.api_keys.api_hits / user.api_keys.api_hits_max) > 0.8 && (user.api_keys.api_hits / user.api_keys.api_hits_max) <= 0.9,\n 'text-danger': (user.api_keys.api_hits / user.api_keys.api_hits_max) > 0.9\n }\">\n {{ (user.api_keys.api_hits / user.api_keys.api_hits_max * 100) | number:'1.0-0' }}% consumed\n </span>\n <span class=\"text-muted\">)</span>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </section>\n </ng-container>\n </section>\n </div>\n <!-- Avatar -->\n <div class=\"mt-4 mt-sm-0 col-md-4 text-center order-md-last order-sm-first\">\n <h2>{{ 'User.Profile.Avatar' | transloco }}</h2>\n <div class=\"text-center mt-1\">\n <div class=\"image-container\">\n <img [src]=\"image\"\n width=\"150\"\n height=\"150\"\n class=\"image rounded-circle\"\n alt=\"User Male\"\n (error)=\"handleImageError($event, 'assets/img/icons/male.png')\" />\n <div class=\"overlay\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">\n <div class=\"overlay-text\">{{ 'User.Profile.Change' | transloco }}</div>\n </div>\n </div>\n <h4 class=\"mt-2\">{{ user?.first_name }} {{ user?.last_name }}</h4>\n <a aria-label=\"Navigate to Target\"\n class=\"d-inline-block mb-2\"\n (click)=\"openModal(content)\">\n {{ 'User.Profile.EditAvatar' | transloco }}</a>\n <br />\n </div>\n </div>\n</div>\n<br />\n<section id=\"user-profile\"\n class=\"mt-2\">\n <div class=\"row\">\n <div class=\"col-12\">\n <form [formGroup]=\"profileForm\"\n (ngSubmit)=\"onProfileFormSubmit()\">\n <h2>{{ 'User.Profile.UserProfile' | transloco }}</h2>\n <div class=\"row mt-3\">\n <div class=\"col-sm-12 col-md-6 col-lg-6\">\n <pw-input-container label=\"First Name\"\n name=\"first_name\"\n controlId=\"account-first_name\"\n errorMsg=\"Please enter first Name\">\n <input type=\"text\"\n id=\"account-first_name\"\n class=\"form-control\"\n formControlName=\"first_name\"\n autocomplete=\"given-name\" name=\"input_first_name_9\"/>\n </pw-input-container>\n <pw-input-container label=\"Preferred name\"\n name=\"preferred_name\"\n controlId=\"account-preferred_name\"\n errorMsg=\"Please enter preferred Name\">\n <input type=\"text\"\n id=\"account-preferred_name\"\n class=\"form-control\"\n formControlName=\"preferred_name\"\n autocomplete=\"username\" name=\"input_preferred_name_10\"/>\n </pw-input-container>\n <ng-container *ngIf=\"countries$ | async as countries\">\n <pw-input-container label=\"Country\"\n name=\"country\"\n controlId=\"account-country\"\n [useAriaLabelledbyOnly]=\"true\"\n errorMsg=\"Please select a country\">\n <p-select\n [attr.aria-labelledby]=\"'account-country-label'\"\n [options]=\"countries\"\n optionLabel=\"name\"\n optionValue=\"code\"\n formControlName=\"country\"\n (onChange)=\"getRegion($event.value)\"\n placeholder=\"{{ 'User.Profile.SelectCountry' | transloco }}\">\n </p-select>\n </pw-input-container>\n </ng-container>\n <pw-input-container label=\"Province\"\n name=\"province\"\n controlId=\"account-province\"\n errorMsg=\"Please enter province\">\n <input type=\"text\"\n id=\"account-province\"\n class=\"form-control\"\n formControlName=\"province\"\n autocomplete=\"postal-code\" name=\"input_province_11\"/>\n </pw-input-container>\n <pw-input-container label=\"Website Url\"\n name=\"website_url\"\n controlId=\"account-website_url\"\n errorMsg=\"Please enter Website\">\n <input type=\"text\"\n id=\"account-website_url\"\n class=\"form-control\"\n formControlName=\"website_url\"\n autocomplete=\"url\" name=\"input_website_url_12\"/>\n </pw-input-container>\n </div>\n <div class=\"col-sm-12 col-md-6 col-lg-6\">\n <pw-input-container label=\"Last Name\"\n name=\"last_name\"\n controlId=\"account-last_name\"\n errorMsg=\"Please enter last Name\">\n <input type=\"text\"\n id=\"account-last_name\"\n class=\"form-control\"\n formControlName=\"last_name\"\n autocomplete=\"family-name\" name=\"input_last_name_13\"/>\n </pw-input-container>\n <pw-input-container label=\"Date of Birth\"\n name=\"dob\"\n controlId=\"account-dob\"\n errorMsg=\"Please enter date of birth\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"account-dob\"\n name=\"dob\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"dob\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n [maxDate]=\"{ day: 31, month: 12, year: 2018 }\" />\n <div class=\"input-group-append\">\n <button class=\"btn btn-primary\"\n type=\"button\"\n id=\"account-dob-trigger\"\n aria-label=\"Open date picker for date of birth\"\n (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </pw-input-container>\n <pw-input-container label=\"State\"\n name=\"state\"\n controlId=\"account-state\"\n [useAriaLabelledbyOnly]=\"true\"\n errorMsg=\"Please select a state\">\n <p-select\n [attr.aria-labelledby]=\"'account-state-label'\"\n [options]=\"states\"\n [(ngModel)]=\"selectedState\"\n optionLabel=\"name\"\n optionValue=\"code\"\n formControlName=\"state\"\n [placeholder]=\"'User.Profile.SelectState' | transloco\">\n </p-select>\n\n </pw-input-container>\n <!-- Location -->\n <pw-input-container label=\"Location\"\n name=\"location\"\n controlId=\"account-location\"\n [useAriaLabelledbyOnly]=\"true\">\n <input ngx-gp-autocomplete\n id=\"account-location\"\n name=\"location\"\n class=\"form-control\"\n [attr.aria-labelledby]=\"'account-location-label'\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\" />\n </pw-input-container>\n <pw-input-container label=\"Phone Number\"\n name=\"phone_number\"\n controlId=\"account-phone_number\"\n errorMsg=\"Please enter phone number\">\n <input type=\"text\"\n id=\"account-phone_number\"\n class=\"form-control\"\n formControlName=\"phone_number\"\n autocomplete=\"tel\" name=\"input_phone_number_16\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 text-end\">\n <div class=\"mb-3\">\n <button class=\"btn btn-raised btn-primary\" [buttonBusy]=\"profileBusyButton\">\n {{ 'Button.Save' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </form>\n </div>\n </div>\n</section>\n<ng-template #content\n let-modal>\n <div class=\"card m-0\">\n <div class=\"card-content\">\n <div class=\"card-title\">\n <h3 class=\"modal-title\">{{ 'User.Profile.ProfilePicture' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"card-header\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile\n aspectRatio=\"auto\"\n (imageSelectionEvent)=\"onImageSelection($event)\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".overlay{left:50%;opacity:0;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);transition:.5s ease}.image-container{position:relative}.image-container:hover .image{opacity:.3}.image-container:hover .overlay{opacity:0}.overlay-text{background:#f0efef80;border-radius:50%;color:#000;font-size:16px;height:150px;line-height:150px;text-align:center;vertical-align:middle;width:150px}@media screen and (max-width: 767px){.card-body{padding:20px!important}}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$1.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: i6$2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9$1.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.DecimalPipe, name: "number" }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
|
|
456
456
|
}
|
|
457
457
|
__decorate([
|
|
458
458
|
ValidateForm('profileForm'),
|
|
@@ -462,7 +462,7 @@ __decorate([
|
|
|
462
462
|
], AccountDetailsComponent.prototype, "onProfileFormSubmit", null);
|
|
463
463
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: AccountDetailsComponent, decorators: [{
|
|
464
464
|
type: Component,
|
|
465
|
-
args: [{ selector: 'pw-account-details', standalone: false, template: "<div class=\"w-100 text-center\">\n <ng-template [ngIf]=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n</div>\n<div class=\"row d-flex flex-row\">\n <div class=\"col-md-8 order-md-first order-sm-last\">\n <section id=\"email-section\">\n <div class=\"row\">\n <div class=\"col-sm-12 col-md-8 col-lg-8\">\n <h2>{{ 'User.Account.RegisteredEmail' | transloco }}</h2>\n <!-- Email Form -->\n <section id=\"email-form\">\n <form [formGroup]=\"emailForm\"\n (ngSubmit)=\"onEmailFormSubmit()\">\n <!-- Email Address -->\n <div class=\"mt-0\">\n <label class=\"me-3\" id=\"account-primary-email-label\">{{ 'User.Account.PrimaryEmail' | transloco }}:\n </label>\n <strong>{{ validatedEmail }}</strong>\n <div class=\"mt-1\">\n <ng-container *ngIf=\"!toggleEmail\">\n <a class=\"btn btn-raised btn-outline-primary\"\n aria-label=\"Navigate to Target\"\n (click)=\"shouldUserChangeEmail()\">\n {{ 'User.Account.ChangeEmail' | transloco }}</a>\n </ng-container>\n <ng-container *ngIf=\"toggleEmail\">\n <div class=\"row\">\n <div class=\"clearfix\"></div>\n <div class=\"col-12 mb-3\">\n <input type=\"password\"\n class=\"form-control\"\n id=\"account-email-current-password\"\n name=\"currentPassword\"\n #password\n *ngIf=\"!passwordVerified\"\n placeholder=\"Current Password\"\n autocomplete=\"current-password\"\n (keyup)=\"checkValidity()\" />\n <input type=\"text\"\n class=\"form-control\"\n id=\"account-new-email\"\n name=\"newEmail\"\n *ngIf=\"passwordVerified\"\n placeholder=\"New Email\"\n autocomplete=\"email\"\n formControlName=\"email\" />\n </div>\n <div class=\"col-12\">\n <a *ngIf=\"toggleEmail\"\n class=\"btn btn-raised btn-outline-default my-2 me-2\"\n aria-label=\"Navigate to Target\"\n (click)=\"onToggleEmail()\">{{ 'Button.Cancel' | transloco }}</a>\n <button class=\"btn btn-raised btn-primary\"\n type=\"submit\"\n [buttonBusy]=\"validatePasswordBusyButton\"\n (click)=\"validatePassword()\"\n *ngIf=\"!passwordVerified\"\n [disabled]=\"isCurrentPasswordValid\">\n {{ 'User.Account.Validate' | transloco }}\n </button>\n <button type=\"submit\"\n class=\"btn btn-raised btn-primary\"\n [buttonBusy]=\"emailBusyButton\"\n *ngIf=\"passwordVerified\">\n {{\n 'User.Account.SendVerification' | transloco\n }}\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n <section id=\"slug\"\n class=\"mb-2 mt-3\">\n <div>\n <label class=\"me-3\" id=\"account-nickname-label\">{{ 'User.Account.NickName' | transloco }}:\n </label>\n <strong>{{ slug }}</strong>\n <div>\n <ng-container *ngIf=\"!toggleNickName\">\n <a class=\"btn btn-raised btn-outline-primary me-2\"\n aria-label=\"Navigate to Target\"\n (click)=\"toggleNickName = true\">\n {{ 'User.Account.ChangeNickname' | transloco }}</a>\n </ng-container>\n <ng-container *ngIf=\"toggleNickName\">\n <div class=\"mb-3\">\n <input type=\"text\"\n id=\"account-nickname\"\n name=\"nickname\"\n class=\"form-control slug-input\"\n aria-labelledby=\"account-nickname-label\"\n [(ngModel)]=\"slug\"\n [ngModelOptions]=\"{ standalone: true }\" />\n </div>\n <div>\n <button type=\"button\"\n class=\"btn btn-raised btn-outline-default\"\n (click)=\"toggleNickName = false\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"button\"\n class=\"btn btn-raised btn-primary ms-2\"\n [buttonBusy]=\"slugBusyButton\"\n [disabled]=\"slug?.length < 2\"\n (click)=\"onUpdateSlug()\">\n {{ 'User.Account.UpdateNickname' | transloco }}\n </button>\n </div>\n </ng-container>\n </div>\n </div>\n </section>\n </form>\n </section>\n </div>\n </div>\n <section id=\"password-change\"\n class=\"mt-1\">\n <form [formGroup]=\"passwordForm\"\n (ngSubmit)=\"onPasswordFormSubmit()\">\n <div class=\"row\">\n <div class=\"col-sm-12 col-md-8 col-lg-8 mt-4\">\n <h2>{{ 'User.Account.ChangePassword' | transloco }}</h2>\n </div>\n <ng-container *ngIf=\"!user?.has_password\">\n <div class=\"text-danger mx-3 my-2\">\n <div>\n You don't have a password set, click on\n <em>{{ 'User.Account.ChangePassword' | transloco }}</em>.\n </div>\n <div>{{ 'User.Profile.PictureMessage' | transloco }}</div>\n </div>\n </ng-container>\n <div class=\"col-sm-12 col-md-8 col-lg-8\"\n *ngIf=\"user?.has_password\">\n <ng-container *ngIf=\"togglePassword\">\n <div class=\"mb-3\">\n <label for=\"account-current-password\">{{ 'User.Account.CurrentPassword' | transloco }}</label>\n <input type=\"password\"\n id=\"account-current-password\"\n class=\"form-control\"\n formControlName=\"currentPassword\"\n autocomplete=\"current-password\" name=\"input_currentPassword_4\"/>\n <small class=\"form-text text-muted danger\"\n *ngIf=\"\n !passwordForm.get('currentPassword').valid &&\n (passwordForm.get('currentPassword').dirty ||\n passwordForm.get('currentPassword').touched)\n \">\n {{ 'User.Account.Required' | transloco }}\n </small>\n </div>\n <div class=\"mb-3\">\n <label for=\"account-new-password\">{{ 'User.Account.NewPassword' | transloco }}</label>\n <input type=\"password\"\n id=\"account-new-password\"\n class=\"form-control\"\n formControlName=\"newPassword\"\n autocomplete=\"new-password\" name=\"input_newPassword_5\"/>\n <small class=\"form-text text-muted danger\"\n *ngIf=\"\n !passwordForm.get('newPassword').valid &&\n (passwordForm.get('newPassword').dirty ||\n passwordForm.get('newPassword').touched)\n \">{{ 'User.Account.Validation.StrongPassword' | transloco }}\n </small>\n </div>\n <div class=\"mb-3\">\n <label for=\"account-confirm-password\">{{\n 'User.Account.ConfirmPassword' | transloco\n }}</label>\n <input type=\"password\"\n id=\"account-confirm-password\"\n class=\"form-control\"\n formControlName=\"confirmPassword\"\n autocomplete=\"new-password\" name=\"input_confirmPassword_6\"/>\n <div class=\"text-danger\"\n *ngIf=\"\n passwordForm.get('confirmPassword').touched &&\n passwordForm.get('confirmPassword').errors\n ?.MatchPassword\n \">\n {{ 'User.Account.Validation.PasswordsMatch' | transloco }}\n </div>\n </div>\n <div class=\"mb-3\">\n <a class=\"btn btn-raised btn-outline-default\"\n aria-label=\"Navigate to Target\"\n data-bs-target=\"\"\n *ngIf=\"togglePassword\"\n (click)=\"onTogglePassword()\">\n {{ 'Button.Cancel' | transloco }}</a>\n <button class=\"btn btn-raised btn-primary ms-2\"\n [buttonBusy]=\"passwordBusyButton\"\n [disabled]=\"!passwordForm.valid\">\n {{ 'User.Account.UpdatePassword' | transloco }}\n </button>\n </div>\n </ng-container>\n <div>\n <a class=\"btn btn-raised btn-outline-primary\"\n aria-label=\"Navigate to Target\"\n data-bs-target=\"\"\n *ngIf=\"!togglePassword\"\n (click)=\"togglePassword = !togglePassword\">\n {{ 'User.Account.ChangePassword' | transloco }}</a>\n </div>\n </div>\n <div class=\"col-sm-12 col-md-8 col-lg-8\"\n *ngIf=\"!user?.has_password\">\n <a class=\"btn btn-raised btn-primary me-2\"\n aria-label=\"Navigate to Target\"\n data-bs-target=\"\"\n (click)=\"sendMailToResetPassword()\">\n {{ 'User.Account.ChangePassword' | transloco }}</a>\n </div>\n </div>\n </form>\n </section>\n <ng-container *ngIf=\"user?.api_keys?.api_hits_max > 0\">\n <section id=\"api-credentials\"\n class=\"mt-4\">\n <div class=\"row\">\n <div class=\"col-12\">\n <h3>{{ 'User.Subscriptions.APICredentials.Title' | transloco }}</h3>\n <p>\n {{ 'User.Subscriptions.APICredentials.Description' | transloco }}\n </p>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"account-api-token\">{{ 'User.Subscriptions.APICredentials.AccessToken' | transloco }}</label>\n <div class=\"input-group\">\n <input type=\"text\"\n id=\"account-api-token\"\n name=\"api_token\"\n class=\"form-control\"\n [value]=\"showApiToken ? user?.api_keys?.api_user_token || ('User.Subscriptions.APICredentials.NoTokenAvailable' | transloco) : '*************************'\"\n readonly />\n <button type=\"button\"\n class=\"btn btn-outline-secondary\"\n (click)=\"toggleApiTokenVisibility()\">\n {{ showApiToken ? ('User.Subscriptions.APICredentials.Hide' | transloco) : ('User.Subscriptions.APICredentials.View' | transloco) }}\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"account-api-client-id\">{{ 'User.Subscriptions.APICredentials.ClientId' | transloco }}</label>\n <div class=\"input-group\">\n <input type=\"text\"\n id=\"account-api-client-id\"\n name=\"api_client_id\"\n class=\"form-control\"\n [value]=\"showApiClientId ? user?.api_keys?.api_user_id || ('User.Subscriptions.APICredentials.NoClientIdAvailable' | transloco) : '*************************'\"\n readonly />\n <button type=\"button\"\n class=\"btn btn-outline-secondary\"\n (click)=\"toggleApiClientIdVisibility()\">\n {{ showApiClientId ? ('User.Subscriptions.APICredentials.Hide' | transloco) : ('User.Subscriptions.APICredentials.View' | transloco) }}\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-12 mt-3\">\n <div class=\"d-flex align-items-center gap-3\">\n <button type=\"button\"\n class=\"btn btn-warning\"\n (click)=\"refreshApiTokens()\"\n [disabled]=\"refreshingTokens\">\n <i class=\"fas fa-sync-alt me-2\" [class.fa-spin]=\"refreshingTokens\"></i>\n {{ refreshingTokens ? ('User.Subscriptions.APICredentials.Refreshing' | transloco) : ('User.Subscriptions.APICredentials.RefreshTokens' | transloco) }}\n </button>\n\n <div class=\"d-flex align-items-center gap-2\">\n <ng-container *ngIf=\"user?.api_keys?.api_hits !== null\">\n <span class=\"text-muted\">{{ 'User.Subscriptions.APICredentials.ApiHits' | transloco }}:</span>\n <span class=\"fw-bold\">{{ user.api_keys.api_hits | number }}</span>\n </ng-container>\n\n <ng-container *ngIf=\"user?.api_keys?.api_hits_max !== null\">\n <span class=\"text-muted\">{{ 'User.Subscriptions.APICredentials.ApiHitsMax' | transloco }}:</span>\n <span class=\"fw-bold\">{{ user.api_keys.api_hits_max | number }}</span>\n </ng-container>\n\n <!-- Show utilization percentage when both values exist -->\n <ng-container *ngIf=\"user?.api_keys?.api_hits !== null && user?.api_keys?.api_hits_max !== null && user?.api_keys?.api_hits_max > 0\">\n <span class=\"text-muted ms-2\">(</span>\n <span class=\"fw-bold\" [ngClass]=\"{\n 'text-success': (user.api_keys.api_hits / user.api_keys.api_hits_max) <= 0.8,\n 'text-warning': (user.api_keys.api_hits / user.api_keys.api_hits_max) > 0.8 && (user.api_keys.api_hits / user.api_keys.api_hits_max) <= 0.9,\n 'text-danger': (user.api_keys.api_hits / user.api_keys.api_hits_max) > 0.9\n }\">\n {{ (user.api_keys.api_hits / user.api_keys.api_hits_max * 100) | number:'1.0-0' }}% consumed\n </span>\n <span class=\"text-muted\">)</span>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </section>\n </ng-container>\n </section>\n </div>\n <!-- Avatar -->\n <div class=\"mt-4 mt-sm-0 col-md-4 text-center order-md-last order-sm-first\">\n <h2>{{ 'User.Profile.Avatar' | transloco }}</h2>\n <div class=\"text-center mt-1\">\n <div class=\"image-container\">\n <img [src]=\"image\"\n width=\"150\"\n height=\"150\"\n class=\"image rounded-circle\"\n alt=\"User Male\"\n (error)=\"handleImageError($event, 'assets/img/icons/male.png')\" />\n <div class=\"overlay\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">\n <div class=\"overlay-text\">{{ 'User.Profile.Change' | transloco }}</div>\n </div>\n </div>\n <h4 class=\"mt-2\">{{ user?.first_name }} {{ user?.last_name }}</h4>\n <a aria-label=\"Navigate to Target\"\n class=\"d-inline-block mb-2\"\n (click)=\"openModal(content)\">\n {{ 'User.Profile.EditAvatar' | transloco }}</a>\n <br />\n </div>\n </div>\n</div>\n<br />\n<section id=\"user-profile\"\n class=\"mt-2\">\n <div class=\"row\">\n <div class=\"col-12\">\n <form [formGroup]=\"profileForm\"\n (ngSubmit)=\"onProfileFormSubmit()\">\n <h2>{{ 'User.Profile.UserProfile' | transloco }}</h2>\n <div class=\"row mt-3\">\n <div class=\"col-sm-12 col-md-6 col-lg-6\">\n <pw-input-container label=\"First Name\"\n name=\"first_name\"\n controlId=\"account-first_name\"\n errorMsg=\"Please enter first Name\">\n <input type=\"text\"\n id=\"account-first_name\"\n class=\"form-control\"\n formControlName=\"first_name\"\n autocomplete=\"given-name\" name=\"input_first_name_9\"/>\n </pw-input-container>\n <pw-input-container label=\"Preferred name\"\n name=\"preferred_name\"\n controlId=\"account-preferred_name\"\n errorMsg=\"Please enter preferred Name\">\n <input type=\"text\"\n id=\"account-preferred_name\"\n class=\"form-control\"\n formControlName=\"preferred_name\"\n autocomplete=\"username\" name=\"input_preferred_name_10\"/>\n </pw-input-container>\n <ng-container *ngIf=\"countries$ | async as countries\">\n <pw-input-container label=\"Country\"\n name=\"country\"\n controlId=\"account-country\"\n [useAriaLabelledbyOnly]=\"true\"\n errorMsg=\"Please select a country\">\n <p-select\n [attr.aria-labelledby]=\"'account-country-label'\"\n [options]=\"countries\"\n optionLabel=\"name\"\n optionValue=\"code\"\n formControlName=\"country\"\n (onChange)=\"getRegion($event.value)\"\n placeholder=\"{{ 'User.Profile.SelectCountry' | transloco }}\">\n </p-select>\n </pw-input-container>\n </ng-container>\n <pw-input-container label=\"Province\"\n name=\"province\"\n controlId=\"account-province\"\n errorMsg=\"Please enter province\">\n <input type=\"text\"\n id=\"account-province\"\n class=\"form-control\"\n formControlName=\"province\"\n autocomplete=\"postal-code\" name=\"input_province_11\"/>\n </pw-input-container>\n <pw-input-container label=\"Website Url\"\n name=\"website_url\"\n controlId=\"account-website_url\"\n errorMsg=\"Please enter Website\">\n <input type=\"text\"\n id=\"account-website_url\"\n class=\"form-control\"\n formControlName=\"website_url\"\n autocomplete=\"url\" name=\"input_website_url_12\"/>\n </pw-input-container>\n </div>\n <div class=\"col-sm-12 col-md-6 col-lg-6\">\n <pw-input-container label=\"Last Name\"\n name=\"last_name\"\n controlId=\"account-last_name\"\n errorMsg=\"Please enter last Name\">\n <input type=\"text\"\n id=\"account-last_name\"\n class=\"form-control\"\n formControlName=\"last_name\"\n autocomplete=\"family-name\" name=\"input_last_name_13\"/>\n </pw-input-container>\n <pw-input-container label=\"Date of Birth\"\n name=\"dob\"\n controlId=\"account-dob\"\n errorMsg=\"Please enter date of birth\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"account-dob\"\n name=\"dob\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"dob\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n [maxDate]=\"{ day: 31, month: 12, year: 2018 }\" />\n <div class=\"input-group-append\">\n <button class=\"btn btn-primary\"\n type=\"button\"\n id=\"account-dob-trigger\"\n aria-label=\"Open date picker for date of birth\"\n (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </pw-input-container>\n <pw-input-container label=\"State\"\n name=\"state\"\n controlId=\"account-state\"\n [useAriaLabelledbyOnly]=\"true\"\n errorMsg=\"Please select a state\">\n <p-select\n [attr.aria-labelledby]=\"'account-state-label'\"\n [options]=\"states\"\n [(ngModel)]=\"selectedState\"\n optionLabel=\"name\"\n optionValue=\"code\"\n formControlName=\"state\"\n [placeholder]=\"'User.Profile.SelectState' | transloco\">\n </p-select>\n\n </pw-input-container>\n <!-- Location -->\n <pw-input-container label=\"Location\"\n name=\"location\"\n controlId=\"account-location\"\n [useAriaLabelledbyOnly]=\"true\">\n <input ngx-gp-autocomplete\n id=\"account-location\"\n name=\"location\"\n class=\"form-control\"\n [attr.aria-labelledby]=\"'account-location-label'\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\" />\n </pw-input-container>\n <pw-input-container label=\"Phone Number\"\n name=\"phone_number\"\n controlId=\"account-phone_number\"\n errorMsg=\"Please enter phone number\">\n <input type=\"text\"\n id=\"account-phone_number\"\n class=\"form-control\"\n formControlName=\"phone_number\"\n autocomplete=\"tel\" name=\"input_phone_number_16\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 text-end\">\n <div class=\"mb-3\">\n <button class=\"btn btn-raised btn-primary\" [buttonBusy]=\"profileBusyButton\">\n {{ 'Button.Save' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </form>\n </div>\n </div>\n</section>\n<ng-template #content\n let-modal>\n <div class=\"card m-0\">\n <div class=\"card-content\">\n <div class=\"card-title\">\n <h3 class=\"modal-title\">{{ 'User.Profile.ProfilePicture' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"card-header\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile\n aspectRatio=\"auto\"\n (imageSelectionEvent)=\"onImageSelection($event)\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".overlay{left:50%;opacity:0;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);transition:.5s ease}.image-container{position:relative}.image-container:hover .image{opacity:.3}.image-container:hover .overlay{opacity:0}.overlay-text{background:#f0efef80;border-radius:50%;color:#000;font-size:16px;height:150px;line-height:150px;text-align:center;vertical-align:middle;width:150px}@media screen and (max-width: 767px){.card-body{padding:20px!important}}\n"] }]
|
|
465
|
+
args: [{ selector: 'pw-account-details', standalone: false, template: "<div class=\"w-100 text-center\">\n <ng-template [ngIf]=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n</div>\n<div class=\"row d-flex flex-row\">\n <div class=\"col-md-8 order-md-first order-sm-last\">\n <section id=\"email-section\">\n <div class=\"row\">\n <div class=\"col-sm-12 col-md-8 col-lg-8\">\n <h2>{{ 'User.Account.RegisteredEmail' | transloco }}</h2>\n <!-- Email Form -->\n <section id=\"email-form\">\n <form [formGroup]=\"emailForm\"\n (ngSubmit)=\"onEmailFormSubmit()\">\n <!-- Email Address -->\n <div class=\"mt-0\">\n <span id=\"account-primary-email-label\" class=\"me-3 pw-label-style\">{{ 'User.Account.PrimaryEmail' | transloco }}:\n </span>\n <strong>{{ validatedEmail }}</strong>\n <div class=\"mt-1\">\n <ng-container *ngIf=\"!toggleEmail\">\n <a class=\"btn btn-raised btn-outline-primary\"\n aria-label=\"Navigate to Target\"\n (click)=\"shouldUserChangeEmail()\">\n {{ 'User.Account.ChangeEmail' | transloco }}</a>\n </ng-container>\n <ng-container *ngIf=\"toggleEmail\">\n <div class=\"row\">\n <div class=\"clearfix\"></div>\n <div class=\"col-12 mb-3\">\n <input type=\"password\"\n class=\"form-control\"\n id=\"account-email-current-password\"\n name=\"currentPassword\"\n #password\n *ngIf=\"!passwordVerified\"\n placeholder=\"Current Password\"\n autocomplete=\"current-password\"\n (keyup)=\"checkValidity()\" />\n <input type=\"text\"\n class=\"form-control\"\n id=\"account-new-email\"\n name=\"newEmail\"\n *ngIf=\"passwordVerified\"\n placeholder=\"New Email\"\n autocomplete=\"email\"\n formControlName=\"email\" />\n </div>\n <div class=\"col-12\">\n <a *ngIf=\"toggleEmail\"\n class=\"btn btn-raised btn-outline-default my-2 me-2\"\n aria-label=\"Navigate to Target\"\n (click)=\"onToggleEmail()\">{{ 'Button.Cancel' | transloco }}</a>\n <button class=\"btn btn-raised btn-primary\"\n type=\"submit\"\n [buttonBusy]=\"validatePasswordBusyButton\"\n (click)=\"validatePassword()\"\n *ngIf=\"!passwordVerified\"\n [disabled]=\"isCurrentPasswordValid\">\n {{ 'User.Account.Validate' | transloco }}\n </button>\n <button type=\"submit\"\n class=\"btn btn-raised btn-primary\"\n [buttonBusy]=\"emailBusyButton\"\n *ngIf=\"passwordVerified\">\n {{\n 'User.Account.SendVerification' | transloco\n }}\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n <section id=\"slug\"\n class=\"mb-2 mt-3\">\n <div>\n <span class=\"me-3 pw-label-style\" id=\"account-nickname-label\">{{ 'User.Account.NickName' | transloco }}:\n </span>\n <strong>{{ slug }}</strong>\n <div>\n <ng-container *ngIf=\"!toggleNickName\">\n <a class=\"btn btn-raised btn-outline-primary me-2\"\n aria-label=\"Navigate to Target\"\n (click)=\"toggleNickName = true\">\n {{ 'User.Account.ChangeNickname' | transloco }}</a>\n </ng-container>\n <ng-container *ngIf=\"toggleNickName\">\n <div class=\"mb-3\">\n <input type=\"text\"\n id=\"account-nickname\"\n name=\"nickname\"\n class=\"form-control slug-input\"\n aria-labelledby=\"account-nickname-label\"\n [(ngModel)]=\"slug\"\n [ngModelOptions]=\"{ standalone: true }\" />\n </div>\n <div>\n <button type=\"button\"\n class=\"btn btn-raised btn-outline-default\"\n (click)=\"toggleNickName = false\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"button\"\n class=\"btn btn-raised btn-primary ms-2\"\n [buttonBusy]=\"slugBusyButton\"\n [disabled]=\"slug?.length < 2\"\n (click)=\"onUpdateSlug()\">\n {{ 'User.Account.UpdateNickname' | transloco }}\n </button>\n </div>\n </ng-container>\n </div>\n </div>\n </section>\n </form>\n </section>\n </div>\n </div>\n <section id=\"password-change\"\n class=\"mt-1\">\n <form [formGroup]=\"passwordForm\"\n (ngSubmit)=\"onPasswordFormSubmit()\">\n <div class=\"row\">\n <div class=\"col-sm-12 col-md-8 col-lg-8 mt-4\">\n <h2>{{ 'User.Account.ChangePassword' | transloco }}</h2>\n </div>\n <ng-container *ngIf=\"!user?.has_password\">\n <div class=\"text-danger mx-3 my-2\">\n <div>\n You don't have a password set, click on\n <em>{{ 'User.Account.ChangePassword' | transloco }}</em>.\n </div>\n <div>{{ 'User.Profile.PictureMessage' | transloco }}</div>\n </div>\n </ng-container>\n <div class=\"col-sm-12 col-md-8 col-lg-8\"\n *ngIf=\"user?.has_password\">\n <ng-container *ngIf=\"togglePassword\">\n <div class=\"mb-3\">\n <label for=\"account-current-password\">{{ 'User.Account.CurrentPassword' | transloco }}</label>\n <input type=\"password\"\n id=\"account-current-password\"\n class=\"form-control\"\n formControlName=\"currentPassword\"\n autocomplete=\"current-password\" name=\"input_currentPassword_4\"/>\n <small class=\"form-text text-muted danger\"\n *ngIf=\"\n !passwordForm.get('currentPassword').valid &&\n (passwordForm.get('currentPassword').dirty ||\n passwordForm.get('currentPassword').touched)\n \">\n {{ 'User.Account.Required' | transloco }}\n </small>\n </div>\n <div class=\"mb-3\">\n <label for=\"account-new-password\">{{ 'User.Account.NewPassword' | transloco }}</label>\n <input type=\"password\"\n id=\"account-new-password\"\n class=\"form-control\"\n formControlName=\"newPassword\"\n autocomplete=\"new-password\" name=\"input_newPassword_5\"/>\n <small class=\"form-text text-muted danger\"\n *ngIf=\"\n !passwordForm.get('newPassword').valid &&\n (passwordForm.get('newPassword').dirty ||\n passwordForm.get('newPassword').touched)\n \">{{ 'User.Account.Validation.StrongPassword' | transloco }}\n </small>\n </div>\n <div class=\"mb-3\">\n <label for=\"account-confirm-password\">{{\n 'User.Account.ConfirmPassword' | transloco\n }}</label>\n <input type=\"password\"\n id=\"account-confirm-password\"\n class=\"form-control\"\n formControlName=\"confirmPassword\"\n autocomplete=\"new-password\" name=\"input_confirmPassword_6\"/>\n <div class=\"text-danger\"\n *ngIf=\"\n passwordForm.get('confirmPassword').touched &&\n passwordForm.get('confirmPassword').errors\n ?.MatchPassword\n \">\n {{ 'User.Account.Validation.PasswordsMatch' | transloco }}\n </div>\n </div>\n <div class=\"mb-3\">\n <a class=\"btn btn-raised btn-outline-default\"\n aria-label=\"Navigate to Target\"\n data-bs-target=\"\"\n *ngIf=\"togglePassword\"\n (click)=\"onTogglePassword()\">\n {{ 'Button.Cancel' | transloco }}</a>\n <button class=\"btn btn-raised btn-primary ms-2\"\n [buttonBusy]=\"passwordBusyButton\"\n [disabled]=\"!passwordForm.valid\">\n {{ 'User.Account.UpdatePassword' | transloco }}\n </button>\n </div>\n </ng-container>\n <div>\n <a class=\"btn btn-raised btn-outline-primary\"\n aria-label=\"Navigate to Target\"\n data-bs-target=\"\"\n *ngIf=\"!togglePassword\"\n (click)=\"togglePassword = !togglePassword\">\n {{ 'User.Account.ChangePassword' | transloco }}</a>\n </div>\n </div>\n <div class=\"col-sm-12 col-md-8 col-lg-8\"\n *ngIf=\"!user?.has_password\">\n <a class=\"btn btn-raised btn-primary me-2\"\n aria-label=\"Navigate to Target\"\n data-bs-target=\"\"\n (click)=\"sendMailToResetPassword()\">\n {{ 'User.Account.ChangePassword' | transloco }}</a>\n </div>\n </div>\n </form>\n </section>\n <ng-container *ngIf=\"user?.api_keys?.api_hits_max > 0\">\n <section id=\"api-credentials\"\n class=\"mt-4\">\n <div class=\"row\">\n <div class=\"col-12\">\n <h3>{{ 'User.Subscriptions.APICredentials.Title' | transloco }}</h3>\n <p>\n {{ 'User.Subscriptions.APICredentials.Description' | transloco }}\n </p>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"account-api-token\">{{ 'User.Subscriptions.APICredentials.AccessToken' | transloco }}</label>\n <div class=\"input-group\">\n <input type=\"text\"\n id=\"account-api-token\"\n name=\"api_token\"\n class=\"form-control\"\n [value]=\"showApiToken ? user?.api_keys?.api_user_token || ('User.Subscriptions.APICredentials.NoTokenAvailable' | transloco) : '*************************'\"\n readonly />\n <button type=\"button\"\n class=\"btn btn-outline-secondary\"\n (click)=\"toggleApiTokenVisibility()\">\n {{ showApiToken ? ('User.Subscriptions.APICredentials.Hide' | transloco) : ('User.Subscriptions.APICredentials.View' | transloco) }}\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-md-6\">\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"account-api-client-id\">{{ 'User.Subscriptions.APICredentials.ClientId' | transloco }}</label>\n <div class=\"input-group\">\n <input type=\"text\"\n id=\"account-api-client-id\"\n name=\"api_client_id\"\n class=\"form-control\"\n [value]=\"showApiClientId ? user?.api_keys?.api_user_id || ('User.Subscriptions.APICredentials.NoClientIdAvailable' | transloco) : '*************************'\"\n readonly />\n <button type=\"button\"\n class=\"btn btn-outline-secondary\"\n (click)=\"toggleApiClientIdVisibility()\">\n {{ showApiClientId ? ('User.Subscriptions.APICredentials.Hide' | transloco) : ('User.Subscriptions.APICredentials.View' | transloco) }}\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-12 mt-3\">\n <div class=\"d-flex align-items-center gap-3\">\n <button type=\"button\"\n class=\"btn btn-warning\"\n (click)=\"refreshApiTokens()\"\n [disabled]=\"refreshingTokens\">\n <i class=\"fas fa-sync-alt me-2\" [class.fa-spin]=\"refreshingTokens\"></i>\n {{ refreshingTokens ? ('User.Subscriptions.APICredentials.Refreshing' | transloco) : ('User.Subscriptions.APICredentials.RefreshTokens' | transloco) }}\n </button>\n\n <div class=\"d-flex align-items-center gap-2\">\n <ng-container *ngIf=\"user?.api_keys?.api_hits !== null\">\n <span class=\"text-muted\">{{ 'User.Subscriptions.APICredentials.ApiHits' | transloco }}:</span>\n <span class=\"fw-bold\">{{ user.api_keys.api_hits | number }}</span>\n </ng-container>\n\n <ng-container *ngIf=\"user?.api_keys?.api_hits_max !== null\">\n <span class=\"text-muted\">{{ 'User.Subscriptions.APICredentials.ApiHitsMax' | transloco }}:</span>\n <span class=\"fw-bold\">{{ user.api_keys.api_hits_max | number }}</span>\n </ng-container>\n\n <!-- Show utilization percentage when both values exist -->\n <ng-container *ngIf=\"user?.api_keys?.api_hits !== null && user?.api_keys?.api_hits_max !== null && user?.api_keys?.api_hits_max > 0\">\n <span class=\"text-muted ms-2\">(</span>\n <span class=\"fw-bold\" [ngClass]=\"{\n 'text-success': (user.api_keys.api_hits / user.api_keys.api_hits_max) <= 0.8,\n 'text-warning': (user.api_keys.api_hits / user.api_keys.api_hits_max) > 0.8 && (user.api_keys.api_hits / user.api_keys.api_hits_max) <= 0.9,\n 'text-danger': (user.api_keys.api_hits / user.api_keys.api_hits_max) > 0.9\n }\">\n {{ (user.api_keys.api_hits / user.api_keys.api_hits_max * 100) | number:'1.0-0' }}% consumed\n </span>\n <span class=\"text-muted\">)</span>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </section>\n </ng-container>\n </section>\n </div>\n <!-- Avatar -->\n <div class=\"mt-4 mt-sm-0 col-md-4 text-center order-md-last order-sm-first\">\n <h2>{{ 'User.Profile.Avatar' | transloco }}</h2>\n <div class=\"text-center mt-1\">\n <div class=\"image-container\">\n <img [src]=\"image\"\n width=\"150\"\n height=\"150\"\n class=\"image rounded-circle\"\n alt=\"User Male\"\n (error)=\"handleImageError($event, 'assets/img/icons/male.png')\" />\n <div class=\"overlay\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">\n <div class=\"overlay-text\">{{ 'User.Profile.Change' | transloco }}</div>\n </div>\n </div>\n <h4 class=\"mt-2\">{{ user?.first_name }} {{ user?.last_name }}</h4>\n <a aria-label=\"Navigate to Target\"\n class=\"d-inline-block mb-2\"\n (click)=\"openModal(content)\">\n {{ 'User.Profile.EditAvatar' | transloco }}</a>\n <br />\n </div>\n </div>\n</div>\n<br />\n<section id=\"user-profile\"\n class=\"mt-2\">\n <div class=\"row\">\n <div class=\"col-12\">\n <form [formGroup]=\"profileForm\"\n (ngSubmit)=\"onProfileFormSubmit()\">\n <h2>{{ 'User.Profile.UserProfile' | transloco }}</h2>\n <div class=\"row mt-3\">\n <div class=\"col-sm-12 col-md-6 col-lg-6\">\n <pw-input-container label=\"First Name\"\n name=\"first_name\"\n controlId=\"account-first_name\"\n errorMsg=\"Please enter first Name\">\n <input type=\"text\"\n id=\"account-first_name\"\n class=\"form-control\"\n formControlName=\"first_name\"\n autocomplete=\"given-name\" name=\"input_first_name_9\"/>\n </pw-input-container>\n <pw-input-container label=\"Preferred name\"\n name=\"preferred_name\"\n controlId=\"account-preferred_name\"\n errorMsg=\"Please enter preferred Name\">\n <input type=\"text\"\n id=\"account-preferred_name\"\n class=\"form-control\"\n formControlName=\"preferred_name\"\n autocomplete=\"username\" name=\"input_preferred_name_10\"/>\n </pw-input-container>\n <ng-container *ngIf=\"countries$ | async as countries\">\n <pw-input-container label=\"Country\"\n name=\"country\"\n controlId=\"account-country\"\n [useAriaLabelledbyOnly]=\"true\"\n errorMsg=\"Please select a country\">\n <p-select\n [attr.aria-labelledby]=\"'account-country-label'\"\n [options]=\"countries\"\n optionLabel=\"name\"\n optionValue=\"code\"\n formControlName=\"country\"\n (onChange)=\"getRegion($event.value)\"\n placeholder=\"{{ 'User.Profile.SelectCountry' | transloco }}\">\n </p-select>\n </pw-input-container>\n </ng-container>\n <pw-input-container label=\"Province\"\n name=\"province\"\n controlId=\"account-province\"\n errorMsg=\"Please enter province\">\n <input type=\"text\"\n id=\"account-province\"\n class=\"form-control\"\n formControlName=\"province\"\n autocomplete=\"postal-code\" name=\"input_province_11\"/>\n </pw-input-container>\n <pw-input-container label=\"Website Url\"\n name=\"website_url\"\n controlId=\"account-website_url\"\n errorMsg=\"Please enter Website\">\n <input type=\"text\"\n id=\"account-website_url\"\n class=\"form-control\"\n formControlName=\"website_url\"\n autocomplete=\"url\" name=\"input_website_url_12\"/>\n </pw-input-container>\n </div>\n <div class=\"col-sm-12 col-md-6 col-lg-6\">\n <pw-input-container label=\"Last Name\"\n name=\"last_name\"\n controlId=\"account-last_name\"\n errorMsg=\"Please enter last Name\">\n <input type=\"text\"\n id=\"account-last_name\"\n class=\"form-control\"\n formControlName=\"last_name\"\n autocomplete=\"family-name\" name=\"input_last_name_13\"/>\n </pw-input-container>\n <pw-input-container label=\"Date of Birth\"\n name=\"dob\"\n controlId=\"account-dob\"\n errorMsg=\"Please enter date of birth\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"account-dob\"\n name=\"dob\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"dob\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n [maxDate]=\"{ day: 31, month: 12, year: 2018 }\" />\n <div class=\"input-group-append\">\n <button class=\"btn btn-primary\"\n type=\"button\"\n id=\"account-dob-trigger\"\n aria-label=\"Open date picker for date of birth\"\n (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </pw-input-container>\n <pw-input-container label=\"State\"\n name=\"state\"\n controlId=\"account-state\"\n [useAriaLabelledbyOnly]=\"true\"\n errorMsg=\"Please select a state\">\n <p-select\n [attr.aria-labelledby]=\"'account-state-label'\"\n [options]=\"states\"\n [(ngModel)]=\"selectedState\"\n optionLabel=\"name\"\n optionValue=\"code\"\n formControlName=\"state\"\n [placeholder]=\"'User.Profile.SelectState' | transloco\">\n </p-select>\n\n </pw-input-container>\n <!-- Location -->\n <pw-input-container label=\"Location\"\n name=\"location\"\n controlId=\"account-location\"\n [useAriaLabelledbyOnly]=\"true\">\n <input ngx-gp-autocomplete\n id=\"account-location\"\n name=\"location\"\n class=\"form-control\"\n [attr.aria-labelledby]=\"'account-location-label'\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\" />\n </pw-input-container>\n <pw-input-container label=\"Phone Number\"\n name=\"phone_number\"\n controlId=\"account-phone_number\"\n errorMsg=\"Please enter phone number\">\n <input type=\"text\"\n id=\"account-phone_number\"\n class=\"form-control\"\n formControlName=\"phone_number\"\n autocomplete=\"tel\" name=\"input_phone_number_16\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 text-end\">\n <div class=\"mb-3\">\n <button class=\"btn btn-raised btn-primary\" [buttonBusy]=\"profileBusyButton\">\n {{ 'Button.Save' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </form>\n </div>\n </div>\n</section>\n<ng-template #content\n let-modal>\n <div class=\"card m-0\">\n <div class=\"card-content\">\n <div class=\"card-title\">\n <h3 class=\"modal-title\">{{ 'User.Profile.ProfilePicture' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"card-header\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile\n aspectRatio=\"auto\"\n (imageSelectionEvent)=\"onImageSelection($event)\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".overlay{left:50%;opacity:0;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);transition:.5s ease}.image-container{position:relative}.image-container:hover .image{opacity:.3}.image-container:hover .overlay{opacity:0}.overlay-text{background:#f0efef80;border-radius:50%;color:#000;font-size:16px;height:150px;line-height:150px;text-align:center;vertical-align:middle;width:150px}@media screen and (max-width: 767px){.card-body{padding:20px!important}}\n"] }]
|
|
466
466
|
}], ctorParameters: () => [{ type: i2.UntypedFormBuilder }, { type: i1.NgbModal }, { type: i1$1.AuthService }, { type: i1$1.GeoService }, { type: i1$1.ProfileService }, { type: i0.Injector }], propDecorators: { placesRef: [{
|
|
467
467
|
type: ViewChild,
|
|
468
468
|
args: ['ngxPlaces']
|
|
@@ -1941,11 +1941,11 @@ class SecurityTabComponent extends AppBaseComponent {
|
|
|
1941
1941
|
}
|
|
1942
1942
|
}
|
|
1943
1943
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SecurityTabComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1944
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: SecurityTabComponent, isStandalone: false, selector: "pw-security-tab", viewQueries: [{ propertyName: "passwordRef", first: true, predicate: ["password"], descendants: true }, { propertyName: "verificationCode", first: true, predicate: ["verificationCode"], descendants: true }, { propertyName: "ssoPasswordRef", first: true, predicate: ["ssoPassword"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>Security settings</h2>\n </div>\n</div>\n<p-accordion>\n <p-accordion-panel value=\"0\">\n <p-accordion-header>Two Factor Authentication (2FA)</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-2\">\n <div class=\"col-12\">\n <div class=\"d-flex\">\n <p class=\"small text-muted\"> Add an extra layer of security to your user account by asking to verify their\n identity when they enter a username and password </p>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <!-- Disable 2FA -->\n <button class=\"btn btn-danger\" *ngIf=\"user?.enable_two_factor_authenticator\" (click)=\"show2FA = true\"> Disable\n </button>\n <!-- Enable 2FA -->\n <button class=\"btn btn-primary\" *ngIf=\"!user?.enable_two_factor_authenticator\"\n [disabled]=\"created2faDetails?.code\" (click)=\"show2FA = true\"> Enable </button>\n </div>\n </div>\n <div class=\"row\" *ngIf=\"show2FA\">\n <div class=\"col-12 col-md-6 col-lg-4 mt-2\">\n <div class=\"mb-3\">\n <input type=\"password\" class=\"form-control\" #password *ngIf=\"!passwordVerified\" placeholder=\"Current Password\"\n (keyup)=\"checkValidity()\" id=\"input_current_password_800\" name=\"input_current_password_800\" />\n </div>\n </div>\n <div *ngIf=\"created2faDetails?.code\" class=\"col-12\">\n <p class=\"small\"> Scan the QR code below or use secret manually with the Google authenticator app on your mobile\n device, after that fill in the field below with the code generated in the app </p>\n <img [src]=\"created2faDetails?.qr_uri\" alt=\"loading QR code...\" class=\"qr-code img-thumbnail img-responsive\" />\n <strong> Secret Key: {{ created2faDetails?.code }}</strong>\n <p class=\"small\">Auth Type: Time Based OTP</p>\n </div>\n </div>\n <div class=\"row\" *ngIf=\"show2FA\">\n <div class=\"col-4\">\n <div class=\"mb-3 mt-2\">\n <input type=\"text\" #verificationCode class=\"form-control\" *ngIf=\"passwordVerified\"\n placeholder=\"Provide passcode from authenticator app\" id=\"input_provide_passcode_from_authenticator_app_800\" name=\"input_provide_passcode_from_authenticator_app_800\" />\n </div>\n </div>\n <div class=\"col-12\" *ngIf=\"show2FA\">\n <div class=\"d-flex mt-2\">\n <button class=\"btn btn-raised btn-outline-default me-2\" (click)=\"reset()\"> Cancel </button>\n <button class=\"btn btn-raised btn-primary\" *ngIf=\"!passwordVerified\" (click)=\"validatePassword()\"\n [disabled]=\"isCurrentPasswordValid\"> Validate </button>\n <button class=\"btn btn-raised btn-primary\" *ngIf=\"passwordVerified\" (click)=\"verify2FA()\"> Confirm </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n</p-accordion>\n<p-accordion>\n <p-accordion-panel value=\"0\">\n <p-accordion-header>Single Sign On (SSO) - AWS Cognito</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-2\">\n <div class=\"col-12\">\n <p class=\"small text-muted\"> {{ user?.cognito_sso_activated ? 'You have already activated AWS Cognito SSO, if you click on \u2018Resend activation email\u2018 you\u2018ll receive an email with instructions to reset your SSO\n password.' : 'Once you click \u2018Enable\u2019, you\u2019ll receive an email with instructions to activate your AWS Cognito\n SSO. This will enable you to access all our systems using a single password.' }} </p>\n </div>\n </div>\n <!-- Enable or Resend Button -->\n <div class=\"row\" *ngIf=\"!showSSOSection\">\n <div class=\"col-12\">\n <button class=\"btn btn-primary\" (click)=\"showSSOSection = true\"> {{ user?.cognito_sso_activated ? 'Resend\n activation email' : 'Enable' }} </button>\n </div>\n </div>\n <!-- Password Validation -->\n <div class=\"row\" *ngIf=\"showSSOSection\">\n <div class=\"col-12 col-md-6 col-lg-4 mt-2\" *ngIf=\"!ssoPasswordVerified\">\n <div class=\"mb-3\">\n <input type=\"password\" class=\"form-control\" #ssoPassword placeholder=\"Current Password\"\n (keyup)=\"checkSSOPasswordValidity()\" id=\"
|
|
1944
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: SecurityTabComponent, isStandalone: false, selector: "pw-security-tab", viewQueries: [{ propertyName: "passwordRef", first: true, predicate: ["password"], descendants: true }, { propertyName: "verificationCode", first: true, predicate: ["verificationCode"], descendants: true }, { propertyName: "ssoPasswordRef", first: true, predicate: ["ssoPassword"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>Security settings</h2>\n </div>\n</div>\n<p-accordion>\n <p-accordion-panel value=\"0\">\n <p-accordion-header>Two Factor Authentication (2FA)</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-2\">\n <div class=\"col-12\">\n <div class=\"d-flex\">\n <p class=\"small text-muted\"> Add an extra layer of security to your user account by asking to verify their\n identity when they enter a username and password </p>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <!-- Disable 2FA -->\n <button class=\"btn btn-danger\" *ngIf=\"user?.enable_two_factor_authenticator\" (click)=\"show2FA = true\"> Disable\n </button>\n <!-- Enable 2FA -->\n <button class=\"btn btn-primary\" *ngIf=\"!user?.enable_two_factor_authenticator\"\n [disabled]=\"created2faDetails?.code\" (click)=\"show2FA = true\"> Enable </button>\n </div>\n </div>\n <div class=\"row\" *ngIf=\"show2FA\">\n <div class=\"col-12 col-md-6 col-lg-4 mt-2\">\n <div class=\"mb-3\">\n <input type=\"password\" class=\"form-control\" #password *ngIf=\"!passwordVerified\" placeholder=\"Current Password\"\n (keyup)=\"checkValidity()\" id=\"input_current_password_800\" name=\"input_current_password_800\" />\n </div>\n </div>\n <div *ngIf=\"created2faDetails?.code\" class=\"col-12\">\n <p class=\"small\"> Scan the QR code below or use secret manually with the Google authenticator app on your mobile\n device, after that fill in the field below with the code generated in the app </p>\n <img [src]=\"created2faDetails?.qr_uri\" alt=\"loading QR code...\" class=\"qr-code img-thumbnail img-responsive\" />\n <strong> Secret Key: {{ created2faDetails?.code }}</strong>\n <p class=\"small\">Auth Type: Time Based OTP</p>\n </div>\n </div>\n <div class=\"row\" *ngIf=\"show2FA\">\n <div class=\"col-4\">\n <div class=\"mb-3 mt-2\">\n <input type=\"text\" #verificationCode class=\"form-control\" *ngIf=\"passwordVerified\"\n placeholder=\"Provide passcode from authenticator app\" id=\"input_provide_passcode_from_authenticator_app_800\" name=\"input_provide_passcode_from_authenticator_app_800\" />\n </div>\n </div>\n <div class=\"col-12\" *ngIf=\"show2FA\">\n <div class=\"d-flex mt-2\">\n <button class=\"btn btn-raised btn-outline-default me-2\" (click)=\"reset()\"> Cancel </button>\n <button class=\"btn btn-raised btn-primary\" *ngIf=\"!passwordVerified\" (click)=\"validatePassword()\"\n [disabled]=\"isCurrentPasswordValid\"> Validate </button>\n <button class=\"btn btn-raised btn-primary\" *ngIf=\"passwordVerified\" (click)=\"verify2FA()\"> Confirm </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n</p-accordion>\n<p-accordion>\n <p-accordion-panel value=\"0\">\n <p-accordion-header>Single Sign On (SSO) - AWS Cognito</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-2\">\n <div class=\"col-12\">\n <p class=\"small text-muted\"> {{ user?.cognito_sso_activated ? 'You have already activated AWS Cognito SSO, if you click on \u2018Resend activation email\u2018 you\u2018ll receive an email with instructions to reset your SSO\n password.' : 'Once you click \u2018Enable\u2019, you\u2019ll receive an email with instructions to activate your AWS Cognito\n SSO. This will enable you to access all our systems using a single password.' }} </p>\n </div>\n </div>\n <!-- Enable or Resend Button -->\n <div class=\"row\" *ngIf=\"!showSSOSection\">\n <div class=\"col-12\">\n <button class=\"btn btn-primary\" (click)=\"showSSOSection = true\"> {{ user?.cognito_sso_activated ? 'Resend\n activation email' : 'Enable' }} </button>\n </div>\n </div>\n <!-- Password Validation -->\n <div class=\"row\" *ngIf=\"showSSOSection\">\n <div class=\"col-12 col-md-6 col-lg-4 mt-2\" *ngIf=\"!ssoPasswordVerified\">\n <div class=\"mb-3\">\n <input type=\"password\" class=\"form-control\" #ssoPassword placeholder=\"Current Password\"\n (keyup)=\"checkSSOPasswordValidity()\" id=\"input_current_password_801\" name=\"input_current_password_801\" />\n </div>\n </div>\n <div class=\"col-12\">\n <div class=\"d-flex mt-2\">\n <button class=\"btn btn-raised btn-outline-default me-2\" (click)=\"resetSSO()\"> Cancel </button>\n <button class=\"btn btn-raised btn-primary\" *ngIf=\"!ssoPasswordVerified\" (click)=\"validateSSOPassword()\"\n [disabled]=\"isSSOPasswordInvalid\"> Validate </button>\n <button class=\"btn btn-primary\" *ngIf=\"ssoPasswordVerified\" (click)=\"triggerSSO()\"> Confirm </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n</p-accordion>\n", styles: [".qr-code{margin:10px;max-width:200px}.text-muted{font-size:15px!important}\n"], dependencies: [{ kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "style", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "activeIndex", "headerAriaLevel"], outputs: ["valueChange", "activeIndexChange", "onClose", "onOpen"] }, { kind: "component", type: i3.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i3.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i3.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }] }); }
|
|
1945
1945
|
}
|
|
1946
1946
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SecurityTabComponent, decorators: [{
|
|
1947
1947
|
type: Component,
|
|
1948
|
-
args: [{ selector: 'pw-security-tab', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>Security settings</h2>\n </div>\n</div>\n<p-accordion>\n <p-accordion-panel value=\"0\">\n <p-accordion-header>Two Factor Authentication (2FA)</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-2\">\n <div class=\"col-12\">\n <div class=\"d-flex\">\n <p class=\"small text-muted\"> Add an extra layer of security to your user account by asking to verify their\n identity when they enter a username and password </p>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <!-- Disable 2FA -->\n <button class=\"btn btn-danger\" *ngIf=\"user?.enable_two_factor_authenticator\" (click)=\"show2FA = true\"> Disable\n </button>\n <!-- Enable 2FA -->\n <button class=\"btn btn-primary\" *ngIf=\"!user?.enable_two_factor_authenticator\"\n [disabled]=\"created2faDetails?.code\" (click)=\"show2FA = true\"> Enable </button>\n </div>\n </div>\n <div class=\"row\" *ngIf=\"show2FA\">\n <div class=\"col-12 col-md-6 col-lg-4 mt-2\">\n <div class=\"mb-3\">\n <input type=\"password\" class=\"form-control\" #password *ngIf=\"!passwordVerified\" placeholder=\"Current Password\"\n (keyup)=\"checkValidity()\" id=\"input_current_password_800\" name=\"input_current_password_800\" />\n </div>\n </div>\n <div *ngIf=\"created2faDetails?.code\" class=\"col-12\">\n <p class=\"small\"> Scan the QR code below or use secret manually with the Google authenticator app on your mobile\n device, after that fill in the field below with the code generated in the app </p>\n <img [src]=\"created2faDetails?.qr_uri\" alt=\"loading QR code...\" class=\"qr-code img-thumbnail img-responsive\" />\n <strong> Secret Key: {{ created2faDetails?.code }}</strong>\n <p class=\"small\">Auth Type: Time Based OTP</p>\n </div>\n </div>\n <div class=\"row\" *ngIf=\"show2FA\">\n <div class=\"col-4\">\n <div class=\"mb-3 mt-2\">\n <input type=\"text\" #verificationCode class=\"form-control\" *ngIf=\"passwordVerified\"\n placeholder=\"Provide passcode from authenticator app\" id=\"input_provide_passcode_from_authenticator_app_800\" name=\"input_provide_passcode_from_authenticator_app_800\" />\n </div>\n </div>\n <div class=\"col-12\" *ngIf=\"show2FA\">\n <div class=\"d-flex mt-2\">\n <button class=\"btn btn-raised btn-outline-default me-2\" (click)=\"reset()\"> Cancel </button>\n <button class=\"btn btn-raised btn-primary\" *ngIf=\"!passwordVerified\" (click)=\"validatePassword()\"\n [disabled]=\"isCurrentPasswordValid\"> Validate </button>\n <button class=\"btn btn-raised btn-primary\" *ngIf=\"passwordVerified\" (click)=\"verify2FA()\"> Confirm </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n</p-accordion>\n<p-accordion>\n <p-accordion-panel value=\"0\">\n <p-accordion-header>Single Sign On (SSO) - AWS Cognito</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-2\">\n <div class=\"col-12\">\n <p class=\"small text-muted\"> {{ user?.cognito_sso_activated ? 'You have already activated AWS Cognito SSO, if you click on \u2018Resend activation email\u2018 you\u2018ll receive an email with instructions to reset your SSO\n password.' : 'Once you click \u2018Enable\u2019, you\u2019ll receive an email with instructions to activate your AWS Cognito\n SSO. This will enable you to access all our systems using a single password.' }} </p>\n </div>\n </div>\n <!-- Enable or Resend Button -->\n <div class=\"row\" *ngIf=\"!showSSOSection\">\n <div class=\"col-12\">\n <button class=\"btn btn-primary\" (click)=\"showSSOSection = true\"> {{ user?.cognito_sso_activated ? 'Resend\n activation email' : 'Enable' }} </button>\n </div>\n </div>\n <!-- Password Validation -->\n <div class=\"row\" *ngIf=\"showSSOSection\">\n <div class=\"col-12 col-md-6 col-lg-4 mt-2\" *ngIf=\"!ssoPasswordVerified\">\n <div class=\"mb-3\">\n <input type=\"password\" class=\"form-control\" #ssoPassword placeholder=\"Current Password\"\n (keyup)=\"checkSSOPasswordValidity()\" id=\"
|
|
1948
|
+
args: [{ selector: 'pw-security-tab', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>Security settings</h2>\n </div>\n</div>\n<p-accordion>\n <p-accordion-panel value=\"0\">\n <p-accordion-header>Two Factor Authentication (2FA)</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-2\">\n <div class=\"col-12\">\n <div class=\"d-flex\">\n <p class=\"small text-muted\"> Add an extra layer of security to your user account by asking to verify their\n identity when they enter a username and password </p>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <!-- Disable 2FA -->\n <button class=\"btn btn-danger\" *ngIf=\"user?.enable_two_factor_authenticator\" (click)=\"show2FA = true\"> Disable\n </button>\n <!-- Enable 2FA -->\n <button class=\"btn btn-primary\" *ngIf=\"!user?.enable_two_factor_authenticator\"\n [disabled]=\"created2faDetails?.code\" (click)=\"show2FA = true\"> Enable </button>\n </div>\n </div>\n <div class=\"row\" *ngIf=\"show2FA\">\n <div class=\"col-12 col-md-6 col-lg-4 mt-2\">\n <div class=\"mb-3\">\n <input type=\"password\" class=\"form-control\" #password *ngIf=\"!passwordVerified\" placeholder=\"Current Password\"\n (keyup)=\"checkValidity()\" id=\"input_current_password_800\" name=\"input_current_password_800\" />\n </div>\n </div>\n <div *ngIf=\"created2faDetails?.code\" class=\"col-12\">\n <p class=\"small\"> Scan the QR code below or use secret manually with the Google authenticator app on your mobile\n device, after that fill in the field below with the code generated in the app </p>\n <img [src]=\"created2faDetails?.qr_uri\" alt=\"loading QR code...\" class=\"qr-code img-thumbnail img-responsive\" />\n <strong> Secret Key: {{ created2faDetails?.code }}</strong>\n <p class=\"small\">Auth Type: Time Based OTP</p>\n </div>\n </div>\n <div class=\"row\" *ngIf=\"show2FA\">\n <div class=\"col-4\">\n <div class=\"mb-3 mt-2\">\n <input type=\"text\" #verificationCode class=\"form-control\" *ngIf=\"passwordVerified\"\n placeholder=\"Provide passcode from authenticator app\" id=\"input_provide_passcode_from_authenticator_app_800\" name=\"input_provide_passcode_from_authenticator_app_800\" />\n </div>\n </div>\n <div class=\"col-12\" *ngIf=\"show2FA\">\n <div class=\"d-flex mt-2\">\n <button class=\"btn btn-raised btn-outline-default me-2\" (click)=\"reset()\"> Cancel </button>\n <button class=\"btn btn-raised btn-primary\" *ngIf=\"!passwordVerified\" (click)=\"validatePassword()\"\n [disabled]=\"isCurrentPasswordValid\"> Validate </button>\n <button class=\"btn btn-raised btn-primary\" *ngIf=\"passwordVerified\" (click)=\"verify2FA()\"> Confirm </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n</p-accordion>\n<p-accordion>\n <p-accordion-panel value=\"0\">\n <p-accordion-header>Single Sign On (SSO) - AWS Cognito</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-2\">\n <div class=\"col-12\">\n <p class=\"small text-muted\"> {{ user?.cognito_sso_activated ? 'You have already activated AWS Cognito SSO, if you click on \u2018Resend activation email\u2018 you\u2018ll receive an email with instructions to reset your SSO\n password.' : 'Once you click \u2018Enable\u2019, you\u2019ll receive an email with instructions to activate your AWS Cognito\n SSO. This will enable you to access all our systems using a single password.' }} </p>\n </div>\n </div>\n <!-- Enable or Resend Button -->\n <div class=\"row\" *ngIf=\"!showSSOSection\">\n <div class=\"col-12\">\n <button class=\"btn btn-primary\" (click)=\"showSSOSection = true\"> {{ user?.cognito_sso_activated ? 'Resend\n activation email' : 'Enable' }} </button>\n </div>\n </div>\n <!-- Password Validation -->\n <div class=\"row\" *ngIf=\"showSSOSection\">\n <div class=\"col-12 col-md-6 col-lg-4 mt-2\" *ngIf=\"!ssoPasswordVerified\">\n <div class=\"mb-3\">\n <input type=\"password\" class=\"form-control\" #ssoPassword placeholder=\"Current Password\"\n (keyup)=\"checkSSOPasswordValidity()\" id=\"input_current_password_801\" name=\"input_current_password_801\" />\n </div>\n </div>\n <div class=\"col-12\">\n <div class=\"d-flex mt-2\">\n <button class=\"btn btn-raised btn-outline-default me-2\" (click)=\"resetSSO()\"> Cancel </button>\n <button class=\"btn btn-raised btn-primary\" *ngIf=\"!ssoPasswordVerified\" (click)=\"validateSSOPassword()\"\n [disabled]=\"isSSOPasswordInvalid\"> Validate </button>\n <button class=\"btn btn-primary\" *ngIf=\"ssoPasswordVerified\" (click)=\"triggerSSO()\"> Confirm </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n</p-accordion>\n", styles: [".qr-code{margin:10px;max-width:200px}.text-muted{font-size:15px!important}\n"] }]
|
|
1949
1949
|
}], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { passwordRef: [{
|
|
1950
1950
|
type: ViewChild,
|
|
1951
1951
|
args: ['password', { static: false }]
|
|
@@ -2118,7 +2118,7 @@ class SupportDetailsComponent extends AppBaseComponent {
|
|
|
2118
2118
|
HelperService.onUploadError(event, this.toast);
|
|
2119
2119
|
}
|
|
2120
2120
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SupportDetailsComponent, deps: [{ token: i0.Injector }, { token: i1$1.CommonService }, { token: i1$1.AuthService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2121
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: SupportDetailsComponent, isStandalone: false, selector: "pw-support-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\" (click)=\"back()\" class=\"previous\"><i\n class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"mt-3\">{{ 'Label.NewSupport' | transloco }}</h3>\n </div>\n <div class=\"p-2 m-1 mt-3\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12\">\n <pw-input-container controlId=\"support-details-title\"\n label=\"title\"\n name=\"title\"\n errorMsg=\"Title is required\">\n <input type=\"text\"\n id=\"support-details-title\"\n class=\"form-control\"\n formControlName=\"title\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-12\">\n <pw-input-container controlId=\"support-details-description\"\n label=\"Description\"\n errorMsg=\"description is required\"\n name=\"description\">\n <textarea rows=\"3\"\n id=\"support-details-description\"\n type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <h4 class=\"mt-4\">You can add a picture here</h4>\n <div class=\"mb-3 file-upload-support-details\">\n <
|
|
2121
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: SupportDetailsComponent, isStandalone: false, selector: "pw-support-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\" (click)=\"back()\" class=\"previous\"><i\n class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"mt-3\">{{ 'Label.NewSupport' | transloco }}</h3>\n </div>\n <div class=\"p-2 m-1 mt-3\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12\">\n <pw-input-container controlId=\"support-details-title\"\n label=\"title\"\n name=\"title\"\n errorMsg=\"Title is required\">\n <input type=\"text\"\n id=\"support-details-title\"\n class=\"form-control\"\n formControlName=\"title\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-12\">\n <pw-input-container controlId=\"support-details-description\"\n label=\"Description\"\n errorMsg=\"description is required\"\n name=\"description\">\n <textarea rows=\"3\"\n id=\"support-details-description\"\n type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <h4 class=\"mt-4\">You can add a picture here</h4>\n <div class=\"mb-3 file-upload-support-details\">\n <span id=\"support-details-file-label\" class=\"pw-label-style\">Upload Picture</span>\n <p-fileUpload #forms\n [attr.aria-labelledby]=\"'support-details-file-label'\"\n name=\"myfile[]\"\n [customUpload]=\"true\"\n [showUploadButton]=\"false\"\n accept=\"image/*\"\n [disabled]=\"uploadedFiles && uploadedFiles.length > 0\"\n (onSelect)=\"onSelect($event)\"\n (onRemove)=\"onRemove($event)\"\n (onError)=\"onUploadError($event)\">\n <ng-template pTemplate=\"content\"\n [ngIf]=\"uploadedFiles?.length\">\n <div class=\"drag-drop-text\" *ngIf=\"!filesUploaded && (!uploadedFiles || uploadedFiles.length === 0)\">\n <p>You can drag and drop your file here</p>\n </div>\n </ng-template>\n </p-fileUpload>\n </div>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"isLoading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div class=\"col-12 text-end mt-3\">\n <ng-container *ngIf=\"isSubmitClicked\">\n <div class=\"support-details-captcha\">\n <ngx-recaptcha2 [ngModelOptions]=\"{ standalone: true }\"\n [siteKey]=\"siteKey\"\n size=\"normal\"\n [(ngModel)]=\"recaptcha\"\n (success)=\"handleSuccess($event)\">\n </ngx-recaptcha2>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!isSubmitClicked\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n class=\"btn btn-primary\" [disabled]=\"invalidFile\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </ng-container>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n</div>\n", styles: ["::ng-deep .file-upload-support-details .p-fileupload .p-fileupload-content{padding:4rem 1rem}::ng-deep .file-upload-support-details .p-fileupload-content .p-fileupload-files .p-fileupload-row>:first-child{display:none}.support-details-captcha{text-align:-webkit-right}.drag-drop-text{padding:20px;border:2px dashed #ccc;text-align:center;color:#aaa;margin-top:10px}::ng-deep .file-upload-support-details .p-fileupload .p-fileupload-content{padding:1rem}::ng-deep .file-upload-support-details .p-fileupload-content .p-fileupload-files .p-fileupload-row>:first-child{display:flex}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i7$1.ReCaptcha2Component, selector: "ngx-recaptcha2", inputs: ["theme", "size"] }, { kind: "component", type: i8.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
|
|
2122
2122
|
}
|
|
2123
2123
|
__decorate([
|
|
2124
2124
|
ValidateForm('form'),
|
|
@@ -2128,7 +2128,7 @@ __decorate([
|
|
|
2128
2128
|
], SupportDetailsComponent.prototype, "onSave", null);
|
|
2129
2129
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SupportDetailsComponent, decorators: [{
|
|
2130
2130
|
type: Component,
|
|
2131
|
-
args: [{ selector: 'pw-support-details', standalone: false, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\" (click)=\"back()\" class=\"previous\"><i\n class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"mt-3\">{{ 'Label.NewSupport' | transloco }}</h3>\n </div>\n <div class=\"p-2 m-1 mt-3\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12\">\n <pw-input-container controlId=\"support-details-title\"\n label=\"title\"\n name=\"title\"\n errorMsg=\"Title is required\">\n <input type=\"text\"\n id=\"support-details-title\"\n class=\"form-control\"\n formControlName=\"title\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-12\">\n <pw-input-container controlId=\"support-details-description\"\n label=\"Description\"\n errorMsg=\"description is required\"\n name=\"description\">\n <textarea rows=\"3\"\n id=\"support-details-description\"\n type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <h4 class=\"mt-4\">You can add a picture here</h4>\n <div class=\"mb-3 file-upload-support-details\">\n <
|
|
2131
|
+
args: [{ selector: 'pw-support-details', standalone: false, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\" (click)=\"back()\" class=\"previous\"><i\n class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"mt-3\">{{ 'Label.NewSupport' | transloco }}</h3>\n </div>\n <div class=\"p-2 m-1 mt-3\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12\">\n <pw-input-container controlId=\"support-details-title\"\n label=\"title\"\n name=\"title\"\n errorMsg=\"Title is required\">\n <input type=\"text\"\n id=\"support-details-title\"\n class=\"form-control\"\n formControlName=\"title\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-12\">\n <pw-input-container controlId=\"support-details-description\"\n label=\"Description\"\n errorMsg=\"description is required\"\n name=\"description\">\n <textarea rows=\"3\"\n id=\"support-details-description\"\n type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <h4 class=\"mt-4\">You can add a picture here</h4>\n <div class=\"mb-3 file-upload-support-details\">\n <span id=\"support-details-file-label\" class=\"pw-label-style\">Upload Picture</span>\n <p-fileUpload #forms\n [attr.aria-labelledby]=\"'support-details-file-label'\"\n name=\"myfile[]\"\n [customUpload]=\"true\"\n [showUploadButton]=\"false\"\n accept=\"image/*\"\n [disabled]=\"uploadedFiles && uploadedFiles.length > 0\"\n (onSelect)=\"onSelect($event)\"\n (onRemove)=\"onRemove($event)\"\n (onError)=\"onUploadError($event)\">\n <ng-template pTemplate=\"content\"\n [ngIf]=\"uploadedFiles?.length\">\n <div class=\"drag-drop-text\" *ngIf=\"!filesUploaded && (!uploadedFiles || uploadedFiles.length === 0)\">\n <p>You can drag and drop your file here</p>\n </div>\n </ng-template>\n </p-fileUpload>\n </div>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"isLoading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div class=\"col-12 text-end mt-3\">\n <ng-container *ngIf=\"isSubmitClicked\">\n <div class=\"support-details-captcha\">\n <ngx-recaptcha2 [ngModelOptions]=\"{ standalone: true }\"\n [siteKey]=\"siteKey\"\n size=\"normal\"\n [(ngModel)]=\"recaptcha\"\n (success)=\"handleSuccess($event)\">\n </ngx-recaptcha2>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!isSubmitClicked\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n class=\"btn btn-primary\" [disabled]=\"invalidFile\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </ng-container>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n</div>\n", styles: ["::ng-deep .file-upload-support-details .p-fileupload .p-fileupload-content{padding:4rem 1rem}::ng-deep .file-upload-support-details .p-fileupload-content .p-fileupload-files .p-fileupload-row>:first-child{display:none}.support-details-captcha{text-align:-webkit-right}.drag-drop-text{padding:20px;border:2px dashed #ccc;text-align:center;color:#aaa;margin-top:10px}::ng-deep .file-upload-support-details .p-fileupload .p-fileupload-content{padding:1rem}::ng-deep .file-upload-support-details .p-fileupload-content .p-fileupload-files .p-fileupload-row>:first-child{display:flex}\n"] }]
|
|
2132
2132
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1$1.CommonService }, { type: i1$1.AuthService }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { onSave: [] } });
|
|
2133
2133
|
|
|
2134
2134
|
class EditPortfoliosComponent {
|