got Axios working + start of registration

package-lock.json

 			"integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
 			"dev": true
 		},
+		"@nuxt/opencollective": {
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/@nuxt/opencollective/-/opencollective-0.3.0.tgz",
+			"integrity": "sha512-Vf09BxCdj1iT2IRqVwX5snaY2WCTkvM0O4cWWSO1ThCFuc4if0Q/nNwAgCxRU0FeYHJ7DdyMUNSdswCLKlVqeg==",
+			"requires": {
+				"chalk": "^2.4.2",
+				"consola": "^2.10.1",
+				"node-fetch": "^2.6.0"
+			}
+		},
 		"@soda/friendly-errors-webpack-plugin": {
 			"version": "1.7.1",
 			"resolved": "https://registry.npm.taobao.org/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.7.1.tgz",
 			"version": "3.2.1",
 			"resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-3.2.1.tgz",
 			"integrity": "sha1-QfuyAkPlCxK+DwS43tvwdSDOhB0=",
-			"dev": true,
 			"requires": {
 				"color-convert": "^1.9.0"
 			}
 			"integrity": "sha1-oXs6jqgRBg501H0wYSJACtRJeuI=",
 			"dev": true
 		},
+		"axios": {
+			"version": "0.19.2",
+			"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+			"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+			"requires": {
+				"follow-redirects": "1.5.10"
+			},
+			"dependencies": {
+				"debug": {
+					"version": "3.1.0",
+					"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+					"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+					"requires": {
+						"ms": "2.0.0"
+					}
+				},
+				"follow-redirects": {
+					"version": "1.5.10",
+					"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+					"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+					"requires": {
+						"debug": "=3.1.0"
+					}
+				},
+				"ms": {
+					"version": "2.0.0",
+					"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+					"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+				}
+			}
+		},
 		"babel-eslint": {
 			"version": "10.1.0",
 			"resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz",
 				"object.assign": "^4.1.0"
 			}
 		},
+		"babel-runtime": {
+			"version": "6.26.0",
+			"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+			"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+			"requires": {
+				"core-js": "^2.4.0",
+				"regenerator-runtime": "^0.11.0"
+			},
+			"dependencies": {
+				"core-js": {
+					"version": "2.6.11",
+					"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
+					"integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
+				},
+				"regenerator-runtime": {
+					"version": "0.11.1",
+					"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+					"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+				}
+			}
+		},
 		"balanced-match": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
 			"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
 			"dev": true
 		},
+		"bootstrap": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz",
+			"integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA=="
+		},
+		"bootstrap-vue": {
+			"version": "2.15.0",
+			"resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.15.0.tgz",
+			"integrity": "sha512-ncxWkDG0mKFVot314wWKJELi+ESO7k6ngV//qvJFs9iVzlFI8Hx3rBVbpcPW2vrJ+0vitH8N2SOwn4fdQ3frMQ==",
+			"requires": {
+				"@nuxt/opencollective": "^0.3.0",
+				"bootstrap": ">=4.5.0 <5.0.0",
+				"popper.js": "^1.16.1",
+				"portal-vue": "^2.1.7",
+				"vue-functional-data-merge": "^3.1.0"
+			}
+		},
 		"brace-expansion": {
 			"version": "1.1.11",
 			"resolved": "https://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz",
 			"version": "2.4.2",
 			"resolved": "https://registry.npm.taobao.org/chalk/download/chalk-2.4.2.tgz",
 			"integrity": "sha1-zUJUFnelQzPPVBpJEIwUMrRMlCQ=",
-			"dev": true,
 			"requires": {
 				"ansi-styles": "^3.2.1",
 				"escape-string-regexp": "^1.0.5",
 			"version": "1.9.3",
 			"resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-1.9.3.tgz",
 			"integrity": "sha1-u3GFBpDh8TZWfeYp0tVHHe2kweg=",
-			"dev": true,
 			"requires": {
 				"color-name": "1.1.3"
 			}
 		"color-name": {
 			"version": "1.1.3",
 			"resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.3.tgz",
-			"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-			"dev": true
+			"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
 		},
 		"color-string": {
 			"version": "1.5.3",
 			"integrity": "sha1-izIIk1kwjRERFdgcrT/Oq4iPl7w=",
 			"dev": true
 		},
+		"consola": {
+			"version": "2.12.1",
+			"resolved": "https://registry.npmjs.org/consola/-/consola-2.12.1.tgz",
+			"integrity": "sha512-aEkkju9ZcEa9y2MhzNhfmTUws/CEZZ0LKu0FxftSU3HygPfVMMIMSYyYct+xBN6XNRhsaDZjw2HAv3m2ammXSA=="
+		},
 		"console-browserify": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npm.taobao.org/console-browserify/download/console-browserify-1.2.0.tgz",
 		"escape-string-regexp": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npm.taobao.org/escape-string-regexp/download/escape-string-regexp-1.0.5.tgz?cache=0&sync_timestamp=1587627212242&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fescape-string-regexp%2Fdownload%2Fescape-string-regexp-1.0.5.tgz",
-			"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-			"dev": true
+			"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
 		},
 		"eslint": {
 			"version": "6.8.0",
 		"has-flag": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-3.0.0.tgz",
-			"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-			"dev": true
+			"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
 		},
 		"has-symbols": {
 			"version": "1.0.1",
 				"easy-stack": "^1.0.0"
 			}
 		},
+		"js-sha256": {
+			"version": "0.9.0",
+			"resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz",
+			"integrity": "sha512-sga3MHh9sgQN2+pJ9VYZ+1LPwXOxuBJBA5nrR5/ofPfuiJBE2hnjsaN8se8JznOmGLN2p49Pe5U/ttafcs/apA=="
+		},
 		"js-tokens": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npm.taobao.org/js-tokens/download/js-tokens-4.0.0.tgz?cache=0&sync_timestamp=1586796305651&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-tokens%2Fdownload%2Fjs-tokens-4.0.0.tgz",
 				"object-visit": "^1.0.0"
 			}
 		},
+		"marker-clusterer-plus": {
+			"version": "2.1.4",
+			"resolved": "https://registry.npmjs.org/marker-clusterer-plus/-/marker-clusterer-plus-2.1.4.tgz",
+			"integrity": "sha1-+O/3TVmdqzt9Dj/tUmTqDnBPXWc="
+		},
 		"md5.js": {
 			"version": "1.3.5",
 			"resolved": "https://registry.npm.taobao.org/md5.js/download/md5.js-1.3.5.tgz",
 				"lower-case": "^1.1.1"
 			}
 		},
+		"node-fetch": {
+			"version": "2.6.0",
+			"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
+			"integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA=="
+		},
 		"node-forge": {
 			"version": "0.9.0",
 			"resolved": "https://registry.npm.taobao.org/node-forge/download/node-forge-0.9.0.tgz",
 				"ts-pnp": "^1.1.6"
 			}
 		},
+		"popper.js": {
+			"version": "1.16.1",
+			"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+			"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+		},
+		"portal-vue": {
+			"version": "2.1.7",
+			"resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
+			"integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g=="
+		},
 		"portfinder": {
 			"version": "1.0.26",
 			"resolved": "https://registry.npm.taobao.org/portfinder/download/portfinder-1.0.26.tgz",
 			"version": "5.5.0",
 			"resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-5.5.0.tgz?cache=0&sync_timestamp=1574418315746&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-5.5.0.tgz",
 			"integrity": "sha1-4uaaRKyHcveKHsCzW2id9lMO/I8=",
-			"dev": true,
 			"requires": {
 				"has-flag": "^3.0.0"
 			}
 		},
 		"vue": {
 			"version": "2.6.11",
-			"resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz",
-			"integrity": "sha1-dllNh31LEiNEBuhONSdcbVFBJcU="
+			"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
+			"integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
+		},
+		"vue-browser-geolocation": {
+			"version": "1.8.0",
+			"resolved": "https://registry.npmjs.org/vue-browser-geolocation/-/vue-browser-geolocation-1.8.0.tgz",
+			"integrity": "sha512-fI9fqQg1v5HP5LUR3juWIvWRIlyrqYrGDmXB8aux+mLnOV4V9c423InmTFK3UyRS0yHoBUGNIWO0GVufeczfNw==",
+			"requires": {
+				"vue": "^2.0.1"
+			}
 		},
 		"vue-carousel": {
 			"version": "0.18.0",
 				}
 			}
 		},
+		"vue-functional-data-merge": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
+			"integrity": "sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA=="
+		},
 		"vue-hot-reload-api": {
 			"version": "2.3.4",
 			"resolved": "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz",
 			"integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
 			"dev": true
 		},
+		"vue2-google-maps": {
+			"version": "0.10.7",
+			"resolved": "https://registry.npmjs.org/vue2-google-maps/-/vue2-google-maps-0.10.7.tgz",
+			"integrity": "sha512-y5aBJTAsfGvpsbfgPaeWU7o7QbOeINZKsP6SB9qrBe8U8EYBFO/bTWo3rcMq/NOtgT/XssV3Nwg/2u3no6jWbw==",
+			"requires": {
+				"babel-runtime": "^6.26.0",
+				"marker-clusterer-plus": "^2.1.4"
+			}
+		},
+		"vuex": {
+			"version": "3.4.0",
+			"resolved": "https://registry.npm.taobao.org/vuex/download/vuex-3.4.0.tgz",
+			"integrity": "sha1-IMwIYGLXUHafzh/rs05/zurr3kU="
+		},
 		"watchpack": {
 			"version": "1.7.2",
 			"resolved": "https://registry.npm.taobao.org/watchpack/download/watchpack-1.7.2.tgz",

package.json

 {
-	"name": "ProRestaurant",
-	"version": "0.1.0",
-	"private": true,
-	"scripts": {
-		"serve": "vue-cli-service serve",
-		"build": "vue-cli-service build",
-		"lint": "vue-cli-service lint"
-	},
-	"dependencies": {
-		"core-js": "^3.6.4",
-		"vue": "^2.6.11",
-		"vue-carousel": "^0.18.0",
-		"vue-router": "^3.1.6"
-	},
-	"devDependencies": {
-		"@vue/cli-plugin-babel": "~4.3.0",
-		"@vue/cli-plugin-eslint": "~4.3.0",
-		"@vue/cli-plugin-router": "~4.3.0",
-		"@vue/cli-service": "~4.3.0",
-		"@vue/eslint-config-prettier": "^6.0.0",
-		"babel-eslint": "^10.1.0",
-		"eslint": "^6.7.2",
-		"eslint-plugin-prettier": "^3.1.1",
-		"eslint-plugin-vue": "^6.2.2",
-		"prettier": "^1.19.1",
-		"vue-template-compiler": "^2.6.11"
-	},
-	"eslintConfig": {
-		"root": true,
-		"env": {
-			"node": true
-		},
-		"extends": [
-			"plugin:vue/essential",
-			"eslint:recommended",
-			"@vue/prettier"
-		],
-		"parserOptions": {
-			"parser": "babel-eslint"
-		},
-		"rules": {}
-	},
-	"browserslist": [
-		"> 1%",
-		"last 2 versions",
-		"not dead"
-	]
+  "name": "ProRestaurant",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.19.2",
+    "bootstrap": "^4.5.0",
+    "bootstrap-vue": "^2.15.0",
+    "core-js": "^3.6.4",
+    "js-sha256": "^0.9.0",
+    "vue": "^2.6.11",
+    "vue-browser-geolocation": "^1.8.0",
+    "vue-carousel": "^0.18.0",
+    "vue-router": "^3.1.6",
+    "vue2-google-maps": "^0.10.7",
+    "vuex": "^3.1.3"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.3.0",
+    "@vue/cli-plugin-eslint": "~4.3.0",
+    "@vue/cli-plugin-router": "~4.3.0",
+    "@vue/cli-plugin-vuex": "^4.3.1",
+    "@vue/cli-service": "~4.3.0",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-vue": "^6.2.2",
+    "prettier": "^1.19.1",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended",
+      "@vue/prettier"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
 }

src/assets/assets/mail/contact_me.js

-$(function () {
-    $(
-        "#contactForm input,#contactForm textarea,#contactForm button"
-    ).jqBootstrapValidation({
-        preventSubmit: true,
-        submitError: function ($form, event, errors) {
-            // additional error messages or events
+$(function() {
+  $(
+    "#contactForm input,#contactForm textarea,#contactForm button"
+  ).jqBootstrapValidation({
+    preventSubmit: true,
+    submitError: function($form, event, errors) {
+      // additional error messages or events
+    },
+    submitSuccess: function($form, event) {
+      event.preventDefault(); // prevent default submit behaviour
+      // get values from FORM
+      var name = $("input#name").val();
+      var email = $("input#email").val();
+      var phone = $("input#phone").val();
+      var message = $("textarea#message").val();
+      var firstName = name; // For Success/Failure Message
+      // Check for white space in name for Success/Fail message
+      if (firstName.indexOf(" ") >= 0) {
+        firstName = name
+          .split(" ")
+          .slice(0, -1)
+          .join(" ");
+      }
+      $this = $("#sendMessageButton");
+      $this.prop("disabled", true); // Disable submit button until AJAX call is complete to prevent duplicate messages
+      $.ajax({
+        url: "/assets/mail/contact_me.php",
+        type: "POST",
+        data: {
+          name: name,
+          phone: phone,
+          email: email,
+          message: message
         },
-        submitSuccess: function ($form, event) {
-            event.preventDefault(); // prevent default submit behaviour
-            // get values from FORM
-            var name = $("input#name").val();
-            var email = $("input#email").val();
-            var phone = $("input#phone").val();
-            var message = $("textarea#message").val();
-            var firstName = name; // For Success/Failure Message
-            // Check for white space in name for Success/Fail message
-            if (firstName.indexOf(" ") >= 0) {
-                firstName = name.split(" ").slice(0, -1).join(" ");
-            }
-            $this = $("#sendMessageButton");
-            $this.prop("disabled", true); // Disable submit button until AJAX call is complete to prevent duplicate messages
-            $.ajax({
-                url: "/assets/mail/contact_me.php",
-                type: "POST",
-                data: {
-                    name: name,
-                    phone: phone,
-                    email: email,
-                    message: message,
-                },
-                cache: false,
-                success: function () {
-                    // Success message
-                    $("#success").html("<div class='alert alert-success'>");
-                    $("#success > .alert-success")
-                        .html(
-                            "<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;"
-                        )
-                        .append("</button>");
-                    $("#success > .alert-success").append(
-                        "<strong>Your message has been sent. </strong>"
-                    );
-                    $("#success > .alert-success").append("</div>");
-                    //clear all fields
-                    $("#contactForm").trigger("reset");
-                },
-                error: function () {
-                    // Fail message
-                    $("#success").html("<div class='alert alert-danger'>");
-                    $("#success > .alert-danger")
-                        .html(
-                            "<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;"
-                        )
-                        .append("</button>");
-                    $("#success > .alert-danger").append(
-                        $("<strong>").text(
-                            "Sorry " +
-                                firstName +
-                                ", it seems that my mail server is not responding. Please try again later!"
-                        )
-                    );
-                    $("#success > .alert-danger").append("</div>");
-                    //clear all fields
-                    $("#contactForm").trigger("reset");
-                },
-                complete: function () {
-                    setTimeout(function () {
-                        $this.prop("disabled", false); // Re-enable submit button when AJAX call is complete
-                    }, 1000);
-                },
-            });
+        cache: false,
+        success: function() {
+          // Success message
+          $("#success").html("<div class='alert alert-success'>");
+          $("#success > .alert-success")
+            .html(
+              "<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;"
+            )
+            .append("</button>");
+          $("#success > .alert-success").append(
+            "<strong>Your message has been sent. </strong>"
+          );
+          $("#success > .alert-success").append("</div>");
+          //clear all fields
+          $("#contactForm").trigger("reset");
         },
-        filter: function () {
-            return $(this).is(":visible");
+        error: function() {
+          // Fail message
+          $("#success").html("<div class='alert alert-danger'>");
+          $("#success > .alert-danger")
+            .html(
+              "<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;"
+            )
+            .append("</button>");
+          $("#success > .alert-danger").append(
+            $("<strong>").text(
+              "Sorry " +
+                firstName +
+                ", it seems that my mail server is not responding. Please try again later!"
+            )
+          );
+          $("#success > .alert-danger").append("</div>");
+          //clear all fields
+          $("#contactForm").trigger("reset");
         },
-    });
+        complete: function() {
+          setTimeout(function() {
+            $this.prop("disabled", false); // Re-enable submit button when AJAX call is complete
+          }, 1000);
+        }
+      });
+    },
+    filter: function() {
+      return $(this).is(":visible");
+    }
+  });
 
-    $('a[data-toggle="tab"]').click(function (e) {
-        e.preventDefault();
-        $(this).tab("show");
-    });
+  $('a[data-toggle="tab"]').click(function(e) {
+    e.preventDefault();
+    $(this).tab("show");
+  });
 });
 
 /*When clicking on Full hide fail/success boxes */
-$("#name").focus(function () {
-    $("#success").html("");
+$("#name").focus(function() {
+  $("#success").html("");
 });

src/assets/css/styles.css

 	margin-right: auto;
 	margin-left: auto;
 }
+
+.custompadding {	
+	padding-top: 120px;	
+}
+
 @media (min-width: 576px) {
 	.container {
 		max-width: 540px;

src/assets/js/scripts.js

 /*!
-    * Start Bootstrap - Freelancer v6.0.3 (https://startbootstrap.com/themes/freelancer)
-    * Copyright 2013-2020 Start Bootstrap
-    * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-freelancer/blob/master/LICENSE)
-    */
-    (function($) {
-    "use strict"; // Start of use strict
-  
-    // Smooth scrolling using jQuery easing
-    $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
-      if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
-        var target = $(this.hash);
-        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
-        if (target.length) {
-          $('html, body').animate({
-            scrollTop: (target.offset().top - 71)
-          }, 1000, "easeInOutExpo");
-          return false;
-        }
+ * Start Bootstrap - Freelancer v6.0.3 (https://startbootstrap.com/themes/freelancer)
+ * Copyright 2013-2020 Start Bootstrap
+ * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-freelancer/blob/master/LICENSE)
+ */
+(function($) {
+  "use strict"; // Start of use strict
+
+  // Smooth scrolling using jQuery easing
+  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
+    if (
+      location.pathname.replace(/^\//, "") ==
+        this.pathname.replace(/^\//, "") &&
+      location.hostname == this.hostname
+    ) {
+      var target = $(this.hash);
+      target = target.length ? target : $("[name=" + this.hash.slice(1) + "]");
+      if (target.length) {
+        $("html, body").animate(
+          {
+            scrollTop: target.offset().top - 71
+          },
+          1000,
+          "easeInOutExpo"
+        );
+        return false;
       }
-    });
-  
-    // Scroll to top button appear
-    $(document).scroll(function() {
-      var scrollDistance = $(this).scrollTop();
-      if (scrollDistance > 100) {
-        $('.scroll-to-top').fadeIn();
-      } else {
-        $('.scroll-to-top').fadeOut();
-      }
-    });
-  
-    // Closes responsive menu when a scroll trigger link is clicked
-    $('.js-scroll-trigger').click(function() {
-      $('.navbar-collapse').collapse('hide');
-    });
-  
-    // Activate scrollspy to add active class to navbar items on scroll
-    $('body').scrollspy({
-      target: '#mainNav',
-      offset: 80
-    });
-  
-    // Collapse Navbar
-    var navbarCollapse = function() {
-      if ($("#mainNav").offset().top > 100) {
-        $("#mainNav").addClass("navbar-shrink");
-      } else {
-        $("#mainNav").removeClass("navbar-shrink");
-      }
-    };
-    // Collapse now if page is not at top
-    navbarCollapse();
-    // Collapse the navbar when page is scrolled
-    $(window).scroll(navbarCollapse);
-  
-    // Floating label headings for the contact form
-    $(function() {
-      $("body").on("input propertychange", ".floating-label-form-group", function(e) {
-        $(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val());
-      }).on("focus", ".floating-label-form-group", function() {
+    }
+  });
+
+  // Scroll to top button appear
+  $(document).scroll(function() {
+    var scrollDistance = $(this).scrollTop();
+    if (scrollDistance > 100) {
+      $(".scroll-to-top").fadeIn();
+    } else {
+      $(".scroll-to-top").fadeOut();
+    }
+  });
+
+  // Closes responsive menu when a scroll trigger link is clicked
+  $(".js-scroll-trigger").click(function() {
+    $(".navbar-collapse").collapse("hide");
+  });
+
+  // Activate scrollspy to add active class to navbar items on scroll
+  $("body").scrollspy({
+    target: "#mainNav",
+    offset: 80
+  });
+
+  // Collapse Navbar
+  var navbarCollapse = function() {
+    if ($("#mainNav").offset().top > 100) {
+      $("#mainNav").addClass("navbar-shrink");
+    } else {
+      $("#mainNav").removeClass("navbar-shrink");
+    }
+  };
+  // Collapse now if page is not at top
+  navbarCollapse();
+  // Collapse the navbar when page is scrolled
+  $(window).scroll(navbarCollapse);
+
+  // Floating label headings for the contact form
+  $(function() {
+    $("body")
+      .on("input propertychange", ".floating-label-form-group", function(e) {
+        $(this).toggleClass(
+          "floating-label-form-group-with-value",
+          !!$(e.target).val()
+        );
+      })
+      .on("focus", ".floating-label-form-group", function() {
         $(this).addClass("floating-label-form-group-with-focus");
-      }).on("blur", ".floating-label-form-group", function() {
+      })
+      .on("blur", ".floating-label-form-group", function() {
         $(this).removeClass("floating-label-form-group-with-focus");
       });
-    });
-  
-  })(jQuery); // End of use strict
-  
+  });
+})(jQuery); // End of use strict

src/assets/staticData/itemsPerPage.js

+const items = [10, 20, 50, 100]
+export default items

src/components/accounts/login.vue

+<template>
+	<div>
+		<div class="container" style="padding-top:120px; padding-left:18%;">
+			<div class="col-md-12" style="text-align:left">
+				<b-card
+					title="Login"
+					tag="article"
+					style="max-width: 20rem;"
+					class="mb-6"
+				>
+					<div class="row">
+						<div class="col-md-12" style="margin-bottom: 1em">
+							<label>Cellphone / Email</label>
+							<div class="input-group-prepend">
+								<input
+									class="form-control"
+									type="text"
+									name="username"
+								/>
+							</div>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-md-12" style="margin-bottom: 1em">
+							<label>Password</label>
+							<div class="input-group-prepend">
+								<input
+									class="form-control"
+									type="password"
+									name="password"
+								/>
+							</div>
+						</div>
+					</div>
+
+					<b-button variant="primary" @click="Login">Login</b-button>
+				</b-card>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'Login',
+	methods: {
+		Login() {
+			//Handle Login
+		},
+	},
+}
+</script>

src/components/accounts/register.vue

 <template>
 	<div>
-		<br />
-		<br />
-		<br />
-		<br />
-		<br />
-		<div class="container">
+		<div class="container custompadding">
 			<div class="col-md-12" style="text-align:left">
 				<h4>Register</h4>
 				<div class="form-group row"></div>
 								class="form-control"
 								type="text"
 								name="name"
+								v-model="user.firstName"
 							/>
 						</div>
 					</div>
 								class="form-control"
 								type="text"
 								name="Surname"
+								v-model="user.Surname"
 							/>
 						</div>
 					</div>
 								class="form-control"
 								type="text"
 								name="EmailAddress"
+								v-model="user.emailAddress"
 							/>
 						</div>
 					</div>
 								class="form-control"
 								type="text"
 								name="cellnumber"
+								v-model="user.cellphone"
 							/>
 						</div>
 					</div>
 								class="form-control"
 								type="password"
 								name="password"
+								v-model="user.password"
 							/>
 						</div>
 					</div>
 								class="form-control"
 								type="password"
 								name="confPassword"
+								v-model="passwordCheck"
 							/>
 						</div>
 					</div>
 				<div class="row">
 					<div class="col-md-3">
 						<button
-							@click="SubmitData()"
+							@click="RegisterData()"
 							class="btn btn-primary btn-xl"
 							type="submit"
 						>
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex'
+//import { sha256 } from 'js-sha256'
 export default {
 	name: 'registration',
+	data() {
+		return {
+			passwordCheck: '',
+		}
+	},
 	methods: {
+		...mapActions('registration', ['regUser', 'getUser']),
 		RegisterData() {
-			//submit data
+			this.regUser(this.user).then(() => {
+				if (this.user.id > 0) {
+					this.$router.push('/login')
+				} else {
+					alert('Error')
+				}
+			})
 		},
 		Close() {
 			this.$router.push('/')
 		},
 	},
+	computed: {
+		...mapState('registration', ['user']),
+	},
+	mounted() {
+		this.getUser(0)
+	},
 }
 </script>

src/components/accounts/restaurantRegistration.vue

 <template>
-	<div style="text-align:left">
-		<h4>Restaurant Details</h4>
-		<div class="form-group row"></div>
-		<div class="row">
-			<div class="col-md-6" style="margin-bottom: 1em">
-				<label>Name</label>
-				<div class="input-group-prepend">
-					<input
-						class="form-control"
-						type="text"
-						name="name"
-						placeholder="Name"
-					/>
-				</div>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-6" style="margin-bottom: 1em">
-				<div class="input-group-prepend">
-					<p>Placeholder for Logo</p>
-					<!-- <input
-								class="form-control"
-								type="text"
-								name="surname"
-								placeholder="Surname"
-							/> -->
-				</div>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-6" style="margin-bottom: 1em">
-				<div class="input-group-prepend">
-					<p>Option for change</p>
-					<!-- Tool Tip for here: If you are part of a chain, this option will display your name along with the location -->
-					<!-- <input
+  <div>
+    <div class="container custompadding">
+      <div class="col-md-12" style="text-align:left">
+        <h4>Restaurant Details</h4>
+        <div class="form-group row"></div>
+        <div class="row">
+          <div class="col-md-6" style="margin-bottom: 1em">
+            <label>Name</label>
+            <div class="input-group-prepend">
+              <input class="form-control" type="text" name="name" />
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-6" style="margin-bottom: 1em">
+            <label>Logo</label>
+            <div class="input-group-prepend">
+              <input type="file" name="logo" />
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-6" style="margin-bottom: 1em">
+            <div class="input-group-prepend">
+              <b-form-checkbox switch size="lg">part of chain</b-form-checkbox>
+              <!-- Tool Tip for here: If you are part of a chain, this option will display your name along with the location -->
+              <!-- <input
 								class="form-control"
 								type="text"
 								name="email"
 								placeholder="Email Address"
-							/> -->
-				</div>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-6" style="margin-bottom: 1em">
-				<div class="input-group-prepend">
-					<input
-						class="form-control"
-						type="number"
-						name="delFee"
-						placeholder="Delivery Fee"
-					/>
-				</div>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-6" style="margin-bottom: 1em">
-				<div class="input-group-prepend">
-					<input
-						class="form-control"
-						type="number"
-						name="delRadius"
-						placeholder="Delivery Radius"
-					/>
-				</div>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-6" style="margin-bottom: 1em">
-				<div class="input-group-prepend">
-					<input
-						class="form-control"
-						type="password"
-						name="confPassword"
-						placeholder="Confirm Password"
-					/>
-				</div>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-6" style="margin-bottom: 1em">
-				<div class="input-group-prepend">
-					<P>option here to Register a Restaurant</P>
-				</div>
-			</div>
-		</div>
-	</div>
+              />-->
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-6" style="margin-bottom: 1em">
+            <label>Delivery Fee</label>
+            <div class="input-group-prepend">
+              <input class="form-control" type="number" name="delFee" />
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-6" style="margin-bottom: 1em">
+            <label>Delivery Radius</label>
+            <div class="input-group-prepend">
+              <input class="form-control" type="number" name="delRadius" />
+            </div>
+          </div>
+        </div>
+        <div class="col-md-6">
+          <Map />
+        </div>
+        <div class="col-md-6">
+          <ListView />
+        </div>
+        <!-- <div class="row">
+					<div class="col-md-6" style="margin-bottom: 1em">
+						<label>Methods Of Payment</label>
+						<div class="input-group-prepend">
+							<ul>
+								<li v-for="mop in mops">
+									<input
+										type="checkbox"
+										:id="mop.name"
+										:value="mop.name"
+										v-model="selectedUsers"
+									/>
+									<label :for="mop.name">
+										{{ mop.name }}</label
+									>
+								</li>
+							</ul>
+						</div>
+					</div> 
+        </div>-->
+      </div>
+    </div>
+  </div>
 </template>
+
+<script>
+import Map from "../shared/mapSetLocation";
+import ListView from "../shared/listView";
+
+export default {
+  name: "RestaurantRegistration",
+  components: {
+    Map,
+    ListView
+  },
+  data() {
+    return {
+      mops: [
+        { name: "Credit Card" },
+        { name: "EFT" },
+        { name: "Account" },
+        { name: "Cash On Delivery" }
+      ]
+    };
+  }
+};
+</script>

src/components/restaurants/restaurant.vue

 <template>
-	<div>
-		<br />
-		<br />
-		<br />
-		<br />
-		<br />
-		<div class="container">
-			<div class="col-md-12" style="text-align:left">
-				<h4>Restaurant</h4>
-				<div class="form-group row"></div>
-				<div class="row">
-					<div class="col-md-6" style="margin-bottom: 1em">
-						<div class="input-group-prepend">
-							<input
-								class="form-control"
-								type="text"
-								name="name"
-								placeholder="Name"
-							/>
-						</div>
-					</div>
-				</div>
-				<div class="row">
-					<div class="col-md-6" style="margin-bottom: 1em">
-						<div class="input-group-prepend">
-							<p>Placeholder for Logo</p>
-							<!-- <input
+  <div>
+    <br />
+    <br />
+    <br />
+    <br />
+    <br />
+    <div class="container">
+      <div class="col-md-12" style="text-align:left">
+        <h4>Restaurant</h4>
+        <div class="form-group row"></div>
+        <div class="row">
+          <div class="col-md-6" style="margin-bottom: 1em">
+            <div class="input-group-prepend">
+              <input
+                class="form-control"
+                type="text"
+                name="name"
+                placeholder="Name"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-6" style="margin-bottom: 1em">
+            <div class="input-group-prepend">
+              <p>Placeholder for Logo</p>
+              <!-- <input
 								class="form-control"
 								type="text"
 								name="surname"
 								placeholder="Surname"
 							/> -->
-						</div>
-					</div>
-				</div>
-				<div class="row">
-					<div class="col-md-6" style="margin-bottom: 1em">
-						<div class="input-group-prepend">
-							<p>Option for change</p>
-							<!-- Tool Tip for here: If you are part of a chain, this option will display your name along with the location -->
-							<!-- <input
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-6" style="margin-bottom: 1em">
+            <div class="input-group-prepend">
+              <p>Option for change</p>
+              <!-- Tool Tip for here: If you are part of a chain, this option will display your name along with the location -->
+              <!-- <input
 								class="form-control"
 								type="text"
 								name="email"
 								placeholder="Email Address"
 							/> -->
-						</div>
-					</div>
-				</div>
-				<div class="row">
-					<div class="col-md-6" style="margin-bottom: 1em">
-						<div class="input-group-prepend">
-							<input
-								class="form-control"
-								type="number"
-								name="delFee"
-								placeholder="Delivery Fee"
-							/>
-						</div>
-					</div>
-				</div>
-				<div class="row">
-					<div class="col-md-6" style="margin-bottom: 1em">
-						<div class="input-group-prepend">
-							<input
-								class="form-control"
-								type="number"
-								name="delRadius"
-								placeholder="Delivery Radius"
-							/>
-						</div>
-					</div>
-				</div>
-				<div class="row">
-					<div class="col-md-6" style="margin-bottom: 1em">
-						<div class="input-group-prepend">
-							<input
-								class="form-control"
-								type="password"
-								name="confPassword"
-								placeholder="Confirm Password"
-							/>
-						</div>
-					</div>
-				</div>
-				<div class="row">
-					<div class="col-md-6" style="margin-bottom: 1em">
-						<div class="input-group-prepend">
-							<P>option here to Register a Restaurant</P>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-6" style="margin-bottom: 1em">
+            <div class="input-group-prepend">
+              <input
+                class="form-control"
+                type="number"
+                name="delFee"
+                placeholder="Delivery Fee"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-6" style="margin-bottom: 1em">
+            <div class="input-group-prepend">
+              <input
+                class="form-control"
+                type="number"
+                name="delRadius"
+                placeholder="Delivery Radius"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-6" style="margin-bottom: 1em">
+            <div class="input-group-prepend">
+              <input
+                class="form-control"
+                type="password"
+                name="confPassword"
+                placeholder="Confirm Password"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-6" style="margin-bottom: 1em">
+            <div class="input-group-prepend">
+              <P>option here to Register a Restaurant</P>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>

src/components/shared/alert.vue

+<template>
+  <div class="container">
+    <!-- eslint-disable max-len -->
+    <div class="alert mySuccess" v-if="type === 'SUCCESS'">
+      <eva-icon name="checkmark-outline" style="margin: 0px 20px"></eva-icon>
+      <strong class="color-black">{{ text }}</strong>
+    </div>
+    <div class="alert myInfo" v-if="type === 'INFO'">
+      <eva-icon name="info-outline" style="margin: 0px 20px"></eva-icon>
+      <strong class="color-black">{{ text }}</strong>
+    </div>
+    <div class="alert myWarning" v-if="type === 'WARNING'">
+      <eva-icon name="alert-circle-outline" style="margin: 0px 20px"></eva-icon>
+      <strong class="color-black">{{ text }}</strong>
+    </div>
+    <div class="alert myError" v-if="type === 'ERROR'">
+      <eva-icon name="slash-outline" style="margin: 0px 20px"></eva-icon>
+      <strong class="color-black">{{ text }}</strong>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Alert",
+  data() {
+    return {
+      alertTypes: {
+        SUCCESS: "Success",
+        INFO: "Info",
+        WARNING: "Warning",
+        ERROR: "Error"
+      }
+    };
+  },
+  props: {
+    text: null,
+    type: null
+  }
+};
+</script>
+
+<style>
+.color-black {
+  color: black;
+}
+</style>

src/components/shared/basePagination.vue

+<template>
+  <div>
+    <nav>
+      <ul class="pagination">
+        <li class="page-item" v-if="isPreviousButtonDisabled" @click="previousPage">
+          <a class="page-link" href="#" aria-label="Previous">
+            <span aria-hidden="true">&laquo;</span>
+            <span class="sr-only">Previous</span>
+          </a>
+        </li>
+        <li class="page-item" v-for="item in paginationItems" :key="item">
+          <BasePaginationItem
+            :pageNumber="item"
+            :isCurrentPage="item === currentPage"
+            @loadPage="onLoadPage"
+          />
+        </li>
+        <li class="page-item" v-if="isNextButtonDisabled" @click="nextPage">
+          <a class="page-link" href="#" aria-label="Next">
+            <span aria-hidden="true">&raquo;</span>
+            <span class="sr-only">Next</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+<script>
+import BasePaginationItem from "./basePaginationItem.vue";
+
+export default {
+  components: {
+    BasePaginationItem
+  },
+  props: {
+    visiblePagesCount: {
+      type: Number,
+      default: 5
+    },
+    currentPage: {
+      type: Number,
+      required: true
+    },
+    pageCount: {
+      type: Number,
+      required: true
+    }
+  },
+  computed: {
+    isPreviousButtonDisabled() {
+      return this.currentPage !== 1;
+    },
+    isNextButtonDisabled() {
+      return this.currentPage !== this.pageCount;
+    },
+    paginationItems() {
+      const { currentPage } = this;
+      const { pageCount } = this;
+      const { visiblePagesCount } = this;
+      let pagintationItemsArray = [];
+      if (pageCount <= visiblePagesCount) {
+        let count = 1;
+        while (count <= pageCount) {
+          pagintationItemsArray.push(count);
+          count += 1;
+        }
+        return pagintationItemsArray;
+      }
+      const visiblePagesThreshold = (visiblePagesCount - 1) / 2;
+      pagintationItemsArray = Array(this.visiblePagesCount - 1).fill(0);
+      if (currentPage <= visiblePagesThreshold + 1) {
+        pagintationItemsArray[0] = 1;
+        const pagintationItems = pagintationItemsArray.map(
+          (paginationTrigger, index) => pagintationItemsArray[0] + index
+        );
+        pagintationItems.push(pageCount);
+        return pagintationItems;
+      }
+      if (currentPage >= pageCount - visiblePagesThreshold + 1) {
+        const pagintationItems = pagintationItemsArray.map(
+          (paginationTrigger, index) => pageCount - index
+        );
+        pagintationItems.reverse().unshift(1);
+        return pagintationItems;
+      }
+      pagintationItemsArray[0] = currentPage - visiblePagesThreshold + 1;
+      const pagintationItems = pagintationItemsArray.map(
+        (paginationTrigger, index) => pagintationItemsArray[0] + index
+      );
+      pagintationItems.unshift(1);
+      pagintationItems[pagintationItems.length - 1] = pageCount;
+      return pagintationItems;
+    }
+  },
+  methods: {
+    onLoadPage(value) {
+      this.$emit("loadPage", value);
+    },
+    nextPage() {
+      this.$emit("nextPage");
+    },
+    previousPage() {
+      this.$emit("previousPage");
+    }
+  }
+};
+</script>

src/components/shared/basePaginationItem.vue

+<template>
+  <div :class="isCurrentPage ? 'page-item active' : 'page-item'">
+    <div v-if="isCurrentPage">
+      <span class="page-link disabled">{{pageNumber}}</span>
+    </div>
+    <div v-else @click="onClick">
+      <a class="page-link">{{pageNumber}}</a>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    pageNumber: {
+      type: Number,
+      required: true
+    },
+    isCurrentPage: undefined
+  },
+  methods: {
+    onClick() {
+      this.$emit("loadPage", this.pageNumber);
+    }
+  }
+};
+</script>
+<style scoped>
+.isCurrentPage {
+  cursor: arrow;
+}
+</style>

src/components/shared/checkItem.vue

+<template>
+  <div class="row p-2" @click="checkItem">
+    <div class="custom-control custom-checkbox mar-l-15">
+      <input type="checkbox" class="custom-control-input mar-l-15" :checked="Show" />
+      <label class="custom-control-label">{{title}}</label>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: undefined,
+    show: {
+      default: false
+    }
+  },
+  methods: {
+    checkItem() {
+      this.$emit("checkItem", this.title, !this.show);
+    }
+  },
+  computed: {
+    Show() {
+      return this.show;
+    }
+  }
+};
+</script>
+<style>
+.mar-l-15 {
+  margin-left: 15px;
+}
+</style>

src/components/shared/home.vue

 <template>
-	<div class="col-md-12">
-		<header class="masthead bg-primary text-white text-center">
-			<div class="container d-flex align-items-center flex-column">
-				<!-- Masthead Avatar Image--><img
-					class="masthead-avatar mb-5"
-					src="../../assets/assets/img/avataaars.svg"
-					alt=""
-				/><!-- Masthead Heading-->
-				<h1 class="masthead-heading text-uppercase mb-0">
-					Start Bootstrap
-				</h1>
-				<!-- Icon Divider-->
-				<div class="divider-custom divider-light">
-					<div class="divider-custom-line"></div>
-					<div class="divider-custom-icon">
-						<i class="fas fa-star"></i>
-					</div>
-					<div class="divider-custom-line"></div>
-				</div>
-				<!-- Masthead Subheading-->
-				<p class="masthead-subheading font-weight-light mb-0">
-					Graphic Artist - Web Designer - Illustrator
-				</p>
-			</div>
-		</header>
-	</div>
+  <div class="col-md-12">
+    <header class="masthead bg-primary text-white text-center">
+      <div class="container d-flex align-items-center flex-column">
+        <!-- Masthead Avatar Image--><img
+          class="masthead-avatar mb-5"
+          src="../../assets/assets/img/avataaars.svg"
+          alt=""
+        /><!-- Masthead Heading-->
+        <h1 class="masthead-heading text-uppercase mb-0">
+          Start Bootstrap
+        </h1>
+        <!-- Icon Divider-->
+        <div class="divider-custom divider-light">
+          <div class="divider-custom-line"></div>
+          <div class="divider-custom-icon">
+            <i class="fas fa-star"></i>
+          </div>
+          <div class="divider-custom-line"></div>
+        </div>
+        <!-- Masthead Subheading-->
+        <p class="masthead-subheading font-weight-light mb-0">
+          Graphic Artist - Web Designer - Illustrator
+        </p>
+      </div>
+    </header>
+  </div>
 </template>
 
 <script>
 export default {
-	name: 'home',
-}
+  name: "home"
+};
 </script>

src/components/shared/listView.vue

+<template>
+  <div>
+    <div style="height:5px"></div>
+    <div class="d-flex justify-content-between table-title">
+      <div class="p-2" v-if="!hideSearch">
+        <input v-model="searchItem" class="form-control" placeholder="Search...." />
+      </div>
+      <div class="p-2" v-if="title">
+        <h2>{{ title }}</h2>
+      </div>
+      <div class="p-2">
+        <div class="d-flex flex-row">
+          <div class="p2" v-if="showColumnChooser">
+            <div
+              class="btn btn-primary myBackground btn-width cursor-pointer"
+              data-toggle="modal"
+              data-target="#myModal"
+            >Column Chooser</div>
+            <div class="col-md-12">
+              <div id="myModal" class="modal fade" role="dialog">
+                <div class="modal-dialog modal-lg">
+                  <!-- Modal content-->
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <h5>Column Chooser</h5>
+                      <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+                    <div style="margin-left:50px; margin-right:50px;margin-bottom:50px;">
+                      <ListViewControl :items="allColumn" @checkItem="checkItem" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="p2" v-if="selectedItems.length > 0">
+            <div
+              class="btn btn-primary myBackground btn-width cursor-pointer"
+              @click="onClearSelected()"
+            >Clear Selected</div>
+          </div>
+          <div class="p2" v-if="showNew">
+            <div class="btn btn-primary myBackground btn-width cursor-pointer" @click="onNew()">New</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div style="height:5px"></div>
+    <div v-if="items && items.length > 0" class="table-responsive">
+      <table
+        id="table"
+        :class="{ 'table table-hover': 1 === 1, 'table-sm': compact, 'table-bordered': bordered }"
+      >
+        <thead>
+          <tr class="dnd-moved">
+            <th v-for="(column, c) in Columns" :key="c">
+              <div
+                @click="sortBy(column)"
+                @mouseover="hover = c"
+                @mouseleave="hover = -1"
+                :class="{ active: hover === c }"
+              >
+                <div class="d-flex bd-highlight">
+                  <div
+                    v-if="displayHeaders.length === 0"
+                    class="p-2 w-100 bd-highlight"
+                  >{{ column | toProper }}</div>
+                  <div
+                    v-else
+                    class="p-2 w-100 bd-highlight"
+                  >{{ displayHeaders[c] !== "" ? displayHeaders[c] : column | toProper }}</div>
+                  <div class="p-2 flex-shrink-1 bd-highlight">
+                    <img
+                      src="../../../public/img/sort-up.png"
+                      height="8px;"
+                      v-if="sortKey === column && reverse"
+                    />
+                    <img
+                      src="../../../public/img/sort-down.png"
+                      height="8px;"
+                      v-if="sortKey === column && !reverse"
+                    />
+                  </div>
+                </div>
+              </div>
+            </th>
+            <th v-if="showCustomAction"></th>
+            <th v-if="editable"></th>
+            <th v-if="deleteable"></th>
+          </tr>
+        </thead>
+        <tbody class="my-table">
+          <tr
+            v-for="(item, i) in DisplayItems"
+            :key="i"
+            @click="onRowClick(item, i)"
+            :class="{ selected: isSelected(i), 'cursor-pointer': allowSelect }"
+          >
+            <td v-for="(column, c) in Columns" :key="c">
+              <div
+                v-if="displayFormats.length === 0"
+              >{{ isObject(item[column]) ? item[column].display : item[column] }}</div>
+              <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'date'">
+                <div
+                  v-if="item[column] !== '0001-01-01T00:00:00'"
+                >{{ isObject(item[column]) ? item[column].display : item[column] | toDate }}</div>
+              </div>
+              <div
+                v-else-if="displayFormats.length > 0 && displayFormats[c] === 'money'"
+              >{{ isObject(item[column]) ? item[column].display : item[column] | toCurrency }}</div>
+              <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'image'">
+                <img :src="item[column]" style="height:100px; width:100px; object-fit: cover;" />
+              </div>
+              <div v-else>{{ isObject(item[column]) ? item[column].display : item[column] }}</div>
+            </td>
+            <td v-if="showCustomAction" class="my-width">
+              <button
+                type="button"
+                class="btn my-btn"
+                @click="onCustomClick(item)"
+              >{{ CustomActionHeading }}</button>
+            </td>
+            <td v-if="editable" class="my-width">
+              <button type="button" class="btn my-btn" @click="onEdit(item)">Edit</button>
+            </td>
+            <td v-if="deleteable" class="my-width">
+              <button type="button" class="btn my-btn" @click="onDelete(item)">Delete</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="d-flex justify-content-between" v-if="showPager">
+        <div class="p-1">
+          {{
+          currentPage +
+          " / " +
+          PageCount +
+          (!hideItemCount ? " - (" + FilteredItems.length + " items)" : "")
+          }}
+        </div>
+        <div class="p-1">
+          <BasePagination
+            :currentPage="currentPage"
+            :pageCount="PageCount"
+            @nextPage="pageChangeHandle('next')"
+            @previousPage="pageChangeHandle('previous')"
+            @loadPage="pageChangeHandle"
+          />
+        </div>
+        <div class="p-2">
+          <div class="d-flex flex-row">
+            <div>
+              <select
+                class="form-control"
+                v-model="visibleItemsPerPageCount"
+                @change="onChangeItemsPerPage()"
+              >
+                <option v-for="(item, i) in itemsPerPageList" :key="i">{{ item }}</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else>
+      <Alert :text="'No items found'" :type="'INFO'" />
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from "lodash";
+import ItemsPerPageList from "../../assets/staticData/itemsPerPage";
+import BasePagination from "./basePagination.vue";
+import Alert from "./alert.vue";
+import ListViewControl from "./listViewControl.vue";
+
+export default {
+  components: {
+    BasePagination,
+    Alert,
+    ListViewControl
+  },
+  mounted() {
+    if (this.itemsPerPageList && this.itemsPerPageList.length > 0) {
+      const [startItem] = this.itemsPerPageList;
+      this.visibleItemsPerPageCount = startItem;
+    }
+    this.getInitColumn();
+  },
+  props: {
+    compact: {
+      default: true
+    },
+    allowSelect: {
+      default: true
+    },
+    allowMultipleSelect: {
+      default: false
+    },
+    hideSearch: {
+      default: false
+    },
+    showNew: {
+      default: true
+    },
+    items: undefined,
+    editable: {
+      default: false
+    },
+    deleteable: {
+      default: false
+    },
+    columnCount: {
+      default: 6
+    },
+    showPager: {
+      default: true
+    },
+    title: {
+      default: undefined
+    },
+    sortKey: {
+      default: "id"
+    },
+    hideItemCount: {
+      default: false
+    },
+    currentPage: {
+      default: 1
+    },
+    bordered: {
+      default: true
+    },
+    striped: {
+      default: true
+    },
+    showColumnChooser: {
+      default: true
+    },
+    displayColumns: {
+      default: []
+    },
+    displayFormats: {
+      default: []
+    },
+    displayHeaders: {
+      default: []
+    },
+    showCustomAction: {
+      default: false
+    },
+    CustomActionHeading: {
+      default: ""
+    },
+    CustomActionCondition: {
+      default: ""
+    }
+  },
+  data() {
+    return {
+      hover: -1,
+      selectedItems: [],
+      showControl: false,
+      reverse: false,
+      searchItem: "",
+      visibleItemsPerPageCount: 20,
+      itemsPerPageList: ItemsPerPageList,
+      visibleColumn: [],
+      allColumn: []
+    };
+  },
+  methods: {
+    checkItem(column, show) {
+      const list = [];
+      for (const i in this.allColumn) {
+        const item = this.allColumn[i];
+        if (item && item.column === column) {
+          item.show = show;
+        }
+        list.push(item);
+      }
+      this.allColumn = list;
+    },
+    getInitColumn() {
+      const listAll = [];
+      if (this.items) {
+        for (const i in Object.keys(this.items)) {
+          const item = this.items[i];
+          for (const o in Object.keys(item)) {
+            if (
+              !listAll.includes(Object.keys(item)[o]) &&
+              !Array.isArray(Object.values(item)[o])
+            ) {
+              const columnName = Object.keys(item)[o];
+              if (!listAll.some(x => x.column === columnName)) {
+                listAll.push({
+                  column: columnName,
+                  show: _.filter(listAll, x => x.show).length < this.columnCount
+                });
+              }
+            }
+          }
+        }
+      }
+      this.allColumn = listAll;
+    },
+    onClearSelected() {
+      this.selectedItems = [];
+      this.$emit("onClearSelected");
+    },
+    isSelected(i) {
+      const ind = this.getActualIndex(i);
+      return _.some(this.selectedItems, x => x === ind);
+    },
+    onNew() {
+      this.$emit("onNew");
+    },
+    isObject(item) {
+      return !!item && item.constructor === Object;
+    },
+    isDate(item) {
+      return !!item && item.constructor === Date;
+    },
+    isDecimal(item) {
+      if (!!item && item.constructor === Number && item.indexOf(".") > 0) {
+        return true;
+      }
+      return false;
+    },
+    isImage(item) {
+      return (
+        !!item &&
+        item.constructor === String &&
+        item.length > 9 &&
+        item.substring(0, 9) === "data:image"
+      );
+    },
+    onEdit(item) {
+      this.$emit("onEdit", item);
+    },
+    onDelete(item) {
+      this.$emit("onDelete", item);
+    },
+    onCustomClick(item) {
+      this.$emit("onCustomClick", item);
+    },
+    onRowClick(item, i) {
+      const ind = this.getActualIndex(i);
+      if (_.some(this.selectedItems, x => x === ind)) {
+        this.selectedItems = this.selectedItems.filter(x => x !== ind);
+      } else {
+        if (!this.allowMultipleSelect) {
+          this.selectedItems = [];
+        }
+        this.selectedItems.push(item);
+      }
+      this.$emit("onRowClick", this.selectedItems);
+    },
+    getActualIndex(index) {
+      return (this.currentPage - 1) * this.visibleItemsPerPageCount + index;
+    },
+    changeColumn(title, checked) {
+      if (checked) {
+        this.myColumns.push(title);
+      } else {
+        const ind = this.myColumns.indexOf(title);
+        if (ind > -1) {
+          this.myColumns.splice(ind, 1);
+        }
+      }
+    },
+    onControlVisibilityChange() {
+      this.showControl = !this.showControl;
+    },
+    sortBy(sortKey) {
+      this.reverse = this.sortKey === sortKey ? !this.reverse : false;
+      this.sortKey = sortKey;
+    },
+    async pageChangeHandle(value) {
+      console.log(value);
+      switch (value) {
+        case "next":
+          this.currentPage += 1;
+          break;
+        case "previous":
+          this.currentPage -= 1;
+          break;
+        default:
+          this.currentPage = value;
+      }
+    },
+    onChangeItemsPerPage() {
+      if (this.currentPage !== 1) {
+        this.currentPage = 1;
+      }
+    },
+    inArray(array, value) {
+      const lenght = array.length;
+      for (let i = 0; i < lenght; i++) {
+        if (array[i] === value) return true;
+      }
+      return false;
+    }
+  },
+  computed: {
+    ListWidth() {
+      if (this.showControl) {
+        return "col-md-9";
+      }
+      return "col-md-12";
+    },
+    SortDirection() {
+      return this.reverse ? "desc" : "asc";
+    },
+    PageCount() {
+      return this.visibleItemsPerPageCount !== 0
+        ? Math.ceil(this.FilteredItems.length / this.visibleItemsPerPageCount)
+        : 1;
+    },
+    Columns() {
+      const listColumns = [];
+      if (!this.allColumn || this.allColumn.length === 0) {
+        this.getInitColumn();
+      }
+      if (this.displayColumns.length > 0) {
+        for (let i = 0; i < this.displayColumns.length; i++) {
+          listColumns.push(this.displayColumns[i]);
+        }
+      } else {
+        const list = _.filter(this.allColumn, x => x.show);
+        for (const i in list) {
+          const item = list[i];
+          if (item) {
+            listColumns.push(item.column);
+          }
+        }
+      }
+      return listColumns;
+    },
+    AllColumns() {
+      const list = [];
+      return list;
+    },
+    FilteredItems() {
+      const list = _.filter(this.items, item =>
+        Object.values(item).some(
+          i =>
+            JSON.stringify(i)
+              .toLowerCase()
+              .indexOf(this.searchItem.toLowerCase()) > -1
+        )
+      );
+      return _.orderBy(list, this.sortKey, this.SortDirection);
+    },
+    DisplayItems() {
+      const list = this.FilteredItems;
+      const startSlice = (this.currentPage - 1) * this.visibleItemsPerPageCount;
+      let endSlice = this.currentPage * this.visibleItemsPerPageCount;
+      if (endSlice > list.length) {
+        endSlice = list.length;
+      }
+      return list.slice(startSlice, endSlice);
+    }
+    //GetAllColumn() {}
+  }
+};
+</script>
+<style scoped>
+th[draggable] a,
+th[draggable] {
+  cursor: move;
+}
+th[draggable] a:hover,
+th[draggable] a {
+  display: block;
+  text-decoration: none;
+  color: #333333;
+}
+.table-striped > tbody > tr:nth-child(2n + 1) > td,
+.table-striped > tbody > tr:nth-child(2n + 1) > th {
+  background-color: rgba(225, 225, 225, 0.8);
+}
+.active {
+  background-color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+}
+.table > tbody > tr > td {
+  vertical-align: middle;
+}
+.my-width {
+  width: 20px;
+}
+.drag {
+  background-color: rgba(0, 255, 0, 0.35);
+  opacity: 0.25;
+}
+.dnd-drag {
+  opacity: 0.25;
+}
+.over {
+  background-color: rgba(0, 0, 255, 0.35);
+}
+.my-border {
+  border: solid 3px silver;
+}
+.selected {
+  background-color: rgba(96, 203, 235, 0.5);
+  border: white 2px double;
+}
+.selected:hover {
+  background-color: rgba(96, 203, 235, 0.85);
+}
+.btn-width {
+  width: 125px;
+}
+.table-title {
+  padding: 5px;
+  border: rgba(200, 200, 200, 0.66) double 2px;
+  border-radius: 5px;
+  background-color: rgba(96, 203, 235, 0.25);
+}
+.table-title:hover {
+  background-color: rgba(96, 203, 235, 0.4);
+}
+.table-header {
+  background-color: rgba(200, 200, 200, 0.66);
+}
+.my-table {
+  border: rgba(150, 150, 150, 0.75) 3px double;
+}
+</style>

src/components/shared/listViewControl.vue

+<template>
+  <div class="container">
+    <div class="offset-3 col-md-6">
+      <input v-model="searchItem" class="form-control" placeholder="Search...." />
+    </div>
+    <hr />
+    <div class="row">
+      <div v-for="item in items" :key="item" class="col-md-4">
+        <div :class="{'inSearch': isInSelected(item)}">
+          <CheckItem :title="item.column" :show="item.show" @checkItem="checkItem" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import CheckItem from "./checkItem.vue";
+
+export default {
+  components: {
+    CheckItem
+  },
+  data() {
+    return {
+      searchItem: undefined
+    };
+  },
+  props: {
+    items: undefined
+  },
+  methods: {
+    isInSelected(i) {
+      if (this.searchItem && this.searchItem.length > 0) {
+        return (
+          i.column.toLowerCase().indexOf(this.searchItem.toLowerCase()) > -1
+        );
+      }
+      return false;
+    },
+    checkItem(column, show) {
+      this.$emit("checkItem", column, show);
+    }
+  },
+  computed: {}
+};
+</script>
+<style>
+.inSearch {
+  border: 1px solid rgba(50, 50, 50, 0.5);
+  border-radius: 10px;
+  background-color: rgba(225, 225, 225, 0.6);
+}
+</style>

src/components/shared/mapSetLocation.vue

+<template>
+  <div>
+    <label>Location</label>
+    <div class="input-group-prepend">
+      <gmap-autocomplete class="form-control" @place_changed="setPlace"></gmap-autocomplete>
+      <button class="btn btn-primary btn-l" @click="addMarker">Add</button>
+      <br />
+    </div>
+    <br />
+    <gmap-map :center="coordinates" :zoom="18" style="width:100%;  height: 400px;">
+      <gmap-marker
+        :key="index"
+        v-for="(m, index) in markers"
+        :position="m.position"
+        :draggable="true"
+        @click="center = m.position"
+      ></gmap-marker>
+    </gmap-map>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      coordinates: {
+        lat: 0,
+        lng: 0
+      },
+      center: { lat: 0, lng: 0 },
+      markers: [],
+      places: [],
+      currentPlace: {},
+      streetNumber: "",
+      streetName: "",
+      suburb: "",
+      city: "",
+      province: "",
+      country: "",
+      postalCode: ""
+    };
+  },
+  created() {
+    this.$getLocation({})
+      .then(coord => {
+        this.coordinates = coord;
+        //this.markers.push({ position: coord })
+      })
+      .catch(error => alert(error));
+  },
+
+  mounted() {
+    this.geolocate();
+  },
+
+  methods: {
+    setPlace(place) {
+      this.currentPlace = place;
+
+      this.streetNumber = "";
+      this.streetName = "";
+      this.suburb = "";
+      this.city = "";
+      this.province = "";
+      this.country = "";
+      this.postalCode = "";
+
+      for (let i = 0; i < place.address_components.length; i++) {
+        if (place.address_components[i].types[0] === "street_number") {
+          this.streetNumber = place.address_components[i].long_name;
+        }
+        if (place.address_components[i].types[0] === "route") {
+          this.streetName = place.address_components[i].long_name;
+        }
+        if (place.address_components[i].types[0] === "sublocality_level_1") {
+          this.suburb = place.address_components[i].long_name;
+        }
+        if (place.address_components[i].types[0] === "locality") {
+          this.city = place.address_components[i].long_name;
+        }
+        if (
+          place.address_components[i].types[0] === "administrative_area_level_1"
+        ) {
+          this.province = place.address_components[i].long_name;
+        }
+        if (place.address_components[i].types[0] === "country") {
+          this.country = place.address_components[i].long_name;
+        }
+        if (place.address_components[i].types[0] === "postal_code") {
+          this.postalCode = place.address_components[i].long_name;
+        }
+      }
+    },
+    addMarker() {
+      if (this.currentPlace) {
+        const marker = {
+          lat: this.currentPlace.geometry.location.lat(),
+          lng: this.currentPlace.geometry.location.lng()
+        };
+        this.markers = [];
+        this.places = [];
+        this.markers.push({ position: marker });
+        this.places.push(this.currentPlace);
+        this.center = marker;
+        this.coordinates = marker;
+        this.currentPlace = null;
+      }
+    },
+    geolocate: function() {
+      navigator.geolocation.getCurrentPosition(position => {
+        this.center = {
+          lat: position.coords.latitude,
+          lng: position.coords.longitude
+        };
+      });
+    }
+  }
+};
+</script>

src/components/shared/navBar.vue

 <template>
-	<nav
-		class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top"
-		id="mainNav"
-	>
-		<div class="container">
-			<a class="navbar-brand js-scroll-trigger" @click="routerGoTo('/')"
-				>Get Food</a
-			>
-			<button
-				class="navbar-toggler navbar-toggler-right text-uppercase font-weight-bold bg-primary text-white rounded"
-				type="button"
-				data-toggle="collapse"
-				data-target="#navbarResponsive"
-				aria-controls="navbarResponsive"
-				aria-expanded="false"
-				aria-label="Toggle navigation"
-			>
-				Menu
-				<i class="fas fa-bars"></i>
-			</button>
-			<div class="collapse navbar-collapse" id="navbarResponsive">
-				<ul class="navbar-nav ml-auto">
-					<li class="nav-item mx-0 mx-lg-1">
-						<a
-							class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
-							@click="routerGoTo('/Registration')"
-							>Register
-						</a>
-					</li>
-					<li class="nav-item mx-0 mx-lg-1">
-						<a
-							class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
-							@click="routerGoTo('/login')"
-							>Login</a
-						>
-					</li>
-				</ul>
-			</div>
-		</div>
-	</nav>
+  <nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
+    <div class="container">
+      <a class="navbar-brand js-scroll-trigger" @click="routerGoTo('/')">Get Food</a>
+      <button
+        class="navbar-toggler navbar-toggler-right text-uppercase font-weight-bold bg-primary text-white rounded"
+        type="button"
+        data-toggle="collapse"
+        data-target="#navbarResponsive"
+        aria-controls="navbarResponsive"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        Menu
+        <i class="fas fa-bars"></i>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarResponsive">
+        <ul class="navbar-nav ml-auto">
+          <li class="nav-item mx-0 mx-lg-1">
+            <a
+              class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
+              @click="routerGoTo('/Registration')"
+            >Register</a>
+          </li>
+          <li class="nav-item mx-0 mx-lg-1">
+            <a
+              class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
+              @click="routerGoTo('/Login')"
+            >Login</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
 </template>
 
 <script>
 export default {
-	name: 'navbar',
-	methods: {
-		routerGoTo(path) {
-			this.$emit('routerGoTo', path)
-		},
-	},
-}
+  name: "navbar",
+  methods: {
+    routerGoTo(path) {
+      this.$emit("routerGoTo", path);
+    }
+  }
+};
 </script>

src/main.js

 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
+import store from './store'
+import axios from 'axios'
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
 
-Vue.config.productionTip = false
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+import VueGeolocation from 'vue-browser-geolocation'
+Vue.use(VueGeolocation)
+import * as VueGoogleMaps from 'vue2-google-maps'
+Vue.use(VueGoogleMaps, {
+	load: {
+		key: 'AIzaSyC1Ksf24t03oxHkQYb-DymF9HipgGP30ao',
+		libraries: 'places', // necessary for places input
+	},
+})
 
+Vue.config.productionTip = false
+axios.defaults.baseURL = 'http://localhost:58847/'
 require('./assets/css/styles.css')
 
+Vue.prototype.$axios = axios
+Vue.prototype.$http = axios
+
 new Vue({
 	router,
+	store,
 	render: (h) => h(App),
 }).$mount('#app')
+
+Vue.use(BootstrapVue)
+Vue.use(IconsPlugin)

src/router/index.js

 import Home from '../components/shared/home.vue'
 
 import Registration from '../components/accounts/register.vue'
+import Login from '../components/accounts/login.vue'
+import RegisterRestaurant from '../components/accounts/restaurantRegistration.vue'
 
 Vue.use(VueRouter)
 
 		name: 'Registration',
 		component: Registration,
 	},
+	{
+		path: '/Login',
+		name: 'Login',
+		component: Login,
+	},
+	{
+		path: '/RegisterRestaurant',
+		name: 'RegisterRestaurant',
+		component: RegisterRestaurant,
+	},
 ]
 
 const router = new VueRouter({

src/store/index.js

+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import Registration from './users/registration'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+	state: {},
+	mutations: {},
+	actions: {},
+	modules: {
+		registration: Registration,
+	},
+})

src/store/users/registration.js

+import axios from 'axios'
+import { sha256 } from 'js-sha256'
+
+export default {
+	namespaced: true,
+	state: {
+		user: {},
+	},
+	mutations: {
+		addUser(state, user) {
+			state.user = user
+		},
+	},
+	getters: {},
+	actions: {
+		getUser({ commit }, userID) {
+			axios
+				.get(`/api/user/${userID}`)
+				.then((result) => commit('addUser', result.data))
+				.catch(console.error)
+		},
+		regUser({ commit }, user) {
+			user.password = sha256(user.password + '≡∆≤≥√∞ProVision')
+			axios
+				.post('/api/user', user)
+				.then((result) => commit('addUser', result.data))
+				.catch(console.error)
+		},
+	},
+}