From 3555d2b768986309a64ca8c6a2e0c1d26460063a Mon Sep 17 00:00:00 2001 From: Daniel Mason Date: Fri, 26 Mar 2021 21:06:28 +1300 Subject: [PATCH] basic login page --- go.mod | 3 +- go.sum | 2 + internal/goscrobble/server.go | 26 ++- web/package-lock.json | 269 +++++++++++++++++++++++++ web/package.json | 2 + web/src/App.js | 25 ++- web/src/Components/Pages/About.css | 2 +- web/src/Components/Pages/Login.css | 10 + web/src/Components/Pages/Login.js | 122 +++++++++-- web/src/Components/Pages/Navigation.js | 36 ++-- 10 files changed, 448 insertions(+), 49 deletions(-) create mode 100644 web/src/Components/Pages/Login.css diff --git a/go.mod b/go.mod index 1181175e..79216131 100644 --- a/go.mod +++ b/go.mod @@ -19,11 +19,12 @@ require ( github.com/opencontainers/go-digest v1.0.0 // indirect github.com/opencontainers/image-spec v1.0.1 // indirect github.com/pkg/errors v0.9.1 // indirect + github.com/rs/cors v1.7.0 github.com/sirupsen/logrus v1.7.0 // indirect golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9 golang.org/x/net v0.0.0-20201029221708-28c70e62bb1d // indirect golang.org/x/sys v0.0.0-20201029080932-201ba4db2418 // indirect - golang.org/x/time v0.0.0-20210220033141-f8bda1e9f3ba // indirect + golang.org/x/time v0.0.0-20210220033141-f8bda1e9f3ba google.golang.org/genproto v0.0.0-20201030142918-24207fddd1c3 // indirect google.golang.org/grpc v1.33.1 // indirect google.golang.org/protobuf v1.25.0 // indirect diff --git a/go.sum b/go.sum index 2eee44ce..3ea418fd 100644 --- a/go.sum +++ b/go.sum @@ -63,6 +63,8 @@ github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4= github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0= github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4= github.com/prometheus/client_model v0.0.0-20190812154241-14fe0d1b01d4/go.mod h1:xMI15A0UPsDsEKsMN9yxemIoYk6Tm2C1GtYGdfGttqA= +github.com/rs/cors v1.7.0 h1:+88SsELBHx5r+hZ8TCkggzSstaWNbDvThkVK8H6f9ik= +github.com/rs/cors v1.7.0/go.mod h1:gFx+x8UowdsKA9AchylcLynDq+nNFfI8FkUZdN/jGCU= github.com/sirupsen/logrus v1.4.1/go.mod h1:ni0Sbl8bgC9z8RoU9G6nDWqqs/fq4eDPysMBDgk/93Q= github.com/sirupsen/logrus v1.7.0 h1:ShrD1U9pZB12TX0cVy0DtePoCH97K8EtX+mg7ZARUtM= github.com/sirupsen/logrus v1.7.0/go.mod h1:yWOB1SBYBC5VeMP7gHvWumXLIWorT60ONWic61uBYv0= diff --git a/internal/goscrobble/server.go b/internal/goscrobble/server.go index 7cb74080..bc3dfc4e 100644 --- a/internal/goscrobble/server.go +++ b/internal/goscrobble/server.go @@ -10,6 +10,7 @@ import ( "path/filepath" "github.com/gorilla/mux" + "github.com/rs/cors" ) // spaHandler - Handles Single Page Applications (React) @@ -32,6 +33,10 @@ var standardLimiter = NewIPRateLimiter(5, 5) // List of Reverse proxies var ReverseProxies []string +func enableCors(w *http.ResponseWriter) { + (*w).Header().Set("Access-Control-Allow-Origin", "*") +} + // HandleRequests - Boot HTTP! func HandleRequests() { // Create a new router @@ -57,8 +62,15 @@ func HandleRequests() { spa := spaHandler{staticPath: "web/build", indexPath: "index.html"} r.PathPrefix("/").Handler(spa) + c := cors.New(cors.Options{ + // Grrrr CORS + AllowedOrigins: []string{"*"}, + AllowCredentials: true, + }) + handler := c.Handler(r) + // Serve it up! - log.Fatal(http.ListenAndServe(":42069", r)) + log.Fatal(http.ListenAndServe(":42069", handler)) } // MIDDLEWARE @@ -82,6 +94,16 @@ func throwBadReq(w http.ResponseWriter, m string) { http.Error(w, err.Error(), http.StatusBadRequest) } +// throwUnauthorized - Throws a 403 +func throwOkMessage(w http.ResponseWriter, m string) { + jr := jsonResponse{ + Err: m, + } + js, _ := json.Marshal(&jr) + err := errors.New(string(js)) + http.Error(w, err.Error(), http.StatusOK) +} + // generateJsonMessage - Generates a message:str response func generateJsonMessage(m string) []byte { jr := jsonResponse{ @@ -139,7 +161,7 @@ func handleRegister(w http.ResponseWriter, r *http.Request) { ip := getUserIp(r) err = createUser(®Req, ip) if err != nil { - throwBadReq(w, err.Error()) + throwOkMessage(w, err.Error()) return } diff --git a/web/package-lock.json b/web/package-lock.json index c7066b21..673548f3 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -19,6 +19,8 @@ "react-redux": "^7.2.3", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", + "react-toast": "^1.0.1", + "react-toast-notifications": "^2.4.3", "reactstrap": "^8.9.0", "web-vitals": "^1.1.1" }, @@ -1463,6 +1465,95 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "node_modules/@emotion/cache": { + "version": "10.0.29", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", + "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==", + "dependencies": { + "@emotion/sheet": "0.9.4", + "@emotion/stylis": "0.8.5", + "@emotion/utils": "0.11.3", + "@emotion/weak-memoize": "0.2.5" + } + }, + "node_modules/@emotion/core": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.1.1.tgz", + "integrity": "sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "@emotion/cache": "^10.0.27", + "@emotion/css": "^10.0.27", + "@emotion/serialize": "^0.11.15", + "@emotion/sheet": "0.9.4", + "@emotion/utils": "0.11.3" + }, + "peerDependencies": { + "react": ">=16.3.0" + } + }, + "node_modules/@emotion/css": { + "version": "10.0.27", + "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz", + "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==", + "dependencies": { + "@emotion/serialize": "^0.11.15", + "@emotion/utils": "0.11.3", + "babel-plugin-emotion": "^10.0.27" + } + }, + "node_modules/@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + }, + "node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, + "node_modules/@emotion/serialize": { + "version": "0.11.16", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", + "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==", + "dependencies": { + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/unitless": "0.7.5", + "@emotion/utils": "0.11.3", + "csstype": "^2.5.7" + } + }, + "node_modules/@emotion/serialize/node_modules/csstype": { + "version": "2.6.16", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.16.tgz", + "integrity": "sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q==" + }, + "node_modules/@emotion/sheet": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz", + "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==" + }, + "node_modules/@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "node_modules/@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, + "node_modules/@emotion/utils": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", + "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" + }, "node_modules/@eslint/eslintrc": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.0.tgz", @@ -4255,6 +4346,23 @@ "object.assign": "^4.1.0" } }, + "node_modules/babel-plugin-emotion": { + "version": "10.2.2", + "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.2.2.tgz", + "integrity": "sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==", + "dependencies": { + "@babel/helper-module-imports": "^7.0.0", + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/serialize": "^0.11.16", + "babel-plugin-macros": "^2.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^1.0.5", + "find-root": "^1.1.0", + "source-map": "^0.5.7" + } + }, "node_modules/babel-plugin-istanbul": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz", @@ -4361,6 +4469,11 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" + }, "node_modules/babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", @@ -8583,6 +8696,11 @@ "node": ">=6" } }, + "node_modules/find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "node_modules/find-up": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", @@ -16499,6 +16617,27 @@ "semver": "bin/semver" } }, + "node_modules/react-toast": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/react-toast/-/react-toast-1.0.1.tgz", + "integrity": "sha512-xqkO5ZJiJDOLxycZts7xi729blKw4frhg2I4bcIjT7mVlshxu0AsaHlKAdPhVeACAnn8nnamxg6zoYoC9BEjjg==", + "peerDependencies": { + "react": ">=16" + } + }, + "node_modules/react-toast-notifications": { + "version": "2.4.3", + "resolved": "https://registry.npmjs.org/react-toast-notifications/-/react-toast-notifications-2.4.3.tgz", + "integrity": "sha512-Ya/i2dCjN95Ytb/pwbAVmDMSKQwGeeGOhUThtjFQx2XAFKE+fQnodLlIylhgZfsInxdUXPFGFnzTdGS8JafuLA==", + "dependencies": { + "@emotion/core": "^10.0.14", + "react-transition-group": "^4.4.1" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0", + "react-dom": "^16.8.0 || ^17.0.0" + } + }, "node_modules/react-transition-group": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", @@ -23106,6 +23245,94 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "@emotion/cache": { + "version": "10.0.29", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", + "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==", + "requires": { + "@emotion/sheet": "0.9.4", + "@emotion/stylis": "0.8.5", + "@emotion/utils": "0.11.3", + "@emotion/weak-memoize": "0.2.5" + } + }, + "@emotion/core": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.1.1.tgz", + "integrity": "sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA==", + "requires": { + "@babel/runtime": "^7.5.5", + "@emotion/cache": "^10.0.27", + "@emotion/css": "^10.0.27", + "@emotion/serialize": "^0.11.15", + "@emotion/sheet": "0.9.4", + "@emotion/utils": "0.11.3" + } + }, + "@emotion/css": { + "version": "10.0.27", + "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz", + "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==", + "requires": { + "@emotion/serialize": "^0.11.15", + "@emotion/utils": "0.11.3", + "babel-plugin-emotion": "^10.0.27" + } + }, + "@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, + "@emotion/serialize": { + "version": "0.11.16", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", + "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==", + "requires": { + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/unitless": "0.7.5", + "@emotion/utils": "0.11.3", + "csstype": "^2.5.7" + }, + "dependencies": { + "csstype": { + "version": "2.6.16", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.16.tgz", + "integrity": "sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q==" + } + } + }, + "@emotion/sheet": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz", + "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==" + }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, + "@emotion/utils": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" + }, + "@emotion/weak-memoize": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", + "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" + }, "@eslint/eslintrc": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.0.tgz", @@ -25229,6 +25456,23 @@ "object.assign": "^4.1.0" } }, + "babel-plugin-emotion": { + "version": "10.2.2", + "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.2.2.tgz", + "integrity": "sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/serialize": "^0.11.16", + "babel-plugin-macros": "^2.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^1.0.5", + "find-root": "^1.1.0", + "source-map": "^0.5.7" + } + }, "babel-plugin-istanbul": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz", @@ -25316,6 +25560,11 @@ "@babel/helper-define-polyfill-provider": "^0.1.5" } }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" + }, "babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", @@ -28676,6 +28925,11 @@ } } }, + "find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "find-up": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", @@ -34831,6 +35085,21 @@ } } }, + "react-toast": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/react-toast/-/react-toast-1.0.1.tgz", + "integrity": "sha512-xqkO5ZJiJDOLxycZts7xi729blKw4frhg2I4bcIjT7mVlshxu0AsaHlKAdPhVeACAnn8nnamxg6zoYoC9BEjjg==", + "requires": {} + }, + "react-toast-notifications": { + "version": "2.4.3", + "resolved": "https://registry.npmjs.org/react-toast-notifications/-/react-toast-notifications-2.4.3.tgz", + "integrity": "sha512-Ya/i2dCjN95Ytb/pwbAVmDMSKQwGeeGOhUThtjFQx2XAFKE+fQnodLlIylhgZfsInxdUXPFGFnzTdGS8JafuLA==", + "requires": { + "@emotion/core": "^10.0.14", + "react-transition-group": "^4.4.1" + } + }, "react-transition-group": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", diff --git a/web/package.json b/web/package.json index 71c71c67..d5608955 100644 --- a/web/package.json +++ b/web/package.json @@ -14,6 +14,8 @@ "react-redux": "^7.2.3", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", + "react-toast": "^1.0.1", + "react-toast-notifications": "^2.4.3", "reactstrap": "^8.9.0", "web-vitals": "^1.1.1" }, diff --git a/web/src/App.js b/web/src/App.js index 413c84b6..8c4ea494 100644 --- a/web/src/App.js +++ b/web/src/App.js @@ -1,10 +1,14 @@ import './App.css'; import Home from './Components/Pages/Home'; import About from './Components/Pages/About'; +import Login from './Components/Pages/Login'; import Navigation from './Components/Pages/Navigation'; + import { Route, Switch, HashRouter } from 'react-router-dom'; import { connect } from "react-redux"; +import { ToastProvider, useToasts } from 'react-toast-notifications'; + import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; function mapStateToProps(state) { @@ -18,19 +22,22 @@ function mapDispatchToProps(dispatch) { logIn: () => dispatch({type: true}), logOut: () => dispatch({type: false}) }; - } -const App = (props) => { +const App = () => { + let exact = true return ( -
- - - - - -
+ +
+ + + + + + +
+ ); } diff --git a/web/src/Components/Pages/About.css b/web/src/Components/Pages/About.css index 2d36d9fe..5f995ce1 100644 --- a/web/src/Components/Pages/About.css +++ b/web/src/Components/Pages/About.css @@ -1,4 +1,4 @@ .aboutBody { - padding-top: 20px; + padding: 20px 5px 5px 5px; font-size: 16pt; } \ No newline at end of file diff --git a/web/src/Components/Pages/Login.css b/web/src/Components/Pages/Login.css new file mode 100644 index 00000000..817da866 --- /dev/null +++ b/web/src/Components/Pages/Login.css @@ -0,0 +1,10 @@ +.loginBody { + padding: 20px 5px 5px 5px; + font-size: 16pt; +} + +.loginButton { + height: 50px; + width: 295px; + margin-top:-5px; +} \ No newline at end of file diff --git a/web/src/Components/Pages/Login.js b/web/src/Components/Pages/Login.js index 2eb6a64e..8104a770 100644 --- a/web/src/Components/Pages/Login.js +++ b/web/src/Components/Pages/Login.js @@ -1,22 +1,106 @@ import React from 'react'; +import '../../App.css'; +import './Login.css'; +import { Button } from 'reactstrap'; -export default function Login() { - return( -
-

Please Log In

-
- - -
- -
-
+import { ToastProvider, useToasts } from 'react-toast-notifications'; + +// const FormWithToasts = () => { +// const { addToast } = useToasts(); + +// const onSubmit = async value => { +// // const { error } = await dataPersistenceLayer(value); + +// if (error) { +// addToast(error.message, { appearance: 'error' }); +// } else { +// addToast('Saved Successfully', { appearance: 'success' }); +// } +// }; + +// return
...
; +// }; +// const { addToast } = useToasts(); + + +class About extends React.Component { + constructor(props) { + super(props); + this.state = {username: '', password: ''}; + this.handleUsernameChange = this.handleUsernameChange.bind(this); + this.handlePasswordChange = this.handlePasswordChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + } + handleUsernameChange(event) { + this.setState({username: event.target.value}); + // addToast(error.message, { appearance: 'error' }); + + } + + handlePasswordChange(event) { + this.setState({password: event.target.value}); + } + + + handleSubmit(event) { + event.preventDefault(); + const requestOptions = { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + username: this.state.username, + password: this.state.password, + }) + }; + const apiUrl = 'http://127.0.0.1:42069/api/v1/login'; + fetch(apiUrl, requestOptions) + .then((response) => response.json()) + .then((data) => function() { + + + + + + + }); + } + + render() { + return ( +
+

+ Login +

+
+
+ +
+ +

+ +
+
- ) - } \ No newline at end of file + ); + } +} + +export default About; diff --git a/web/src/Components/Pages/Navigation.js b/web/src/Components/Pages/Navigation.js index a1fafb42..c4ab9903 100644 --- a/web/src/Components/Pages/Navigation.js +++ b/web/src/Components/Pages/Navigation.js @@ -11,7 +11,10 @@ const menuItems = [ class Navigation extends Component { constructor(props) { super(props); - this.state = { isLoggedIn: false }; + // Yeah I know you might not hit home.. but I can't get the + // path based finder thing working on initial load :sweatsmile: + console.log(this.props.initLocation) + this.state = { isLoggedIn: false, active: "Home" }; } toggleLogin() { @@ -23,33 +26,32 @@ class Navigation extends Component { } render() { - const activeStyle = { color: '#FFF' }; + const activeStyle = { color: '#FFFFFF' }; const renderAuthButton = () => { if (this.state.isLoggedIn) { - return Logout; + return Logout; } else { - return Login; + return Login; } } return (
- GoScrobble + GoScrobble {menuItems.map(menuItem => - - {menuItem} - - )} - - Home - About - {renderAuthButton()} + + {menuItem} + + )} + {renderAuthButton()}
);