Merge branch 'password-successfully-reset-page' into 'dev'

confirm reset password page done

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

smart-hut/src/App.js

@@ -9,6 +9,7 @@ import ForgotPass from "./views/Forgot-password";
 import ChangePass from "./views/Forgot-pass-reset";
 import ConfirmForgotPasswrod from "./views/ConfirmForgotPassword";
 import ConfirmRegistration from "./views/ConfirmRegistration";
+import ConfirmResetPassword from "./views/ConfirmResetPassword";
 import Instruction from "./views/Instruction";
 import queryString from "query-string";
 
@@ -134,6 +135,9 @@ class App extends Component {
           <Route path="/password-reset">
             <ChangePass query={this.state.query} />
           </Route>
+          <Route path="/conf-reset-pass">
+            <ConfirmResetPassword />
+          </Route>
           <Route component={FourOhFour} />
         </Switch>
       </BrowserRouter>

smart-hut/src/views/ConfirmResetPassword.js

@@ -0,0 +1,80 @@
+import React, { Component } from "react";
+import HomeNavbar from "./../components/HomeNavbar";
+import { Image, Divider, Message, Grid } from "semantic-ui-react";
+
+class Paragraph extends Component {
+  state = { visible: true };
+
+  handleDismiss = () => {
+    this.setState({ visible: false });
+
+    setTimeout(() => {
+      this.setState({ visible: true });
+    }, 2000);
+  };
+
+  render() {
+    if (this.state.visible) {
+      return (
+        <Message onDismiss={this.handleDismiss}>
+          <Message.Header>
+            Congratulation<ins>s</ins>!
+          </Message.Header>
+          Your password has been <del>succesffuly</del>
+          <ins>successfully</ins> reset
+        </Message>
+      );
+    }
+
+    return (
+      <p>
+        <br />
+        <i>The message will return in 2s</i>
+        <br />
+        <br />
+      </p>
+    );
+  }
+}
+
+const MessageReg = () => (
+  <Grid>
+    <HomeNavbar />
+    <Divider />
+    <Grid.Row height={3}></Grid.Row>
+    <Grid.Row height={3}></Grid.Row>
+    <Grid.Row height={3}></Grid.Row>
+    <Grid.Row height={3}>
+      <Grid.Column width={6}></Grid.Column>
+      <Grid.Column width={10}>
+        <Image src="title5.png" />
+      </Grid.Column>
+      <Grid.Column width={3}></Grid.Column>
+    </Grid.Row>
+    <Grid.Row height={3}></Grid.Row>
+    <Grid.Row height={3}></Grid.Row>
+    <Grid.Column width={3}></Grid.Column>
+    <Grid.Column width={4}>
+      <Image src="./img/logo.png" />
+    </Grid.Column>
+    <Grid.Column width={6}>
+      <Paragraph />
+    </Grid.Column>
+    <Grid.Column width={4}></Grid.Column>
+    <Grid.Row height={3}></Grid.Row>
+    <Grid.Row height={3}></Grid.Row>
+    <Grid.Row height={3}>
+      <Grid.Column width={3}></Grid.Column>
+      <Grid.Column width={10}>
+        <Divider />
+      </Grid.Column>
+      <Grid.Column width={3}></Grid.Column>
+    </Grid.Row>
+  </Grid>
+);
+
+export default class ConfirmResetPassword extends Component {
+  render() {
+    return <MessageReg />;
+  }
+}