max/gg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Login system donee

Browse Source
This commit is contained in:
Max Hunt 2020-04-22 00:23:25 +01:00
parent 63defe0066
commit c2dfa2135f
3 changed files with 140 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
views/css/style.css
View File

@ -80,6 +80,14 @@ footer a {
box-shadow: 0px 2px 3px #A5A5A5; box-shadow: 0px 2px 3px #A5A5A5;
} }
.user-name {
float: left;
position: relative;
font-family: osl;
font-size: 23px;
color: #898989;
}
.logon-crumbs button { .logon-crumbs button {
float: left; float: left;
position: relative; position: relative;
@ -106,6 +114,28 @@ footer a {
width: 35px; width: 35px;
} }
.btn-login:hover {
color: red;
transition: 0.3s;
cursor: pointer;
}
.btn-g-login:hover {
box-shadow: 0px 2px 3px #A5A5A5;
transition: 0.3s;
cursor: pointer;
}
.btn-login:active {
color: white;
transition: 0.1s;
}
.btn-g-login:active {
box-shadow: 0px 2px 3px red;
transition: 0.1s;
}
.user-info { .user-info {
float: right; float: right;
position: relative; position: relative;
@ -239,3 +269,19 @@ footer a {
font-size: 19px; font-size: 19px;
color: #737373; color: #737373;
} }
.user-logout {
float: left;
padding-left: 10px;
padding-top: 11px;
position: relative;
font-family: osl;
font-size: 13px;
color: #393939;
cursor: pointer;
}
.user-logout:hover {
color: red;
transition: 0.3s;
}

34
views/home.ejs
View File

@ -9,6 +9,27 @@
<meta name="author" content="Max"> <meta name="author" content="Max">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyCrhgibbVUCOu3Vz3pw9iutGwTXen724eU",
authDomain: "project-gg-3b754.firebaseapp.com",
databaseURL: "https://project-gg-3b754.firebaseio.com",
projectId: "project-gg-3b754",
storageBucket: "project-gg-3b754.appspot.com",
messagingSenderId: "338558477178",
appId: "1:338558477178:web:f1b9069d1da04749a26cc3",
measurementId: "G-Y42R9NNJXS"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
</head> </head>
<body> <body>
@ -16,10 +37,18 @@
<div class="page"> <div class="page">
<div class="navbar"> <div class="navbar">
<div class="logon-crumbs"> <div class="logon-crumbs">
<div id="uname-field" style="display: none;">
<a id="uname-dom" class="user-name" href="#">Unregistered user</a>
<div class="user-logout">
<a onclick={signout()}>Log out</a>
</div>
</div>
<div id="login-field" style="display: block;">
<input id="fuid" type="text" placeholder="Username"> <input id="fuid" type="text" placeholder="Username">
<input id="fpwd" type="password" placeholder="Password"> <input id="fpwd" type="password" placeholder="Password">
<button id="blogin" class="btn-login">&#x27a4;</button> <button id="blogin" onclick={signinwithemail()} class="btn-login">&#x27a4;</button>
<button id="blogin_g" class="btn-g-login"><img src="media/g_logon.png" class="img-g-login" alt="img"></button> <button id="blogin_g" onclick={signinwithgoogle()} class="btn-g-login"><img src="media/g_logon.png" class="img-g-login" alt="img"></button>
</div>
</div> </div>
<div class="user-info"> <div class="user-info">
<div class="notifications"> <div class="notifications">
@ -108,5 +137,6 @@
GG Sales US 🇺🇸 GG Sales US 🇺🇸
</div> </div>
</footer> </footer>
<script src="js/fAuth.js"></script>
</body> </body>
</html> </html>

60
views/js/fAuth.js Normal file
View File

@ -0,0 +1,60 @@
function checkAuth(){
firebase.auth().onAuthStateChanged(function(user){
if (user) {
document.getElementById('uname-field').setAttribute("style", "display: block;")
document.getElementById('login-field').setAttribute("style", "display: none;")
document.getElementById('uname-dom').innerHTML = "Hello, " + user.displayName
}
else {
document.getElementById('uname-field').setAttribute("style", "display: none;")
document.getElementById('login-field').setAttribute("style", "display: block;")
document.getElementById('uname-dom').innerHTML = "Unregistered"
}
})
}
window.onload = function(){
checkAuth()
}
function signinwithgoogle(){
var googleAuthProvider = new firebase.auth.GoogleAuthProvider()
firebase.auth().signInWithPopup(googleAuthProvider)
.then(function(data){
console.log('User signed in...')
})
.catch(function(error){
console.log(error)
})
}
function signinwithemail(){
const txtEmail = document.getElementById('fuid')
const txtPassword = document.getElementById('fpwd')
var email = txtEmail.value
var pass = txtPassword.value
var auth = firebase.auth()
auth.signInWithEmailAndPassword(email, pass)
.catch(e => console.log(e.message))
.then(function(){
txtPassword.value = ''
txtEmail.value = ''
})
}
function signout(){
firebase.auth().signOut()
}
var pwField = document.getElementById("fpwd");
pwField.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("blogin").click();
}
});