Hello again,
Thank you for responding. If you prefer, you can share a minimal, reproducible example and I can check your sample. Here is my e-mail address: sumeyye.kurtulus@volosoft.com.
Thank you again for explaining the problem. I was able to produce it on my end.
If you are using lepton theme and replace the account layout with the key below
this.replaceableComponentsService.add({
key: eThemeLeptonComponents.AccountLayout,
component: AccountLayoutComponent,
});
You may be missing an import in your AccountLayoutComponent for ThemeSharedModule .
—
If you are using the lepton-x theme and replace the same component using the key below:
this.replaceableComponentsService.add({
key: eThemeLeptonXComponents.AccountLayout,
component: AccountLayoutComponent,
});
You will also need to replace the TenantBox component like this:
this.replaceableComponentsService.add({
key: eAccountComponents.TenantBox,
component: MyTenantBoxComponent,
});
Here is how tenant box component should look like until we publish a fix for this switch problem
import { AsyncPipe } from '@angular/common';
import { Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AutofocusDirective, LocalizationPipe } from '@abp/ng.core';
import { ButtonComponent, ModalCloseDirective, ModalComponent } from '@abp/ng.theme.shared';
import { TenantBoxService } from '@volo/abp.ng.account.core';
import { TenantBoxComponent } from '@volosoft/abp.ng.theme.lepton-x/account';
@Component({
selector: 'my-tenant-box',
template: `
@if ((service.currentTenant$ | async) || {}; as currentTenant) {
<hr />
<div>
<div class="tenant-switch-box">
<div class="row">
<div class="col pr-1 pb-2">
<h6 class="m0">
{{ 'AbpUiMultiTenancy::Tenant' | abpLocalization }}
</h6>
<i>{{ currentTenant.name || ('AbpUiMultiTenancy::NotSelected' | abpLocalization) }}</i>
</div>
<div class="col-auto pl-1">
<a
id="abp-tenant-switch-link"
class="btn btn-sm btn-outline-primary float-end pointer"
(click)="service.onSwitch()"
href="javascript:void(0)"
>
{{ 'AbpUiMultiTenancy::Switch' | abpLocalization }}
</a>
</div>
</div>
</div>
</div>
<hr />
<abp-modal [(visible)]="service.isModalVisible" [busy]="service.modalBusy" size="md">
<ng-template #abpHeader>
<h5>{{ 'AbpUiMultiTenancy::SwitchTenant' | abpLocalization }}</h5>
</ng-template>
<ng-template #abpBody>
<form (ngSubmit)="service.save()">
<div class="mt-2">
<div class="form-group">
<label for="name">{{ 'AbpUiMultiTenancy::Name' | abpLocalization }}</label>
<input
[(ngModel)]="service.name"
type="text"
id="name"
name="tenant"
class="form-control"
autofocus
/>
</div>
<p>{{ 'AbpUiMultiTenancy::SwitchTenantHint' | abpLocalization }}</p>
</div>
</form>
</ng-template>
<ng-template #abpFooter>
<button abpClose type="button" class="btn btn-outline-primary">
{{ 'AbpAccount::Cancel' | abpLocalization }}
</button>
<abp-button
type="abp-button"
iconClass="fa fa-check"
(click)="service.save()"
[disabled]="currentTenant?.name === service.name"
>
{{ 'AbpAccount::Save' | abpLocalization }}
</abp-button>
</ng-template>
</abp-modal>
}
`,
imports: [
ModalCloseDirective,
ModalComponent,
ButtonComponent,
LocalizationPipe,
AutofocusDirective,
AsyncPipe,
FormsModule,
],
providers: [TenantBoxService],
})
export class MyTenantBoxComponent extends TenantBoxComponent {
protected readonly service = inject(TenantBoxService);
}
You can let us know if you need further assistance. Thank you for your cooperation.
Thank you again for sharing these steps. If you have configured a different password for your tenant, you need to use the configured password while switching.
Here, I have set a password for tenant-1 as 1q2w3E*** and I use this while logging in as admin to the tenant-1 account.
Hello again,
Is there a way to get access to 'abp-page' markup - let's say add a class or directive to it - without replacing the components inside it (which makes no sense, because it is not the behavior or data we need to affect)?
You cannot inject a new directive for an element declared in DOM since the change detection of Angular does not support dynamic directive addition. I suggest you to re-consider your style overrides that may break these specific parts.
Another question: is it OK that there are nested router outlets - ours and yours - in ABP pages (highlighted in the screenshot above)? If - no, if there a way to fix that?
This should not break the responsiveness behavior since they are just Angular view placeholders.
Thank you for providing extra details. Could you share the error log for the problem if exists?
Hello again,
This page is designed in a different way than the pages we show a data table. All pages are constructed to be responsive including the last one you mentioned, and it looks different with the default design:
Maybe the described problem is related to the fact that we are using our "theme"? But we still need to make ABP page be rendered properly:
As you have also previously mentioned about your custom theme that may end up into these issues.
P.S. Please inform your site support team regarding this very page loading in desktop browser - it's very slow each time due to numerous slow API requests (it does not occur each time - the problem is usually observed at "cold start" - when I open this page every day for the first time).
We are optimizing these pages based on the reports if you mean this support page.
You can let us know if you need further assistance. Thank you for your cooperation.
Hello,
Here is the modal showing the application details.
I want to remind that I am just customizing the login pages and do not make any other modification on the application. If you have made another change, this may trigger an error.
Hello again,
I have followed the instructions you have shared above. Then, changed the authorization flow to password instead of code like this
//angular/src/environments/environment.ts
//...
const oAuthConfig = {
issuer: 'https://localhost:44366/',
redirectUri: baseUrl,
clientId: 'Ticket9991_App',
// responseType: 'code', comment out or make it 'password'
scope: 'offline_access Ticket9991',
requireHttps: true,
impersonation: {
tenantImpersonation: true,
userImpersonation: true,
},
};
I am also sharing a sample project that may guide you: https://drive.google.com/file/d/1yFZRSyyuvxtCOHmrGEA1zauEWKBsxe7C/view?usp=drive_link
Hello,
Maybe the described problem is related to the fact that we are using our "theme"? But we still need to make ABP page be rendered properly:
Thank you for providing extra details about your application. Regardless of the versions and your own theme configuration seem fine, this part is designed to be used with the scroll when needed.
If you need to change this behavior, you can check these source code https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html
https://swimlane.github.io/ngx-datatable/#/
However, you will need to override/replace the current package elements. You will need to reach source code to do so. You can check this page for this either: https://abp.io/docs/latest/suite/source-code
You can let us know if you need further assistance. Thank you for your cooperation.
Hello,
I have checked your case. However, I need to know how you have configured the device detection structure since we normally do not set such behavior by default.
I am suspecting an access token lifetime customization is made or anything is added to trigger such change.
That would the best if you could also specify how your browser redirects to the default route. Maybe you could share the request details that ends up here. If you think that this part is confidential and you do not want to share in this thread, you can reach me via e-mail. Here is my address sumeyye.kurtulus@volosoft.com
