Add registration UI & routing #27

bismitaguha · 2020-06-09T19:12:34Z

Description

Add Basic Navbar
Add Routing
Add Registration component, actions & reducers

Fixes #7

Type of Change:

Code
Quality Assurance
User Interface

Code/Quality Assurance Only

New feature (non-breaking change which adds functionality pre-approved by mentors)

How Has This Been Tested?

Server up and running. Cases of possible form validations covered.

Checklist:

My PR follows the style guidelines of this project
I have performed a self-review of my own code or materials
I have commented my code or provided relevant documentation, particularly in hard-to-understand areas
Any dependent changes have been merged

Code/Quality Assurance Only

My changes generate no new warnings
Any dependent changes have been published in downstream modules

Add Routing Add Registration component, actions & reducers

abha224 · 2020-06-13T12:49:26Z

src/PrivateRoute.js

+    <Route {...rest} render={props => (
+        localStorage.getItem('token')
+        ? <Component {...props} />
+        : <Redirect to='/register'/>


check if the redirect path is correct once.

Can we make use of register() in urls.js instead? @bismitaguha

sidvenu

Also, please add newlines to the end of files which do not have it.

sidvenu · 2020-06-13T13:56:57Z

src/PrivateRoute.js

+    <Route {...rest} render={props => (
+        localStorage.getItem('token')
+        ? <Component {...props} />
+        : <Redirect to='/register'/>


Can we make use of register() in urls.js instead? @bismitaguha

sidvenu · 2020-06-13T14:01:46Z

src/actions/info.js

+import axios from 'axios'
+import {
+    urlInfo
+} from '../urls'
+import {
+    GET_USER_INFO,
+    POST_USER_INFO,
+    USER_INFO_ERRORS
+} from './types'
+
+export const getInfo = () => async dispatch => {
+    try {
+        const config = {
+            headers: {
+                Authorization: `Bearer ${localStorage.token}`,
+            }
+        }
+        const res = await axios.get(urlInfo(), config);
+        dispatch({
+            type: GET_USER_INFO,
+            payload: res.data
+        });
+    }
+    catch (err) {
+        dispatch({
+            type: USER_INFO_ERRORS,
+            payload: err.response.data
+        })
+    }
+}
+
+export const postInfo = (data) => async dispatch => {
+    try {
+        const config = {
+            headers: {
+                'content-type': 'application/json',
+                Authorization: `Bearer ${localStorage.token}`,
+            }
+        }
+        const res = await axios.post(urlInfo(), data, config);
+        dispatch({
+            type: POST_USER_INFO,
+            payload: res.data
+        });
+    }
+    catch (err) {
+        dispatch({
+            type: USER_INFO_ERRORS,
+            payload: err.response.data
+        });
+    }
+};


Can we rename this file and its methods to a better name? Like wherever you used info simply without context, it could be userinfo?

sidvenu · 2020-06-13T14:02:40Z

src/components/Info.js

+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { getInfo } from '../actions/info'
+// import { Form, Grid, Image, Divider, Icon } from 'semantic-ui-react'
+import PropTypes from 'prop-types'
+// import login from './../styles/Login.css'
+
+class Info extends Component {
+    constructor(props) {
+        super(props)
+    }
+    componentDidMount() {
+        this.props.getInfo()
+    }
+    render() {
+        return(
+            <div>
+               hello 
+            </div>
+        )
+    }
+}
+
+Info.propTypes = {
+    userinfo: PropTypes.array.isRequired,
+};
+
+const mapStateToProps = state => ({
+    userinfo: state.info.userinfo,
+})
+
+export default connect(
+    mapStateToProps,
+    { getInfo, }
+)(Info)


Same as above

sidvenu · 2020-06-13T14:02:56Z

src/reducers/info.js

+import {
+    GET_USER_INFO,
+    POST_USER_INFO,
+    USER_INFO_ERRORS
+} from '../actions/types'
+
+const initialState = {
+    userinfo: [],
+    postuserinfo: [],
+    userinfoerror: null,
+}
+
+const infoReducer = (state = initialState, action) => {
+    switch(action.type) {
+        case GET_USER_INFO:
+            return {
+                ...state,
+                userinfo: action.payload,
+            };
+        case POST_USER_INFO:
+            return {
+                ...state,
+                postuserinfo: action.payload,
+                userinfo: [...state.userinfo, action.payload],
+            }
+        case USER_INFO_ERRORS:
+            return {
+                ...state,
+                userinfoerror: action.payload,
+            }
+        default:
+            return state
+    }
+}
+
+export default infoReducer


Same as above

abha224 · 2020-06-17T12:26:17Z

The pr was tested locally. Here are the gifs for the same:

To check if the registration is successful.
To check if validation is done properly:
- every field is mandatory
- email should be of type xx@xx.xxx
- passwords should match
- unique username needed
- unique email needed

General comments:

the errors messages should be refreshed after every submit so that previous error messages arent visible.
password validation not done according to the condition: 1 digit, at least special character, at least uppercase letter, and min length of 12 characters

sidvenu

@bismitaguha could you make the changes that I suggested in my earlier review? Regarding better names for the dashboard (currently called info/Info).

bismitaguha · 2020-06-18T16:52:46Z

@sidvenu Since the dashboard and navbar issues are different I have covered these in that PR so that there won't be any confusion. This info will just be a basic redirect page that confirms login. I hope that will be cool, else we will be mixing PRs????

sidvenu · 2020-06-18T16:58:36Z

I get your point. In the perspective of this PR, Info will pertain to a dummy page. Make sure you address the name change when you work on the dashboard UI.

sidvenu · 2020-06-18T16:59:43Z

I overlooked this in my review earlier, could you add new lines to the end of files you've created in this PR that doesn't have new lines?

abha224 · 2020-06-24T07:19:11Z

src/components/Register.js

+            username: '',
+            email: '',
+            password: '',
+            password2: '',


change password2 to confirm_password

abha224 · 2020-06-24T07:19:40Z

src/components/Info.js

+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { getInfo } from '../actions/info'
+// import { Form, Grid, Image, Divider, Icon } from 'semantic-ui-react'


remove the code commented from this file

src/components/App.js

abha224 · 2020-06-24T07:30:29Z

@bismitaguha Pls modify the index.html file in public folder appropriately as discussed before.

bismitaguha · 2020-06-24T13:26:13Z

@abha224 Removed comments and made the changes.

src/AuthRoute.js

abha224

LGTM 👍

sidvenu

LGTM 👍

bismitaguha requested review from sidvenu, Monal5031 and abha224 June 9, 2020 19:12

Add Navbar component

dea8fd0

Add Routing Add Registration component, actions & reducers

bismitaguha force-pushed the register-ui branch from a1e01bc to dea8fd0 Compare June 9, 2020 19:47

bismitaguha mentioned this pull request Jun 10, 2020

Login ui for the website #28

Merged

7 tasks

abha224 reviewed Jun 13, 2020

View reviewed changes

sidvenu suggested changes Jun 13, 2020

View reviewed changes

Modify Register form validation

5777b7c

bismitaguha requested review from abha224 and sidvenu June 18, 2020 14:45

sidvenu suggested changes Jun 18, 2020

View reviewed changes

Add new line to end of file

eb5ca1d

bismitaguha requested a review from sidvenu June 22, 2020 13:29

abha224 reviewed Jun 24, 2020

View reviewed changes

src/components/Register.js Outdated

username: '',

email: '',

password: '',

password2: '',

Copy link

Contributor

abha224 Jun 24, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

change password2 to confirm_password

abha224 reviewed Jun 24, 2020

View reviewed changes

src/components/App.js Outdated Show resolved Hide resolved

style: Remove comments, unnecessary files and modify field names

5486989

abha224 reviewed Jun 24, 2020

View reviewed changes

src/AuthRoute.js Outdated Show resolved Hide resolved

style: Modify imports

d957b66

abha224 approved these changes Jun 24, 2020

View reviewed changes

sidvenu approved these changes Jun 25, 2020

View reviewed changes

abha224 merged commit 8cc2494 into anitab-org:develop Jun 27, 2020

abha224 changed the title ~~[WIP]: Add registration UI & routing~~ Add registration UI & routing Jun 27, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add registration UI & routing #27

Add registration UI & routing #27

bismitaguha commented Jun 9, 2020

abha224 Jun 13, 2020

sidvenu Jun 13, 2020

sidvenu left a comment

sidvenu Jun 13, 2020

sidvenu Jun 13, 2020

sidvenu Jun 13, 2020

sidvenu Jun 13, 2020

abha224 commented Jun 17, 2020

sidvenu left a comment

bismitaguha commented Jun 18, 2020

sidvenu commented Jun 18, 2020

sidvenu commented Jun 18, 2020

abha224 Jun 24, 2020

abha224 Jun 24, 2020 •

edited

abha224 commented Jun 24, 2020

bismitaguha commented Jun 24, 2020

abha224 left a comment

sidvenu left a comment

Add registration UI & routing #27

Add registration UI & routing #27

Conversation

bismitaguha commented Jun 9, 2020

Description

Type of Change:

How Has This Been Tested?

Checklist:

abha224 Jun 13, 2020

Choose a reason for hiding this comment

sidvenu Jun 13, 2020

Choose a reason for hiding this comment

sidvenu left a comment

Choose a reason for hiding this comment

sidvenu Jun 13, 2020

Choose a reason for hiding this comment

sidvenu Jun 13, 2020

Choose a reason for hiding this comment

sidvenu Jun 13, 2020

Choose a reason for hiding this comment

sidvenu Jun 13, 2020

Choose a reason for hiding this comment

abha224 commented Jun 17, 2020

sidvenu left a comment

Choose a reason for hiding this comment

bismitaguha commented Jun 18, 2020

sidvenu commented Jun 18, 2020

sidvenu commented Jun 18, 2020

abha224 Jun 24, 2020

Choose a reason for hiding this comment

abha224 Jun 24, 2020 • edited

Choose a reason for hiding this comment

abha224 commented Jun 24, 2020

bismitaguha commented Jun 24, 2020

abha224 left a comment

Choose a reason for hiding this comment

sidvenu left a comment

Choose a reason for hiding this comment

abha224 Jun 24, 2020 •

edited