Feature: Activate new registered users by making API request.

Added code to activate users from email confirmation link. Fixes anitab-org#83
codesankalp · Feb 27, 2021 · 86e5b60 · 86e5b60
1 parent 3faaef6
commit 86e5b60
Show file tree

Hide file tree

Showing 6 changed files with 288 additions and 128 deletions.
diff --git a/src/Routes.js b/src/Routes.js
@@ -2,31 +2,33 @@ import React, { Component } from 'react'
 import { Route, Switch, Redirect } from 'react-router-dom'
 import Login from './components/Login'
 import Register from './components/Register'
+import Activate from './components/Activate'
 import Dashboard from './components/Dashboard'
 import Forms from './components/Forms'
 import ErrorPage from './components/ErrorPage'
 import Submission from './components/Submission'
 import Questions from './components/Questions'
-import { login, register, dashboard, forms, upload, submission, urlBaseFrontend } from './urls'
+import { login, register, activate, dashboard, forms, upload, submission, urlBaseFrontend } from './urls'
 import Upload from './components/Upload'
-import {PrivateRoute} from './PrivateRoute'
+import { PrivateRoute } from './PrivateRoute'
 import { AuthRoute } from './AuthRoute'
 
 export default class Routes extends Component {
-    render() {
-        return (
-            <>
-            <Switch>
-                <PrivateRoute exact path={dashboard()} component={Dashboard} />
-                <PrivateRoute exact path={forms()} component={Forms} />
-                <PrivateRoute exact path={submission()} component={Submission} />
-                <PrivateRoute exact path={`${urlBaseFrontend()}form/:id`} component={Questions} />
-                <AuthRoute path={login()} component={Login} />
-                <AuthRoute path={register()} component={Register} />
-                <Route path={upload()} component={Upload} />
-                <AuthRoute component={ErrorPage} />  
-            </Switch>
-            </>
-        )
-    }
+  render() {
+    return (
+      <>
+        <Switch>
+          <PrivateRoute exact path={dashboard()} component={Dashboard} />
+          <PrivateRoute exact path={forms()} component={Forms} />
+          <PrivateRoute exact path={submission()} component={Submission} />
+          <PrivateRoute exact path={`${urlBaseFrontend()}form/:id`} component={Questions} />
+          <AuthRoute path={login()} component={Login} />
+          <AuthRoute path={register()} component={Register} />
+          <AuthRoute path={activate()} component={Activate} />
+          <Route path={upload()} component={Upload} />
+          <AuthRoute component={ErrorPage} />
+        </Switch>
+      </>
+    )
+  }
 }
diff --git a/src/actions/login.js b/src/actions/login.js
@@ -1,60 +1,84 @@
 import axios from 'axios'
 import {
-    urlLogin,
-    urlRegister
+  urlLogin,
+  urlRegister,
+  urlActivate
 } from '../urls'
 import {
-    LOGIN,
-    REGISTER,
-    LOGIN_ERRORS,
-    REGISTER_ERRORS
+  LOGIN,
+  REGISTER,
+  LOGIN_ERRORS,
+  REGISTER_ERRORS,
+  ACTIVATE,
+  ACTIVATE_ERRORS
 } from './types'
 
 export const postLogin = (data, callback) => async dispatch => {
-    try {
-        const config = {
-            headers: {
-                'content-type': 'application/json',
-            }
-        }
-        const res = await axios.post(urlLogin(), data, config);
-        dispatch({
-            type: LOGIN,
-            payload: res.data
-        });
-
-        // set token value
-        localStorage.setItem('token', res.data.access)
-        callback()
-    }
-    catch (err) {
-        dispatch({
-            type: LOGIN_ERRORS,
-            payload: err.response.data
-        });
-        callback()
+  try {
+    const config = {
+      headers: {
+        'content-type': 'application/json'
+      }
     }
-};
+    const res = await axios.post(urlLogin(), data, config)
+    dispatch({
+      type: LOGIN,
+      payload: res.data
+    })
+
+    // set token value
+    localStorage.setItem('token', res.data.access)
+    callback()
+  } catch (err) {
+    dispatch({
+      type: LOGIN_ERRORS,
+      payload: err.response.data
+    })
+    callback()
+  }
+}
 
 export const postRegister = (data, callback) => async dispatch => {
-    try {
-        const config = {
-            headers: {
-                'content-type': 'application/json',
-            }
-        }
-        const res = await axios.post(urlRegister(), data, config);
-        dispatch({
-            type: REGISTER,
-            payload: res.data
-        });
-        callback()
+  try {
+    const config = {
+      headers: {
+        'content-type': 'application/json'
+      }
     }
-    catch (err) {
-        dispatch({
-            type: REGISTER_ERRORS,
-            payload: err.response.data
-        });
-        callback()
+    const res = await axios.post(urlRegister(), data, config)
+    dispatch({
+      type: REGISTER,
+      payload: res.data
+    })
+    callback()
+  } catch (err) {
+    dispatch({
+      type: REGISTER_ERRORS,
+      payload: err.response.data
+    })
+    callback()
+  }
+}
+
+export const getActivate = (data, callback) => async dispatch => {
+  try {
+    const config = {
+      headers: {
+        'content-type': 'application/json'
+      }
     }
-};
+    const res = await axios.get(urlActivate(data.uidb64, data.token), config)
+    dispatch({
+      type: ACTIVATE,
+      payload: res.data
+    })
+    callback()
+  } catch (err) {
+    // console.log(err.response.data)
+    dispatch({
+      type: ACTIVATE_ERRORS,
+      payload: err.response.data
+    })
+    callback()
+  }
+}
diff --git a/src/actions/types.js b/src/actions/types.js
@@ -1,28 +1,30 @@
-export const USER = 'USER';
-export const USER_ERRORS = 'USER_ERRORS';
-export const LOGIN = 'LOGIN';
-export const LOGOUT = 'LOGOUT';
-export const LOGIN_ERRORS = 'LOGIN_ERRORS';
-export const REGISTER = 'REGISTER';
-export const REGISTER_ERRORS = 'REGISTER_ERRORS';
-export const GET_USER_INFO = 'GET_USER_INFO';
-export const POST_USER_INFO = 'POST_USER_INFO';
-export const UPDATE_USER_INFO = 'UPDATE_USER_INFO';
-export const USER_INFO_ERRORS = 'USER_INFO_ERRORS';
-export const GET_PUBLISHED_FORMS = 'GET_PUBLISHED_FORMS';
-export const GET_UNPUBLISHED_FORMS = 'GET_UNPUBLISHED_FORMS';
-export const UNPUBLISH_FORM = 'UNPUBLISH_FORM';
-export const PUBLISH_FORM = 'PUBLISH_FORM';
-export const GET_FORM = 'GET_FORM';
-export const POST_FORM = 'POST_FORM';
-export const UPDATE_PUBLISHED_FORM = 'UPDATE_PUBLISHED_FORM';
-export const UPDATE_UNPUBLISHED_FORM = 'UPDATE_UNPUBLISHED_FORM';
-export const DELETE_PUBLISHED_FORM = 'DELETE_PUBLISHED_FORM';
-export const DELETE_UNPUBLISHED_FORM = 'DELETE_UNPUBLISHED_FORM';
-export const FORM_ERRORS = 'FORM_ERRORS';
-export const GET_QUESTIONS = 'GET_QUESTIONS';
-export const POST_QUESTIONS = 'POST_QUESTIONS';
-export const QUESTION_ERROR = 'QUESTION_ERROR';
-export const GET_ZULIP_STAT = 'GET_ZULIP_STAT';
-export const UPDATE_ZULIP_STAT = 'UPDATE_ZULIP_STAT';
-export const ZULIP_STAT_ERROR = 'ZULIP_STAT_ERROR';
+export const USER = 'USER'
+export const USER_ERRORS = 'USER_ERRORS'
+export const LOGIN = 'LOGIN'
+export const LOGOUT = 'LOGOUT'
+export const LOGIN_ERRORS = 'LOGIN_ERRORS'
+export const REGISTER = 'REGISTER'
+export const REGISTER_ERRORS = 'REGISTER_ERRORS'
+export const ACTIVATE = 'ACTIVATE'
+export const ACTIVATE_ERRORS = 'ACTIVATE_ERRORS'
+export const GET_USER_INFO = 'GET_USER_INFO'
+export const POST_USER_INFO = 'POST_USER_INFO'
+export const UPDATE_USER_INFO = 'UPDATE_USER_INFO'
+export const USER_INFO_ERRORS = 'USER_INFO_ERRORS'
+export const GET_PUBLISHED_FORMS = 'GET_PUBLISHED_FORMS'
+export const GET_UNPUBLISHED_FORMS = 'GET_UNPUBLISHED_FORMS'
+export const UNPUBLISH_FORM = 'UNPUBLISH_FORM'
+export const PUBLISH_FORM = 'PUBLISH_FORM'
+export const GET_FORM = 'GET_FORM'
+export const POST_FORM = 'POST_FORM'
+export const UPDATE_PUBLISHED_FORM = 'UPDATE_PUBLISHED_FORM'
+export const UPDATE_UNPUBLISHED_FORM = 'UPDATE_UNPUBLISHED_FORM'
+export const DELETE_PUBLISHED_FORM = 'DELETE_PUBLISHED_FORM'
+export const DELETE_UNPUBLISHED_FORM = 'DELETE_UNPUBLISHED_FORM'
+export const FORM_ERRORS = 'FORM_ERRORS'
+export const GET_QUESTIONS = 'GET_QUESTIONS'
+export const POST_QUESTIONS = 'POST_QUESTIONS'
+export const QUESTION_ERROR = 'QUESTION_ERROR'
+export const GET_ZULIP_STAT = 'GET_ZULIP_STAT'
+export const UPDATE_ZULIP_STAT = 'UPDATE_ZULIP_STAT'
+export const ZULIP_STAT_ERROR = 'ZULIP_STAT_ERROR'
diff --git a/src/components/Activate.js b/src/components/Activate.js
@@ -0,0 +1,110 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+import { getActivate } from '../actions/login'
+import { Grid, Icon, Button, Container, Segment, Header } from 'semantic-ui-react'
+import PropTypes from 'prop-types'
+import { urlBaseFrontend } from '../urls'
+
+
+class Activate extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            uidb64: this.props.match.params.uidb64,
+            token: this.props.match.params.token,
+            error: null,
+            activated: false
+        }
+        this.callActivate = this.callActivate.bind(this)
+    }
+
+    callActivate = () => {
+        const data = {
+            uidb64: this.state.uidb64,
+            token: this.state.token
+        }
+        this.props.getActivate(data, this.callback)
+    }
+
+
+    callback = () => {
+        this.setState({
+            error: this.props.activateerror ? true : false,
+            activated: true
+        })
+        if (!this.state.error) {
+            setTimeout(() => { this.props.history.push('/') }, 5000)
+        }
+    }
+
+    componentWillMount() {
+        this.setState({
+            uidb64: this.props.match.params.uidb64,
+            token: this.props.match.params.token,
+            error: null,
+            activated: false
+        })
+        this.callActivate();
+    }
+
+    render() {
+        const { error, activated } = this.state
+        console.log(this.props.activateerror);
+        return (
+            <>
+                <Container text>
+                    <Grid>
+                        <Grid.Row style={{
+                            marginTop: '30%',
+                        }}>
+                            <Grid.Column width={16}>
+                                <Segment placeholder>
+                                    <Header as="h1" icon style={{
+                                        color: '#2185D0',
+                                        fontWeight: 'bolder'
+                                    }}>
+                                        <Icon name='mail' />
+                                        {
+                                            error & activated ?
+                                                this.props.activateerror :
+                                                this.props.activate
+                                        }
+                                    </Header>
+                                    <Segment.Inline>
+                                        <Header as="h3">
+                                            {
+                                                error ?
+                                                    <Link to={urlBaseFrontend()}>
+                                                        <Button secondary>Go to Main Page</Button>
+                                                    </Link> :
+                                                    "Redirecting to Login Page in 5 seconds."
+                                            }
+                                        </Header>
+                                    </Segment.Inline>
+                                </Segment>
+                            </Grid.Column>
+
+                        </Grid.Row>
+
+                    </Grid>
+                </Container>
+            </>
+        )
+    }
+}
+
+Activate.propTypes = {
+    getActivate: PropTypes.func.isRequired,
+}
+
+const mapStateToProps = state => ({
+    activate: state.login.activate,
+    activateerror: state.login.activateerror
+})
+
+export default connect(
+    mapStateToProps,
+    { getActivate, }
+)(Activate)