Final Task ~ Unstable
by cjhaley
HTML
<script src="https://bootswatch.com/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="alert alert-warning user-feedback">
Alerts
</div>
</div>
<div class="row">
<div class="col-xs-12">
<ul class="nav nav-tabs" id="myTabs">
<li role="presentation" class="active"><a href="#home">Login</a></li>
<li role="presentation"><a href="#voting">Voting</a></li>
<li role="presentation"><a href="#admin">Admin</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="row">
<div class="col-xs-12">
<div class="voter-login">
<p>Please enter your details below to vote. </p>
<div class="form-group">
<input type="text" class="form-control inputID" placeholder="Voter ID" >
</div>
<div class="form-group">
<input type="password" class="form-control inputPass" placeholder="Password" >
</div>
<div class="form-group">
<button class="btn btn-success vfm-voter" id = 'login' >Login!</button>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="voting">
<div class="row">
<div class="col-xs-12">
<h3>Select issue to vote for:</h3>
<div class="form-group">
<select name="community_issues" class="form-control"></select>
</div>
<div class="form-group">
<button name="cast_vote" class="btn btn-success">Cast vote!</button>
<button name="logout" class="btn btn-danger">Cancel and Logout</button>
...
CSS
body {
margin-top:20px;
}
.user-feedback {
float:left;
position:absolute;
display:none;
left:30%;
width:200px;
top:50px;
z-index:999;
text-align:center;
}
JavaScript
//Setting Up Globe varibles
var loggedInUser = null;
var loggedIn = false;
var inputPass = null;
var inputId = null;
var loggingInUser = null;
var adminPowers = false;
var users = [
{userId: "a0001", password: "123", name: "Jerry G", voteStatus:false,},
{userId: "a0002", password: "873895", name: "Andrew N", voteStatus:false,},
{userId: "a0003", password: "264777", name: "Jerry G", voteStatus:false,},
{userId: "a0004", password: "937732", name: "Jerry G", voteStatus:false,},
{userId: "a0005", password: "837653", name: "Jerry G", voteStatus:false,},
{userId: "a0006", password: "882900", name: "Jerry G", voteStatus:false,},
{userId: "a0007", password: "1234", name: "Jerry G", voteStatus:false, admin: true},
]
//Form Collecter and Logging process
$('.vfm-voter').click(function() {
console.log("clicked");
inputID = $('.inputID').val();
inputPass = $('.inputPass').val();
for(i=0; i < users.length; i++){
console.log(inputID);
console.log(inputPass);
voterLogin();
/*if(inputID != users[i].userId && inputPass != users[i].password){
inputID = users[i].userId;
inputPass = users[i].password;
console.log('if');
messageUsers("Logging In");
}else{messageUsers('Incorrect Details')};
}
*/
}
});
//The end of the login process
function voterLogin () {
for(i=0; i < users.length; i++){
console.log(userId)
if(inputId == users[i].userId && inputPass == users[i].password){
loggingInUser = users[i];
console.log('user found');
}
}
if(loggingInUser{ //is the voter variable loaded and found
if(loggingInUser.voteStatus && !loggingInUser.Admin){ //check if they have voted
messageUsers('Voting more then once is not allowed!');
}else{
loggedIn = true;
if(loggingInUser.Admin){
adminPower = true;
}
messageUsers('Welcome, '+loggingInUser.name);
$('#myTabs a[href="#voting"]').tab('show');
}
}
else{
messageUsers('Voter details incorrect. Please try again.');
...