Skip to content

Added routing in the app #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cnp96 wants to merge 1 commit into
base: v2-react-demo
Choose a base branch
from
Open

Added routing in the app #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
234 changes: 198 additions & 36 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
36 changes: 19 additions & 17 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,28 @@
<!doctype html>
<html lang="en">
<head>
<script src = "https://auth.lrcontent.com/v2/LoginRadiusV2.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

<title>Login Radius Demo</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

<script type="text/html" id="loginradiuscustom_tmpl">
<title>Login Radius React Demo</title>
</head>

<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>

<script src="https://auth.lrcontent.com/v2/LoginRadiusV2.js"></script>
<script type="text/html" id="loginradiuscustom_tmpl">
<a class="lr-provider-label" href="javascript:void(0)" onclick="return <#=ObjectName#>.util.openWindow('<#= Endpoint #>&callback=<#= window.location #>');" title="<#= Name #>" alt="Sign in with <#=Name#>">
<#=Name#>
</a>
</script>
</body>
</body>

</html>
</html>
172 changes: 63 additions & 109 deletions src/Components/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (<LoggedIn handleBack={this.handleBack} />);
case "Email":
return (
<div>
<h1>Email Verified!</h1>
<button onClick={this.handleBack}> Back</button>
</div>);
case "Home":
return (<Start handler={this.handleLoggedIn}/>);
case "Reset":
return (<div><h1>Reset Your Password!</h1><ResetPassword handler={this.handleBack} /></div>);
default:
return (<Start handler={this.handleLoggedIn}/>)
}


}
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 <Switch>
{/* Protected Routes */}
<Route exact path="/home" render={() => isLoggedIn
? <Home handler={this._onLogout} profile={profile} /> : <Redirect to="/login" />} />

{/* Public Routes */}
<Route exact path="/start" render={() => <Start handler={this._onLogout} profile={this.state.profile} />} />
<Route exact path="/login" render={() => <Login handler={this._onLogin} />} />
<Route exact path="/register" component={Register} />
<Route exact path="/forgot-password" component={ForgotPassword} />
<Route exact path="/resend-verification-email" component={EmailResend} />

{/* Default Route */}
<Redirect to="/start" />
</Switch>
}
}


export default App;
export default withRouter(App);
52 changes: 26 additions & 26 deletions src/Components/ChangePassword.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div>
<h3> Change Your Password </h3>
<div id="changepassword-container"></div>
<button onClick = {this.props.action}> Back </button>
</div>
)
}

render() {
return (
<div>
<h3> Change Your Password </h3>
<div id="changepassword-container"></div>
<button onClick={this.props.action}> Back </button>
</div>
)
}
}
export default ChangePassword;
54 changes: 27 additions & 27 deletions src/Components/EmailResend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div>
<h3> Resend Email </h3>
<div id="resend-email-container"></div>
<button onClick={this.props.action}> Back</button>
</div>
render() {
return (
<div>
<h3> Resend Email </h3>
<div id="resend-email-container"></div>
<button onClick={this.props.history.goBack}> Back</button>
</div>

)
}
)
}
}
export default EmailResend;
export default withRouter(EmailResend);
Loading