form for showing Prompt

Author: bradwestfall

src/projects/authentication/AddUser.js

@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+import { Prompt } from 'react-router-dom'
+import Card from '../../ui/Card'
+
+const AddUser = () => {
+  const [formIsDirty, setFormIsDirty] = useState(false)
+
+  function handleSubmit(e) {
+    e.preventDefault()
+    console.log('submit')
+  }
+
+  return (
+    <Card style={{ minHeight: '20em' }}>
+      <Prompt when={formIsDirty} message="Are you sure you want to leave this form before saving?" />
+      <form className="spacing" onSubmit={handleSubmit}>
+        <input onChange={() => setFormIsDirty(true)} type="text" placeholder="Email" required />
+        <input onChange={() => setFormIsDirty(true)} type="password" placeholder="Password" required />
+        <button type="submit" className="button">
+          Add User
+        </button>
+      </form>
+    </Card>
+  )
+}
+
+export default AddUser

src/projects/authentication/AuthenticationLayout.js

@@ -4,6 +4,7 @@ import Panel from '../../ui/Panel'
 import PageHeader from '../../ui/PageHeader'
 import { PageHeaderTabs, Tab } from '../../ui/PageHeaderTabs'
 import Users from './Users'
+import AddUser from './AddUser'
 import SigninMethods from './SigninMethods'
 import Templates from './Templates'
 
@@ -19,6 +20,7 @@ const AuthenticationLayout = ({ match }) => {
       </PageHeader>
       <Panel>
         <Switch>
+          <Route path={`${match.path}/users/add-user`} component={AddUser} />
           <Route path={`${match.path}/users`} component={Users} />
           <Route path={`${match.path}/signin-method`} component={SigninMethods} />
           <Route path={`${match.path}/templates`} component={Templates} />

src/projects/authentication/Users.js

@@ -1,8 +1,15 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
 import Card from '../../ui/Card'
 
-const Users = () => {
-  return <Card style={{ height: '20em' }}>Users</Card>
+const Users = ({ match }) => {
+  return (
+    <Card style={{ height: '20em' }}>
+      <Link to={`${match.url}/add-user`} className="button">
+        Add User
+      </Link>
+    </Card>
+  )
 }
 
 export default Users