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
Pages\Account
)
CustomLoginModel.csusing 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");
}
}
}
Pages\Account
)
Login.css.container {
background-color: #d0d08c;
}
.card {
background: #bccce4;
}
Pages\Account
)
Login.jsalert('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 👇
Pages\Account
folderLogin.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