Activities of "berkansasmaz"

Hi,

I will share step by step to help your question more. After doing all this, our application will show the menu or not depending on whether the user is logged in or not. Here are the minimum codes to meet these requirements:

Run the following command under the Angular folder: yarn ng generate component my-menu

Then, open the app.component.ts and execute the add method of ReplaceableComponentsService to replace your component with an ABP component as shown below:

It remains only to shape my-menu.component.html and my-menu.component.ts according to the requirements.

Here is my-menu.component.html:

<header>
    <div *ngIf="!hasLoggedIn">
        <div #navbarBrand>
            <abp-logo></abp-logo>
          </div>
          <abp-navbar-mobile></abp-navbar-mobile>
          <abp-navbar></abp-navbar>
          <abp-sidebar></abp-sidebar>
    </div>
    <div *ngIf="hasLoggedIn">
        <h1>Test QA 1664</h1>
        <app-root></app-root>
    </div>
</header>

my-menu.component.ts

import { Component, OnInit } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
import { AuthService } from '@abp/ng.core';

@Component({
  selector: 'app-my-menu',
  templateUrl: './my-menu.component.html',
  styleUrls: ['./my-menu.component.scss']
})
export class MyMenuComponent implements OnInit {
  get hasLoggedIn(): boolean {
    return this.oAuthService.hasValidAccessToken();
  }

  constructor(private oAuthService: OAuthService, private authService: AuthService) {}

  login() {
    this.authService.navigateToLogin();
  }

  ngOnInit() {}  
}

Please let us know if it works after you try it.

Also some links that I think might be useful: https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement https://docs.abp.io/en/abp/latest/UI/Angular/Modifying-the-Menu

• Create CustomLoginModel.cs file in the same folder (Pages\Account) CustomLoginModel.cs

using System;
using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Identity;
using Microsoft.Extensions.Options;
using Owl.reCAPTCHA;
using Volo.Abp.Account.ExternalProviders;
using Volo.Abp.Account.Public.Web;
using Volo.Abp.Account.Public.Web.Pages.Account;
using Volo.Abp.Account.Security.Recaptcha;
using Volo.Abp.DependencyInjection;
using Volo.Abp.Security.Claims;

namespace TestQABZ.Pages.Account
{
    [Dependency(ReplaceServices = true)]
    [ExposeServices(typeof(LoginModel))]
    public class CustomLoginModel : LoginModel
    {
        public CustomLoginModel(
            IAuthenticationSchemeProvider schemeProvider, 
            IOptions<AbpAccountOptions> accountOptions, 
            IAbpRecaptchaValidatorFactory recaptchaValidatorFactory, 
            IAccountExternalProviderAppService accountExternalProviderAppService, 
            ICurrentPrincipalAccessor currentPrincipalAccessor, 
            IOptions<IdentityOptions> identityOptions, 
            IOptionsSnapshot<reCAPTCHAOptions> reCaptchaOptions) : 
            base(schemeProvider, 
                accountOptions, 
                recaptchaValidatorFactory, 
                accountExternalProviderAppService, 
                currentPrincipalAccessor, 
                identityOptions, 
                reCaptchaOptions)
        {
            Console.WriteLine("Test QA");
        }
    }
}

• Add a CSS to play with the existing styles. Create Login.css in the same folder (Pages\Account) Login.css

.container {
    background-color: #d0d08c;
}

.card {
    background: #bccce4;
}

• Add a JS to write JavaScript. Create Login.js in the same folder (Pages\Account) Login.js

alert('login page loaded.');

When we do all these, you will have a structure similar to the one below:

Once it's up and running, you can make any changes you want, but if you encounter a problem, please let us know again.

First of all it will be CustomLoginModel.cs not CustomLoginModel.cshtml :(

So it's my fault that you're confused, I hope I can make up for it :)

If we have to go step by step 👇

• Create a new Login.cshtml under Pages\Account folder

Login.cshtml

@page
@using Microsoft.AspNetCore.Mvc.Localization
@using Microsoft.Extensions.Options
@using Owl.reCAPTCHA
@using Volo.Abp.Account.Localization
@using Volo.Abp.Account.Public.Web.Security.Recaptcha
@using Volo.Abp.Account.Settings
@using Volo.Abp.Settings
@model Volo.Abp.Account.Public.Web.Pages.Account.LoginModel
@inject IHtmlLocalizer<AccountResource> L
@inject Volo.Abp.AspNetCore.Mvc.UI.Layout.IPageLayout PageLayout
@inject ISettingProvider SettingProvider
@{
    PageLayout.Content.Title = L["Login"].Value;
    var reCaptchaVersion = await SettingProvider.GetAsync<int>(AccountSettingNames.Captcha.Version);
    if (Model.UseCaptcha)
    {
        await Model.ReCaptchaOptions.SetAsync(reCaptchaVersion == 3 ? reCAPTCHAConsts.V3 :reCAPTCHAConsts.V2);
    }

}

@section scripts
{
    <abp-script src="/Pages/Account/Login.js" />
    @if (Model.UseCaptcha)
    {
        if (reCaptchaVersion == 3)
        {
            <recaptcha-script-v3/>
            <recaptcha-script-v3-js action="login" callback="(function(){$('#@RecaptchaValidatorBase.RecaptchaResponseKey').val(token)})"/>
        }
        else
        {
            <recaptcha-script-v2/>
        }
    }
}

@section styles
{
    <abp-style src="/Pages/Account/Login.css" />
}

@if (Model.IsLinkLogin)
{
    <abp-alert alert-type="Warning">
        @L["LinkAccountWarning", Url.PageLink()]
    </abp-alert>
}

<div class="account-module-form">
    @if (Model.EnableLocalLogin)
    {
        <form method="post">
            @if (Model.UseCaptcha)
            {
                <input type="hidden" name="@RecaptchaValidatorBase.RecaptchaResponseKey" id="@RecaptchaValidatorBase.RecaptchaResponseKey"/>
            }
            <p>Test QA Question: 1668</p>
            <abp-input asp-for="LoginInput.UserNameOrEmailAddress" required-symbol="false"/>
            <abp-input asp-for="LoginInput.Password" required-symbol="false"/>
            <abp-row>
                <abp-column>
                    <abp-input asp-for="LoginInput.RememberMe" class="mb-4"/>
                </abp-column>
                <abp-column class="text-right">
                    <a href="@Url.Page("./ForgotPassword", new { returnUrl = Model.ReturnUrl, returnUrlHash = Model.ReturnUrlHash })">@L["ForgotPassword"]</a>
                </abp-column>
            </abp-row>

            @if (reCaptchaVersion == 2)
            {
                <recaptcha-div-v2 callback="(function(){$('#@RecaptchaValidatorBase.RecaptchaResponseKey').val(token)})" />
            }

            <abp-button button-type="Primary" size="Block" type="submit" class="mt-2 mb-3" name="Action" value="Login">@L["Login"]</abp-button>
            @if (Model.ShowCancelButton)
            {
                <abp-button button-type="Secondary" size="Block" type="submit" formnovalidate="formnovalidate" class="mt-2 mb-3" name="Action" value="Cancel">@L["Cancel"]</abp-button>
            }
        </form>
        if (Model.IsSelfRegistrationEnabled)
        {
            @L["NotAMemberYet"]
            <a href="@Url.Page("./Register", new {returnUrl = Model.ReturnUrl, returnUrlHash = Model.ReturnUrlHash})">@L["Register"]</a>
        }
    }

    @if (Model.VisibleExternalProviders.Any())
    {
        <hr/>
        @L["OrSignInWith"]<br/>
        <form asp-page="./Login" asp-page-handler="ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" asp-route-returnUrlHash="@Model.ReturnUrlHash" method="post">
            @foreach (var provider in Model.VisibleExternalProviders)
            {
                <button
                    type="submit"
                    class="mt-2 mr-2 btn btn-outline-primary btn-sm"
                    name="provider"
                    value="@provider.AuthenticationScheme"
                    data-busy-text="@L["ProcessingWithThreeDot"]">
                    @if (provider.Icon != null)
                    {
                        <i class="@provider.Icon"></i>
                    }
                    <span>@provider.DisplayName</span>
                </button>
            }
        </form>
    }

    @if (!Model.EnableLocalLogin && !Model.VisibleExternalProviders.Any())
    {
        <div class="alert alert-warning">
            <strong>Invalid login request</strong>
            There are no login schemes configured for this client.
        </div>
    }
</div>

Then... 👇👇👇

Hi,

I'm assuming you have created the Account folder in the Pages folder of the MyProjectName.IdentityServer project :)

CustomLoginModel.cs in Account folder

    [Dependency(ReplaceServices = true)]
    [ExposeServices(typeof(LoginModel))]
    public class CustomLoginModel : LoginModel
    {
        public CustomLoginModel(
            IAuthenticationSchemeProvider schemeProvider, 
            IOptions<AbpAccountOptions> accountOptions, 
            IAbpRecaptchaValidatorFactory recaptchaValidatorFactory, 
            IAccountExternalProviderAppService accountExternalProviderAppService, 
            ICurrentPrincipalAccessor currentPrincipalAccessor, 
            IOptions<IdentityOptions> identityOptions, 
            IOptionsSnapshot<reCAPTCHAOptions> reCaptchaOptions) : 
            base(schemeProvider, 
                accountOptions, 
                recaptchaValidatorFactory, 
                accountExternalProviderAppService, 
                currentPrincipalAccessor, 
                identityOptions, 
                reCaptchaOptions)
        {
            Console.WriteLine("Test QA Question");
        }
    }

Please let us know if it works after you try it.

There is no breaking change with this version. However, if you are using Entity Framework Core, you will need to run the Add-Migration command to add a new database migration since some changes done in the module database mappings.

https://blog.abp.io/abp/ABP-Platform-4-4-RC-Has-Been-Released

Please let us know if it works after you try it.

To do it with code;

To remove all other languages and use English ("en-GB") by default, you can update the ConfigureServices method in the ProjectNameDomainModule file under the ProjectName.Domain folder to include the only "en-GB". For example, the content of the ConfigureServices method should now be as follows:

    public override void ConfigureServices(ServiceConfigurationContext context)
    {
        ...
    	Configure<AbpLocalizationOptions>(options =>
        {
            options.Languages.Add(new LanguageInfo("en-GB", "en-GB", "English"));
        });
        ...
    }

Then you should add the following to the OnApplicationInitialization method in the ProjectNameHttpApiHostModule file.

    var supportedCultures = new[]
    {
        new CultureInfo("en-GB")
    };
    app.UseAbpRequestLocalization(options =>
    {
        options.DefaultRequestCulture = new RequestCulture("en-GB");
        options.SupportedCultures = supportedCultures;
        options.SupportedUICultures = supportedCultures;
        options.RequestCultureProviders = new List<IRequestCultureProvider>
        {
            new QueryStringRequestCultureProvider(),
            new CookieRequestCultureProvider()
        };
    });

Then just delete the data in the AbpLanguages table from the database and run ProjectName.DbMigrator.

Your issue may be related to mapper. Could you please check?

If the problem is not resolved please share the relevant logs, thank you.

Hi,

Probably your Index.html file is missing in Angular's root directory, or you may have set the Angular root directory incorrectly while publishing via ISS.

You can find more detailed information on the subject here.

Thank you for reporting the issue.

I tested this situation and faced a similar situation.

I'm opening an issue about this. By the way, the ticket refunded

Actually, it's up to you, but I suggest you remove it. Because team members reading the code may have difficulty understanding why that code is there.

By the way, you can see the fix made here