Profile update feature

packages/contracts/src/config/config.json

@@ -1,5 +1,5 @@
 {
-  "DocumentRegistryAddress": "0xBF5f700E437474ad78a1a244e3625C8453Db72C0",
-  "SignchainAddress": "0x2b5De22765A433601eF480f4a88A01B36f127092",
-  "SigningModuleAddress": "0x9032b75FDA26E678cB4B51C9Ef0d2AD8AeaB651E"
+  "DocumentRegistryAddress": "0x414D48239f7e610e63D0d968b29d47fC823c89aA",
+  "SignchainAddress": "0xf27276e9fb701D28d91De7666847FD40e5E07EAf",
+  "SigningModuleAddress": "0x62d4AE524625e95D2d9B16EdB82b601d20E564DF"
 }

packages/middleware/models/UserRegistration.js

@@ -7,6 +7,13 @@ const UserRegistration = {
         did: {type:'string'},
         name: {type: 'string'},
         email: {type: 'string'},
+        profileDetails: {
+            type: 'object',
+            properties: {
+                DOB: {type: 'string'},
+                phoneNumber: {type:'string'}
+            }
+        },
         address: { type: 'string'},
         publicKey: { type: 'string'},
         userType: { type: 'number'},

packages/react-app/src/App.jsx

@@ -15,7 +15,7 @@ import {definitions} from "./ceramic/config.json"
 
 import Dashboard from "./components/Dashboard";
 import Documents from "./components/Documents";
-import Profile from "./components/Profile";
+import Profile from "./components/Profile/Profile";
 import Layout from "./components/Layout";
 import Steps from './components/Stepper/Steps'
 import Verify from './components/Verify/Verify'
@@ -31,6 +31,7 @@ import {Ed25519Provider} from 'key-did-provider-ed25519'
 import {PrivateKey} from "@textile/hub";
 import Onboarding from './components/Onboarding/Onboarding'
 import WarningPopup from './components/warnings/WarningPopup'
+import NetworkChange from './components/warnings/NetworkChange'
 import DocumentDetails from './components/Documents/DocumentDetails'
 
 const blockExplorer = "https://etherscan.io/"
@@ -69,10 +70,6 @@ function App() {
         setInjectedProvider(new Web3Provider(provider));
     }, [setInjectedProvider]);
 
-    async function test (seed, identity, idx){
-
-    }
-
     async function loginUser(seed, identity, idx, address) {
       const pass = Buffer.from(new Uint8Array(seed)).toString("hex")
       const user = JSON.parse(localStorage.getItem('USER'))
@@ -82,7 +79,7 @@ function App() {
           const client = await loginUserWithChallenge(identity);
           let userInfo
           if (client !== null) {
-            userInfo = await getLoginUser(user.address, idx)
+            userInfo = await getLoginUser(user.address)
             if (userInfo !== null) {
               localStorage.setItem("USER", JSON.stringify(userInfo))
               localStorage.setItem("password", "12345");
@@ -218,6 +215,8 @@ function App() {
                     idx={idx}
                     identity = {identity}
                />}/>
+
+                <Route exact path='/network' render={()=><NetworkChange/>}/>
 
                <Route exact path="/verify" render={(props) =>
                    <Verify

packages/react-app/src/ceramic/bootstrap.js

@@ -38,6 +38,16 @@ const Profile = {
         type: "string",
         title: "userAddress",
         maxLength: 150,
+      },
+      phoneNumber: {
+        type: 'string',
+        title: 'phoneNumber',
+        maxLength: 15
+      },
+      dob: {
+        type: 'string',
+        title: 'dob',
+        maxLength: 20
       }
     },
   },

packages/react-app/src/ceramic/config.json

@@ -1 +1 @@
-{"definitions":{"profile":"kjzl6cwe1jw146y7w7cm8cscnh52vkq11xv8m14yc05qb10oniuwjxn2wnaxqw3"},"schemas":{"profile":"ceramic://k3y52l7qbv1fryhxxfhbn6a0rynx13gcfz54xakn08vkqtt8ru58pkwu2g8pzn3ls"}}
+{"definitions":{"profile":"kjzl6cwe1jw14bbssl2c6u8js1acvfhzwa56oxmq4pi60b6h1ztcrp4dzulreua"},"schemas":{"profile":"ceramic://k3y52l7qbv1frxmfl9wwnk1q87sw1qn316dj65o9ui6ic5rr73dbh6zuktv09h7nk"}}

packages/react-app/src/components/Profile.js

@@ -4,21 +4,48 @@ import {FieldTimeOutlined, MailOutlined, UserOutlined} from "@ant-design/icons";
 import {definitions} from "../ceramic/config.json";
 import {Header, Icon, Loader, Segment} from "semantic-ui-react";
 import {ProfileContainer} from "./styles/Profile.Style";
+import {updateUserProfile} from "../lib/threadDb";
 
 export default function Profile({ ceramic, idx }) {
   const [user, setUser] = useState(null);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [dob, setDob] = useState('');
+  const [userId, setUserId] = useState('');
+  const [phoneNumber, setPhoneNumber] = useState('');
+
+  const userType = { party: 0, notary: 1 };
+
   const [userLoading, setUserLoading] = useState(true);
   useEffect(() => {
     async function getUserData() {
       try {
         if (idx) {
           const data = await idx.get(definitions.profile, idx.id);
-          setUser(data);
+
+          const userThreadDb = JSON.parse(localStorage.getItem('USER'))
+          setUser(userThreadDb);
+          setName(userThreadDb.name);
+          setEmail(userThreadDb.email);
+          setDob(userThreadDb.profileDetails.DOB);
+          setPhoneNumber(userThreadDb.profileDetails.phoneNumber)
+          setUserId(userThreadDb._id)
           setUserLoading(false);
           if(data){
             console.log("data fetched")
           }else{
+            // Registration on idx
             console.log("Something is wrong with IDX")
+            let notary = true
+            if (userThreadDb.userType===0){
+              notary = false
+            }
+            await idx.set(definitions.profile, {
+              name: userThreadDb.name,
+              email: userThreadDb.email,
+              notary: notary,
+              userAddress: userThreadDb.address
+            });
           }
         }
       } catch (err) {
@@ -28,6 +55,11 @@ export default function Profile({ ceramic, idx }) {
     getUserData();
   }, [idx]);
 
+
+  const updateProfile = async ()=>{
+    await updateUserProfile(name, email, dob, phoneNumber, userId, idx)
+  }
+
   return !userLoading ? (
     user ?
     <>

packages/react-app/src/components/Profile/EditProfile.Styles.js

@@ -0,0 +1,41 @@
+import styled from "styled-components";
+
+export const FormContainer = styled.div`
+  overflow: hidden;
+  width: 392px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+  .logo-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 15px;
+  }
+  .form-input {
+    margin: 12px 0 12px 0;
+    width: 392px;
+    height: 37.8px !important;
+    width: 100%;
+  }
+  .checkbox {
+    color: #717171;
+    margin-top: 14px;
+    margin-bottom: 2px;
+  }
+  /* .btn-primary {
+    width: 374px !important;
+    height: 38px !important;
+    background-color: #4c51bf;
+    color: #fff;
+    margin-right: 1px;
+  } */
+
+  .form-input-btn {
+    width: 385px;
+    color: #fff;
+    background-color: #4c51bf;
+  }
+`;

packages/react-app/src/components/Profile/EditProfile.js

@@ -0,0 +1,144 @@
+import React, { useEffect, useState } from "react";
+import { Button, Checkbox, Form, Input, Message, Modal } from "semantic-ui-react";
+
+import { FormContainer } from "./EditProfile.Styles";
+import { updateUserProfile } from "../../lib/threadDb";
+import Warning from "./Warning";
+import UpdateSuccess from "./updateSuccess";
+import FinalUpdate from "./FinalUpdate";
+
+function EditProfile({ open, setOpen, user, DOB, PhoneNumber, idx }) {
+  const [name, setName] = useState(user.name);
+  const [email, setEmail] = useState(user.email);
+
+  const [dob, setDob] = useState(DOB);
+  const [userId, setUserId] = useState(user._id);
+  const [phoneNumber, setPhoneNumber] = useState(PhoneNumber);
+  const [loader, setloader] = useState(false);
+  const [warning, setWarning] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [updated, setUpdated] = useState(false);
+
+  const updateProfile = async () => {
+    console.log("Function called!!!");
+    setloader(true);
+
+    if (name.length === 0) {
+      setName("NA");
+    }
+
+    if (phoneNumber.length !== 0 && phoneNumber !== "NA") {
+      const pattern = /^\d{10}$/;
+      if (!phoneNumber.match(pattern)) {
+        // alert("Wrong mobile number!!");
+        setloader(false);
+        setWarning(true);
+        return;
+      }
+    } else {
+      setPhoneNumber("NA");
+    }
+
+    if (email.length !== 0 && email !== "NA") {
+      const pattern = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
+      if (!email.match(pattern)) {
+        // alert("Wrong email!!");
+        setloader(false);
+        setWarning(true);
+        return;
+      }
+    } else {
+      setEmail("NA");
+    }
+
+    const result = await updateUserProfile(name, email, dob, phoneNumber, userId, idx, user.publicKey);
+    if (result) {
+      setloader(false);
+      setOpen(false);
+      setSuccess(true);
+    } else {
+      setUpdated(true);
+    }
+
+    //
+  };
+
+  return (
+    <>
+      <Warning warning={warning} setWarning={setWarning} />
+      <UpdateSuccess success={success} setSuccess={setSuccess} />
+      <FinalUpdate updated={updated} setUpdated={setUpdated} />
+      <Modal
+        open={open}
+        onClose={() => setOpen(false)}
+        onOpen={() => setOpen(true)}
+        size="small"
+        style={{ width: "450px" }}
+      >
+        <Modal.Header>Profile Update</Modal.Header>
+        <Modal.Content image>
+          <Modal.Description>
+            <FormContainer>
+              <Form>
+                <Form.Field className="form-input" required>
+                  <Input
+                    fluid
+                    icon="user"
+                    iconPosition="left"
+                    value={name}
+                    type="text"
+                    className="form-input"
+                    onChange={e => setName(e.target.value)}
+                  />
+                </Form.Field>
+
+                <Form.Field className="form-input">
+                  <Input
+                    fluid
+                    type="text"
+                    icon="mail"
+                    size="30"
+                    iconPosition="left"
+                    value={email}
+                    className="form-input"
+                    onChange={e => setEmail(e.target.value)}
+                  />
+                </Form.Field>
+
+                <Form.Field className="form-input">
+                  <Input
+                    fluid
+                    type="tel"
+                    icon="phone"
+                    iconPosition="left"
+                    value={phoneNumber}
+                    className="form-input"
+                    onChange={e => setPhoneNumber(e.target.value)}
+                  />
+                </Form.Field>
+
+                <Form.Field className="form-input">
+                  <Input
+                    fluid
+                    type="datetime-local"
+                    icon="time"
+                    iconPosition="left"
+                    value={dob}
+                    className="form-input"
+                    onChange={e => setDob(e.target.value)}
+                  />
+                </Form.Field>
+
+                <Button type="primary" loading={loader} className="form-input-btn" onClick={updateProfile}>
+                  Update
+                </Button>
+              </Form>
+            </FormContainer>
+          </Modal.Description>
+        </Modal.Content>
+      </Modal>
+    </>
+  );
+}
+
+export default EditProfile;

packages/react-app/src/components/Profile/FinalUpdate.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Button, Modal } from "semantic-ui-react";
+
+function FinalUpdate({ updated, setUpdated }) {
+  return (
+    <Modal size="mini" open={updated} onOpen={() => setUpdated(true)} onClose={() => setUpdated(false)}>
+      <Modal.Header>OOPS!!</Modal.Header>
+      <Modal.Content>
+        <p>Something went wrong. profile could not be updated. Please try again</p>
+      </Modal.Content>
+      <Modal.Actions>
+        <Button negative onClick={() => setUpdated(false)}>
+          Close
+        </Button>
+      </Modal.Actions>
+    </Modal>
+  );
+}
+
+export default FinalUpdate;