role: Role;

username: string;

name: string;

organization: string;

autoLogout: boolean;

constructor(props: {}) {

super(props);

// set the original state based on session storage

const jsonData = sessionStorage.getItem('mySessionStorageData');

const jsonLogout = sessionStorage.getItem('autoLogout');

if (jsonData && jsonLogout) {

const data = JSON.parse(jsonData);

const logout = JSON.parse(jsonLogout);

this.state = {

role: data.role,

username: data.username,

name: data.name,

organization: data.organization,

autoLogout: logout,

};

} else {

this.state = {

role: Role.LoggedOut,

username: '',

name: '',

organization: '',

autoLogout: false,

};

}

this.logIn = this.logIn.bind(this);

this.logOut = this.logOut.bind(this);

this.setAutoLogout = this.setAutoLogout.bind(this);

}

// this function is needed to tell the home page that the user was logged out automatically

// or remove that notification

setAutoLogout(logout: boolean) {

this.setState({

autoLogout: logout,

});

const obj = { autoLogout: this.state.autoLogout };

sessionStorage.setItem('autoLogout', JSON.stringify(obj));

}

logIn(role: Role, username: string, organization: string, name: string) {

this.setState({

role,

username,

name,

organization,

});

const obj = { role, username, name, organization };

sessionStorage.setItem('mySessionStorageData', JSON.stringify(obj));

}

logOut() {

this.setState({

username: '',

name: '',

organization: '',

role: Role.LoggedOut,

});

fetch(`${getServerURL()}/logout`, {

method: 'GET',

credentials: 'include',

});

sessionStorage.clear();

}

componentDidMount() {

fetch(`${getServerURL()}/authenticate`, {

method: 'POST',

credentials: 'include',

})

.then((response) => response.json())

.then((responseJSON) => {

const {

status,

userRole,

organization,

username,

firstName,

lastName,

} = responseJSON;

if (status === 'AUTH_SUCCESS') {

const role = () => {

switch (userRole) {

case 'Director':

return Role.Director;

case 'Admin':

return Role.Admin;

case 'Worker':

return Role.Worker;

case 'Client':

return Role.Client;

case 'Developer':

return Role.Developer;

default:

return Role.LoggedOut;

}

};

// if the session storage does not match the authentication, logout

const jsonData = sessionStorage.getItem('mySessionStorageData');

if (jsonData) {

const data = JSON.parse(jsonData);

if (

!(

role() === data.role &&

username === data.username &&

organization === data.organization

) &&

data.name === `${firstName} ${lastName}`

) {

this.logOut();

}

} else {

// Server has a valid session but client has no local data.

// This happens after Google OAuth login redirect — trust the

// server and log in locally instead of destroying the session.

this.logIn(role(), username, organization, `${firstName} ${lastName}`);

}

} else {

this.logOut();

}

})

.catch((e) => {

console.log('Server is not running: ', e);

});

}

render() {

const { role, username, name, organization, autoLogout } = this.state;

const renderHome = () => (

<Home

logIn={this.logIn}

logOut={this.logOut}

role={role}

autoLogout={autoLogout}

setAutoLogout={this.setAutoLogout}

/>

);

return (

<Router>

<UserContext.Provider value={{ username: this.state.username, organization: this.state.organization }}>

<div className="App tw-flex tw-flex-col tw-min-h-screen">

<div className="app tw-flex-1 tw-pb-12">

<Helmet>

<title>Keep.id</title>

<meta

name="description"

content="Securely Combating Homelessness"

/>

</Helmet>

<Header

isLoggedIn={role !== Role.LoggedOut}

logIn={this.logIn}

logOut={this.logOut}

role={role}

/>

{role !== Role.LoggedOut ? (

<AutoLogout

logOut={this.logOut}

setAutoLogout={this.setAutoLogout}

timeUntilWarn={1000 * 60 * 60}

timeFromWarnToLogout={1000 * 60 * 15}

timeBeforeConsideredSleep={1000 * 60 * 60 * 24 * 30}

/>

) : null}

<Switch>

<Route exact path="/" render={() => <Redirect to="/home" />} />

<Route path="/our-team">

<OurTeam />

</Route>

<Route path="/our-partners">

<OurPartners />

</Route>

<Route path="/privacy-policy">

<PrivacyPolicy />

</Route>

<Route

path="/eula"

render={() => {

if (role !== Role.LoggedOut) {

return <EULA />;

}

return renderHome();

}}

/>

<Route

path="/eula"

render={() => {

if (role === Role.Admin || role === Role.Director) {

return <AdminDashboard />;

}

return renderHome();

}}

/>

<Route path="/careers">

<Careers />

</Route>

<Route path="/issue-report">

<IssueReport

designatedHeader="Report an Issue"

designatedSubHeader="Thank you for helping us identify issues with our platform."

/>

</Route>

<Route path="/leave-feedback">

<IssueReport

designatedHeader="Leave Feedback"

designatedSubHeader="Thank you for helping us with your personalized feedback about our platform."

/>

</Route>

<Route path="/forgot-password">

<ForgotPassword />

</Route>

<Route path="/reset-password/:jwt">

<ResetPassword />

</Route>

<Route

path="/home"

render={() => {

if (

role === Role.Director ||

role === Role.Admin ||

role === Role.Worker

) {

return (

<WorkerLanding

name={name}

organization={organization}

username={username}

role={role}

/>

);

}

if (role === Role.Client) {

return <ClientLanding name={name} username={username} />;

}

if (role === Role.Developer) {

return (

<DevPanel

name={name}

organization={organization}

username={username}

role={role}

/>

);

}

return renderHome();

}}

/>

<Route

path="/find-organizations"

render={() => <Redirect to="/home" />}

/>

<Route

path="/login"

render={() => <Redirect to="/home" />}

/>

{/* Admin Panel route removed - functionality moved to My Organization page */}

<Route

path="/dev-panel"

render={() => {

if (role === Role.Director || role === Role.Admin) {

return (

<DevPanel

userRole={role}

name={name}

organization={organization}

username={username}

/>

);

}

if (role === Role.LoggedOut) {

return renderHome();

}

return <Redirect to="/error" />;

}}

/>

<Route

path="/upload-document/:clientUsername"

render={(props) => {

const { clientUsername } = props.match.params;

if (

role === Role.Admin ||

role === Role.Director ||

role === Role.Worker ||

role === Role.Client

) {

return (

<UploadDocs

userRole={Role.Client}

username={clientUsername}

/>

);

}

if (role === Role.LoggedOut) {

return renderHome();

}

return <Redirect to="/error" />;

}}

/>

<Route

path="/upload-document"

render={() => {

if (

role === Role.Client ||

role === Role.Admin ||

role === Role.Director ||

role === Role.Worker ||

role === Role.Developer

) {

return <UploadDocs userRole={role} username={username} />;

}

return renderHome();

}}

/>

<Route

path="/my-documents/:clientUsername"

render={(props) => {

const { clientUsername } = props.match.params;

const locState = props.location.state as { clientName?: string } | undefined;

if (

role === Role.Admin ||

role === Role.Worker ||

role === Role.Developer ||

role === Role.Client

) {

return (

<MyDocuments

userRole={Role.Client}

viewerRole={role}

username={clientUsername}

clientName={locState?.clientName}

/>

);

}

return renderHome();

}}

/>

<Route

path="/my-documents"

render={() => {

if (

role === Role.Client ||

role === Role.Admin ||

role === Role.Director ||

role === Role.Worker ||

role === Role.Developer

) {

return <MyDocuments userRole={role} viewerRole={role} username={username} />;

}

return renderHome();

}}

/>

<Route

path="/applications/createnew"

render={() => {

if (

role === Role.Client ||

role === Role.Admin ||

role === Role.Worker ||

role === Role.Developer

) {

return (

<CreateApplication userRole={role} />

);

}

if (role === Role.LoggedOut) {

return renderHome();

}

return <Redirect to="/error" />;

}}

/>

<Route

path="/applications"

render={({ location }) => {

if (

role === Role.Client ||

role === Role.Admin ||

role === Role.Worker ||

role === Role.Developer

) {

return (

<ViewApplications

name={name}

organization={organization}

username={username}

role={role}

/>

);

}

if (role === Role.LoggedOut) {

return renderHome();

}

return <Redirect to="/error" />;

}}

/>

<Route path="/quick-access">

<QuickAccessRouter />

</Route>

<Route

path="/settings"

render={() => {

if (role !== Role.LoggedOut) {

return <Redirect to="/profile" />;

}

if (role === Role.LoggedOut) {

return renderHome();

}

return <Redirect to="/error" />;

}}

/>

<Route

path="/profile"

exact

render={() => {

if (role !== Role.LoggedOut) {

return <ProfilePage />;

}

return renderHome();

}}

/>

<Route

path="/my-organization"

render={() => {

if (role === Role.Director || role === Role.Admin) {

return (

<MyOrganization

name={name}

organization={organization}

role={role}

/>

);

}

if (role === Role.LoggedOut) {

return renderHome();

}

return <Redirect to="/error" />;

}}

/>

<Route

path="/profile/:username"

render={(props) => {

const clientUsername = props.match.params.username;

if (role !== Role.LoggedOut) {

return <ProfilePage targetUsername={clientUsername} />;

}

return renderHome();

}}

/>

<Route

path="/enroll-client"

render={() => {

if (

role === Role.Worker ||

role === Role.Admin ||

role === Role.Director

) {

return <EnrollClientPage />;

}

if (role === Role.LoggedOut) {

return renderHome();

}

return <Redirect to="/error" />;

}}

/>

<Route

path="/enroll-worker"

render={() => {

if (

role === Role.Admin ||

role === Role.Director

) {

return <EnrollWorkerPage />;

}

if (role === Role.LoggedOut) {

return renderHome();

}

return <Redirect to="/error" />;

}}

/>

<SignUpRouter role={role} />

<Route path="/error">

<Error />

</Route>

<Route>

<Redirect to="/error" />

</Route>

</Switch>

</div>

<Footer />

</div>

</UserContext.Provider>

</Router>

);

}