Hi guys,
I’ve adapted the video login page example from youtube and added my backend that connects to a server and checks the details provided by a user enabling them to login.
I can get the login to work successfully, however I don’t know how to launch different panels or pages and make them unaccessible to other pages.
<App Theme="Basic" ClearColor="#200c50">
<iOS.StatusBarConfig Style="Light" />
<DockPanel>
<Style>
<Text TextColor="#ffffff" />
<TextInput PlaceholderColor="#ffffff80" TextColor="#ffffff" CaretColor="#ffffff" />
</Style>
<!-- Button colors -->
<float4 ux:Key="C600" ux:Value="#8869e5" />
<float4 ux:Key="C700" ux:Value="#6447b3" />
<float4 ux:Key="CFillFore" ux:Value="#644793" />
<StatusBarBackground Dock="Top" />
<BottomBarBackground Dock="Bottom" />
<JavaScript>
var Observable = require("FuseJS/Observable");
var email = Observable("");
var password = Observable("");
var currentPage = Observable("launchpage");
var areCredentialsValid = Observable(function() {
return email.value != "" && password.value != "";
});
function login() {
//create the httprequest object
var hr = new XMLHttpRequest();
//variable to pass to the object
var url = "http://myurl.com/phpfile.php";
var params = "email="+email.value+"&password="+password.value;
hr.open("POST", url, true);
//set content type to tell server that parameters are in the url
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//use onreadystatechange event of the request object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200){
var return_data = hr.responseText;
email.value = return_data;
if(return_data == "Success"){
currentPage.value = "loggedinpage";
}
}
}
//send the data to the server and wait for the response
hr.send(params);
email.value = "Attempting login...";
}
module.exports = {
email: email,
password: password,
login: login,
currentPage: currentPage,
areCredentialsValid: areCredentialsValid
};
</JavaScript>
<!-- All pages here! -->
<HierarchicalNavigation ux:Name="nav" Active="launchpage" ReuseExistingNode="false" />
<Style>
<Page>
<EnteringAnimation>
<Move X="1" RelativeTo="ParentSize" />
</EnteringAnimation>
<ExitingAnimation>
<Move X="-1" RelativeTo="ParentSize" />
</ExitingAnimation>
</Page>
</Style>
<!-- Launching login page -->
<Page ux:Name="launchpage">
<Video Layer="Background" Volume="0.0" File="Assets/video.mp4" IsLooping="true" AutoPlay="true" StretchMode="UniformToFill" ContentAlignment="CenterRight" Opacity="0.3" Padding="0">
<Blur Radius="3.31" />
</Video>
<Grid Rows="1*,1*">
<StackPanel Alignment="VerticalCenter">
<Image File="Assets/logo.jpg" StretchMode="PointPrecise"/>
<Text Alignment="HorizontalCenter" FontSize="50">SSMXC</Text>
<Text Alignment="HorizontalCenter" FontSize="46">Booking In</Text>
<Text Alignment="HorizontalCenter" Opacity=".5">book into the next event fast and easy</Text>
</StackPanel>
<StackPanel Alignment="VerticalCenter" Margin="50,0,50,0">
<TextInput PlaceholderText="email" Value="{email}" />
<TextInput PlaceholderText="password" IsPassword="true" Value="{password}" />
<Button Text="Log in" IsEnabled="{areCredentialsValid}" Clicked="{login}" />
</StackPanel>
</Grid>
</Page>
<Page ux:Name="loggedinpage" Background="Red"/>
<Page Background="Green"/>
</DockPanel>
</App>
That is my most recent attempt using the HierarchalNavigation system, I’ve tried PageControl, but that just lets the user swipe from the login to other pages.
I’ve recently moved over from native Android Java development and am used to calling an Intent to start a new Activity, anything at all similar to this?
Just would like to say aswell, Fuse is brilliant!
Many thanks, Casey
