Activities of "mahmut.gundogdu"

Would you describe your version and which UI type you used? (Angular, MVC or blazor)

@volosoft/abp.ng.theme.lepton-x"

Version should be 1.0.0 @volosoft/abp.ng.theme.lepton-x": "^1.0.0" Could you update and try again, please? It will fix.

You need to add styles to angular.json.

see the docs please,https://docs.abp.io/en/abp/latest/UI/Angular/Theme-Configurations

If you choose Lepton, you need to add these style settings to angular.json.

{
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton1.min.css",
    "inject": false,
    "bundleName": "lepton1"
},
{
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton2.min.css",
    "inject": false,
    "bundleName": "lepton2"
},
{
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton3.min.css",
    "inject": false,
    "bundleName": "lepton3"
},
{
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton4.min.css",
    "inject": false,
    "bundleName": "lepton4"
},
{
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton5.min.css",
    "inject": false,
    "bundleName": "lepton5"
},
{
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton6.min.css",
    "inject": false,
    "bundleName": "lepton6"
},
{
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton1.rtl.min.css",
    "inject": false,
    "bundleName": "lepton1.rtl"
},
{
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton2.rtl.min.css",
    "inject": false,
    "bundleName": "lepton2.rtl"
},
{
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton3.rtl.min.css",
    "inject": false,
    "bundleName": "lepton3.rtl"
},
{
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton4.rtl.min.css",
    "inject": false,
    "bundleName": "lepton4.rtl"
},
{
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton5.rtl.min.css",
    "inject": false,
    "bundleName": "lepton5.rtl"
},
{
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton6.rtl.min.css",
    "inject": false,
    "bundleName": "lepton6.rtl"
},

Remove these settings in angular.json

 {
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton1.min.css",
    "inject": false,
    "bundleName": "lepton1"
},
{
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton2.min.css",
    "inject": false,
    "bundleName": "lepton2"
},
{
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton3.min.css",
    "inject": false,
    "bundleName": "lepton3"
},
{
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton4.min.css",
    "inject": false,
    "bundleName": "lepton4"
},
{
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton5.min.css",
    "inject": false,
    "bundleName": "lepton5"
},
{
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton6.min.css",
    "inject": false,
    "bundleName": "lepton6"
},
{
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton1.rtl.min.css",
    "inject": false,
    "bundleName": "lepton1.rtl"
},
{
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton2.rtl.min.css",
    "inject": false,
    "bundleName": "lepton2.rtl"
},
{
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton3.rtl.min.css",
    "inject": false,
    "bundleName": "lepton3.rtl"
},
{
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton4.rtl.min.css",
    "inject": false,
    "bundleName": "lepton4.rtl"
},
{
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton5.rtl.min.css",
    "inject": false,
    "bundleName": "lepton5.rtl"
},
{
    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton6.rtl.min.css",
    "inject": false,
    "bundleName": "lepton6.rtl"
},

https://github.com/abpframework/abp/blob/dce0cf7a6f2db9aa738fa2b15e1d6c2a627ccdc9/docs/en/UI/Angular/Theme-Configurations.md

If you are using Resource Owner Password Flow you may skip this step. go to the path aspnet-core/src/YourAppName.HttpApi.Host/ and add @volo/abp.aspnetcore.mvc.ui.theme.lepton to package.json like yarn add @volo/abp.aspnetcore.mvc.ui.theme.lepton. Then run the command in the terminal (in the same path) abp install-libs

It will be working as expected. The problem will be fixed soon.

On the log in page there is a background image. How can I change it ?

The solution depend on your login flow. If you are using Resource Owner Password Flow, The angular app has a token whose name is AUTH_LAYOUT_IMG for overriding the image source

but If you are using the default way. You need to overrider account layout. Here the link https://docs.abp.io/en/commercial/latest/themes/lepton-x/commercial/mvc#account-layout

Lepton-x customization document is not ready yet. Lite is here, it is similar. https://docs.abp.io/en/abp/latest/Themes/LeptonXLite/Angular

LeptonX offers a variety of layouts. Side-menu component is one. The top-menu component is still another. Those are different components. The top-menu is under development. The following iteration of lepton X will see its completion. You can create an empty layout and use your own layout system if you don't want to wait.

The section has abp-nav-items component. It has NavItemsService service for managing the children. You can add your item or You can change or extend abp-navbar-items via Abp replaceable Component System. The key of the component is eThemeLeptonXComponents.NavItems

The Repository has a hard or soft delete function. https://docs.abp.io/en/abp/latest/Repositories#soft-hard-delete

Thank you for your response. I have created an bug report. It will fixed soon.

yarn add @volo/abp.ng.theme.lepton.

Remove leptonX codes on angular.json

 {
                "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/dark.css",
                "inject": false,
                "bundleName": "dark"
              },
              {
                "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/light.css",
                "inject": false,
                "bundleName": "light"
              },
              {
                "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/dim.css",
                "inject": false,
                "bundleName": "dim"
              },
              {
                "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dim.css",
                "inject": false,
                "bundleName": "bootstrap-dim"
              },
              {
                "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dark.css",
                "inject": false,
                "bundleName": "bootstrap-dark"
              },
              {
                "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-light.css",
                "inject": false,
                "bundleName": "bootstrap-light"
              },
              {
                "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/ng-bundle.css",
                "inject": false,
                "bundleName": "ng-bundle"
              },
              {
                "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.css",
                "inject": false,
                "bundleName": "layout-bundle"
              },
              {
                "input": "node_modules/@volosoft/abp.ng.theme.lepton-x/assets/css/abp-bundle.css",
                "inject": false,
                "bundleName": "abp-bundle"
              },
              {
                "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/dark.rtl.css",
                "inject": false,
                "bundleName": "dark.rtl"
              },
              {
                "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/light.rtl.css",
                "inject": false,
                "bundleName": "light.rtl"
              },
              {
                "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/dim.rtl.css",
                "inject": false,
                "bundleName": "dim.rtl"
              },
              {
                "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dim.rtl.css",
                "inject": false,
                "bundleName": "bootstrap-dim.rtl"
              },
              {
                "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dark.rtl.css",
                "inject": false,
                "bundleName": "bootstrap-dark.rtl"
              },
              {
                "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-light.rtl.css",
                "inject": false,
                "bundleName": "bootstrap-light.rtl"
              },
              {
                "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/ng-bundle.rtl.css",
                "inject": false,
                "bundleName": "ng-bundle.rtl"
              },
              {
                "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.rtl.css",
                "inject": false,
                "bundleName": "layout-bundle.rtl"
              },
              {
                "input": "node_modules/@volosoft/abp.ng.theme.lepton-x/assets/css/abp-bundle.rtl.css",
                "inject": false,
                "bundleName": "abp-bundle.rtl"
              },

add lepton bundle files

      {
                "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton1.min.css",
                "inject": false,
                "bundleName": "lepton1"
              },
              {
                "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton2.min.css",
                "inject": false,
                "bundleName": "lepton2"
              },
              {
                "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton3.min.css",
                "inject": false,
                "bundleName": "lepton3"
              },
              {
                "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton4.min.css",
                "inject": false,
                "bundleName": "lepton4"
              },
              {
                "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton5.min.css",
                "inject": false,
                "bundleName": "lepton5"
              },
              {
                "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton6.min.css",
                "inject": false,
                "bundleName": "lepton6"
              },
              {
                "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton1.rtl.min.css",
                "inject": false,
                "bundleName": "lepton1.rtl"
              },
              {
                "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton2.rtl.min.css",
                "inject": false,
                "bundleName": "lepton2.rtl"
              },
              {
                "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton3.rtl.min.css",
                "inject": false,
                "bundleName": "lepton3.rtl"
              },
              {
                "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton4.rtl.min.css",
                "inject": false,
                "bundleName": "lepton4.rtl"
              },
              {
                "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton5.rtl.min.css",
                "inject": false,
                "bundleName": "lepton5.rtl"
              },
              {
                "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton6.rtl.min.css",
                "inject": false,
                "bundleName": "lepton6.rtl"
              },

optional: Customize your logo. Add these codes in Styles.scss file.

 --logo: url('/assets/images/logo/logo-light.png') !important;
 --logo-reverse: url(/assets/images/logo/logo-dark.png);  !important;

First, based on the kind of authentication flow, the solution changes. The Abp, for instance, makes use of Openiddict or identity-server. Your account, log-in, registration, etc. are all angular components if you use Resource Owner Password Flow. These components can be swapped out with our custom ones. Otherwise, you can't alter your components with Angular as they are server-side components.

See the docs for Resource Owner Password Flow https://docs.abp.io/en/abp/latest/UI/Angular/Account-Module#resource-owner-password-flow

1- If you are using external login or don't want to change the register form

• Create a guard.
• Add the guard on app-routing.module.ts. -The guard checks the logic and redirects the validation page.

2- If you want to change the register component. When you are using Resource owner flow, you can change the registration form via the replaceable component system. The key is eAccountComponents.Register see the https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement