How do you change tenant?
Did you add SetTenant
action into the pipe like below:
this.actions.pipe(ofActionSuccessful(SetStyle, SetTenant))
You can listen SetTenant
action that dispatches when tenant change. The current tenant can be getted via Store
import { ... SetTenant, SessionState } from '@abp/ng.core'; // imported SetTenant and SessionState
import { ... Store } from '@ngxs/store'; // imported Store
//...
constructor( ... private store: Store) // injected Store
ngOnInit() {
this.actions.pipe(ofActionSuccessful(SetStyle, SetTenant)).subscribe(res => { // added SetTenant
console.log(this.store.selectSnapshot(SessionState.getTenant)) // logs current tenant
if (res instanceof SetStyle) {
console.log(res.payload) // logs style number e.g. 1
// your logic here
} else if (res instanceof SetTenant) {
console.log(res.payload) // logs new tenant e.g. {id: '6391bd36-d4b1-8a22-5fd6-39f461b01b37', name: 'Amazon'}
// your logic here
}
});
}
This logo is in the ApplicationLayoutComponent
. You can replace this component with the Theme.ApplicationLayoutComponent
key. See the layout replacement documentation. But I wouldn't recommend it for changing the logo.
The logo takes the url from a CSS property which is --logo
or --logo-reverse
. --logo
and --logo-reverse
properties are set when theme changed in the Lepton settings.
So, there are two ways for changing the logo:
1- Replacing the logos in the angular/src/assets/images/logo
folder without changing the filenames.
2- Changing the CSS properties value as described below:
Open the app.component.ts
and edit the content as shown below:
import { Actions, ofActionSuccessful } from '@ngxs/store'; // added this line
import { SetStyle } from '@volo/abp.ng.theme.lepton'; // added this line
// ...
export class AppComponent implements OnInit {
constructor(private lazyLoadService: LazyLoadService, private actions: Actions) {} // injected the actions
ngOnInit() {
//...
// Added the below content
this.actions.pipe(ofActionSuccessful(SetStyle)).subscribe(() => {
document.documentElement.style.setProperty(
'--logo',
`url('logo url here')`,
);
document.documentElement.style.setProperty(
'--logo-reverse',
`url('reverse logo url here')`,
);
});
}
}
I replaced the --logo
property with http://abp.io/assets/abp-logo-light.svg
and then UI looks like this:
We'll create a component that contains logo in v2.5. The component will be easily replaced.
Hi
Lepton theme uses two logos for each style. You can change these logos with your own logos without changing the filenames in the angular/src/assets/images/logo
folder. Login page uses theme{x}-reverse.png
We have been create an issue about this error. Note: It doesn't break anything on runtime.
Hi,
Remove node_modules/@volo/abp.ng.account
folder. Download the below zip and extract in the node_modules/@volo
folder.
https://drive.google.com/file/d/1hYLBJDBT86fD7nMIZ3yKARntfEvWZFO3/view?usp=sharing
This problem has been fixed in v2.4.
It's fixed. https://github.com/abpframework/abp/commit/bb08a7ca5ecb0e2d26854e953dd6a601faff0ab0 Thanks for reporting.
Did you clean browser storages (local and storage) ?
Injectable
decorator should be added the BookState
like this:
import { Injectable } from '@angular/core'; // import the Injectable
@State<Book.State> ({
// state metadata
})
@Injectable() // add this line
export class BookState
For your first question;
issuer
property in the environment must match the running address of .IdentityServer project