Merge branch '22-add-forgot-password-page' into 'dev'

Resolve "Add forgot-password Page"

Closes #22

See merge request sa4-2020/the-sanmarinoes/frontend!13

smart-hut/src/App.js

@@ -4,34 +4,11 @@ import Home from "./views/Home";
 import Dashboard from "./views/DashboardTest";
 import Signup from "./views/Signup";
 import Login from "./views/Login";
+import ForgotPass from "./views/Forgot-password";
+import ChangePass from "./views/Forgot-pass-reset";
 
 import { call } from './client_server';
 
-
-/*const ProtectedRoute = ({ component: Comp, loggedIn, logOut, path, ...rest }) => {
-  return (
-    <Route
-      path={path}
-      {...rest}
-      render={(props) => {
-        return loggedIn ? (
-          <Comp logOut={logOut} {...props} />
-        ) : (
-          <Redirect
-            to={{
-              pathname: "/login",
-              state: {
-                prevLocation: path,
-                error: "You need to login first!",
-              },
-            }}
-          />
-        );
-      }}
-    />
-  );
-};*/
-
 class App extends React.Component {
   constructor(props) {
     super(props);
@@ -101,7 +78,12 @@ class App extends React.Component {
           <Route path="/dashboard" >
               {this.state.loggedIn ? <Dashboard logout={this.logout} /> : <Redirect to="/login" />}
           </Route>
-          
+          <Route path="/forgot-password" >
+              <ForgotPass />
+          </Route>
+          <Route path="/forgot-pass-change" >
+              <ChangePass />
+          </Route>
         </Switch>
     );
   }

smart-hut/src/views/Forgot-pass-reset.js

@@ -0,0 +1,85 @@
+import React, {Component} from 'react';
+import {Button, Form, Grid, Header, Image, Icon, Message} from 'semantic-ui-react';
+//import { call } from '../client_server';
+
+
+export default class ChangePass  extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            password: "",
+            error: {
+                state: false,
+                message: "",
+            }
+        }
+    }
+
+    onChangeHandler = (event) => {
+        let nam = event.target.name;
+        let val = event.target.value;
+        this.setState({[nam]: val});
+    };
+
+    checkpassword = (e) => {
+        if (e.target.value !== this.state.password) {
+          this.setState({error: {
+            state : true,
+            message : "Passwords do not match.",
+          }});
+        }
+    };
+
+    handleChangePassword = (e) => {
+
+    };
+
+    render() {
+        return (
+          <React.Fragment>
+            <Button
+              circular
+              style={{margin: "2em"}}
+              href="/"
+            >
+              <Icon name='arrow alternate circle left'/>
+              Go Home </Button>
+            <Grid textAlign='center' style={{height: '70vh'}} verticalAlign='middle'>
+              <Grid.Column style={{maxWidth: 450}}>
+                <Header as='h2' color='blue' textAlign='center'>
+                  <Image src='img/logo.png'/> Reset Password
+                </Header>
+                <Form size='large' style={{marginTop : "2em"}} error={this.state.error.state}>
+                    <Message
+                      error
+                      header='Change Password Error'
+                      content= {this.state.error.message}
+                    />
+                    <Form.Input
+                        icon='address card outline'
+                        iconPosition='left'
+                        placeholder='Reset your password'
+                        name="password"
+                        type='password'
+                        onChange={this.onChangeHandler}
+                        required
+                    /> 
+                    <Form.Input
+                        icon='address card outline'
+                        iconPosition='left'
+                        placeholder='Confirm Password'
+                        name="confirm-password"
+                        type='password'
+                        onChange={this.checkpassword}
+                        required
+                    /> 
+                    <Button  color='blue' fluid size='large' onClick={this.handleChangePassword}>
+                        Confirm password
+                    </Button>
+                </Form>
+              </Grid.Column>
+            </Grid>
+          </React.Fragment>
+        )
+      }
+}

smart-hut/src/views/Forgot-password.js

@@ -0,0 +1,67 @@
+import React, {Component} from 'react';
+import {Button, Form, Grid, Header, Image, Icon, Message} from 'semantic-ui-react';
+//import { call } from '../client_server';
+
+
+export default class ForgotPass  extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            user: "",
+            error: {
+                state: false,
+                message: "",
+            }
+        }
+    }
+
+    onChangeHandler = (event) => {
+        let nam = event.target.name;
+        let val = event.target.value;
+        this.setState({[nam]: val});
+    };
+
+    handleSendEmail = (e) => {
+
+    };
+
+    render() {
+        return (
+          <React.Fragment>
+            <Button
+              circular
+              style={{margin: "2em"}}
+              href="/"
+            >
+              <Icon name='arrow alternate circle left'/>
+              Go Home </Button>
+            <Grid textAlign='center' style={{height: '70vh'}} verticalAlign='middle'>
+              <Grid.Column style={{maxWidth: 450}}>
+                <Header as='h2' color='blue' textAlign='center'>
+                  <Image src='img/logo.png'/> Reset Password
+                </Header>
+                <Form size='large' style={{marginTop : "2em"}} error={this.state.error.state}>
+                    <Message
+                      error
+                      header='Send E-mail Error'
+                      content= {this.state.error.message}
+                    />
+                    <Form.Input
+                        icon='address card outline'
+                        iconPosition='left'
+                        placeholder='Username or E-mail'
+                        name="user"
+                        type='text'
+                        onChange={this.onChangeHandler}
+                        required
+                    /> 
+                    <Button  color='blue' fluid size='large' onClick={this.handleSendEmail}>
+                        Send E-mail
+                    </Button>
+                </Form>
+              </Grid.Column>
+            </Grid>
+          </React.Fragment>
+        )
+      }
+}

smart-hut/src/views/Signup.js

@@ -31,6 +31,8 @@ export default class Signup extends Component{
         if (res.status === "Errore") {
           this.setState({error: { state: true,
                                   message: "Errore"}});
+        } else if (res.status === 200 && res.data){
+          this.props.history.push("/");
         }
       }).catch(err => {
         //console.log(err);