@@ -17,15 +17,8 @@ import { loadChallengeDetails } from './actions/challenges'
17
17
import { connect } from 'react-redux'
18
18
import { checkAllowedRoles } from './util/tc'
19
19
import { setCookie , removeCookie , isBetaMode } from './util/cookie'
20
- import IdleTimer from 'react-idle-timer'
21
- import AlertModal from './components/Modal/AlertModal'
22
- import modalStyles from './styles/modal.module.scss'
23
20
24
- const { ACCOUNTS_APP_LOGIN_URL , IDLE_TIMEOUT_MINUTES , IDLE_TIMEOUT_GRACE_MINUTES , COMMUNITY_APP_URL } = process . env
25
-
26
- const theme = {
27
- container : modalStyles . modalContainer
28
- }
21
+ const { ACCOUNTS_APP_LOGIN_URL } = process . env
29
22
30
23
class RedirectToChallenge extends React . Component {
31
24
componentWillMount ( ) {
@@ -66,19 +59,6 @@ RedirectToChallenge.propTypes = {
66
59
const ConnectRedirectToChallenge = connect ( mapStateToProps , mapDispatchToProps ) ( RedirectToChallenge )
67
60
68
61
class Routes extends React . Component {
69
- constructor ( props ) {
70
- super ( props )
71
- this . idleTimer = null
72
- this . handleOnIdle = this . handleOnIdle . bind ( this )
73
-
74
- this . logoutIntervalRef = null
75
- this . state = {
76
- showIdleModal : false ,
77
- logsoutIn : IDLE_TIMEOUT_GRACE_MINUTES * 60 , // convert to seconds
78
- logoutIntervalRef : null
79
- }
80
- }
81
-
82
62
componentWillMount ( ) {
83
63
this . checkAuth ( )
84
64
}
@@ -107,95 +87,68 @@ class Routes extends React.Component {
107
87
}
108
88
}
109
89
110
- handleOnIdle ( ) {
111
- this . idleTimer . pause ( )
112
- const intervalId = setInterval ( ( ) => {
113
- const remaining = this . state . logsoutIn
114
- if ( remaining > 0 ) {
115
- this . setState ( state => ( { ...state , logsoutIn : remaining - 1 } ) )
116
- } else {
117
- window . location = `${ COMMUNITY_APP_URL } /logout`
118
- }
119
- } , 1000 )
120
-
121
- this . setState ( state => ( { ...state , showIdleModal : true , logoutIntervalRef : intervalId } ) )
122
- }
123
-
124
90
render ( ) {
125
91
if ( ! this . props . isLoggedIn ) {
126
92
return null
127
93
}
128
94
129
- const isAllowed = checkAllowedRoles ( _ . get ( decodeToken ( this . props . token ) , 'roles' ) )
130
- const modal = ( < AlertModal
131
- theme = { theme }
132
- title = 'Session Timeout'
133
- message = { `You've been idle for quite sometime. You'll be automatically logged out in ${ this . state . logsoutIn >= 60 ? Math . ceil ( this . state . logsoutIn / 60 ) + ' minute(s).' : this . state . logsoutIn + ' second(s)' } ` }
134
- closeText = 'Resume Session'
135
- onClose = { ( ) => {
136
- clearInterval ( this . state . logoutIntervalRef )
137
- if ( this . idleTimer . isIdle ( ) ) {
138
- this . idleTimer . resume ( )
139
- this . idleTimer . reset ( )
140
- this . setState ( state => ( {
141
- ...state , showIdleModal : false , logsoutIn : 120
142
- } ) )
143
- }
144
- } }
145
- /> )
95
+ let isAllowed = checkAllowedRoles ( _ . get ( decodeToken ( this . props . token ) , 'roles' ) )
146
96
147
- return (
148
- < IdleTimer ref = { ref => { this . idleTimer = ref } } timeout = { 1000 * 60 * IDLE_TIMEOUT_MINUTES } onIdle = { this . handleOnIdle } debounce = { 250 } >
149
- { ! isAllowed && < Switch >
150
- < Route exact path = '/'
151
- render = { ( ) => renderApp (
152
- < Challenges menu = 'NULL' warnMessage = { 'You are not authorized to use this application' } /> ,
153
- < TopBarContainer /> ,
154
- < Sidebar />
155
- ) ( ) }
156
- />
157
- < Redirect to = '/' />
158
- </ Switch > }
159
- { isAllowed && < Switch >
97
+ if ( ! isAllowed ) {
98
+ let warnMessage = 'You are not authorized to use this application'
99
+ return (
100
+ < Switch >
160
101
< Route exact path = '/'
161
102
render = { ( ) => renderApp (
162
- < Challenges menu = 'NULL' /> ,
103
+ < Challenges menu = 'NULL' warnMessage = { warnMessage } /> ,
163
104
< TopBarContainer /> ,
164
105
< Sidebar />
165
106
) ( ) }
166
107
/>
167
- < Route exact path = '/self-service'
168
- render = { ( ) => renderApp (
169
- < Challenges selfService /> ,
170
- < TopBarContainer /> ,
171
- < Sidebar selfService />
172
- ) ( ) }
173
- />
174
- < Route exact path = '/projects/:projectId/challenges/new'
175
- render = { ( { match } ) => renderApp (
176
- < ChallengeEditor /> ,
177
- < TopBarContainer /> ,
178
- < Sidebar projectId = { match . params . projectId } menu = { 'New Challenge' } />
179
- ) ( ) } />
180
- < Route exact path = '/challenges/:challengeId' component = { ConnectRedirectToChallenge } />
181
- < Route
182
- path = '/projects/:projectId/challenges/:challengeId'
183
- render = { ( { match } ) => renderApp (
184
- < ChallengeEditor /> ,
185
- < TopBarContainer /> ,
186
- < Sidebar projectId = { match . params . projectId } menu = { 'New Challenge' } />
187
- ) ( ) } />
188
- < Route exact path = '/projects/:projectId/challenges'
189
- render = { ( { match } ) => renderApp (
190
- < Challenges projectId = { match . params . projectId } /> ,
191
- < TopBarContainer projectId = { match . params . projectId } /> ,
192
- < Sidebar projectId = { match . params . projectId } />
193
- ) ( ) } />
194
- { /* If path is not defined redirect to landing page */ }
195
108
< Redirect to = '/' />
196
- </ Switch > }
197
- { this . state . showIdleModal && modal }
198
- </ IdleTimer >
109
+ </ Switch >
110
+ )
111
+ }
112
+
113
+ return (
114
+ < Switch >
115
+ < Route exact path = '/'
116
+ render = { ( ) => renderApp (
117
+ < Challenges menu = 'NULL' /> ,
118
+ < TopBarContainer /> ,
119
+ < Sidebar />
120
+ ) ( ) }
121
+ />
122
+ < Route exact path = '/self-service'
123
+ render = { ( ) => renderApp (
124
+ < Challenges selfService /> ,
125
+ < TopBarContainer /> ,
126
+ < Sidebar selfService />
127
+ ) ( ) }
128
+ />
129
+ < Route exact path = '/projects/:projectId/challenges/new'
130
+ render = { ( { match } ) => renderApp (
131
+ < ChallengeEditor /> ,
132
+ < TopBarContainer /> ,
133
+ < Sidebar projectId = { match . params . projectId } menu = { 'New Challenge' } />
134
+ ) ( ) } />
135
+ < Route exact path = '/challenges/:challengeId' component = { ConnectRedirectToChallenge } />
136
+ < Route
137
+ path = '/projects/:projectId/challenges/:challengeId'
138
+ render = { ( { match } ) => renderApp (
139
+ < ChallengeEditor /> ,
140
+ < TopBarContainer /> ,
141
+ < Sidebar projectId = { match . params . projectId } menu = { 'New Challenge' } />
142
+ ) ( ) } />
143
+ < Route exact path = '/projects/:projectId/challenges'
144
+ render = { ( { match } ) => renderApp (
145
+ < Challenges projectId = { match . params . projectId } /> ,
146
+ < TopBarContainer projectId = { match . params . projectId } /> ,
147
+ < Sidebar projectId = { match . params . projectId } />
148
+ ) ( ) } />
149
+ { /* If path is not defined redirect to landing page */ }
150
+ < Redirect to = '/' />
151
+ </ Switch >
199
152
)
200
153
}
201
154
}
0 commit comments