From 9a7d0347713c9c428b831ee60773dcdfb975472c Mon Sep 17 00:00:00 2001
From: Jonathan Zernik <yzernik@gmail.com>
Date: Fri, 31 Jul 2020 04:12:40 -0700
Subject: [PATCH] Use dialog for create profile (#183)

* Use dialog for create signing profile

* Create signing profile dialog working

* Add create contact profile dialog

* Delete create signing profile page and create contact profile page
---
 .../CreateContactProfileDialog.js             | 166 ++++++++++++++++++
 .../CreateContactProfileDialog/package.json   |   6 +
 .../CreateContactProfileDialog/styles.js      |  43 +++++
 .../CreateSigningProfileDialog.js             | 141 +++++++++++++++
 .../CreateSigningProfileDialog/package.json   |   6 +
 .../CreateSigningProfileDialog/styles.js      |  43 +++++
 .../src/components/Layout/Layout.js           |   4 -
 .../CreateContactProfile.js                   |  84 ---------
 .../pages/createcontactprofile/package.json   |   6 -
 .../src/pages/createcontactprofile/styles.js  |  21 ---
 .../CreateSigningProfile.js                   |  76 --------
 .../pages/createsigningprofile/package.json   |   6 -
 .../src/pages/createsigningprofile/styles.js  |  21 ---
 .../src/pages/profiles/Profiles.js            |  56 ++++--
 14 files changed, 451 insertions(+), 228 deletions(-)
 create mode 100644 frontend/squeak-node-frontend/src/components/CreateContactProfileDialog/CreateContactProfileDialog.js
 create mode 100644 frontend/squeak-node-frontend/src/components/CreateContactProfileDialog/package.json
 create mode 100644 frontend/squeak-node-frontend/src/components/CreateContactProfileDialog/styles.js
 create mode 100644 frontend/squeak-node-frontend/src/components/CreateSigningProfileDialog/CreateSigningProfileDialog.js
 create mode 100644 frontend/squeak-node-frontend/src/components/CreateSigningProfileDialog/package.json
 create mode 100644 frontend/squeak-node-frontend/src/components/CreateSigningProfileDialog/styles.js
 delete mode 100644 frontend/squeak-node-frontend/src/pages/createcontactprofile/CreateContactProfile.js
 delete mode 100644 frontend/squeak-node-frontend/src/pages/createcontactprofile/package.json
 delete mode 100644 frontend/squeak-node-frontend/src/pages/createcontactprofile/styles.js
 delete mode 100644 frontend/squeak-node-frontend/src/pages/createsigningprofile/CreateSigningProfile.js
 delete mode 100644 frontend/squeak-node-frontend/src/pages/createsigningprofile/package.json
 delete mode 100644 frontend/squeak-node-frontend/src/pages/createsigningprofile/styles.js

diff --git a/frontend/squeak-node-frontend/src/components/CreateContactProfileDialog/CreateContactProfileDialog.js b/frontend/squeak-node-frontend/src/components/CreateContactProfileDialog/CreateContactProfileDialog.js
new file mode 100644
index 00000000..65168603
--- /dev/null
+++ b/frontend/squeak-node-frontend/src/components/CreateContactProfileDialog/CreateContactProfileDialog.js
@@ -0,0 +1,166 @@
+import React, {useState, useEffect} from 'react';
+import {
+  Paper,
+  IconButton,
+  Menu,
+  MenuItem,
+  Typography,
+  Grid,
+  Box,
+  Link,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  TextField,
+  DialogActions,
+  Button,
+  FormControl,
+  InputLabel,
+  Select,
+} from "@material-ui/core";
+import { MoreVert as MoreIcon } from "@material-ui/icons";
+import {useHistory} from "react-router-dom";
+import classnames from "classnames";
+
+// styles
+import useStyles from "./styles";
+
+import Widget from "../../components/Widget";
+import SqueakThreadItem from "../../components/SqueakThreadItem";
+
+import {
+  CreateContactProfileRequest,
+} from "../../proto/squeak_admin_pb"
+import {SqueakAdminClient} from "../../proto/squeak_admin_grpc_web_pb"
+
+var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
+
+export default function CreateContactProfileDialog({
+  open,
+  handleClose,
+  ...props
+}) {
+  var classes = useStyles();
+  const history = useHistory();
+
+  var [profileName, setProfileName] = useState('');
+  var [address, setAddress] = useState('');
+
+  const handleChangeProfileName = (event) => {
+    setProfileName(event.target.value);
+  };
+
+  const handleChangeAddress = (event) => {
+    setAddress(event.target.value);
+  };
+
+  const createContactProfile = (profileName, squeakAddress) => {
+    console.log("called createContactProfile");
+
+    var createContactProfileRequest = new CreateContactProfileRequest()
+    createContactProfileRequest.setProfileName(profileName);
+    createContactProfileRequest.setAddress(squeakAddress);
+    console.log(createContactProfileRequest);
+
+    client.createContactProfile(createContactProfileRequest, {}, (err, response) => {
+      if (err) {
+        console.log(err.message);
+        alert('Error creating contact profile: ' + err.message);
+        return;
+      }
+      console.log(response);
+      console.log(response.getProfileId());
+      goToProfilePage(response.getProfileId());
+    });
+  };
+
+  const goToProfilePage = (profileId) => {
+    history.push("/app/profile/" + profileId);
+  };
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    console.log( 'profileName:', profileName);
+    console.log( 'address:', address);
+    if (!profileName) {
+      alert('Profile Name cannot be empty.');
+      return;
+    }
+    if (!address) {
+      alert('Address Name cannot be empty.');
+      return;
+    }
+    createContactProfile(profileName, address);
+    handleClose();
+  }
+
+  function CreateContactProfileNameInput() {
+    return (
+      <TextField
+        id="standard-textarea"
+        label="Profile Name"
+        required
+        autoFocus
+        value={profileName}
+        onChange={handleChangeProfileName}
+        fullWidth
+        inputProps={{ maxLength: 64 }}
+      />
+    )
+  }
+
+  function CreateContactAddressInput() {
+    return (
+      <TextField required
+          id="standard-textarea"
+          label="Address"
+          required
+          value={address}
+          onChange={handleChangeAddress}
+          inputProps={{ maxLength: 35 }}
+      />
+    )
+  }
+
+  function CancelButton() {
+    return (
+      <Button
+        onClick={handleClose}
+        variant="contained"
+        color="secondary"
+      >
+        Cancel
+      </Button>
+    )
+  }
+
+  function CreateContactProfilButton() {
+    return (
+      <Button
+       type="submit"
+       variant="contained"
+       color="primary"
+       className={classes.button}
+       >
+       Create Contact Profile
+       </Button>
+    )
+  }
+
+  return (
+    <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
+  <DialogTitle id="form-dialog-title">Create Contact Profile</DialogTitle>
+  <form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
+  <DialogContent>
+    {CreateContactProfileNameInput()}
+    {CreateContactAddressInput()}
+  </DialogContent>
+  <DialogActions>
+    {CancelButton()}
+    {CreateContactProfilButton()}
+  </DialogActions>
+  </form>
+    </Dialog>
+  )
+}
diff --git a/frontend/squeak-node-frontend/src/components/CreateContactProfileDialog/package.json b/frontend/squeak-node-frontend/src/components/CreateContactProfileDialog/package.json
new file mode 100644
index 00000000..ecf74577
--- /dev/null
+++ b/frontend/squeak-node-frontend/src/components/CreateContactProfileDialog/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "CreateContactProfileDialog",
+  "version": "0.0.0",
+  "private": true,
+  "main": "CreateContactProfileDialog.js"
+}
diff --git a/frontend/squeak-node-frontend/src/components/CreateContactProfileDialog/styles.js b/frontend/squeak-node-frontend/src/components/CreateContactProfileDialog/styles.js
new file mode 100644
index 00000000..f2d64da1
--- /dev/null
+++ b/frontend/squeak-node-frontend/src/components/CreateContactProfileDialog/styles.js
@@ -0,0 +1,43 @@
+import { makeStyles } from "@material-ui/styles";
+
+export default makeStyles(theme => ({
+  widgetWrapper: {
+    display: "flex",
+    minHeight: "100%",
+  },
+  widgetHeader: {
+    padding: theme.spacing(3),
+    paddingBottom: theme.spacing(1),
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  widgetRoot: {
+    boxShadow: theme.customShadows.widget,
+  },
+  widgetBody: {
+    paddingBottom: theme.spacing(3),
+    paddingRight: theme.spacing(3),
+    paddingLeft: theme.spacing(3),
+  },
+  noPadding: {
+    padding: 0,
+  },
+  paper: {
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    overflow: "hidden",
+  },
+  moreButton: {
+    margin: -theme.spacing(1),
+    padding: 0,
+    width: 40,
+    height: 40,
+    color: theme.palette.text.hint,
+    "&:hover": {
+      backgroundColor: theme.palette.primary.main,
+      color: "rgba(255, 255, 255, 0.35)",
+    },
+  },
+}));
diff --git a/frontend/squeak-node-frontend/src/components/CreateSigningProfileDialog/CreateSigningProfileDialog.js b/frontend/squeak-node-frontend/src/components/CreateSigningProfileDialog/CreateSigningProfileDialog.js
new file mode 100644
index 00000000..82eeeb4d
--- /dev/null
+++ b/frontend/squeak-node-frontend/src/components/CreateSigningProfileDialog/CreateSigningProfileDialog.js
@@ -0,0 +1,141 @@
+import React, {useState, useEffect} from 'react';
+import {
+  Paper,
+  IconButton,
+  Menu,
+  MenuItem,
+  Typography,
+  Grid,
+  Box,
+  Link,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  TextField,
+  DialogActions,
+  Button,
+  FormControl,
+  InputLabel,
+  Select,
+} from "@material-ui/core";
+import { MoreVert as MoreIcon } from "@material-ui/icons";
+import {useHistory} from "react-router-dom";
+import classnames from "classnames";
+
+// styles
+import useStyles from "./styles";
+
+import Widget from "../../components/Widget";
+import SqueakThreadItem from "../../components/SqueakThreadItem";
+
+import {
+  CreateSigningProfileRequest,
+} from "../../proto/squeak_admin_pb"
+import {SqueakAdminClient} from "../../proto/squeak_admin_grpc_web_pb"
+
+var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
+
+export default function CreateSigningProfileDialog({
+  open,
+  handleClose,
+  ...props
+}) {
+  var classes = useStyles();
+  const history = useHistory();
+
+  var [profileName, setProfileName] = useState('');
+
+  const handleChangeProfileName = (event) => {
+    setProfileName(event.target.value);
+  };
+
+  const createSigningProfile = (profileName) => {
+    console.log("called createSigningProfile");
+
+    var createSigningProfileRequest = new CreateSigningProfileRequest()
+    createSigningProfileRequest.setProfileName(profileName);
+    console.log(createSigningProfileRequest);
+
+    client.createSigningProfile(createSigningProfileRequest, {}, (err, response) => {
+      if (err) {
+        console.log(err.message);
+        alert('Error creating signing profile: ' + err.message);
+        return;
+      }
+      console.log(response);
+      console.log(response.getProfileId());
+      goToProfilePage(response.getProfileId());
+    });
+  };
+
+  const goToProfilePage = (profileId) => {
+    history.push("/app/profile/" + profileId);
+  };
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    console.log( 'profileName:', profileName);
+    if (!profileName) {
+      alert('Profile Name cannot be empty.');
+      return;
+    }
+    createSigningProfile(profileName);
+    handleClose();
+  }
+
+  function CreateSigningProfileNameInput() {
+    return (
+      <TextField
+        id="standard-textarea"
+        label="Profile Name"
+        required
+        autoFocus
+        value={profileName}
+        onChange={handleChangeProfileName}
+        fullWidth
+        inputProps={{ maxLength: 64 }}
+      />
+    )
+  }
+
+  function CancelButton() {
+    return (
+      <Button
+        onClick={handleClose}
+        variant="contained"
+        color="secondary"
+      >
+        Cancel
+      </Button>
+    )
+  }
+
+  function CreateSigningProfilButton() {
+    return (
+      <Button
+       type="submit"
+       variant="contained"
+       color="primary"
+       className={classes.button}
+       >
+       Create Signing Profile
+       </Button>
+    )
+  }
+
+  return (
+    <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
+  <DialogTitle id="form-dialog-title">Create Signing Profile</DialogTitle>
+  <form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
+  <DialogContent>
+    {CreateSigningProfileNameInput()}
+  </DialogContent>
+  <DialogActions>
+    {CancelButton()}
+    {CreateSigningProfilButton()}
+  </DialogActions>
+  </form>
+    </Dialog>
+  )
+}
diff --git a/frontend/squeak-node-frontend/src/components/CreateSigningProfileDialog/package.json b/frontend/squeak-node-frontend/src/components/CreateSigningProfileDialog/package.json
new file mode 100644
index 00000000..e5caf51e
--- /dev/null
+++ b/frontend/squeak-node-frontend/src/components/CreateSigningProfileDialog/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "CreateSigningProfileDialog",
+  "version": "0.0.0",
+  "private": true,
+  "main": "CreateSigningProfileDialog.js"
+}
diff --git a/frontend/squeak-node-frontend/src/components/CreateSigningProfileDialog/styles.js b/frontend/squeak-node-frontend/src/components/CreateSigningProfileDialog/styles.js
new file mode 100644
index 00000000..f2d64da1
--- /dev/null
+++ b/frontend/squeak-node-frontend/src/components/CreateSigningProfileDialog/styles.js
@@ -0,0 +1,43 @@
+import { makeStyles } from "@material-ui/styles";
+
+export default makeStyles(theme => ({
+  widgetWrapper: {
+    display: "flex",
+    minHeight: "100%",
+  },
+  widgetHeader: {
+    padding: theme.spacing(3),
+    paddingBottom: theme.spacing(1),
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  widgetRoot: {
+    boxShadow: theme.customShadows.widget,
+  },
+  widgetBody: {
+    paddingBottom: theme.spacing(3),
+    paddingRight: theme.spacing(3),
+    paddingLeft: theme.spacing(3),
+  },
+  noPadding: {
+    padding: 0,
+  },
+  paper: {
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    overflow: "hidden",
+  },
+  moreButton: {
+    margin: -theme.spacing(1),
+    padding: 0,
+    width: 40,
+    height: 40,
+    color: theme.palette.text.hint,
+    "&:hover": {
+      backgroundColor: theme.palette.primary.main,
+      color: "rgba(255, 255, 255, 0.35)",
+    },
+  },
+}));
diff --git a/frontend/squeak-node-frontend/src/components/Layout/Layout.js b/frontend/squeak-node-frontend/src/components/Layout/Layout.js
index 60497c04..37ca8f89 100644
--- a/frontend/squeak-node-frontend/src/components/Layout/Layout.js
+++ b/frontend/squeak-node-frontend/src/components/Layout/Layout.js
@@ -20,8 +20,6 @@ import Dashboard from "../../pages/dashboard";
 import SqueakAddress from "../../pages/squeakaddress";
 import Squeak from "../../pages/squeak";
 import Profile from "../../pages/profile";
-import CreateSigningProfile from "../../pages/createsigningprofile";
-import CreateContactProfile from "../../pages/createcontactprofile";
 import Lightning from "../../pages/lightning";
 import Notifications from "../../pages/notifications";
 import Maps from "../../pages/maps";
@@ -55,8 +53,6 @@ function Layout(props) {
               <Route path="/app/squeakaddress/:address" component={SqueakAddress} />
               <Route path="/app/squeak/:hash" component={Squeak} />
               <Route path="/app/profile/:id" component={Profile} />
-              <Route path="/app/createsigningprofile" component={CreateSigningProfile} />
-              <Route path="/app/createcontactprofile" component={CreateContactProfile} />
               <Route path="/app/profiles" component={Profiles} />
               <Route path="/app/lightning" component={Lightning} />
               <Route path="/app/notifications" component={Notifications} />
diff --git a/frontend/squeak-node-frontend/src/pages/createcontactprofile/CreateContactProfile.js b/frontend/squeak-node-frontend/src/pages/createcontactprofile/CreateContactProfile.js
deleted file mode 100644
index a62cd319..00000000
--- a/frontend/squeak-node-frontend/src/pages/createcontactprofile/CreateContactProfile.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, {useState, useEffect} from 'react';
-import {useHistory} from "react-router-dom";
-import {Grid, TextField, Button, Typography, Paper} from "@material-ui/core";
-
-// styles
-import useStyles from "./styles";
-
-// components
-import PageTitle from "../../components/PageTitle";
-import Widget from "../../components/Widget";
-// import { Typography } from "../../components/Wrappers";
-
-import {CreateContactProfileRequest} from "../../proto/squeak_admin_pb"
-import {SqueakAdminClient} from "../../proto/squeak_admin_grpc_web_pb"
-
-var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
-
-export default function CreateContactProfilePage() {
-  const [profileName, setProfileName] = useState('');
-  const [address, setAddress] = useState('');
-
-  var classes = useStyles();
-  const history = useHistory();
-
-  const goToProfilePage = (profileId) => {
-    history.push("/app/profile/" + profileId);
-  };
-
-  function handleSubmit(event) {
-      event.preventDefault();
-      console.log( 'profileName:', profileName);
-      console.log( 'address:', address);
-     // You should see email and password in console.
-     // ..code to submit form to backend here...
-     createContactProfile(profileName, address);
-  }
-
-  const createContactProfile = (profileName, squeakAddress) => {
-    console.log("called createContactProfile");
-
-    var createContactProfileRequest = new CreateContactProfileRequest()
-    createContactProfileRequest.setProfileName(profileName);
-    createContactProfileRequest.setAddress(squeakAddress);
-    console.log(createContactProfileRequest);
-
-    client.createContactProfile(createContactProfileRequest, {}, (err, response) => {
-      if (err) {
-        console.log(err.message);
-        alert('Error creating contact profile: ' + err.message);
-        return;
-      }
-      console.log(response);
-      console.log(response.getProfileId());
-      goToProfilePage(response.getProfileId());
-    });
-  };
-
-  return (
-    <>
-     < PageTitle title = "Create Contact Profile" />
-     <Paper>
-         <form className={classes.root} onSubmit={handleSubmit} >
-             <TextField required
-                 value={profileName}
-                 label="Profile name"
-                 onInput={ e=>setProfileName(e.target.value)}
-             />
-             <TextField required
-                 value={address}
-                 label="Address"
-                 onInput={ e=>setAddress(e.target.value)}
-             />
-             <Typography className={classes.divider} />
-             <Button
-                 type="submit"
-                 variant="contained"
-                 className={classes.button}
-             >
-                 Create
-             </Button>
-         </form>
-     </Paper>
-</>);
-}
diff --git a/frontend/squeak-node-frontend/src/pages/createcontactprofile/package.json b/frontend/squeak-node-frontend/src/pages/createcontactprofile/package.json
deleted file mode 100644
index 4e6a85cd..00000000
--- a/frontend/squeak-node-frontend/src/pages/createcontactprofile/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "CreateContactProfile",
-  "version": "0.0.0",
-  "main": "CreateContactProfile.js",
-  "private": true
-}
diff --git a/frontend/squeak-node-frontend/src/pages/createcontactprofile/styles.js b/frontend/squeak-node-frontend/src/pages/createcontactprofile/styles.js
deleted file mode 100644
index 39d05eff..00000000
--- a/frontend/squeak-node-frontend/src/pages/createcontactprofile/styles.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { makeStyles } from "@material-ui/styles";
-
-export default makeStyles(theme => ({
-  dashedBorder: {
-    border: "1px dashed",
-    borderColor: theme.palette.primary.main,
-    padding: theme.spacing(2),
-    paddingTop: theme.spacing(4),
-    paddingBottom: theme.spacing(4),
-    marginTop: theme.spacing(1),
-  },
-  text: {
-    marginBottom: theme.spacing(2),
-  },
-  root: {
-  '& .MuiTextField-root': {
-    margin: theme.spacing(1),
-    width: '25ch',
-  },
-},
-}));
diff --git a/frontend/squeak-node-frontend/src/pages/createsigningprofile/CreateSigningProfile.js b/frontend/squeak-node-frontend/src/pages/createsigningprofile/CreateSigningProfile.js
deleted file mode 100644
index 431f6c41..00000000
--- a/frontend/squeak-node-frontend/src/pages/createsigningprofile/CreateSigningProfile.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, {useState, useEffect} from 'react';
-import {useHistory} from "react-router-dom";
-import {Grid, TextField, Button, Typography, Paper} from "@material-ui/core";
-
-// styles
-import useStyles from "./styles";
-
-// components
-import PageTitle from "../../components/PageTitle";
-import Widget from "../../components/Widget";
-// import { Typography } from "../../components/Wrappers";
-
-import {CreateSigningProfileRequest} from "../../proto/squeak_admin_pb"
-import {SqueakAdminClient} from "../../proto/squeak_admin_grpc_web_pb"
-
-var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
-
-export default function CreateSigningProfilePage() {
-  const [profileName, setProfileName] = useState('');
-
-  var classes = useStyles();
-  const history = useHistory();
-
-  const goToProfilePage = (profileId) => {
-    history.push("/app/profile/" + profileId);
-  };
-
-  function handleSubmit(event) {
-      event.preventDefault();
-      console.log( 'profileName:', profileName);
-     // You should see email and password in console.
-     // ..code to submit form to backend here...
-     createSigningProfile(profileName)
-  }
-
-  const createSigningProfile = (profileName) => {
-    console.log("called createSigningProfile");
-
-    var createSigningProfileRequest = new CreateSigningProfileRequest()
-    createSigningProfileRequest.setProfileName(profileName);
-    console.log(createSigningProfileRequest);
-
-    client.createSigningProfile(createSigningProfileRequest, {}, (err, response) => {
-      if (err) {
-        console.log(err.message);
-        alert('Error creating signing profile: ' + err.message);
-        return;
-      }
-      console.log(response);
-      console.log(response.getProfileId());
-      goToProfilePage(response.getProfileId());
-    });
-  };
-
-  return (
-    <>
-     < PageTitle title = "Create Signing Profile" />
-     <Paper>
-         <form className={classes.root} onSubmit={handleSubmit} >
-             <TextField required
-                 value={profileName}
-                 label="Profile name"
-                 onInput={ e=>setProfileName(e.target.value)}
-             />
-             <Typography className={classes.divider} />
-             <Button
-                 type="submit"
-                 variant="contained"
-                 className={classes.button}
-             >
-                 Create
-             </Button>
-         </form>
-     </Paper>
-</>);
-}
diff --git a/frontend/squeak-node-frontend/src/pages/createsigningprofile/package.json b/frontend/squeak-node-frontend/src/pages/createsigningprofile/package.json
deleted file mode 100644
index 26d35c84..00000000
--- a/frontend/squeak-node-frontend/src/pages/createsigningprofile/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "CreateSigningProfile",
-  "version": "0.0.0",
-  "main": "CreateSigningProfile.js",
-  "private": true
-}
diff --git a/frontend/squeak-node-frontend/src/pages/createsigningprofile/styles.js b/frontend/squeak-node-frontend/src/pages/createsigningprofile/styles.js
deleted file mode 100644
index 39d05eff..00000000
--- a/frontend/squeak-node-frontend/src/pages/createsigningprofile/styles.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { makeStyles } from "@material-ui/styles";
-
-export default makeStyles(theme => ({
-  dashedBorder: {
-    border: "1px dashed",
-    borderColor: theme.palette.primary.main,
-    padding: theme.spacing(2),
-    paddingTop: theme.spacing(4),
-    paddingBottom: theme.spacing(4),
-    marginTop: theme.spacing(1),
-  },
-  text: {
-    marginBottom: theme.spacing(2),
-  },
-  root: {
-  '& .MuiTextField-root': {
-    margin: theme.spacing(1),
-    width: '25ch',
-  },
-},
-}));
diff --git a/frontend/squeak-node-frontend/src/pages/profiles/Profiles.js b/frontend/squeak-node-frontend/src/pages/profiles/Profiles.js
index bfdc8476..e4d040a7 100644
--- a/frontend/squeak-node-frontend/src/pages/profiles/Profiles.js
+++ b/frontend/squeak-node-frontend/src/pages/profiles/Profiles.js
@@ -19,6 +19,8 @@ import {makeStyles} from '@material-ui/core/styles';
 import PageTitle from "../../components/PageTitle";
 import Widget from "../../components/Widget";
 import Table from "../dashboard/components/Table/Table";
+import CreateSigningProfileDialog from "../../components/CreateSigningProfileDialog";
+import CreateContactProfileDialog from "../../components/CreateContactProfileDialog";
 
 // data
 import mock from "../dashboard/mock";
@@ -99,6 +101,8 @@ export default function Profiles() {
   const classes = useStyles();
   const [signingProfiles, setSigningProfiles] = useState([]);
   const [contactProfiles, setContactProfiles] = useState([]);
+  const [createSigningProfileDialogOpen, setCreateSigningProfileDialogOpen] = useState(false);
+  const [createContactProfileDialogOpen, setCreateContactProfileDialogOpen] = useState(false);
   const [value, setValue] = useState(0);
   const history = useHistory();
 
@@ -155,18 +159,26 @@ export default function Profiles() {
     });
   };
 
-  const goToCreateSigningProfilePage = () => {
-    history.push("/app/createsigningprofile");
-  };
-
-  const goToCreateContactProfilePage = () => {
-    history.push("/app/createcontactprofile");
-  };
-
   const goToSqueakAddressPage = (squeakAddress) => {
     history.push("/app/squeakaddress/" + squeakAddress);
   };
 
+  const handleClickOpenCreateSigningProfileDialog = () => {
+    setCreateSigningProfileDialogOpen(true);
+  };
+
+  const handleCloseCreateSigningProfileDialog = () => {
+     setCreateSigningProfileDialogOpen(false);
+  };
+
+  const handleClickOpenCreateContactProfileDialog = () => {
+    setCreateContactProfileDialogOpen(true);
+  };
+
+  const handleCloseCreateContactProfileDialog = () => {
+     setCreateContactProfileDialogOpen(false);
+  };
+
   useEffect(() => {
     getLndInfo()
   }, []);
@@ -222,7 +234,7 @@ export default function Profiles() {
           <Button
             variant="contained"
             onClick={() => {
-              goToCreateSigningProfilePage();
+              handleClickOpenCreateSigningProfileDialog();
             }}>Create Signing Profile
           </Button>
         </div>
@@ -239,7 +251,7 @@ export default function Profiles() {
           <Button
             variant="contained"
             onClick={() => {
-              goToCreateContactProfilePage();
+              handleClickOpenCreateContactProfileDialog();
             }}>Add contact
           </Button>
         </div>
@@ -314,9 +326,33 @@ export default function Profiles() {
     )
   }
 
+  function CreateSigningProfileDialogContent() {
+    return (
+      <>
+        <CreateSigningProfileDialog
+          open={createSigningProfileDialogOpen}
+          handleClose={handleCloseCreateSigningProfileDialog}
+          ></CreateSigningProfileDialog>
+      </>
+    )
+  }
+
+  function CreateContactProfileDialogContent() {
+    return (
+      <>
+        <CreateContactProfileDialog
+          open={createContactProfileDialogOpen}
+          handleClose={handleCloseCreateContactProfileDialog}
+          ></CreateContactProfileDialog>
+      </>
+    )
+  }
+
   return (
     <>
      < PageTitle title = "Profiles" />
     {ProfilesTabs()}
+    {CreateSigningProfileDialogContent()}
+    {CreateContactProfileDialogContent()}
    < />);
 }