Am building an app which will require the user to input a one time unique code before the splash screen will allow him access to the other pages of the app. Below is what i have been able to do so far
<JavaScript>
var Observable = require('FuseJS/Observable');
items = Observable();
text = Observable();
data = Observable();
userInput = Observable();
loadPage = Observable(false);
text.value = 'Hello world'
userInput.value = 'This is user input'
function verify() {
url=`http://pinportar.codecounty.com/json?key=UlQ8qENfpilE8uMA3Xuvy1nUDlHmtrok&method=validatepin&pin=${userInput.value}`
fetch(url).then(function(res){
return res.json()
}).then(function(res) {
if (res.error_message === 'Pin is valid' ) {
loadPage = true;
}
text.value= res.error_message
userInput.value = 'done!!!'
}).catch(function(err){
text.value(err)
})
}
module.exports = {
items : items,
verify : verify,
text : text,
userInput : userInput
};
</JavaScript>
<Page ux:Name="lock">
<StackPanel>
<Text TextWrapping='Wrap' Value='{text}'/>
<Button Alignment="TopRight" Color='Blue' Padding='20' Clicked='{verify}' Margin="5">
<Text Value="Verify"/>
<WhilePressed>
<Scale Factor=".50"/>
</WhilePressed>
</Button>
<TextInput ux:Name="text" PlaceholderText="Text field" PlaceholderColor="#ccc" Height="50" Padding="5" Value='{userInput}'>
<Rectangle Layer="Background">
<Stroke Width="2" Brush="#BBB" />
</Rectangle>
</TextInput>
</StackPanel>
</Page>
Am facing two challenges:
1, How to use the If statement correctly to make the splash page go off when the res.error_message === ‘Pin is valid’
2, How to prevent the splash page from coming back after the user has successfully put in the right pin
Please help
am a total novice in JavaScript. Thanks