Update

Dockerfile

@@ -1,15 +1,15 @@
-FROM node:latest
+FROM node:16.15.1-buster-slim
 
 WORKDIR /app
 
 COPY . .
 
-RUN apt update
+# RUN apt update
-RUN apt install htop
+# RUN apt install htop
 
 RUN npm install
 RUN npm install pm2 -g
 
-EXPOSE 5000
+EXPOSE 5001
 
-CMD ["pm2-runtime", "app.js"]
+CMD ["pm2-runtime", "server.js"]

functions/views/css/style.css

@@ -19,8 +19,85 @@
 	src: url(../fonts/Nunito-Bold.ttf);
 }
 
+
+:root {
+	--white: #FFFFFF;
+	--light-gray: #F0F0F0;
+	--whitesmoke: whitesmoke;
+	--gray: gray;
+	--black: black;
+	--violet: violet;
+	--green: green;
+	--footer-background: #D8D8D8;
+	--footer-shadow-background: #8A8A8A;
+	--footer-a: #737373;
+	--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;
+	--add-item-btn-hover: #c41000;
+	--add-item-btn-active: #BBBBBB;
+	--notifications: #898989;
+	--notifications-hover: tomato;
+	--notifications-active: cyan;
+	--search-btn-background: #5359FF;
+	--search-btn: #C4C4C4;
+	--search-extra: #7F7F7F;
+	--product-container-p: #CA5555;
+	--user-logout: #393939;
+	--new-product-field-p: #898989;
+	--new-product-field-btn: #30a8ff;
+	--new-product-field-btn-hover: #ff7700;
+	--new-product-field-btn-active: #ffaf69;
+	--new-product-field-btn-disabled: #b9b9b9;
+	--product-page-info-container: #5E5E5E;
+	--product-page-info-btn: #30a8ff;
+	--product-page-info-hover: #ffc04b;
+	--product-page-info-active: #ffaf69;
+	--product-page-info-disabled: #b9b9b9;
+	--my-product-details-container: #CA5555;
+	--purchase-msg: #00df90;
+	--error-msg: #df0000;
+	--edit-btn: #A562FF;
+	--edit-btn-hover: #ea62ff;
+	--edit-btn-active: pink;
+	--sell-btn: #0FDD00;
+	--sell-btn-hover: #AAFF00;
+	--sell-btn-active: #00FF00;
+	--ship-btn: #CB0070;
+	--ship-btn-hover: cyan;
+	--ship-btn-active: #00CCEE;
+	--change-address-btn: salmon;
+	--change-address-btn-hover: pink;
+	--change-address-btn-active: white;
+	--shipping-address-input: #EEEEEE;
+	--user-registration-box: #d8d8d8;
+	--user-registration-btn: #A2FF9B;
+	--user-registration-btn-hover: #rgb(0, 255, 221);
+	--user-registration-btn-active: #11FF00;
+	--dropzone-border: #CCCCCC;
+	--dropzone-background: #F5F5F5;
+	--dropzone-svg: #AAAAAA;
+	--dropzone-dragover-border: #737373;
+	--admin-approve-btn: #52FF5B;
+	--admin-approve-btn-hover: aqua;
+	--admin-approve-btn-active: whitesmoke;
+	--admin-reject-btn: #F43030;
+	--admin-reject-btn-hover: violet;
+	--admin-reject-btn-active: black;
+	--heading: #7C7C7C;
+}
+
 body {
-	background: #FFFFFF;
+	background: var(--white);
 	margin-left: auto;
 	margin-right: auto;
 	font-family: os;
@@ -30,7 +107,7 @@ body {
 
 
 main {
-	min-height: 79.7vh;
+	min-height: calc(100vh - 200px);
 	/*padding-bottom: 200px;*/
 }
 
@@ -38,20 +115,20 @@ footer {
 	position: absolute;
 	left: 0;
 	right: 0;
-	background-color: #D8D8D8;
+	background-color: var(--footer-background);
 	text-align: center;
 	height: 200px;
 	font-family: osl;
 	font-size: 25px;
-	box-shadow: inset 0px 3px 10px #8A8A8A;
+	box-shadow: inset 0px 3px 10px var(--footer-shadow-background);
 }
 
 footer a {
-	color: #737373;
+	color: var(--footer-a);
 }
 
 ::placeholder {
-	color: #aaaaaa;
+	color: var(--placeholder);
 	font-family: osl;
 }
 
@@ -60,22 +137,137 @@ input:focus, textarea:focus, select:focus{
 }
 
 .page {
-	background-color: white;
+	background-color: var(--white);
 }
 
 .navbar {
-	background-color: white;
+	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 {
 	/*display: inline-flex;*/
-	border: 0.5px solid #979797;
+	border: 0.5px solid var(--input-border);
 	float: left;
 	position: relative;
 	height: 34px;
@@ -85,7 +277,7 @@ input:focus, textarea:focus, select:focus{
 	/*border: none;*/
 	font-family: osl;
 	font-size: 17px;
-	box-shadow: 0px 2px 3px #A5A5A5;
+	box-shadow: 0px 2px 3px var(--input-shadow);
 }
 
 .user-name {
@@ -93,17 +285,17 @@ input:focus, textarea:focus, select:focus{
 	position: relative;
 	font-family: osl;
 	font-size: 23px;
-	color: #898989;
+	color: var(--uname);
 	cursor: pointer;
 	transition: 0.3s;
 }
 
 .user-name:hover {
-	color: red;
+	color: var(--red);
 }
 .user-name:active {
 	transition: 0.1s;
-	color: #F0F0F0;
+	color: var(--light-gray);
 }
 
 
@@ -117,14 +309,14 @@ input:focus, textarea:focus, select:focus{
 }
 
 .btn-login {
-	background-color: #3D10FF;
+	background-color: var(--login-btn);
 	font-size: 30px;
-	color: white;
+	color: var(--white);
-	box-shadow: 0px 2px 3px #A5A5A5;
+	box-shadow: 0px 2px 3px var(--input-shadow);
 }
 
 .btn-g-login {
-	background-color: #cacaca;
+	background-color: var(--google-login-btn);
 	border-radius: 5px;
 }
 
@@ -134,13 +326,13 @@ input:focus, textarea:focus, select:focus{
 }
 
 .btn-login:hover {
-	color: red;
+	color: var(--red);
 	transition: 0.3s;
 	cursor: pointer;
 }
 
 .btn-g-login:hover {
-	box-shadow: 0px 2px 3px #A5A5A5;
+	box-shadow: 0px 2px 3px var(--google-login-btn-hover);
 	transition: 0.3s;
 	cursor: pointer;
 }
@@ -148,28 +340,28 @@ input:focus, textarea:focus, select:focus{
 .btn-fb-login {
 	transition: 0.3s;
 	cursor: pointer;
-	background-color: white;
+	background-color: var(--white);
 	border-radius: 20px;
 }
 
 .btn-fb-login:hover {
-	box-shadow: 0px 2px 3px #A5A5A5;
+	box-shadow: 0px 2px 3px var(--google-login-btn-hover);
 	transition: 0.3s;
 	cursor: pointer;
 }
 
 .btn-fb-login:active {
-	box-shadow: 0px 2px 3px red;
+	box-shadow: 0px 2px 3px var(--red);
 	transition: 0.1s;
 }
 
 .btn-login:active {
-	color: white;
+	color: var(--white);
 	transition: 0.1s;
 }
 
 .btn-g-login:active {
-	box-shadow: 0px 2px 3px red;
+	box-shadow: 0px 2px 3px var(--red);
 	transition: 0.1s;
 }
 
@@ -177,12 +369,14 @@ 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
 }
 
 .add-item a {
-	color: #ff6619;
+	color: var(--add-item-btn);
 	font-family: osl;
 	font-size: 30px;
 	padding-left: 10px;
@@ -191,38 +385,38 @@ input:focus, textarea:focus, select:focus{
 }
 
 .add-item a:hover {
-	color: #c41000;
+	color: var(--add-item-btn-hover);
 	transition: 0.3s;
 }
 
 .add-item a:active {
-	color: #BBBBBB;
+	color: var(--add-item-btn-active);
 	transition: 0.1s;
 }
 
 .notifications {
 	padding-right: 15px;
-	color: #898989;
+	color: var(--notifications);
 	transition: 0.3s;
 }
 .notifications:hover {
-	color: tomato;
+	color: var(--notifications-hover);
 }
 .notifications:active {
 	transition: 0.1s;
-	color: cyan;
+	color: var(--notifications-active);
 }
 
 .cart {
-	color: #898989;
+	color: var(--notifications);
 	transition: 0.3s;
 }
 .cart:hover {
-	color: tomato;
+	color: var(--notifications-hover);
 }
 .cart:active {
 	transition: 0.1s;
-	color: cyan;
+	color: var(--notifications-active);
 }
 
 .sbar {
@@ -242,8 +436,7 @@ input:focus, textarea:focus, select:focus{
 }
 
 .sbar input {
-	border: 0.5px solid gray;
+	border: 0.5px solid var(--input-border);
-	display: inline-flex;
 	position: relative;
 	float: left;
 	height: 34px;
@@ -251,20 +444,16 @@ input:focus, textarea:focus, select:focus{
 	padding-left: 10px;
 	font-family: osl;
 	font-size: 17px;
-	box-shadow: 0px 3px 4px #A5A5A5;
+	box-shadow: 0px 3px 4px var(--input-shadow);
-
-	/*position: absolute;
-	left: 50%;
-	transform: translate(-50%, 0);*/
 }
 
 .sbar button {
 	position: relative;
 	float: left;
-	background-color: #5359FF;
+	background-color: var(--search-btn-background);
 	border: none;
-	box-shadow: 0px 2px 3px #A5A5A5;
+	box-shadow: 0px 2px 3px var(--input-shadow);
-	color: #C4C4C4;
+	color: var(--search-btn);
 	height: 35px;
 	width: 100px;
 	margin-left: 20px;
@@ -274,19 +463,19 @@ input:focus, textarea:focus, select:focus{
 }
 
 .sbar button:hover {
-	background-color: violet;
+	background-color: var(--violet);
 	transition: 0.2s;
 }
 
 .sbar button:active {
-	background-color: whitesmoke;
+	background-color: var(--whitesmoke);
 	transition: 0.2s;
 }
 
 .sbar a {
 	position: relative;
 	float: left;
-	color: #7F7F7F;
+	color: var(--search-extra);
 	font-family: osl;
 	font-size: 14px;
 	margin-left: 15px;
@@ -294,7 +483,7 @@ input:focus, textarea:focus, select:focus{
 }
 
 .space {
-	height: 15px;
+	height: 25px;
 }
 
 .welcome img {
@@ -304,11 +493,30 @@ input:focus, textarea:focus, select:focus{
 .products p {
 	font-family: osl;
 	font-size: 25px;
-	color: #7C7C7C;
+	color: var(--heading);
 	margin-bottom: 10px;
 	margin-top: 10px;
 }
 
+.profile a {
+	font-family: osl;
+	font-size: 25px;
+	color: var(--product-page-info-btn);
+	margin-bottom: 20px;
+	margin-top: 20px;
+	cursor: pointer;
+	transition: 0.3s;
+}
+
+.profile a:hover {
+	color: var(--violet);
+}
+
+.profile a:active {
+	color: var(--white);
+	transition: 0.1s;
+}
+
 .product-list-container {
 	display: flex;
 	justify-content: space-between;
@@ -328,7 +536,7 @@ input:focus, textarea:focus, select:focus{
 
 .product-container p {
 	font-family: nunito;
-	color: #CA5555;
+	color: var(--product-container-p);
 	font-size: 17px;
 }
 
@@ -360,7 +568,7 @@ input:focus, textarea:focus, select:focus{
 	margin-right: 10%;
 	margin-top: 5px;
 	font-size: 19px;
-	color: #737373;
+	color: var(--footer-a);
 }
 
 .user-logout {
@@ -370,12 +578,12 @@ input:focus, textarea:focus, select:focus{
 	position: relative;
 	font-family: osl;
 	font-size: 13px;
-	color: #393939;
+	color: var(--user-logout);
 	cursor: pointer;
 }
 
 .user-logout:hover {
-	color: red;
+	color: var(--red);
 	transition: 0.3s;
 }
 
@@ -386,7 +594,7 @@ input:focus, textarea:focus, select:focus{
 }
 
 .user-auth-message p {
-	color: red;
+	color: var(--red);
 	font-size: 30px;
 
 }
@@ -400,13 +608,13 @@ input:focus, textarea:focus, select:focus{
 
 .new-product-field p {
 	font-size: 25px;
-	color: #898989;
+	color: var(--new-product-field-p);
 	padding-bottom: 20px;
 }
 
 .new-product-field label {
 	font-size: 20px;
-	color: #898989;
+	color: var(--new-product-field-p);
 	display: inline-block;
 }
 
@@ -418,7 +626,7 @@ input:focus, textarea:focus, select:focus{
 	padding-left: 10px;
 	margin-bottom: 15px;
 	border-radius: 0;
-	border: 0.5px solid grey;
+	border: 0.5px solid var(--gray);
 	cursor: text;
 }
 
@@ -431,7 +639,7 @@ input:focus, textarea:focus, select:focus{
 	padding-top: 10px;
 	margin-bottom: 15px;
 	border-radius: 0;
-	border: 0.5px solid grey;
+	border: 0.5px solid var(--gray);
 	cursor: text;
 }
 
@@ -441,26 +649,26 @@ input:focus, textarea:focus, select:focus{
 	display: block;
 	font-size: 19px;
 	font-family: osl;
-	box-shadow: 0px 2px 3px #A5A5A5;
+	box-shadow: 0px 2px 3px var(--input-shadow);
 	margin-bottom: 15px;
 	border-radius: 0;
 	border: none;
-	background-color: #30a8ff;
+	background-color: var(--new-product-field-btn);
 	transition: 0.3s;
 }
 
 .new-product-field button:hover {
 	transition: 0.3s;
-	background-color: #ff7700;
+	background-color: var(--new-product-field-btn-hover);
 }
 
 .new-product-field button:active {
 	transition: 0.1s;
-	background-color: #ffaf69;
+	background-color: var(--new-product-field-btn-active);
 }
 
 .new-product-field button:disabled {
-	background-color: #b9b9b9;
+	background-color: var(--new-product-field-btn-disabled);
 }
 
 .n-p-left {
@@ -485,7 +693,7 @@ input:focus, textarea:focus, select:focus{
 	position: relative;
 	font-family: osl;
 	font-size: 20px;
-	color: green;
+	color: var(--green);
 	left: 50%;
 	transform: translate(-10%, 0);
 }
@@ -498,7 +706,7 @@ input:focus, textarea:focus, select:focus{
 	position: relative;
 	width: 100%;
 	font-family: osl;
-	color: #5E5E5E;
+	color: var(--product-page-info-container);
 	display: inline-flex;
 }
 .product-page-img {
@@ -522,22 +730,22 @@ input:focus, textarea:focus, select:focus{
 	display: block;
 	font-size: 19px;
 	font-family: osl;
-	box-shadow: 0px 2px 3px #A5A5A5;
+	box-shadow: 0px 2px 3px var(--input-shadow);
 	border-radius: 0;
 	border: none;
-	background-color: #30a8ff;
+	background-color: var(--product-page-info-btn);
 	transition: 0.3s;
 }
 .product-page-info button:hover {
 	transition: 0.3s;
-	background-color: #ffc04b;
+	background-color: var(--product-page-info-hover);
 }
 .product-page-info button:active {
 	transition: 0.1s;
-	background-color: #ffaf69;
+	background-color: var(--product-page-info-active);
 }
 .product-page-info button:disabled {
-	background-color: #b9b9b9;
+	background-color: var(--product-page-info-disabled);
 }
 .product-page-info h2 {
 	font-size: 30px;
@@ -556,7 +764,7 @@ input:focus, textarea:focus, select:focus{
 	margin-bottom: -10px;
 	font-family: osl;
 	border-radius: 0;
-	border: 0.5px solid grey;
+	border: 0.5px solid var(--gray);
 }
 
 .product-page-description {
@@ -565,7 +773,7 @@ input:focus, textarea:focus, select:focus{
 .product-page-description p {
 	font-family: osl;
 	font-size: 20px;
-	color: #5E5E5E;
+	color: var(--product-page-info-container);
 }
 
 .my-products-container {
@@ -593,7 +801,7 @@ input:focus, textarea:focus, select:focus{
 }
 .my-product-details-container p {
 	font-family: nunito;
-	color: #CA5555;
+	color: var(--my-product-details-container);
 	font-size: 25px;
 	width: 100%;
 }
@@ -611,7 +819,7 @@ input:focus, textarea:focus, select:focus{
 }
 
 .purchase-message {
-	color: #00df90;
+	color: var(--purchase-msg);
 	text-align: center;
 	font-size: 25px;
 	font-family: osl;
@@ -619,7 +827,7 @@ input:focus, textarea:focus, select:focus{
 }
 
 .error-message {
-	color: #df0000;
+	color: var(--error-msg);
 	text-align: center;
 	font-size: 25px;
 	font-family: osl;
@@ -636,7 +844,7 @@ input:focus, textarea:focus, select:focus{
 	display: block;
 	font-size: 19px;
 	font-family: osl;
-	box-shadow: 0px 2px 3px #A5A5A5;
+	box-shadow: 0px 2px 3px var(--input-shadow);
 	border-radius: 0;
 	border: none;
 	transition: 0.3s;
@@ -694,41 +902,41 @@ input:focus, textarea:focus, select:focus{
 	border: 0;
 	height: 40px;
 	width: 350px;
-	background-color: salmon;
+	background-color: var(--change-address-btn);
 	font-family: osl;
 	font-size: 20px;
 	left: 50%;
 	transform: translate(-50%, 0);
 	transition: 0.3s;
 	color: white;
-	box-shadow: 0px 2px 3px #A5A5A5;
+	box-shadow: 0px 2px 3px var(--input-shadow);
 }
 .ship-adress button:hover {
-	background-color: pink;
+	background-color: var(--change-address-btn-hover);
 	color: black;
 }
 .ship-adress button:active {
 	transition: 0.1s;
-	background-color: white;
+	background-color: var(--change-address-btn-active);
 }
 .ship-adress input {
 	position: relative;
 	border: 0;
 	height: 40px;
 	width: 600px;
-	background-color: #EEEEEE;
+	background-color: var(--shipping-address-input);
 	font-family: osl;
 	font-size: 20px;
 	left: 50%;
 	transform: translate(-50%, 0);
-	color: black;
+	color: var(--black);
-	box-shadow: 0px 2px 3px #A5A5A5;
+	box-shadow: 0px 2px 3px var(--input-border);
 	padding-left: 10px;
 }
 
 .big-box {
 	height: 35px;
-	background-color: #d8d8d8d8;
+	background-color: var(--user-registration-box);
 	margin-top: 10px;
 	width: 100%;
 }
@@ -740,7 +948,7 @@ input:focus, textarea:focus, select:focus{
 
 .small-box {
 	height: 35px;
-	background-color: #d8d8d8d8;
+	background-color: var(--user-registration-box);
 }
 
 .u-r-title {
@@ -772,7 +980,7 @@ input:focus, textarea:focus, select:focus{
 	padding-left: 10px;
 	margin: 15px 0;
 	border-radius: 0;
-	border: 0.5px solid grey;
+	border: 0.5px solid var(--input-border);
 }
 .u-r-i-location input {
 	width: 90%;
@@ -800,21 +1008,21 @@ input:focus, textarea:focus, select:focus{
 	display: block;
 	font-size: 19px;
 	font-family: osl;
-	box-shadow: 0px 2px 3px #A5A5A5;
+	box-shadow: 0px 2px 3px var(--input-shadow);
 	border-radius: 0;
 	transition: 0.3s;
 	margin: 10px auto;
-	background-color: #A2FF9B;
+	background-color: var(--user-registration-btn-background);
-	color: #727272;
+	color: var(--input);
 }
 
 .u-r-btn button:hover {
-	background-color: rgb(0, 255, 221);
+	background-color: var(--user-registration-btn-hover);
 }
 
 .u-r-btn button:active {
-	background-color: #11FF00;
+	background-color: var(--user-registration-btn-active);
-	color: white;
+	color: var(--input);
 	transition: 0.1s;
 }
 
@@ -823,8 +1031,8 @@ input:focus, textarea:focus, select:focus{
 	height: 70%;
 	margin-left: auto;
 	margin-right: 0;
-	border: 2px dashed #CCCCCC;
+	border: 2px dashed var(--dropzone-border);
-	background: #F5F5F5;
+	background: var(--dropzone-background);
 	transition: 0.2s;
 }
 .dropzone svg{
@@ -832,14 +1040,14 @@ input:focus, textarea:focus, select:focus{
 	left: 50%;
 	top: 40%;
 	transform: translate(-50%);
-	fill: #AAAAAA;
+	fill: var(--dropzone-svg);
 }
 .dropzone.dragover {
-	border: 2px dashed #737373;
+	border: 2px dashed var(--dropzone-dragover-border);
-	background-color: #AAAAAA;
+	background-color: var(--dropzone-svg);
 }
 .dropzone.dragover svg{
-	fill: whitesmoke;
+	fill: var(--whitesmoke);
 }
 .dropzone img {
 	position: relative;
@@ -853,19 +1061,19 @@ input:focus, textarea:focus, select:focus{
 	display: block;
 	font-size: 19px;
 	font-family: osl;
-	box-shadow: 0px 2px 3px #A5A5A5;
+	box-shadow: 0px 2px 3px var(--input-shadow);
 	margin-bottom: 0;
 	margin-top: -13px;
 	border-radius: 0;
 	border: none;
-	background-color: #52FF5B;
+	background-color: var(--admin-approve-btn);
 	transition: 0.3s;
 }
 .admin-approve:hover {
-	background-color: aqua;
+	background-color: var(--admin-approve-btn-hover);
 }
 .admin-approve:active {
-	background-color: whitesmoke;
+	background-color: var(--admin-approve-btn-active);
 	transition: 0.1s;
 }
 
@@ -875,20 +1083,20 @@ input:focus, textarea:focus, select:focus{
 	display: block;
 	font-size: 19px;
 	font-family: osl;
-	box-shadow: 0px 2px 3px #A5A5A5;
+	box-shadow: 0px 2px 3px var(--input-shadow);
 	margin-bottom: 0;
 	margin-top: -13px;
 	border-radius: 0;
 	border: none;
-	background-color: #F43030;
+	background-color: var(--admin-reject-btn);
 	transition: 0.3s;
 }
 .admin-reject:hover {
-	background-color: violet;
+	background-color: var(--admin-reject-btn-hover);
 }
 .admin-reject:active {
-	background-color: black;
+	background-color: var(--admin-reject-btn-active);
-	color: white;
+	color: var(--white);
 	transition: 0.1s;
 }
 
@@ -914,4 +1122,5 @@ input:focus, textarea:focus, select:focus{
 		background: rgb(20, 20, 20);
 		box-shadow: none;
 	}
-} */
+} */
+

functions/views/home.ejs

@@ -6,85 +6,36 @@
 			<div class="space"></div>
 
 			<div class="products">
-				<p>Recent:</p>
+				<p>Recently Added:</p>
-				<div class="product-list-container">
+				<!-- GET LIST OF LISTS -->
-				<% var keys = Object.keys(products) %>
+				<% 
-				<% keys.forEach(function(key){ %>
+				let productKeys = Object.keys(products)
-					<div class="product-container">
+				let p1 = productKeys.slice(0,5)
-						<a href="product?productid=<%=key%>">
+				let p2 = productKeys.slice(5,10)
-							<img class="dyn-img" title="<%= products[key].img %>" alt="img" src="media/var.png">
+				let p3 = productKeys.slice(10,15)
-						</a>
+				let p4 = productKeys.slice(15,20)
-						<p class="l"><%= products[key].name%></p>
+				let p5 = productKeys.slice(20,25) 
-						<p class="r">£ <%= products[key].price%></p>
+				let productListArray = [p1, p2, p3, p4, p5]
+				%> 
+
+				<% productListArray.forEach(rowKeys=>{%> 
+					<div class="product-list-container">
+					<% rowKeys.forEach(function(key){ %>
+						<div class="product-container">
+							<a href="product?productid=<%=key%>">
+								<img class="dyn-img" title="<%= products[key].img %>" alt="img" src="media/var.png">
+							</a>
+							<p class="l"><%= products[key].name%></p>
+							<p class="r">£ <%= products[key].price%></p>
+						</div>
+					<% }) %>
 					</div>
+					<div class="space"></div>
 				<% }) %>
-				</div>
-			</div>
 
 
-			<div class="products">
-				<p>Personalised 1:</p>
-				<div class="product-list-container">
-					<div class="product-container">
-						<a href="#"><img src="media/var.png" alt="img"></a>
-						<p class="l"><%= "Item name"%></p>
-						<p class="r">£ <%= "20.99"%></p>
-					</div>
-					<div class="product-container">
-						<a href="#"><img src="media/var.png" alt="img"></a>
-						<p class="l"><%= "Item name"%></p>
-						<p class="r">£ <%= "20.99"%></p>
-					</div>
-					<div class="product-container">
-						<a href="#"><img src="media/var.png" alt="img"></a>
-						<p class="l"><%= "Item name"%></p>
-						<p class="r">£ <%= "20.99"%></p>
-					</div>
-					<div class="product-container">
-						<a href="#"><img src="media/var.png" alt="img"></a>
-						<p class="l"><%= "Item name"%></p>
-						<p class="r">£ <%= "20.99"%></p>
-					</div>
-					<div class="product-container">
-						<a href="#"><img src="media/var.png" alt="img"></a>
-						<p class="l"><%= "Item name"%></p>
-						<p class="r">£ <%= "20.99"%></p>
-					</div>
-				</div>
 			</div>
 
-			<div class="products">
-				<p>Personalised 2:</p>
-				<div class="product-list-container">
-					<div class="product-container">
-						<a href="#"><img src="media/var.png" alt="img"></a>
-						<p class="l"><%= "Item name"%></p>
-						<p class="r">£ <%= "20.99"%></p>
-					</div>
-				</div>
-			</div>
-			<div class="products">
-				<p>Personalised 3:</p>
-				<div class="product-list-container">
-					<div class="product-container">
-						<a href="#"><img src="media/var.png" alt="img"></a>
-						<p class="l"><%= "Item name"%></p>
-						<p class="r">£ <%= "20.99"%></p>
-					</div>
-				</div>
-			</div>
-			<div class="products">
-				<p>Recent:</p>
-				<div class="product-list-container">
-					<div class="product-container">
-						<a href="#"><img src="media/var.png" alt="img"></a>
-						<p class="l"><%= "Item name"%></p>
-						<p class="r">£ <%= "20.99"%></p>
-					</div>
-				</div>
-			</div>
-
-
 			<div class="space"></div>
 		</div>
 

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

@@ -1,15 +1,15 @@
+// @ts-nocheck
 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 +44,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 +62,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 +100,10 @@ function signinwithgoogle(){
 		})
 }
 
+function signinwithapple(){
+	console.log("Coming later!")
+}
+
 function signinwithfb(){
 	var fbAuthProvider = new firebase.auth.FacebookAuthProvider()
 	firebase.auth().signInWithPopup(fbAuthProvider)

functions/views/js/fdb.src.js

@@ -1,4 +1,5 @@
 // https://javascript-minifier.com
+// @ts-nocheck
 function checkFields() {
 	if (document.getElementById('pName').value && document.getElementById('pDesc').value 
 	&& document.getElementById('pLoc').value && document.getElementById('pPrice').value 

functions/views/my-product.ejs

@@ -14,15 +14,15 @@
 						<p>Price: £<%= item.price %></p>
 						<div class="product-mgmt-buttons">
 							<% var editbtnStyle = ""%>
-							<% if (item.status == "sold") {editbtnStyle = "visibility:hidden;"} else {editbtnStyle = "visibility:all;"}%>
+							<% if (item.status == "on-sale" || item.status == "off-sale") {editbtnStyle = "visibility:all;"} else {editbtnStyle = "visibility:hidden;"}%>
 							<div class="edit-btn" style=<%= editbtnStyle%>><button onclick={edit_item()} id="editBtn">Edit</button> </div>
 							<% var sellbtnText = "Place On Sale"%>
 							<% var salebtnStyle = "visibility:hidden"%>
-							<% if (item.status != "sold") {salebtnStyle = "visibility:all;"}%>
+							<% if (item.status == "on-sale" || item.status == "off-sale") {salebtnStyle = "visibility:all;"}%>
 							<% if (item.status == "on-sale") {sellbtnText = "Take Off Sale"}%>
 							<div class="sell-btn" style="<%= salebtnStyle%>"><button onclick={toggle_sale()} id="toggleSaleBtn"><%= sellbtnText%></button> </div>
 							<% var shipbtnStyle = ""%>
-							<% if (item.status == "sold") {shipbtnStyle = "visibility:hidden;"} else {shipbtnStyle = "visibility:all;"}%>
+							<% if (item.status != "on-sale") {shipbtnStyle = "visibility:hidden;"} else {shipbtnStyle = "visibility:all;"}%>
 							<div class="ship-btn" style=<%= shipbtnStyle%>><button onclick={mark_as_sold()} id="soldBtn">Mark Sold</button> </div>
 						</div>
 					</div>

functions/views/my-products.ejs

@@ -8,6 +8,10 @@
 
 			<div class="space"></div>
 
+			<div class="profile">
+				<a href="user-profile?dbid=<%= dbid %>">My Profile</a>
+			</div>
+
 			<div class="products">
 				<p>My products:</p>
 				<div class="my-products-container">

functions/views/partials/footer.ejs

@@ -13,7 +13,7 @@
         <a class="link" href="#">Cookies</a>
     </div>
     <div class="location">
-        GG Sales US 🇺🇸
+        GG Sales UK 🇬🇧
     </div>
 </footer>
 <script src="js/fAuth.js"></script>

functions/views/partials/header.ejs

@@ -16,25 +16,43 @@
   <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-storage.js"></script>
   <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-database.js"></script>
   <script src="js/fInit.js"></script>
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-6PZS01KZYB"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+  
+    gtag('config', 'G-6PZS01KZYB');
+  </script>
 </head>
 
 <body>
 	<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">
@@ -58,10 +76,11 @@
 					</div>
 				</div>
 			</div>
+			
 
 			<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>

package.json

@@ -14,6 +14,7 @@
   "license": "ISC",
   "dependencies": {
     "body-parser": "^1.19.0",
+    "cookie-parser": "^1.4.5",
     "ejs": "^3.1.2",
     "express": "^4.17.1",
     "firebase": "^7.14.3",

server.js

@@ -16,6 +16,10 @@ app.use(bodyParser.json())
 app.use(logger('dev'))
 app.use(express.static('views'))
 
+const cookieParser = require('cookie-parser')();
+app.use(cookieParser);
+
+
 app.set('view engine', 'ejs')
 app.set('views', __dirname + '/views')
 
@@ -29,6 +33,15 @@ let transporter = nodemailer.createTransport({
 })
 
 
+const validateFirebaseIdToken = (req, res, next) => {
+	console.log("Running pre-function")
+	console.log(req.cookies); //// <----- issue this is empty {} why??
+	console.log("Finished pre function")
+	next();
+};
+
+app.use(validateFirebaseIdToken)
+
 app.get("/", function(request, responce) {
 	homePage(request, responce)
 })
@@ -39,7 +52,7 @@ app.get("/home", function(request, responce) {
 
 function homePage(request, responce) {
 	var dbRef = database.ref("/products")
-	dbRef.orderByChild("status").equalTo("on-sale").limitToLast(5).once('value', function(snapshot){
+	dbRef.orderByChild("status").equalTo("on-sale").limitToLast(25).once('value', function(snapshot){
 		var data = {}
 		if (snapshot.val()) {data = snapshot.val()}
 		responce.render('home.ejs', {products: data})
@@ -115,10 +128,16 @@ app.get('/my-products', function(request, responce){
 				})
 			}
 			else {
-				dbRef.orderByChild('owner').equalTo(uid).once('value', function(snapshot){
+				let usersRef = database.ref("/users")
-					var data = {'x': {holder: '',id: 999,img: '',location: '',name: 'No products listed 😢',owner: '',price: '',stock: ''}}
+				usersRef.orderByChild("UID").equalTo(uid).once('value', function(snapshot){
-					if (snapshot.val()) {data = snapshot.val()}
+					vals = snapshot.val()
-					responce.render('my-products.ejs', {products: data})
+					var keys = Object.keys(vals)
+					sellerDBID = keys[0]
+					dbRef.orderByChild('owner').equalTo(uid).once('value', function(snapshot){
+						var data = {'x': {holder: '',id: 999,img: '',location: '',name: 'No products listed 😢',owner: '',price: '',stock: ''}}
+						if (snapshot.val()) {data = snapshot.val()}
+						responce.render('my-products.ejs', {products: data, dbid:sellerDBID})
+					})
 				})
 			}
 		})
@@ -249,7 +268,7 @@ app.get('/user-profile', function(request, responce){
 							return allProductsDict[obj].status == 'on-sale';
 						})
 						let filteredProducts = {"0":{img: '',name: 'Nothing listed 😢',price: ''}}
-						
+
 						filteredKeys.forEach(function(key){filteredProducts[key] = allProductsDict[key]})
 
 						if (Object.keys(filteredProducts).length > 1) {delete filteredProducts["0"]}
@@ -736,8 +755,8 @@ app.post('*', function(request, responce){
 	responce.status(404).send({success:false, error:"404"})
 })
 
-var port = 5000
+var port = 5001
 
 app.listen(port, function() {
 	console.log('Server running on port ' + port)
-})
+})