Update

functions/views/css/style.css

@@ -19,6 +19,7 @@
 	src: url(../fonts/Nunito-Bold.ttf);
 }
 
+
 :root {
 	--white: #FFFFFF;
 	--light-gray: #F0F0F0;
@@ -33,9 +34,12 @@
 	--placeholder: #aaaaaa;
 	--input-border: #979797;
 	--input-shadow: #A5A5A5;
+	--input-shadow-alt: #E5E5E5;
 	--uname: #898989;
 	--red: red;
 	--login-btn: #3D10FF;
+	--login-hover: whitesmoke;
+	--login-active: #00df90;
 	--google-login-btn: #cacaca;
 	--google-login-btn-hover: #A5A5A5;
 	--add-item-btn: #ff6619;
@@ -137,12 +141,127 @@ input:focus, textarea:focus, select:focus{
 
 .navbar {
 	background-color: var(--white);
-	height: 55px;
+	height: 60px;
+}
+
+.login-prompt a{
+	float: left;
+	position: relative;
+	font-family: osl;
+	font-size: 23px;
+	color: var(--uname);
+	cursor: pointer;
+	transition: 0.3s;
+}
+.login-prompt a:hover{
+	color: var(--red);
+}
+.login-prompt a:active{
+	color: var(--violet);
+	transition: 0.1s;
+}
+
+.login-form {
+	position: absolute;
+	height: 230px;
+	width: 230px;
+	z-index: 3;
+	top: 45px;
+	margin-left: 2%;
+	padding: 10px;
+	display: block;
+	border: 0.5px solid var(--input-border);
+	background-color: var(--white);
+	box-shadow: 0px 1px 2px var(--input-shadow);
+}
+.login-form p {
+	color: var(--search-extra);
+	font-family: osl;
+}
+.login-form .login-row {
+	position: relative;
+	width: 100%;
+	display: inline-flex;
+	height: 30px;
+	margin-top: 6px;
+	margin-bottom: 6px;
+}
+.login-row input {
+	position: relative;
+	width: 100%;
+	padding-left: 5px;
+	font-family: osl;
+	font-size: 15px;
+	border: 0.5px solid var(--input-border);
+	box-shadow: 0px 2px 3px var(--input-shadow-alt);
+
+}
+.login-row button {
+	margin-left: 7px;
+	width: 40px;
+	background-color: var(--login-btn);
+	border: none;
+	font-size: 22px;
+	color: var(--white);
+	box-shadow: 0px 2px 3px var(--input-shadow);
+}
+.a-login-btn {
+	background-image: url("/media/a_big_logon.png") !important;
+	background-repeat: no-repeat;
+	background-size: cover;
+	border: none;
+	background-position: 50% 50%;
+	border-radius: 0;
+	box-shadow: 0px 2px 3px var(--input-shadow);
+	cursor: pointer;
+	transition: 0.3s;
+}
+.a-login-btn:hover {
+	box-shadow: 0px 2px 3px var(--login-hover);
+}
+.a-login-btn:active {
+	box-shadow: 0px 2px 3px var(--red);
+	transition: 0.1s;
+}
+.g-login-btn {
+	background-image: url("/media/g_big_logon.png") !important;
+	background-repeat: no-repeat;
+	background-size: cover;
+	border: none;
+	border-radius: 5px;
+	box-shadow: 0px 2px 3px var(--input-shadow);
+	cursor: pointer;
+	transition: 0.3s;
+}
+.g-login-btn:hover {
+	box-shadow: 0px 2px 3px var(--login-hover);
+}
+.g-login-btn:active {
+	box-shadow: 0px 2px 3px var(--login-active);
+	transition: 0.1s;
+}
+.fb-login-btn {
+	background-image: url("/media/fb_big_logon.png") !important;
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: 50% 50%;
+	border: none;
+	box-shadow: 0px 2px 3px var(--input-shadow);
+	cursor: pointer;
+	transition: 0.3s;
+}
+.fb-login-btn:hover {
+	box-shadow: 0px 2px 3px var(--login-hover);
+}
+.fb-login-btn:active {
+	box-shadow: 0px 2px 3px var(--login-active);
+	transition: 0.1s;
 }
 
 .logon-crumbs {
-	padding-top: 10px;
+	padding-top: 17px;
 	padding-bottom: 10px;
+	display: inline-flex;
 }
 
 .logon-crumbs input {
@@ -249,7 +368,9 @@ input:focus, textarea:focus, select:focus{
 	float: right;
 	position: relative;
 	display: inline-flex;
-	bottom: 10%;
+	padding-top: 20px;
+	padding-bottom: 10px;
+	/* bottom: 10%; */
 	font-family: osl
 }
 
@@ -323,10 +444,6 @@ input:focus, textarea:focus, select:focus{
 	font-family: osl;
 	font-size: 17px;
 	box-shadow: 0px 3px 4px var(--input-shadow);
-
-	/*position: absolute;
-	left: 50%;
-	transform: translate(-50%, 0);*/
 }
 
 .sbar button {
@@ -986,3 +1103,4 @@ input:focus, textarea:focus, select:focus{
 		box-shadow: none;
 	}
 } */
+

functions/views/js/fAuth.js

@@ -1 +1 @@
-function checkAuth(){firebase.auth().onAuthStateChanged(function(e){if(e){if("dev@dev.dev"==e.email)try{document.getElementById("admin").setAttribute("style","display: block;")}catch(e){}try{document.getElementById("uname-dom").innerHTML="Loading..."}catch(e){}firebase.auth().currentUser.getIdToken().then(function(e){let t={uToken:e},n={method:"POST",body:JSON.stringify(t),headers:{"Content-Type":"application/json"}};fetch("login-user-api",n).then(e=>e.json()).then(function(e){if(1==e.success)if(e.registered)document.getElementById("uname-dom").innerHTML="Hello, "+e.name;else{try{document.getElementById("uname-dom").innerHTML="Unregistered!",document.getElementById("notifications").innerHTML="🔔 | Register your account",document.getElementById("notifications").setAttribute("href","registration"),document.getElementById("notifications").setAttribute("style","color: red;")}catch(e){}"registration"!=window.location.href.split("/").pop()&&window.location.replace("registration")}else console.log(e.error),document.getElementById("notifications").innerHTML="🔔 | What the fuck just happened.....",document.getElementById("notifications").setAttribute("style","color: pink;")})});try{document.getElementById("uname-field").setAttribute("style","display: block;"),document.getElementById("login-field").setAttribute("style","display: none;"),document.getElementById("uname-field").setAttribute("style","display: block;"),document.getElementById("login-field").setAttribute("style","display: none;")}catch(e){}try{document.getElementById("uAuthMsg").setAttribute("style","display: none;")}catch(e){}try{document.getElementById("authField").setAttribute("style","display: block;")}catch(e){}}else{document.getElementById("uname-field").setAttribute("style","display: none;"),document.getElementById("login-field").setAttribute("style","display: block;"),document.getElementById("uname-dom").innerHTML="Unregistered";try{document.getElementById("uAuthMsg").setAttribute("style","display: block;")}catch(e){}try{document.getElementById("authField").setAttribute("style","display: none;")}catch(e){}}})}function admin_review(){firebase.auth().currentUser.getIdToken().then(function(e){window.location.replace("admin-review?authToken="+e)})}function signinwithgoogle(){var e=new firebase.auth.GoogleAuthProvider;firebase.auth().signInWithPopup(e).then(function(e){console.log("User signed in...")}).catch(function(e){console.log(e)})}function signinwithfb(){var e=new firebase.auth.FacebookAuthProvider;firebase.auth().signInWithPopup(e).then(function(e){console.log("User signed in...")}).catch(function(e){console.log(e)})}function signinwithemail(){const e=document.getElementById("fuid"),t=document.getElementById("fpwd");var n=e.value,i=t.value;firebase.auth().signInWithEmailAndPassword(n,i).catch(e=>console.log(e.message)).then(function(n){t.value="",e.value=""})}function signout(){firebase.auth().signOut(),window.location.replace("home")}checkAuth();try{var pwField=document.getElementById("fpwd");pwField.addEventListener("keyup",function(e){13===e.keyCode&&(e.preventDefault(),document.getElementById("blogin").click())})}catch(e){}
+function checkAuth(){firebase.auth().onAuthStateChanged(function(e){if(e){if("dev@dev.dev"==e.email)try{document.getElementById("admin").setAttribute("style","display: block;")}catch(e){}try{document.getElementById("uname-dom").innerHTML="Loading...",document.getElementById("login-form").setAttribute("style","display: none;")}catch(e){}firebase.auth().currentUser.getIdToken().then(function(e){let t={uToken:e},n={method:"POST",body:JSON.stringify(t),headers:{"Content-Type":"application/json"}};fetch("login-user-api",n).then(e=>e.json()).then(function(e){if(1==e.success)if(e.registered)document.getElementById("uname-dom").innerHTML="Hello, "+e.name;else{try{document.getElementById("uname-dom").innerHTML="Unregistered!",document.getElementById("notifications").innerHTML="🔔 | Register your account",document.getElementById("notifications").setAttribute("href","registration"),document.getElementById("notifications").setAttribute("style","color: red;")}catch(e){}"registration"!=window.location.href.split("/").pop()&&window.location.replace("registration")}else console.log(e.error),document.getElementById("notifications").innerHTML="🔔 | What the fuck just happened.....",document.getElementById("notifications").setAttribute("style","color: pink;")})});try{document.getElementById("uname-field").setAttribute("style","display: block;"),document.getElementById("login-field").setAttribute("style","display: none;")}catch(e){}try{document.getElementById("uAuthMsg").setAttribute("style","display: none;")}catch(e){}try{document.getElementById("authField").setAttribute("style","display: block;")}catch(e){}}else{document.getElementById("uname-field").setAttribute("style","display: none;"),document.getElementById("login-field").setAttribute("style","display: block;"),document.getElementById("uname-dom").innerHTML="Unregistered";try{document.getElementById("uAuthMsg").setAttribute("style","display: block;")}catch(e){}try{document.getElementById("authField").setAttribute("style","display: none;")}catch(e){}}})}function loginFormListener(){let e=document.getElementById("login-form");document.addEventListener("click",function(t){try{var n=e.contains(t.target);"login-form-btn"==t.target.id||n||document.getElementById("login-form").setAttribute("style","display: none;")}catch(e){}},!1)}function login_form(){document.getElementById("login-form").setAttribute("style","display: block;"),document.getElementById("fuid").focus()}function admin_review(){firebase.auth().currentUser.getIdToken().then(function(e){window.location.replace("admin-review?authToken="+e)})}function signinwithgoogle(){var e=new firebase.auth.GoogleAuthProvider;firebase.auth().signInWithPopup(e).then(function(e){console.log("User signed in...")}).catch(function(e){console.log(e)})}function signinwithapple(){console.log("Coming later!")}function signinwithfb(){var e=new firebase.auth.FacebookAuthProvider;firebase.auth().signInWithPopup(e).then(function(e){console.log("User signed in...")}).catch(function(e){console.log(e)})}function signinwithemail(){const e=document.getElementById("fuid"),t=document.getElementById("fpwd");var n=e.value,i=t.value;firebase.auth().signInWithEmailAndPassword(n,i).catch(e=>console.log(e.message)).then(function(n){t.value="",e.value=""})}function signout(){firebase.auth().signOut(),window.location.replace("home")}checkAuth(),loginFormListener();try{var pwField=document.getElementById("fpwd");pwField.addEventListener("keyup",function(e){13===e.keyCode&&(e.preventDefault(),document.getElementById("blogin").click())})}catch(e){}

functions/views/js/fAuth.src.js

@@ -2,14 +2,13 @@ function checkAuth(){
 	firebase.auth().onAuthStateChanged(function(user){
 		if (user) {
 			if (user.email == "dev@dev.dev") {
-				try {
+				try {document.getElementById('admin').setAttribute('style', 'display: block;')}
-					document.getElementById('admin').setAttribute('style', 'display: block;')
-				}
 				catch(error){}
 			}
-
+			try {
-			try {document.getElementById('uname-dom').innerHTML = "Loading..."}
+				document.getElementById('uname-dom').innerHTML = "Loading..."
-			catch(error){}
+				document.getElementById('login-form').setAttribute("style", "display: none;")
+			}catch(error){}
 
 			firebase.auth().currentUser.getIdToken().then(function(idToken) {
 				let url = 'login-user-api'
@@ -44,9 +43,6 @@ function checkAuth(){
 			try {
 				document.getElementById('uname-field').setAttribute("style", "display: block;")
 				document.getElementById('login-field').setAttribute("style", "display: none;")
-				
-				document.getElementById('uname-field').setAttribute("style", "display: block;")
-				document.getElementById('login-field').setAttribute("style", "display: none;")
 			}
 			catch(error) {}
 			try {document.getElementById('uAuthMsg').setAttribute("style", "display: none;")}
@@ -65,9 +61,26 @@ function checkAuth(){
 		}
 	})
 }
-
 checkAuth()
 
+function loginFormListener() {
+	let loginForm = document.getElementById('login-form');
+	document.addEventListener('click', function (event) {
+		try{
+			var isClickInside = loginForm.contains(event.target);
+			if (event.target.id != "login-form-btn" && !isClickInside) {
+				document.getElementById('login-form').setAttribute("style", "display: none;")	
+			}
+		}catch(err){}
+	}, false)
+}
+loginFormListener()
+
+function login_form() {
+	document.getElementById('login-form').setAttribute("style", "display: block;")
+	document.getElementById("fuid").focus()
+}
+
 function admin_review() {
 	firebase.auth().currentUser.getIdToken().then(function(idToken) {
 		window.location.replace("admin-review?authToken="+idToken)
@@ -86,6 +99,10 @@ function signinwithgoogle(){
 		})
 }
 
+function signinwithapple(){
+	console.log("Coming later!")
+}
+
 function signinwithfb(){
 	var fbAuthProvider = new firebase.auth.FacebookAuthProvider()
 	firebase.auth().signInWithPopup(fbAuthProvider)

functions/views/partials/header.ejs

@@ -22,19 +22,29 @@
 	<main>
 		<div class="page">
 			<div class="navbar">
+				<div class="login-form" id="login-form" style="display:none;">
+					<p>Login:</p>
+					<button id="blogin_a" onclick={signinwithapple()} class="a-login-btn login-row"></button>
+					<button id="blogin_g" onclick={signinwithgoogle()} class="g-login-btn login-row"></button>
+					<button id="blogin_f" onclick={signinwithfb()} class="fb-login-btn login-row"></button>
+					<div class="login-row">
+						<input id="fuid" type="text" placeholder="Username">
+					</div>
+					<div class="login-row">
+						<input id="fpwd" type="password" placeholder="Password">
+						<button id="blogin" onclick={signinwithemail()} class="login-btn">&#x27a4;</button>
+					</div>
+				</div>
+			
 				<div class="logon-crumbs">
-					<div id="uname-field" style="display: none;">
+					<div id="uname-field" style="display: block;">
 						<a id="uname-dom" class="user-name" href="javascript:;" onclick="my_products();">Unregistered user</a>
 						<div class="user-logout">
 							<a onclick={signout()}>Log out</a>
 						</div>
 					</div>
-						<div id="login-field" style="display: block;">
+					<div id="login-field" class="login-prompt" style="display: none;">
-						<input id="fuid" type="text" placeholder="Username">
+						<a href="javascript:;" id="login-form-btn" onclick="login_form();">Hi There, Login?</a>
-						<input id="fpwd" type="password" placeholder="Password">
-						<button id="blogin" onclick={signinwithemail()} class="btn-login">&#x27a4;</button>
-						<button id="blogin_g" onclick={signinwithgoogle()} class="btn-g-login"><img src="media/g_logon.png" class="img-g-login" alt="img"></button>
-						<button id="blogin_g" onclick={signinwithfb()} class="btn-fb-login"><img src="media/fb_logon.png" class="img-g-login" alt="img"></button>
 					</div>
 				</div>
 				<div class="user-info">
@@ -61,7 +71,7 @@
 
 			<div class="sbar">
 				<img src="media/gg_logo.png" onclick={window.location.replace('home')} alt="img">
-				<input id="sfield" type="text" placeholder="I Want...">
+				<input id="sfield" type="text" name="search" placeholder="I Want...">
 				<button id="sbutton" onclick={bSearch()}>Go!</button>
 				<a href="#">Extras</a>
 			</div>