datahash · ronsandova · May 26, 2020 · May 26, 2020
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "frontend-task",
+  "version": "1.0.0",
+  "description": "Build the form illustrated below using [Bootstcrap 4](https://getbootstrap.com/) and add validation with a JavaScript framework ([JQuery](https://jqueryvalidation.org/validate/), [React](https://reactjs.org/), [Vue.js](https://vuejs.org/) or [Alpine.js](https://github.com/alpinejs/alpine)). Please follow all the instructions.",
+  "main": "index.js",
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ronsandova/frontend-task.git"
+  },
+  "keywords": [],
+  "author": "Ronald Sandoval",
+  "license": "license",
+  "bugs": {
+    "url": "https://github.com/ronsandova/frontend-task/issues"
+  },
+  "homepage": "https://github.com/ronsandova/frontend-task#readme",
+  "dependencies": {
+    "bootstrap": "^4.5.0",
+    "classnames": "^2.2.6",
+    "react": "^16.4.1",
+    "react-bootstrap": "^1.0.1",
+    "react-dom": "^16.4.1",
+    "react-redux": "^5.0.7",
+    "react-scripts": "2.1.2",
+    "reactstrap": "^8.4.1",
+    "redux": "^4.0.0",
+    "redux-thunk": "^2.3.0"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <title>Frontend Task App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "Frontend Task App",
+  "name": "Frontend Task App",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,2 @@
+.reset-password { margin-top: 20px; }
+button { padding-left: 10px;}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,167 @@
+import React, { Component } from "react";
+import {   Container, Form, FormGroup, Label, Input, Button, Alert } from 'reactstrap';
+import "./App.css";
+
+const FormErrors = ({formErrors}) =>
+  <div className='formErrors'>
+
+    {Object.keys(formErrors).map((fieldName, i) => {
+      if(formErrors[fieldName].length > 0){
+        return (
+          <Alert color="danger" >
+            <p key={i}>{fieldName} {formErrors[fieldName]}</p>
+          </Alert>
+        )
+      } else {
+        return '';
+      }
+    })}
+
+  </div>
+
+
+class App extends Component {
+
+    constructor (props) {
+      super(props);
+      this.state = {
+        ...this.formResetPassword
+      };
+    }
+
+
+    formResetPassword = {
+        formValid: false,
+        oldPassword: '',
+        newPassword: '',
+        confirmPassword: '',
+        formErrors: {oldPassword: '', newPassword: '', confirmPassword: ''},
+        oldPasswordValid: false,
+        newPasswordValid: false,
+        confirmPasswordValid: false,
+    }
+
+
+    submitHandler = (e) => {
+      e.preventDefault();
+      if (this.formIsValid()) {
+       // form processing here....
+       // reset form
+      }
+    };
+
+    formIsValid = ( ) => {
+      // another validation here
+      if (this.state.newPassword != this.state.confirmPassword) {
+        return false;
+      }
+      // another validation here
+      if (!this.state.oldPassword && !this.state.newPassword && !this.state.confirmPassword) {
+        return false;
+      }
+      return true;
+    }
+
+    handleUserInput = (e) => {
+      const name = e.target.name;
+      const value = e.target.value;
+
+      this.setState({[name]: value}, () => { this.validateEachField(name, value) });
+
+    }
+
+    validateEachField =  (fieldName, value) => {
+      let fieldValidationErrors = this.state.formErrors;
+      let oldPasswordValid = this.state.oldPasswordValid;
+      let newPasswordValid = this.state.newPasswordValid;
+      let confirmPasswordValid = this.state.confirmPasswordValid;
+      let flag = false;
+
+      switch(fieldName) {
+        case 'oldPassword':
+          oldPasswordValid = value.length >= 0;
+          fieldValidationErrors.message = oldPasswordValid ? '': '- Old password is required';
+          break;
+        case 'newPassword':
+          newPasswordValid = value.match(/((^[0-9]+[a-z]+)|(^[a-z]+[0-9]+))+[0-9a-z]+$/i) && value.length >= 0;
+          fieldValidationErrors.invalid = newPasswordValid ? '':
+                '- Password required, min of 8 characters and a mixture of numbers and letters';
+
+          flag = ( this.state.confirmPassword.length !="" && value == this.state.confirmPassword );
+          fieldValidationErrors.match = flag ? '': '- Passwords don\'t match';
+          confirmPasswordValid =  flag;
+
+          break;
+        case 'confirmPassword':
+          confirmPasswordValid = (value == this.state.newPassword);
+          fieldValidationErrors.match = confirmPasswordValid ? '': '- Passwords don\'t match';
+          break;
+        default:
+          break;
+      }
+
+      this.setState({formErrors: fieldValidationErrors,
+                    oldPasswordValid: oldPasswordValid,
+                    newPasswordValid: newPasswordValid,
+                    confirmPasswordValid: confirmPasswordValid,
+                  }, this.validateForm);
+    }
+
+    validateForm() {
+      this.setState({formValid: this.state.oldPasswordValid && this.state.newPasswordValid
+              && this.state.confirmPasswordValid });
+    }
+
+
+    render() {
+
+        const { oldPassword, newPassword, confirmPassword } = this.state;
+
+        return (
+              <Container className="reset-password">
+
+
+                <FormErrors formErrors={this.state.formErrors} />
+
+                <Form className="form" onSubmit={this.submitHandler} >
+                  <h2 className="form-signin-heading">Change password</h2>
+
+                    <FormGroup >
+                      <Label>Old Password</Label>
+
+                      <Input type="password" className="form-control" id="inputPassword"
+                            value={oldPassword.value} name="oldPassword"
+                            aria-describedby="Old Password" onChange={this.handleUserInput} />
+                    </FormGroup>
+
+
+                    <FormGroup>
+                      <Label>New password</Label>
+
+                      <Input type="password" className="form-control" id="inputNewPassword"
+                            value={newPassword.value} name="newPassword"
+                            aria-describedby="New password" onChange={this.handleUserInput} />
+
+                    </FormGroup>
+
+
+                    <FormGroup>
+                      <Label>Confirm password</Label>
+
+                      <Input type="password" className="form-control" id="inputConfirmPassword"
+                          value={confirmPassword.value} aria-describedby="Confirm password"
+                            name="confirmPassword" onChange={this.handleUserInput} />
+                    </FormGroup>
+
+                  <div>
+                     <Button outline color="secondary" className="buttons">Cancel</Button>{' '}
+                     <Button color="info" type='submit'  disabled={!this.state.formValid} >Change Password</Button>
+                   </div>
+
+                </Form>
+              </Container>
+            );
+        }
+    }
+
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,14 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Frontend Task App</title>
+</head>
+<body>
+    <div id="root"></div>
+</body>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: http://bit.ly/CRA-PWA
+serviceWorker.unregister();
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		.reset-password { margin-top: 20px; }
		button { padding-left: 10px;}