revamped sign-in, now that we have working checks

This commit is contained in:
Jacob Levine 2019-02-09 13:57:48 -06:00
parent 2c9951d2c9
commit 059509e018
8 changed files with 63 additions and 229 deletions

View File

@ -13,36 +13,10 @@
</head> </head>
<body> <body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="#">Profile</a>
<a href="team">Team</a>
<a href="scout">Scout Matches</a>
<a href="stats">Torunament Stats</a>
</div>
<div id="main"> <div id="main">
<span onclick="openNav()" id="topbar">
<img id="sideload" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1200px-Hamburger_icon.svg.png">
</span>
<h1 id="mainhead">TitanScout- Sign In</h1> <h1 id="mainhead">TitanScout- Sign In</h1>
<p id="status">You are not signed in.</p> <p id="status">You are not signed in.</p>
<input type="button" name="Sign Out" value="Sign Out" onclick="signout();" id="signout">
<input type="button" name="Update Profile" onClick="loadupdpi();" value='Update Profile Info' id="updpi">
<input type="button" name="DelAcc" value="Delete Account" onclick="deleteAccount();" id="deleteacc">
<div id="profileupd">
<div class="profupdopt">
New Username: <input type="text" name="NewDN" value="" id="newDN">
</div>
<div class="profupdopt">
New Profile Pic URL: <input type="text" name="NewPP" value="" id='newPP'>
</div>
<div class="profileupdopt">
New Email: <input type="text" name="NewEM" value="" id="newEM">
</div>
<div class="profileupdopt">
<input type='button' name="upd" value="Update Profile" id="upd" onclick="upProfileInfo();">
</div>
</div>
<div id="firebaseui-auth-container"></div> <div id="firebaseui-auth-container"></div>
</div> </div>
</body> </body>

View File

@ -7,7 +7,7 @@
<script src="https://www.gstatic.com/firebasejs/5.7.2/firebase.js"></script> <script src="https://www.gstatic.com/firebasejs/5.7.2/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/firebaseui/3.5.1/firebaseui.js"></script> <script src="https://cdn.firebase.com/libs/firebaseui/3.5.1/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.1/firebaseui.css" /> <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.1/firebaseui.css" />
<link rel="stylesheet" href="style.css" type="text/css" /> <link rel="stylesheet" href="../style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script type="text/javascript" src="scripts.js"></script> <script type="text/javascript" src="scripts.js"></script>
</head> </head>
@ -25,7 +25,7 @@
<img id="sideload" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1200px-Hamburger_icon.svg.png"> <img id="sideload" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1200px-Hamburger_icon.svg.png">
</span> </span>
<h1 id="mainhead">TitanScout- Sign In</h1> <h1 id="mainhead">TitanScout- Sign In</h1>
<p id="status">You are not signed in.</p> <p id="status">Loading...</p>
<input type="button" name="Sign Out" value="Sign Out" onclick="signout();" id="signout"> <input type="button" name="Sign Out" value="Sign Out" onclick="signout();" id="signout">
<input type="button" name="Update Profile" onClick="loadupdpi();" value='Update Profile Info' id="updpi"> <input type="button" name="Update Profile" onClick="loadupdpi();" value='Update Profile Info' id="updpi">
<input type="button" name="DelAcc" value="Delete Account" onclick="deleteAccount();" id="deleteacc"> <input type="button" name="DelAcc" value="Delete Account" onclick="deleteAccount();" id="deleteacc">

View File

@ -14,7 +14,7 @@
<body> <body>
<div id="mySidenav" class="sidenav"> <div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="../">Profile</a> <a href="../profile">Profile</a>
<a href="#">Team</a> <a href="#">Team</a>
<a href="../scout">Scout Matches</a> <a href="../scout">Scout Matches</a>
<a href="../stats">Torunament Stats</a> <a href="../stats">Torunament Stats</a>
@ -24,6 +24,7 @@
<img id="sideload" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1200px-Hamburger_icon.svg.png"> <img id="sideload" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1200px-Hamburger_icon.svg.png">
</span> </span>
<h1 id="mainhead">TitanScout- Scout Matches</h1> <h1 id="mainhead">TitanScout- Scout Matches</h1>
<p id="status">Loading...</p>
</div> </div>
</body> </body>
</html> </html>

View File

@ -14,4 +14,29 @@ function closeNav() {
window.onload = function() { window.onload = function() {
document.getElementById('sideload').style.display = 'block'; document.getElementById('sideload').style.display = 'block';
var config = {
apiKey: "(insert the TitanScout Api Key Here)",
authDomain: "titanscoutandroid.firebaseapp.com",
databaseURL: "https://titanscoutandroid.firebaseio.com",
projectId: "titanscoutandroid",
storageBucket: "titanscoutandroid.appspot.com",
messagingSenderId: "1097635313476"
};
//eventually find a less-jank way to do this tho
firebase.initializeApp(config);
firebase.auth().onAuthStateChanged(function(user) {
if (user != null) {
if (user.displayName != null) {
document.getElementById('status').innerHTML = "You are signed in as: " + user.displayName;
} else if (user.email != null) {
document.getElementById('status').innerHTML = "You are signed in as: " + user.email;
} else if (user.phoneNumber != null) {
document.getElementById('status').innerHTML = "You are signed in as: " + user.phoneNumber;
} else {
document.getElementById('status').innerHTML = "You are signed in.";
}
} else {
window.location.replace('../');
}
});
} }

View File

@ -10,15 +10,7 @@ var config = {
firebase.initializeApp(config); firebase.initializeApp(config);
// FirebaseUI config. // FirebaseUI config.
var uiConfig = { var uiConfig = {
callbacks: { signInSuccessUrl: '<url-to-redirect-to-on-success>',
signInSuccessWithAuthResult: function(authResult, redirectUrl) {
if (authResult.user) {
handleSignedInUser(authResult.user);
}
return false;
}
},
//signInSuccessUrl: '<url-to-redirect-to-on-success>',
signInOptions: [ signInOptions: [
// Leave the lines as is for the providers you want to offer your users. // Leave the lines as is for the providers you want to offer your users.
firebase.auth.GoogleAuthProvider.PROVIDER_ID, firebase.auth.GoogleAuthProvider.PROVIDER_ID,
@ -40,187 +32,3 @@ var uiConfig = {
alert("we will steal all of the data"); alert("we will steal all of the data");
} }
}; };
var handleSignedInUser = function(user) {
document.getElementById("mainhead").innerHTML = "TitanScout- User Info";
if (user.displayName != null) {
document.getElementById('status').innerHTML = "You are signed in as: " + user.displayName;
} else if (user.email != null) {
document.getElementById('status').innerHTML = "You are signed in as: " + user.email;
} else if (user.phoneNumber != null) {
document.getElementById('status').innerHTML = "You are signed in as: " + user.phoneNumber;
} else {
document.getElementById('status').innerHTML = "You are signed in.";
}
document.getElementById('signout').style.display = 'inline-block';
document.getElementById('updpi').style.display = 'inline-block';
document.getElementById('deleteacc').style.display = 'inline-block';
document.getElementById('profileupd').style.display = 'none';
document.getElementById('sideload').style.display = 'block';
}
var handleSignedOutUser = function() {
document.getElementById("mainhead").innerHTML = "TitanScout- Sign In";
document.getElementById('status').innerHTML = "You are not signed in.";
document.getElementById('signout').style.display = 'none';
document.getElementById('updpi').style.display = 'none';
document.getElementById('deleteacc').style.display = 'none';
document.getElementById('profileupd').style.display = 'none';
document.getElementById('sideload').style.display = 'none';
ui.start('#firebaseui-auth-container', uiConfig);
};
// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);
var deleteAccount = function() {
try {
firebase.auth().currentUser.delete()
handleSignedOutUser()
} catch (error) {
if (error.code == 'auth/requires-recent-login') {
// The user's credential is too old. She needs to sign in again.
signout()
// The timeout allows the message to be displayed after the UI has
// changed to the signed out state.
setTimeout(function() {
alert('Please sign in again to delete your account.');
}, 1);
}
}
};
function signout() {
var user = firebase.auth().currentUser;
firebase.auth().signOut()
handleSignedOutUser()
}
function loadupdpi() {
if (firebase.auth().currentUser != null) {
document.getElementById('profileupd').style.display = 'block';
} else {
setTimeout(function() {
alert('Please sign in to change your account info.');
}, 1);
handleSignedOutUser();
}
}
function upProfileInfo() {
if (firebase.auth().currentUser != null) {
var user = firebase.auth().currentUser;
var newDN = document.getElementById('newDN').value;
var newEM = document.getElementById('newEM').value;
var newPP = document.getElementById('newPP').value;
var si = true
if (newDN != '' && newDN != user.displayName) {
if (newPP != '' && newPP != user.photoURL) {
try {
user.updateProfile({
displayName: newDN,
photoURL: newPP
});
} catch (error) {
if (error.code == 'auth/requires-recent-login') {
si = false;
// The user's credential is too old. She needs to sign in again.
signout()
// The timeout allows the message to be displayed after the UI has
// changed to the signed out state.
setTimeout(function() {
alert('Please sign in again to delete your account.');
}, 1);
} else {
alert("An error occurred: " + error)
}
}
} else {
try {
user.updateProfile({
displayName: newDN
});
} catch (error) {
if (error.code == 'auth/requires-recent-login') {
si = false;
// The user's credential is too old. She needs to sign in again.
signout()
// The timeout allows the message to be displayed after the UI has
// changed to the signed out state.
setTimeout(function() {
alert('Please sign in again to delete your account.');
}, 1);
} else {
alert("An error occurred: " + error)
}
}
}
} else {
if (newPP != '' && newPP != user.photoURL) {
try {
user.updateProfile({
photoURL: newPP
});
} catch (error) {
if (error.code == 'auth/requires-recent-login') {
si = false;
// The user's credential is too old. She needs to sign in again.
signout()
// The timeout allows the message to be displayed after the UI has
// changed to the signed out state.
setTimeout(function() {
alert('Please sign in again to delete your account.');
}, 1);
} else {
alert("An error occurred: " + error)
}
}
}
}
if (newEM != '' && newEM != user.email) {
try {
user.updateEmail(newEM)
} catch (error) {
si = false;
if (error.code == 'auth/requires-recent-login') {
// The user's credential is too old. She needs to sign in again.
signout()
// The timeout allows the message to be displayed after the UI has
// changed to the signed out state.
setTimeout(function() {
alert('Please sign in again to delete your account.');
}, 1);
} else {
alert("An error occurred: " + error)
}
}
}
if (si) {
setTimeout(function(){handleSignedInUser(user);},1)
}
} else {
setTimeout(function() {
alert('Please sign in to change your account info.');
}, 1);
handleSignedOutUser();
}
}
/* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
window.onload=function(){
if(firebase.auth().currentUser!=null){
handleSignedInUser(firebase.auth().currentUser)
}
}

View File

@ -14,7 +14,7 @@
<body> <body>
<div id="mySidenav" class="sidenav"> <div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="../">Profile</a> <a href="../profile">Profile</a>
<a href="#">Team</a> <a href="#">Team</a>
<a href="../scout">Scout Matches</a> <a href="../scout">Scout Matches</a>
<a href="../stats">Torunament Stats</a> <a href="../stats">Torunament Stats</a>
@ -23,8 +23,8 @@
<span onclick="openNav()" id="topbar"> <span onclick="openNav()" id="topbar">
<img id="sideload" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1200px-Hamburger_icon.svg.png"> <img id="sideload" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1200px-Hamburger_icon.svg.png">
</span> </span>
<h1 id="mainhead">TitanScout- Torunament Statistics</h1> <h1 id="mainhead">TitanScout- Tournament Statistics</h1>
<p id="status">You are not signed in.</p> <p id="status">Loading...</p>
</div> </div>
</body> </body>
</html> </html>

View File

@ -14,7 +14,7 @@
<body> <body>
<div id="mySidenav" class="sidenav"> <div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="../">Profile</a> <a href="../profile">Profile</a>
<a href="#">Team</a> <a href="#">Team</a>
<a href="../scout">Scout Matches</a> <a href="../scout">Scout Matches</a>
<a href="../stats">Torunament Stats</a> <a href="../stats">Torunament Stats</a>
@ -24,6 +24,7 @@
<img id="sideload" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1200px-Hamburger_icon.svg.png"> <img id="sideload" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1200px-Hamburger_icon.svg.png">
</span> </span>
<h1 id="mainhead">TitanScout- Your Teams</h1> <h1 id="mainhead">TitanScout- Your Teams</h1>
<p id="status">Loading...</p>
</div> </div>
</body> </body>
</html> </html>

View File

@ -14,4 +14,29 @@ function closeNav() {
window.onload = function() { window.onload = function() {
document.getElementById('sideload').style.display = 'block'; document.getElementById('sideload').style.display = 'block';
var config = {
apiKey: "(insert the TitanScout Api Key Here)",
authDomain: "titanscoutandroid.firebaseapp.com",
databaseURL: "https://titanscoutandroid.firebaseio.com",
projectId: "titanscoutandroid",
storageBucket: "titanscoutandroid.appspot.com",
messagingSenderId: "1097635313476"
};
//eventually find a less-jank way to do this tho
firebase.initializeApp(config);
firebase.auth().onAuthStateChanged(function(user) {
if (user != null) {
if (user.displayName != null) {
document.getElementById('status').innerHTML = "You are signed in as: " + user.displayName;
} else if (user.email != null) {
document.getElementById('status').innerHTML = "You are signed in as: " + user.email;
} else if (user.phoneNumber != null) {
document.getElementById('status').innerHTML = "You are signed in as: " + user.phoneNumber;
} else {
document.getElementById('status').innerHTML = "You are signed in.";
}
} else {
window.location.replace('../');
}
});
} }