diff --git a/package-lock.json b/package-lock.json index 171db01..8ed2924 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,6 +4,21 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@babel/runtime": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.3.tgz", + "integrity": "sha512-fVHx1rzEmwB130VTkLnxR+HmxcTjGzH12LYQcFFoBwakMd3aOMD4OsRN7tGG/UOYE2ektgFrS8uACAoRk1CY0w==", + "requires": { + "regenerator-runtime": "^0.13.2" + }, + "dependencies": { + "regenerator-runtime": { + "version": "0.13.3", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", + "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==" + } + } + }, "@timer/detect-port": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@timer/detect-port/-/detect-port-1.1.3.tgz", @@ -2457,7 +2472,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -2478,12 +2494,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2498,17 +2516,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -2625,7 +2646,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -2637,6 +2659,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2651,6 +2674,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -2658,12 +2682,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -2682,6 +2708,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -2762,7 +2789,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -2774,6 +2802,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -2859,7 +2888,8 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -2895,6 +2925,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -2914,6 +2945,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -2957,12 +2989,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -5097,7 +5131,8 @@ "ansi-regex": { "version": "2.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ansi-styles": { "version": "2.2.1", @@ -5154,7 +5189,8 @@ "balanced-match": { "version": "0.4.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "bcrypt-pbkdf": { "version": "1.0.0", @@ -5169,6 +5205,7 @@ "version": "0.0.9", "bundled": true, "dev": true, + "optional": true, "requires": { "inherits": "~2.0.0" } @@ -5177,6 +5214,7 @@ "version": "2.10.1", "bundled": true, "dev": true, + "optional": true, "requires": { "hoek": "2.x.x" } @@ -5185,6 +5223,7 @@ "version": "1.1.6", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^0.4.1", "concat-map": "0.0.1" @@ -5193,7 +5232,8 @@ "buffer-shims": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "caseless": { "version": "0.11.0", @@ -5225,12 +5265,14 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "combined-stream": { "version": "1.0.5", "bundled": true, "dev": true, + "optional": true, "requires": { "delayed-stream": "~1.0.0" } @@ -5247,17 +5289,20 @@ "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "cryptiles": { "version": "2.0.5", @@ -5303,7 +5348,8 @@ "delayed-stream": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "delegates": { "version": "1.0.0", @@ -5335,7 +5381,8 @@ "extsprintf": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "forever-agent": { "version": "0.6.1", @@ -5357,12 +5404,14 @@ "fs.realpath": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "fstream": { "version": "1.0.10", "bundled": true, "dev": true, + "optional": true, "requires": { "graceful-fs": "^4.1.2", "inherits": "~2.0.0", @@ -5434,6 +5483,7 @@ "version": "7.1.1", "bundled": true, "dev": true, + "optional": true, "requires": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -5446,7 +5496,8 @@ "graceful-fs": { "version": "4.1.11", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "graceful-readlink": { "version": "1.0.1", @@ -5496,7 +5547,8 @@ "hoek": { "version": "2.16.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "http-signature": { "version": "1.1.1", @@ -5513,6 +5565,7 @@ "version": "1.0.6", "bundled": true, "dev": true, + "optional": true, "requires": { "once": "^1.3.0", "wrappy": "1" @@ -5521,7 +5574,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.4", @@ -5533,6 +5587,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5564,7 +5619,8 @@ "isarray": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "isstream": { "version": "0.1.2", @@ -5619,12 +5675,14 @@ "mime-db": { "version": "1.25.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "mime-types": { "version": "2.1.13", "bundled": true, "dev": true, + "optional": true, "requires": { "mime-db": "~1.25.0" } @@ -5633,6 +5691,7 @@ "version": "3.0.3", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.0.0" } @@ -5640,12 +5699,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "mkdirp": { "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -5697,7 +5758,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "oauth-sign": { "version": "0.8.2", @@ -5715,6 +5777,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5722,7 +5785,8 @@ "path-is-absolute": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "pinkie": { "version": "2.0.4", @@ -5742,7 +5806,8 @@ "process-nextick-args": { "version": "1.0.7", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "punycode": { "version": "1.4.1", @@ -5823,6 +5888,7 @@ "version": "2.5.4", "bundled": true, "dev": true, + "optional": true, "requires": { "glob": "^7.0.5" } @@ -5883,6 +5949,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -5892,7 +5959,8 @@ "string_decoder": { "version": "0.10.31", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "stringstream": { "version": "0.0.5", @@ -5904,6 +5972,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -5924,6 +5993,7 @@ "version": "2.2.1", "bundled": true, "dev": true, + "optional": true, "requires": { "block-stream": "*", "fstream": "^1.0.2", @@ -6002,7 +6072,8 @@ "util-deprecate": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "uuid": { "version": "3.0.1", @@ -6031,7 +6102,8 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "xtend": { "version": "4.0.1", @@ -6215,6 +6287,11 @@ "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=", "dev": true }, + "gud": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz", + "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==" + }, "gzip-size": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-3.0.0.tgz", @@ -6388,6 +6465,19 @@ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "dev": true }, + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -6399,6 +6489,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-wbg3bpgA/ZqWrZuMOeJi8+SKMhr7X9TesL/rXMjTzh0p0JUBo3II8DHboYbuIXWRlttrUFxwcu/5kygrCw8fJw==", + "requires": { + "react-is": "^16.7.0" + } + }, "home-or-tmp": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz", @@ -8123,6 +8221,16 @@ "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==", "dev": true }, + "mini-create-react-context": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz", + "integrity": "sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==", + "requires": { + "@babel/runtime": "^7.4.0", + "gud": "^1.0.0", + "tiny-warning": "^1.0.2" + } + }, "minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", @@ -8787,7 +8895,6 @@ "version": "1.7.0", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz", "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=", - "dev": true, "requires": { "isarray": "0.0.1" }, @@ -8795,8 +8902,7 @@ "isarray": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", - "dev": true + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" } } }, @@ -10930,6 +11036,42 @@ } } }, + "react-is": { + "version": "16.12.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz", + "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==" + }, + "react-router": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz", + "integrity": "sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.3.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, + "react-router-dom": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.1.2.tgz", + "integrity": "sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.1.2", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, "react-scripts": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-1.0.6.tgz", @@ -11851,6 +11993,11 @@ "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=", "dev": true }, + "resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -12904,6 +13051,16 @@ "setimmediate": "^1.0.4" } }, + "tiny-invariant": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.6.tgz", + "integrity": "sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==" + }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -13364,6 +13521,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index fa66376..3f5ddf9 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,8 @@ "dependencies": { "little-loader": "^0.2.0", "react": "^15.5.4", - "react-dom": "^15.5.4" + "react-dom": "^15.5.4", + "react-router-dom": "^5.1.2" }, "devDependencies": { "cross-env": "^5.2.0", diff --git a/public/index.html b/public/index.html index 5167e9d..637cd04 100644 --- a/public/index.html +++ b/public/index.html @@ -1,26 +1,28 @@ - - - - - - - - Login Radius Demo - - - -
+ + + + + + - + - + - + \ No newline at end of file diff --git a/src/Components/App.js b/src/Components/App.js index 6b12fba..ac8d5f2 100644 --- a/src/Components/App.js +++ b/src/Components/App.js @@ -1,111 +1,65 @@ -import React, {Component} from 'react'; -import Start from './Start.js'; -import {getLoginObject} from '../utils/getLoginObject.js'; -import ResetPassword from './ResetPassword.js'; -import LoggedIn from './LoggedIn'; -import config from '../utils/config.json'; - -// Email Verification needs to occur here because there is only one HTML page - - -let emailVerify; // global variable to check for email verification in home page -let handleReset; - -class App extends Component { - constructor(props) { - super(props); - this.state = { - pageState: "notLogged", - }; - - this.handleEmailVerify = this.handleEmailVerify.bind(this); - this.handleLoggedIn = this.handleLoggedIn.bind(this); - this.handleBack = this.handleBack.bind(this); - this.handleResetPassword = this.handleResetPassword.bind(this); - } - - - componentDidMount() { - let LoginObject = getLoginObject(); - - // verify email options - let verifyemail_options = {}; - verifyemail_options.onSuccess = function (response) { - console.log(response); - emailVerify(); - }; - verifyemail_options.onError = function (errors) { - console.log(errors); - }; - - - // reset password options - var reset_options = {}; - reset_options.container = 'resetpassword-container'; - reset_options.onSuccess = function (response) { - console.log(response); - }; - reset_options.onError = function (errors) { - console.log(errors); - }; - - - // checking for a reset password - if (window.location.href.indexOf("vtype=reset") > -1) { - LoginObject.init('resetPassword', reset_options); - handleReset(); - } - - - // checking if the URL contains the type emailverification string, if not then dont initiate the verify email - if (window.location.href.indexOf("vtype=emailverification") > -1) { - LoginObject.init('verifyEmail', verifyemail_options); - } - } - - - handleLoggedIn() { - this.setState({pageState: "Logged"}) - } - - handleEmailVerify() { - this.setState({pageState: "Email"}) - } - - handleResetPassword() { - this.setState({pageState: "Reset"}) - } - - handleBack() { - // homeURL in config.json holds the appropriate port where the server is listening on: - window.location.assign(config.homeURL); - } - - - render() { - emailVerify = this.handleEmailVerify; - handleReset = this.handleResetPassword; - - switch (this.state.pageState) { - case "Logged": - return (); - case "Email": - return ( -
-

Email Verified!

- -
); - case "Home": - return (); - case "Reset": - return (

Reset Your Password!

); - default: - return () - } - - - } +import React from 'react'; +import { Redirect, Route, Switch, withRouter } from 'react-router-dom'; +import Login from "../Components/Login"; +import Start from "./Start"; +import EmailResend from './EmailResend'; +import ForgotPassword from './ForgotPassword'; +import Register from './Register'; +import Home from './Home'; + +class App extends React.Component { + constructor(props) { + super(props) + this.state = this._defaultState + } + + // Initial state + _defaultState = { + isLoggedIn: false, + profile: undefined + } + + /** + * This handler is called on login success. + * It accepts the user profile as an argument fetched with the login method. + */ + _onLogin = (profile) => { + this.setState({ + isLoggedIn: true, + profile: { + uid: profile.Uid, + name: profile.FullName + } + }, () => this.props.history.push("/home")) + } + + /** + * This handler removed the fetched user data by resetting the state + */ + _onLogout = () => { + this.setState(this._defaultState, () => this.props.history.push("/start")) + } + + render() { + + const { isLoggedIn, profile } = this.state; + + return + {/* Protected Routes */} + isLoggedIn + ? : } /> + + {/* Public Routes */} + } /> + } /> + + + + + {/* Default Route */} + + + } } - -export default App; +export default withRouter(App); \ No newline at end of file diff --git a/src/Components/ChangePassword.js b/src/Components/ChangePassword.js index 9bf2294..0acc23b 100644 --- a/src/Components/ChangePassword.js +++ b/src/Components/ChangePassword.js @@ -1,33 +1,33 @@ -import React, {Component} from 'react'; -import {getLoginObject} from '../utils/getLoginObject.js'; -import {handleError} from '../utils/handleError'; +import React, { Component } from 'react'; +import LRObject from '../utils/getLoginObject.js'; +import { handleError } from '../utils/handleError'; class ChangePassword extends Component { - componentDidMount() { - let LRObject = getLoginObject(); + componentDidMount() { + let changepassword_options = {}; + changepassword_options.container = 'changepassword-container'; - let changepassword_options = {}; - changepassword_options.container = 'changepassword-container'; - changepassword_options.onSuccess = function (response) { - console.log(response); - alert("Succesfully Changed") - }; - changepassword_options.onError = function (errors) { - console.log(errors); - alert(handleError(errors)); - }; - LRObject.init('changePassword', changepassword_options); - } + changepassword_options.onSuccess = function (response) { + console.log(response); + alert("Succesfully Changed") + }; + changepassword_options.onError = function (errors) { + console.log(errors); + alert(handleError(errors)); + }; + LRObject.init('changePassword', changepassword_options); + } - render() { - return ( -
-

Change Your Password

-
- -
- ) - } + + render() { + return ( +
+

Change Your Password

+
+ +
+ ) + } } export default ChangePassword; \ No newline at end of file diff --git a/src/Components/EmailResend.js b/src/Components/EmailResend.js index 5761035..9f2d343 100644 --- a/src/Components/EmailResend.js +++ b/src/Components/EmailResend.js @@ -1,34 +1,34 @@ -import React, {Component} from 'react'; -import {getLoginObject} from '../utils/getLoginObject'; -import {handleError} from '../utils/handleError'; +import React, { Component } from 'react'; +import LRObject from '../utils/getLoginObject'; +import { formatErrorMessage } from '../utils/handleError'; +import { withRouter } from 'react-router-dom'; class EmailResend extends Component { - componentDidMount() { - let LRObject = getLoginObject(); + componentDidMount() { + let resend_email_options = {}; + resend_email_options.container = 'resend-email-container'; - let resend_email_options = {}; - resend_email_options.container = 'resend-email-container'; - resend_email_options.onSuccess = function (response) { - console.log(response); - alert("Successfully Resent"); - }; - resend_email_options.onError = function (errors) { - console.log(errors); - alert(handleError(errors)); - }; - LRObject.init('resendVerificationEmail', resend_email_options); + resend_email_options.onSuccess = function (response) { + console.log(response); + alert("Successfully Resent"); + }; + resend_email_options.onError = function (errors) { + console.log(errors); + alert(formatErrorMessage(errors)); + }; - } + LRObject.init('resendVerificationEmail', resend_email_options); + } - render() { - return ( -
-

Resend Email

-
- -
+ render() { + return ( +
+

Resend Email

+
+ +
- ) - } + ) + } } -export default EmailResend; \ No newline at end of file +export default withRouter(EmailResend); \ No newline at end of file diff --git a/src/Components/ForgotPassword.js b/src/Components/ForgotPassword.js index 3d6b8d6..f927965 100644 --- a/src/Components/ForgotPassword.js +++ b/src/Components/ForgotPassword.js @@ -1,36 +1,35 @@ -import React, {Component} from 'react'; -import {getLoginObject} from '../utils/getLoginObject'; -import {handleError} from '../utils/handleError'; +import React, { Component } from 'react'; +import LRObject from '../utils/getLoginObject'; +import { formatErrorMessage } from '../utils/handleError'; +import { withRouter } from 'react-router-dom'; class ForgotPassword extends Component { - componentDidMount() { - let LRObject = getLoginObject(); + componentDidMount() { + let forgotpassword_options = {}; + forgotpassword_options.container = 'forgotpassword-container'; + forgotpassword_options.onSuccess = function (response) { + console.log(response); + alert("Succesfully Sent") + }; + forgotpassword_options.onError = function (errors) { + console.log(errors); + alert(formatErrorMessage(errors)); + }; + LRObject.init('forgotPassword', forgotpassword_options); + } - let forgotpassword_options = {}; - forgotpassword_options.container = 'forgotpassword-container'; - forgotpassword_options.onSuccess = function (response) { - console.log(response); - alert("Succesfully Sent") - }; - forgotpassword_options.onError = function (errors) { - console.log(errors); - alert(handleError(errors)); - }; - LRObject.init('forgotPassword', forgotpassword_options); - } + render() { + return ( +
+

Forgot Password

+
+ +
- render() { - return ( -
-

Forgot Password

-
- -
- - ) - } + ) + } } -export default ForgotPassword; \ No newline at end of file +export default withRouter(ForgotPassword); \ No newline at end of file diff --git a/src/Components/Home.js b/src/Components/Home.js new file mode 100644 index 0000000..80d125c --- /dev/null +++ b/src/Components/Home.js @@ -0,0 +1,13 @@ +import React from 'react'; + +const Home = props => { + const { profile } = props; + return ( +
+

Welcome {profile.uid} ({profile.name})

+ +
+ ) +} + +export default Home; \ No newline at end of file diff --git a/src/Components/Login.js b/src/Components/Login.js index 3986390..e76f1dd 100644 --- a/src/Components/Login.js +++ b/src/Components/Login.js @@ -1,56 +1,39 @@ -import React, {Component} from 'react'; -import {getLoginObject} from '../utils/getLoginObject'; -import {handleError} from '../utils/handleError'; +import React, { Component } from 'react'; +import LRObject from '../utils/getLoginObject'; +import { formatErrorMessage } from '../utils/handleError'; import SocialLogin from './SocialLogin.js' - -var changeState; // need a global variable to access it in JS +import { withRouter } from 'react-router-dom'; class Login extends Component { - constructor(props) { - super(props); - // props: - //-- action: function to determine what state the app is in based on click event. - //-- handler: function to execute when login attempt is successful. - this.state = { - email: "", - password: "", - data: "" - }; - - } - - componentDidMount() { - let LoginObject = getLoginObject(); - let login_options = {}; + componentDidMount() { + let login_options = {}; + + login_options.container = 'login-container'; + login_options.onSuccess = (response) => { + if (response.access_token) { + this.props.handler(response.Profile); + } + }; - login_options.container = 'login-container'; - login_options.onSuccess = function (response) { - console.log(response); - if (response.access_token) { - changeState(); - } - }; - - login_options.onError = function (errors) { - console.log(errors); - alert(handleError(errors)); - }; - - LoginObject.init('login', login_options); + login_options.onError = (errors) => { + console.log(errors); + alert(formatErrorMessage(errors)); }; + LRObject.init('login', login_options); + }; + - render() { - changeState = this.props.handler; // associating the global variable with the prop - return ( -
-

Login

-
- - -
- ) - } + render() { + return ( +
+

Login

+
+ + +
+ ) + } } -export default Login; \ No newline at end of file +export default withRouter(Login); \ No newline at end of file diff --git a/src/Components/ManageEmails/AddEmail.js b/src/Components/ManageEmails/AddEmail.js index f132015..c993496 100644 --- a/src/Components/ManageEmails/AddEmail.js +++ b/src/Components/ManageEmails/AddEmail.js @@ -1,36 +1,38 @@ -import React, {Component} from 'react'; -import {getLoginObject} from '../../utils/getLoginObject.js'; -import {handleError} from '../../utils/handleError'; +import React, { Component } from 'react'; +import LRObject from '../../utils/getLoginObject.js'; +import { handleError } from '../../utils/handleError'; class AddEmail extends Component { - componentDidMount() { - let LRObject = getLoginObject(); - let addEmailOptions = {}; - addEmailOptions.container = 'add-email-container'; - addEmailOptions.onSuccess = function (response) { - console.log(response); - alert("Successfully Added") - }; - addEmailOptions.onError = function (errors) { - console.log(errors); - alert(handleError(errors)); - - }; - LRObject.init('addEmail', addEmailOptions); - } - - - render() { - return ( -
-

Add an Email

-
- -
- ) - } + componentDidMount() { + let LRObject = getLoginObject(); + let addEmailOptions = {}; + addEmailOptions.container = 'add-email-container'; + + addEmailOptions.onSuccess = function (response) { + console.log(response); + alert("Successfully Added") + }; + addEmailOptions.onError = function (errors) { + console.log(errors); + alert(handleError(errors)); + + }; + + LRObject.init('addEmail', addEmailOptions); + } + + + render() { + return ( +
+

Add an Email

+
+ +
+ ) + } } export default AddEmail \ No newline at end of file diff --git a/src/Components/ManageEmails/ManageEmails.js b/src/Components/ManageEmails/ManageEmails.js index 7ae42d3..d9fd266 100644 --- a/src/Components/ManageEmails/ManageEmails.js +++ b/src/Components/ManageEmails/ManageEmails.js @@ -1,63 +1,60 @@ -import React, {Component} from 'react'; -import AddEmail from './AddEmail.js' -import RemoveEmail from './RemoveEmail.js' +import React, { Component } from 'react'; +import AddEmail from './AddEmail.js'; +import RemoveEmail from './RemoveEmail.js'; class ManageEmails extends Component { - constructor(props) { - super(props); - this.handleEventClick = this.handleEventClick.bind(this); - this.toRenderHandler = this.toRenderHandler.bind(this); - this.state = { - current: "" - }; - this.handleEventClick = this.handleEventClick.bind(this); - this.toRenderHandler = this.toRenderHandler.bind(this); - } - - - handleEventClick(event) { - this.state.current === event ? this.setState({current: ""}) : this.setState({current: event}); - } - - - toRenderHandler() { - switch (this.state.current) { - case "AddEmail": - return ( - - ); - case "RemoveEmail": - return ( - - ); - default: - return ( -
- -
- -
- -
- ) - - } - } - - - - - render() { + constructor(props) { + super(props); + this.handleEventClick = this.handleEventClick.bind(this); + this.toRenderHandler = this.toRenderHandler.bind(this); + this.state = { + current: "" + }; + this.handleEventClick = this.handleEventClick.bind(this); + this.toRenderHandler = this.toRenderHandler.bind(this); + } + + + handleEventClick(event) { + this.state.current === event ? this.setState({ current: "" }) : this.setState({ current: event }); + } + + + toRenderHandler() { + switch (this.state.current) { + case "AddEmail": return ( -
- {this.toRenderHandler()} -
+ + ); + case "RemoveEmail": + return ( + + ); + default: + return ( +
+ +
+ +
+ +
) + } + } + + render() { + return ( +
+ {this.toRenderHandler()} +
+ ) + } } diff --git a/src/Components/ManageEmails/RemoveEmail.js b/src/Components/ManageEmails/RemoveEmail.js index 546ce67..8f454f1 100644 --- a/src/Components/ManageEmails/RemoveEmail.js +++ b/src/Components/ManageEmails/RemoveEmail.js @@ -1,14 +1,15 @@ -import React, {Component} from 'react'; -import {getLoginObject} from '../../utils/getLoginObject.js'; -import {handleError} from '../../utils/handleError'; +import React, { Component } from 'react'; +import LRObject from '../../utils/getLoginObject.js'; +import { handleError } from '../../utils/handleError'; +import { withRouter } from 'react-router-dom'; class RemoveEmail extends Component { componentDidMount() { - let LRObject = getLoginObject(); - var remove_email_options = {}; + let remove_email_options = {}; remove_email_options.container = 'removeemail-container'; + remove_email_options.onSuccess = function (response) { console.log(response); alert("Successfully Removed") @@ -18,6 +19,7 @@ class RemoveEmail extends Component { alert(handleError(errors)); }; + LRObject.init('removeEmail', remove_email_options); } @@ -27,10 +29,10 @@ class RemoveEmail extends Component {

Remove An Email

- +
) } } -export default RemoveEmail \ No newline at end of file +export default withRouter(RemoveEmail) \ No newline at end of file diff --git a/src/Components/Register.js b/src/Components/Register.js index aeabf62..d2e6cb4 100644 --- a/src/Components/Register.js +++ b/src/Components/Register.js @@ -1,33 +1,35 @@ -import React, {Component} from 'react'; -import {getLoginObject} from '../utils/getLoginObject'; -import {handleError} from '../utils/handleError'; +import React, { Component } from 'react'; +import LRObject from '../utils/getLoginObject'; +import { formatErrorMessage } from '../utils/handleError'; +import { withRouter } from 'react-router-dom'; class Register extends Component { - componentDidMount() { - let LoginObject = getLoginObject(); - var registration_options = {}; - registration_options.container = 'registration-container'; - registration_options.onSuccess = function (response) { - console.log(response); - alert("Successfully Registered"); - }; - registration_options.onError = function (errors) { - console.log(errors); - alert(handleError(errors)); - }; - LoginObject.init('registration', registration_options); - } + componentDidMount() { + let registration_options = {}; + registration_options.container = 'registration-container'; - render() { - return ( -
-

Register

-
- -
- ) - } + registration_options.onSuccess = function (response) { + console.log(response); + alert("Successfully Registered"); + }; + registration_options.onError = function (errors) { + console.log(errors); + alert(formatErrorMessage(errors)); + }; + + LRObject.init('registration', registration_options); + } + + render() { + return ( +
+

Register

+
+ +
+ ) + } } -export default Register; \ No newline at end of file +export default withRouter(Register); \ No newline at end of file diff --git a/src/Components/ResetPassword.js b/src/Components/ResetPassword.js index 07f6758..7f99f00 100644 --- a/src/Components/ResetPassword.js +++ b/src/Components/ResetPassword.js @@ -1,39 +1,36 @@ -import React, {Component} from 'react'; -import {getLoginObject} from '../utils/getLoginObject'; -import {handleError} from '../utils/handleError'; - - -let goBack; // Initialized to go back to the home page after success change +import React, { Component } from 'react'; +import LRObject from '../utils/getLoginObject'; +import { handleError } from '../utils/handleError'; +import { withRouter } from 'react-router-dom'; class ResetPassword extends Component { - componentDidMount() { - let LRObject = getLoginObject(); - - let reset_options = {}; - reset_options.container = 'resetpassword-container'; - reset_options.onSuccess = function (response) { - console.log(response); - alert("Succesfully Changed"); - goBack(); - }; - reset_options.onError = function (errors) { - console.log(errors); - alert(handleError(errors)); - }; - LRObject.init('resetPassword', reset_options); - } - - - render() { - goBack = this.props.handler; - return ( -
-
- -
- - ) - } + componentDidMount() { + let reset_options = {}; + reset_options.container = 'resetpassword-container'; + + reset_options.onSuccess = function (response) { + console.log(response); + alert("Succesfully Changed"); + this.props.handler(); + }; + reset_options.onError = function (errors) { + console.log(errors); + alert(handleError(errors)); + }; + + LRObject.init('resetPassword', reset_options); + } + + + render() { + return ( +
+
+ +
+ + ) + } } -export default ResetPassword \ No newline at end of file +export default withRouter(ResetPassword) \ No newline at end of file diff --git a/src/Components/SocialLogin.js b/src/Components/SocialLogin.js index c8772da..3f3bf62 100644 --- a/src/Components/SocialLogin.js +++ b/src/Components/SocialLogin.js @@ -1,40 +1,36 @@ -import React, {Component} from 'react'; -import {getLoginObject} from '../utils/getLoginObject'; -import {commonOptions} from '../utils/getLoginObject'; -import {handleError} from '../utils/handleError'; - - -let handleState; // global variable to handle login event from social login +import React, { Component } from 'react'; +import LRObject from '../utils/getLoginObject'; +import { commonOptions } from '../utils/getLoginObject'; +import { formatErrorMessage } from '../utils/handleError'; class SocialLogin extends Component { - componentDidMount() { - let LoginObject = getLoginObject(); - LoginObject.customInterface(".interfacecontainerdiv", commonOptions); - - - let sl_options = {}; - sl_options.onSuccess = function (response) { - console.log(response); - handleState(); - }; - sl_options.onError = function (errors) { - console.log(errors); - alert(handleError(errors)); - }; - sl_options.container = "sociallogin-container"; - LoginObject.init('socialLogin', sl_options); - } - - render() { - handleState = this.props.handler; - return ( -
-
-
-
- ) - } + componentDidMount() { + LRObject.customInterface(".interfacecontainerdiv", commonOptions); + + let sl_options = {}; + sl_options.container = "sociallogin-container"; + + sl_options.onSuccess = function (response) { + console.log(response); + this.props.onLoginSuccess() + }; + sl_options.onError = function (errors) { + console.log(errors); + alert(formatErrorMessage(errors)); + }; + + LRObject.init('socialLogin', sl_options); + } + + render() { + return ( +
+
+
+
+ ) + } } diff --git a/src/Components/Start.js b/src/Components/Start.js index 9dcc834..e5ea1dc 100644 --- a/src/Components/Start.js +++ b/src/Components/Start.js @@ -1,74 +1,27 @@ -import React, {Component} from 'react'; -import Register from './Register.js'; -import Login from './Login.js'; -import ForgotPassword from './ForgotPassword.js' -import EmailResend from './EmailResend.js' - - - +import React, { Component } from 'react'; +import { withRouter } from 'react-router-dom'; class Start extends Component { - constructor(props) { - super(props); - this.state = { - current: "" - }; - - this.toRenderHandler = this.toRenderHandler.bind(this); - this.handleEventClick = this.handleEventClick.bind(this); - } - - handleEventClick(event) { - this.state.current === event ? this.setState({current: ""}) : this.setState({current: event}) - } - - - toRenderHandler() { - switch (this.state.current) { - case "Login": - return ( - - ); - case "Register": - return ( - - ); - case "ForgotPassword": - return ( - - ); - case "EmailResend": - return ( - - ); - default: - return ( -
- -
- -
- -
- -
-
- ) - - } - } - - render() { - return ( -
-

Loginradius React Demo

- {this.toRenderHandler()} -
- ); - } + render() { + return ( +
+

LoginRadius React Demo

+
+ +
+ +
+ +
+ +
+
+
+ ) + } } -export default Start; \ No newline at end of file +export default withRouter(Start); \ No newline at end of file diff --git a/src/index.js b/src/index.js index aeceac3..0ae093b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,10 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './Components/App'; +import { BrowserRouter } from 'react-router-dom'; -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render( + + + , + document.getElementById('root')); diff --git a/src/utils/getLoginObject.js b/src/utils/getLoginObject.js index 54c1da4..1f127d3 100644 --- a/src/utils/getLoginObject.js +++ b/src/utils/getLoginObject.js @@ -3,22 +3,16 @@ import config from './config.json' export let commonOptions = { apiKey: config.apiKey, appName: config.appName, - hashTemplate: true, sott: config.sott, - templateName: 'loginradiuscustom_tmpl', forgotPasswordUrl: config.homeURL, verificationUrl: config.homeURL, - // Prevent passwordless login buttons from appearing - this is a basic demo with minimal features + hashTemplate: true, + templateName: 'loginradiuscustom_tmpl', passwordlessLogin: false, passwordlessLoginOTP: false }; /** - * Returns the singleton LoginRadius object. + * A singleton LoginRadius object. */ -export function getLoginObject() { - if (typeof window.LRObject === 'undefined') { - window.LRObject = new window.LoginRadiusV2(commonOptions); - } - return window.LRObject; -} \ No newline at end of file +export default new window.LoginRadiusV2(commonOptions) \ No newline at end of file diff --git a/src/utils/handleError.js b/src/utils/handleError.js index 2d4fe64..3e7e0c3 100644 --- a/src/utils/handleError.js +++ b/src/utils/handleError.js @@ -1,4 +1,4 @@ -export function handleError(response) { +export function formatErrorMessage(response) { let final = ""; for(let i of response) { final += i.Message + "\n";