I'm building a new .NET 6.0 application using Blazor Web Server and Blazorise 0.9.5.2.
As presently configured, the sider layout is only visible to logged-in users. Anonymous users see the entire layout except the sider. Comparing the HTTP content in both conditions shows that the only differences between anonymous and logged-in users are the presence or absence of the two nav bar links that depend on authorization, as well as the out-of-the-box display of "Welcome, user" vs. "Login" in the upper right corner. Chrome shows no failures to download CSS or JS in either case.
The MainLayout.razor looks like this:
<Layout Sider="true">
<LayoutSider>
<LayoutSiderContent>
<Bar Breakpoint="Breakpoint.Desktop" NavigationBreakpoint="Breakpoint.Tablet" ThemeContrast="ThemeContrast.Dark"
Mode="BarMode.VerticalInline" CollapseMode="BarCollapseMode.Small">
<BarToggler />
<BarBrand>
<BarItem>
<BarLink To="">
<BarIcon IconName="_customIcon" />
My SIte
</BarLink>
</BarItem>
</BarBrand>
<NavMenu />
</Bar>
</LayoutSiderContent>
</LayoutSider>
<Layout>
<LayoutHeader Fixed="true">
<Bar #bind-Visible="#_topbarVisible" Breakpoint="Breakpoint.Desktop" Background="Background.Primary" ThemeContrast="ThemeContrast.Light">
<BarBrand>
<BarItem>
<BarLink To="">
<BarIcon IconName="FontAwesomeIcons.CloudSun" />
My Site
</BarLink>
</BarItem>
</BarBrand>
#* ReSharper disable once UnknownCssClass *#
<BarMenu Class="justify-content-end">
<BarEnd>
<AuthorizeView>
<Authorized>
<BarItem>
<Blazorise.Icon Name="FontAwesomeIcons.User" Visibility="Visibility.Visible" />
Hi, #context?.User?.Identity?.Name
</BarItem>
</Authorized>
</AuthorizeView>
<BarItem>
<LoginDisplay />
</BarItem>
</BarEnd>
</BarMenu>
</Bar>
</LayoutHeader>
<LayoutContent Padding="Padding.Is4.OnX">
#Body
</LayoutContent>
<LayoutFooter Fixed="true" Padding="Padding.Is4.OnX">
Copyright ©#DateTimeOffset.UtcNow.Year Inner Drive Technology.
</LayoutFooter>
</Layout>
</Layout>
The NavMenu.razor component looks like this:
#using Blazorise.Icons.FontAwesome
<BarMenu>
<BarStart>
<BarItem>
<BarLink To="">
<BarIcon IconName="FontAwesomeIcons.Home" />
Home
</BarLink>
</BarItem>
<BarItem>
<BarLink To="/Current">
<BarIcon IconName="FontAwesomeIcons.CloudSun" />
Current
</BarLink>
</BarItem>
<AuthorizeView>
<Authorized>
<BarItem>
<BarLink To="/ApiStatus">
<BarIcon IconName="FontAwesomeIcons.Server" />
API Status
</BarLink>
</BarItem>
<BarItem>
<BarLink To="/BuildStatus">
<BarIcon IconName="FontAwesomeIcons.Rocket" />
Build Status
</BarLink>
</BarItem>
</Authorized>
</AuthorizeView>
<BarItem>
<BarLink To="/About">
<BarIcon IconName="FontAwesomeIcons.InfoCircle" />
About
</BarLink>
</BarItem>
</BarStart>
</BarMenu>
Program.cs contains this section:
builder.Services.AddRazorPages(options =>
{
options.Conventions.AllowAnonymousToFolder("/");
options.Conventions.AllowAnonymousToPage("/Index");
options.Conventions.AllowAnonymousToFolder("/_content");
options.Conventions.AllowAnonymousToFolder("/Pages");
options.Conventions.AllowAnonymousToFolder("/Shared");
});
The problem seems to be the presence of the Mode="BarMode.VerticalInline" attribute. (I'll spare you the A/B testing that led to this conclusion.) When the Mode attribute is present, the entire sider is hidden for anonymous users. When it's absent, the entire sider is visible.
Anyone know what's up with this?
Well, this was fun. And all that CORS stuff was a red herring.
The issue: the default AddAuthorization service provider options blocked a request somewhere, so removing it allowed all the page components to load, even while keeping the authentication-required bits hidden.
builder.Services.AddAuthorization(options =>
{
// By default, all incoming requests will be authorized according to the default policy
//options.FallbackPolicy = options.DefaultPolicy; // Removed this line
});
Removing the fallback policy fixed this issue.
Related
my stencil app is a step-by-step wizard. In app-root.tsx I have
render() {
return (
<ion-app>
<ion-router useHash={false}>
<ion-route component="app-home" >
<ion-route url="/" component="step-one" />
<ion-route url="/two/:data" component="step-two" />
<ion-route url="/three/:data" component="step-three" />
</ion-route>
</ion-router>
<ion-nav />
</ion-app>
);
}
in app-home.tsx I have
<ion-navbar>
<ion-tabs>
<ion-tab tab="tab1" component="step-one" />
<ion-tab tab="tab2" component="step-two" />
<ion-tab tab="tab3" component="step-three" />
<ion-tab-bar slot="top" selectedTab={this.selectedTab)}>
<ion-tab-button tab="tab1">Step One</ion-tab-button>
<ion-tab-button tab="tab2">Step Two</ion-tab-button>
<ion-tab-button tab="tab3">Step Three</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-navbar>
at some point I would like to diable the ion-tab-buttons and use them only to display the active tab, but now they are active since I have several problems :
the app doesn't start with the content of "step-one" (a form). I see the tabs at the top and I can click on any tab to select it, but how to make it start at step-one ? ( this.selectedTab = 'tab1' in componentWillLoad)
in step-one I put a <ion-button disabled={!this.valid} routerDirection = 'forward'>Next</ion-button> that shows up, is enabled when the form is filled, but when I click on it, nothing happens (I tried href="/two" without success...)
how to pass the form data to the next steps, by the way ?
Any help appreciated... Thanks !
In the route definitions the component should be the name of the tab (the tab property) and not the component inside of the tab (see Router integration in the ion-tabs docs).
<ion-route component="app-home">
<ion-route url="/" component="tab1" />
<ion-route url="/two/:data" component="tab2" />
<ion-route url="/three/:data" component="tab3" />
</ion-route>
The reason that the button doesn't work with the href attribute is probably the missing :data parameter.
I suggest not passing the data through the URL but to use a central data store, for example Stencil Store. That way you don't have to worry about URL encoding etc.
I have a parent component from which I would like to send function to my child component.
ParentComponent.js
export default class LandingPage extends React.Component {
onSearchSubmit(term) {
console.log(term);
}
render() {
return (
<div>
<div className = "admin" >
<SearchBar onSubmit = {this.onSearchSubmit}
/>
</div>
....
ChildComponent.js
export default class SearchBar extends React.Component{
state = {term: ''};
onFormSubmit = event => {
event.preventDefault();
this.props.onSubmit(this.state.term);
};
render(){
return(
<div>
<div className="container">
<div className="searchBar mt-5">
<form onSubmit={this.onFormSubmit}>
<div className="form-group">
<label for="search">Image search</label>
<input
type="text"
className="form-control"
placeholder="Search..."
value = {this.state.term}
onChange={e => this.setState({term: e.target.value})}
/>
</div>
</form>
</div>
</div>
</div>
)
}
}
I'm sending function to my child component so I could get input from user using search bar back to parent component. It works fine if child component is displayed and used on parent component.
But if I would like to approach my child component in a way that I hide it from parent component with CSS:
.admin{
display: none;
}
and access it like http://localhost:3000/bar and type text in my search bar there I am getting following error:
Uncaught TypeError: _this.props.onSubmit is not a function
Is it possible to send data this way using ReactJs or is there any other way to send data to child component without displaying child component in parent?
UPDATE - WORKING SOLUTION
I added parent component for both of my pages.
I have changed structure of my app in that way.
Before my app was structured in way that my LandingPage.js was a parent to SearchBar.js.
That's why I couldn't make communication between them work in way I wanted. I was trying to hack it by hiding search bar from my landing page and trying to send data from http://localhost:3000/searchbar to http://localhost:3000/ without any luck and getting errors.
After I structured my app tp look like this:
I was able to send data between LandinPage.js and SearchBar.js.
App.js looked like this:
export default class App extends React.Component{
render(){
return(
<div>
<Route path="/" exact component={LandingPage} />
<Route path="/admin" component={Admin}/>
<Route path="/posts" component={Post} />
<Route path="/categories" component={Categories} />
<Route path="/users" component={Users} />
<Route path="/details" component={Details} />
<Route path="/profile" component={Profile} />
<Route path="/weatherapp" component={weatherApp} />
<Route path="/bar" component={SearchBar}/>
</div>
)
}
}
To make App.js as parent have changed it to look like this:
App.js
export default class App extends React.Component{
constructor(props){
super(props)
this.state = {
articalName: "Landing page"
};
}
onSearchSubmit = term => {
console.log(term);
}
render(){
return(
<div>
<Route path="/" exact component={LandingPage} />
<Route path="/admin" component={ () =>
<Admin
title={this.state.articalName}
/>}
/>
<Route path="/posts" component={Post} />
<Route path="/categories" component={Categories} />
<Route path="/users" component={Users} />
<Route path="/details" component={Details} />
<Route path="/profile" component={Profile} />
<Route path="/weatherapp" component={weatherApp} />
<Route path="/bar" component={ () =>
<SearchBar
onSubmit={this.onSearchSubmit}
/>}
/>
</div>
)
}
}
I used routes to send my data from parent to child. This example uses React Router 4. I wanted to use only ReactJs but I guess good solution would be also using Redux.
Since you do not want a parent-child relationship between both the components, how about making them as siblings and add a parent component for both of them!
With that any search made in the SearchBar component you can pass it to the new parent and from that to the earlier considered parent.
I am having an issue with active link.
I need to create few sub Routes and keep active styling on "parent" Route. How can I achieve that?
I am using withRouter for Routing purposes.
Let say I have main Navigation with 3 "parent" Routes - /login | /register /profile.
render () {
return (
<div className='grid'>
<Route exact path='/' component={HomePage} />
<Route path='/login' component={LoginForm} />
<Route path='/register' component={RegisterForm} />
<PrivateRoute path='/profile' component={PersonalDetails} />
<PrivateRoute path='/profile/delete-account' component={DeleteAccount} />
<PrivateRoute path='/profile/payments' component={Payments} />
<PrivateRoute path='/profile/food-preferences' component={FoodPreferences} />
</div>
);
}
Inside Component which is rendering on '/profile' route there is additional navigation with links to '/profile/delete-account/', '/profile/payments', 'profile/food-preferences'.
static getProfileRoutes () {
return profileRoutes.map(route => (
<NavLink to={route.path} activeClassName='active-profile' className='profile-navigation-button' key={route.path}>
<li className='profile-navigation-label'>{route.name}</li>
</NavLink>
));
}
Unfortunately when I navigate to one of "child" routes, active styling from button in SideBar which navigates to '/profile' is lost. How can I prevent it? Fix it?
static getSideBarRoutes () {
return sideBarRoutes.map(route => (
<NavLink className='navigation-button' key={route.path} to={route.path}>
<li className='navigation-item'>
<div className={route.icon} />
{route.name}
</li>
</NavLink>)
);
}
Routing is working perfectly fine - its just problem with active class lost on Sidebar
Many thanks for your help.
For example
const navigation = (props) => {
let styleClass= "not-active-class";
if (props.location.pathname.indexOf(props.route) !== -1) {
// checking if parent route is contained in route and setting active class
styleClass= "active-class";
}
return (
<NavLink
to={props.route}
activeClassName={styleClass} >
<p>{props.route}</p>
</NavLink>
);
}
We have a asp page which reading some information form request like this:
varLogon = Request.ServerVariables("HTTP_logon")
If we want to post something to the asp page using spring integration, we are unable to pass the HTTP_logon to the page,
This is not working
Any idea, what and how we can set the request header information?
<int:header-enricher input-channel="pdfgenheaderchannel" output-channel="pdfgenchannel">
<int:header name="HTTP_ordernumber" method="getOrdernumber" ref="reportbean"/>
<int:header name="reportID" method="getReportID" ref="reportbean"/>
<int:header name="Content-Type" value="text/html"/>
<int:header name="logon" value="orderADCB"/>
<int:header name="HTTP_logon" value="orderADCB"/>
</int:header-enricher>
<int-http:outbound-gateway id="pdfgenerationoutboundgateway"
request-channel="pdfgenchannel"
url="http://x.xy.xx.y/convertHTMLtoPDF.asp"
http-method="POST"
expected-response-type="java.lang.String"
charset="UTF-8"
reply-channel="replyChannel"
request-factory="requestFactory" />
You have to specify a header-mapper for the <int-http:outbound-gateway>. By default it maps only standard HTTP headers:
<beans:bean id="headerMapper" class="org.springframework.integration.http.support.DefaultHttpHeaderMapper"
factory-method="outboundMapper">
<beans:property name="outboundHeaderNames" value="*"/>
<beans:property name="userDefinedHeaderPrefix" value=""/>
</beans:bean>
<int-http:outbound-gateway header-mapper="headerMapper"/>
You can user following routing component to route according to header values.
<int:header-value-router input-channel="routingChannel" header-name="headerObject">
<int:mapping value="value1" channel="channel1" />
<int:mapping value="calue2" channel="channel2" />
</int:header-value-router>
I am having trouble processing a dtmf within a record tag.
I am looking to identify the zero entered during recording and perform specific action based on the value. zero could be entered anytime before or after speaking.
With the following snippet I see that when I enter zero, the application exits. It looks like the block tag is reached, but then processing terminates. I am not sure what the problem is here. Or is there a better way to acheive the same?
I also referred the answer here: VoiceXML - Recognize DTMF in Recording, but need more details.
<form id="recordMessage">
<property name="termchar" value="" />
<property name="inputmodes" value="dtmf" />
<var name="lastdtmfchar" expr="1"/>
<record name="recording" beep="true" maxtime="120s" dtmfterm="false" type="audio/wav">
<grammar mode="dtmf" version="1.0" root="dtmfSettings" xmlns="http://www.w3.org/2001/06/grammar">
<rule id="dtmfSettings" >
<one-of>
<item>0</item>
<item>#</item>
</one-of>
</rule>
</grammar>
<filled>
<assign name="lastdtmfchar" expr="recording$.termchar"/>
<if cond = "recording$.termchar == '#'">
<prompt> Hash entered
</prompt>
</if>
<if cond = "recording$.termchar == '0'">
<prompt> zero entered
</prompt>
</if>
</filled>
</record>
<block>
<if cond = "lastdtmfchar == '1'">
<prompt> block value not assigned
</prompt>
</if>
<if cond = "lastdtmfchar == '#'">
<prompt> block hash entered
</prompt>
</if>
<if cond = "lastdtmfchar == '0'">
<prompt> block zero entered
</prompt>
</if>
</block>
There is only this record tag in the form, but the root doc has all the handlers..
<vxml .....>
<catch event="connection.disconnect.hangup">
<goto next="${hangupUrl}?cause=hangup" />
</catch>
<catch event="connection.disconnect">
<goto next="${hangupUrl}?cause=disconnect" />
</catch>
<catch event="error">
<prompt>
<audio src="${goodbyeUrl">
</audio>
</prompt>
<exit/>
</catch>
<catch event="*">
<prompt>
<audio src="${goodbyeUrl">
</audio>
</prompt>
<exit/>
</catch>
<property name="termchar" value="#"/>
<link dtmf="0" next="${globalHandlerUrl}">
</link>
</vxml>
As you mentioned, dtmfterm = false may be the reason.
You can get the grammar matched character by accessing application.lastresult$. Refer http://www.w3.org/TR/voicexml20/#dml2.3.6
Agree with #kevin that in IVRs, a lot of things depend on the vendor itself (using a grammar in record is itself optional in the spec)