-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ft(password-reset): users should be able to reset their passwords.
- add test for the password reset feature - add views files for the feature - add validations for the form fields - add loaders for the feature [Finishes 164798252]
- Loading branch information
anyatibrian
authored and
anyatibrian
committed
May 19, 2019
1 parent
a5c350e
commit de36343
Showing
46 changed files
with
1,517 additions
and
561 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import axios from "axios"; | ||
| import { toast } from "react-toastify"; | ||
| import { | ||
| ERROR_DURING_SENDING_LINK, | ||
| IS_LOADING, | ||
| RESET_PASSWORD, | ||
| RESET_PASSWORD_ERROR, | ||
| SENDPASSWORD_RESET_LINK | ||
| } from "./types"; | ||
|
|
||
| export const sendPasswordResetLink = data => async dispatch => { | ||
| dispatch({ | ||
| type: IS_LOADING | ||
| }); | ||
| return await axios | ||
| .post( | ||
| `https://ah-backend-prime-staging.herokuapp.com/api/v1/users/password/reset/email/`, | ||
| data | ||
| ) | ||
| .then(res => { | ||
| dispatch({ | ||
| type: SENDPASSWORD_RESET_LINK, | ||
| payload: res.data | ||
| }); | ||
| toast.dismiss(); | ||
| toast.success(`${res.data.message}`, { | ||
| position: toast.POSITION.TOP_RIGHT, | ||
| autoClose: 3000, | ||
| hideProgressBar: false | ||
| }); | ||
| }) | ||
| .catch(error => { | ||
| dispatch({ | ||
| type: ERROR_DURING_SENDING_LINK, | ||
| payload: error.response.data | ||
| }); | ||
| toast.dismiss(); | ||
| toast.error(`${error.response.data.error}`, { | ||
| position: toast.POSITION.TOP_RIGHT, | ||
| autoClose: false, | ||
| hideProgressBar: false | ||
| }); | ||
| }); | ||
| }; | ||
|
|
||
| export const passwordReset = (data, token) => async dispatch => { | ||
| dispatch({ | ||
| type: IS_LOADING | ||
| }); | ||
| return await axios | ||
| .put( | ||
| `https://ah-backend-prime-staging.herokuapp.com/api/v1/users/password/${token}/reset/`, | ||
| { | ||
| user: data | ||
| } | ||
| ) | ||
| .then(res => { | ||
| dispatch({ | ||
| type: RESET_PASSWORD, | ||
| payload: res.data | ||
| }); | ||
| toast.dismiss(); | ||
| toast.success(`${res.data.message}`, { | ||
| position: toast.POSITION.TOP_RIGHT, | ||
| autoClose: 3000, | ||
| hideProgressBar: false | ||
| }); | ||
| }) | ||
| .catch(err => { | ||
| dispatch({ | ||
| type: RESET_PASSWORD_ERROR, | ||
| payload: { error: "there was error during the password reset" } | ||
| }); | ||
| toast.dismiss(); | ||
| toast.error("there was error during the password reset", { | ||
| position: toast.POSITION.TOP_RIGHT, | ||
| autoClose: false, | ||
| hideProgressBar: false | ||
| }); | ||
| }); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import React from "react"; | ||
| import { connect } from "react-redux"; | ||
| import PropTypes from "prop-types"; | ||
| import { Link } from "react-router-dom"; | ||
| import "../styles/navbar.scss"; | ||
| import BellIcon from "../styles/images/icons8-bell-100.png"; | ||
| import SideDrawer from "./sideDrawer"; | ||
|
|
||
| export class NavBarComponent extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| navBarDrawer: false | ||
| }; | ||
| } | ||
|
|
||
| toggleDrawer = event => { | ||
| event.preventDefault(); | ||
| this.setState(prevState => { | ||
| return { navBarDrawer: !prevState.navBarDrawer }; | ||
| }); | ||
| }; | ||
|
|
||
| render() { | ||
| let sideDrawer; | ||
| if (this.state.navBarDrawer) { | ||
| sideDrawer = <SideDrawer />; | ||
| } | ||
|
|
||
| const { isAuthenticated } = this.props; | ||
| return ( | ||
| <div style={{ height: "100%" }}> | ||
| <nav className="navbar navbar-expand-sm "> | ||
| <ul className="navbar-nav"> | ||
| <li className="nav-item"> | ||
| <a className="nav-link" href="#"> | ||
| <h4> | ||
| <i | ||
| className="fas fa-bars" | ||
| style={{ marginRight: "20px" }} | ||
| onClick={this.toggleDrawer} | ||
| id="nav-icon" | ||
| /> | ||
| Author's Haven | ||
| </h4> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| {isAuthenticated ? ( | ||
| <ul className="nav navbar-nav ml-auto"> | ||
| <li className="nav-item active"> | ||
| <div className="form-group has-search"> | ||
| <span | ||
| className="fa fa-search form-control-feedback" | ||
| id="search-icon" | ||
| /> | ||
| <form className="form-inline my-5 my-lg-0"> | ||
| <input | ||
| className="form-control mr-sm-2 form-control-search" | ||
| type="search" | ||
| aria-label="Search" | ||
| /> | ||
| </form> | ||
| </div> | ||
| </li> | ||
| <li className="nav-item"> | ||
| <img src={BellIcon} id="notification-icon" /> | ||
| </li> | ||
| <li className="nav-item" /> | ||
| <li className="nav-item"> | ||
| <div> | ||
| <img src="" className="profile-section" /> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| ) : ( | ||
| <ul className="nav navbar-nav ml-auto"> | ||
| <li className="nav-item"> | ||
| <Link className="nav-link" to="/login"> | ||
| Sign In | ||
| </Link> | ||
| </li> | ||
| <li className="nav-item"> | ||
| <Link className="nav-link get-started " to="/register"> | ||
| Get Started | ||
| </Link> | ||
| </li> | ||
| </ul> | ||
| )} | ||
| </nav> | ||
| {sideDrawer} | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| NavBarComponent.proptypes = { | ||
| isAuthenticated: PropTypes.Boolean | ||
| }; | ||
| const mapStateToProps = state => ({ | ||
| isAuthenticated: state.auth_login.loginSuccess | ||
| }); | ||
| export default connect(mapStateToProps)(NavBarComponent); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import React from "react"; | ||
| import "../styles/passwordreset.scss"; | ||
| import Loader from "react-loader"; | ||
|
|
||
| export const PasswordResetComponent = props => { | ||
| const { | ||
| password, | ||
| passwordConfirm, | ||
| handleOnChange, | ||
| errors, | ||
| handleOnSubmit, | ||
| isLoading | ||
| } = props; | ||
| return ( | ||
| <div> | ||
| <div className="container"> | ||
| <div className="row"> | ||
| <div className="col col-lg-3 col-sm-1" /> | ||
| <div className="col col-lg-6 col-md-12 col-sm-12 password-reset-container"> | ||
| <div className=""> | ||
| <h2>Password Reset</h2> | ||
| <p> | ||
| Please enter and confirm a new password that you will use to | ||
| sign in into Author's haven | ||
| </p> | ||
| <form method="post" onSubmit={handleOnSubmit}> | ||
| <div className="form-group"> | ||
| <input | ||
| type="password" | ||
| id="password" | ||
| name="password" | ||
| required | ||
| className="form-control" | ||
| placeholder="Password" | ||
| value={password} | ||
| onChange={handleOnChange} | ||
| /> | ||
| {errors.password.length > 0 ? ( | ||
| <span className="form-errors-email">{errors.password}</span> | ||
| ) : ( | ||
| "" | ||
| )} | ||
| </div> | ||
| <div className="form-group"> | ||
| <input | ||
| type="password" | ||
| id="passwordConfirm" | ||
| name="passwordConfirm" | ||
| className="form-control" | ||
| required | ||
| placeholder="confirm Password" | ||
| value={passwordConfirm} | ||
| onChange={handleOnChange} | ||
| /> | ||
| {errors.passwordConfirm.length > 0 ? ( | ||
| <span className="form-errors-email"> | ||
| {errors.passwordConfirm} | ||
| </span> | ||
| ) : ( | ||
| "" | ||
| )} | ||
| <br /> | ||
| </div> | ||
| <button type="submit" className="btn btn-primary"> | ||
| Reset | ||
| <span>{isLoading ? <Loader /> : ""}</span> | ||
| </button> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| <div className="col col-lg-3 col-sm-1 col-sm-auto" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
| export default PasswordResetComponent; |
Oops, something went wrong.