1 files changed, 45 insertions, 6 deletions

diff --git a/frontend/views/graph/components/page.form.js b/frontend/views/graph/components/page.form.js
index 26e30c9..38fee18 100644
--- a/frontend/views/graph/components/page.form.js
+++ b/frontend/views/graph/components/page.form.js
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'
 
 import { session } from '../../../session'
 
-import { TextInput, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'
+import { TextInput, ColorInput, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'
 
 const newPage = (data) => ({
   path: '',
@@ -11,7 +11,9 @@ const newPage = (data) => ({
   username: session('username'),
   description: '',
   settings: {
-    x: 0.05, y: 0.05,
+    x: 0.05,
+    y: 0.05,
+    background_color: '#000000',
   },
   ...data,
 })
@@ -72,6 +74,19 @@ export default class PageForm extends Component {
     })
   }
 
+  handleSettingsChange(e) {
+    const { name, value } = e.target
+    this.setState({
+      data: {
+        ...this.state.data,
+        settings: {
+          ...this.state.data.settings,
+          [name]: value,
+        }
+      }
+    })
+  }
+
   handleSubmit(e) {
     e.preventDefault()
     const { isNew, onSubmit } = this.props
@@ -95,6 +110,14 @@ export default class PageForm extends Component {
     }
   }
 
+  handleDelete() {
+    const { data } = this.state
+    console.log(data)
+    if (confirm('Really delete this page?')) {
+      actions.page.delete(page_id)
+    }
+  }
+
   render() {
     const { graph, isNew } = this.props
     const { title, submitTitle, errorFields, data } = this.state
@@ -123,16 +146,32 @@ export default class PageForm extends Component {
             onChange={this.handleChange.bind(this)}
             autoComplete="off"
           />
+          <ColorInput
+            title='BG'
+            name='background_color'
+            data={data.settings}
+            onChange={this.handleSettingsChange.bind(this)}
+            autoComplete="off"
+          />
           <TextArea
             title="Description"
             name="description"
             data={data}
             onChange={this.handleChange.bind(this)}
           />
-          <SubmitButton
-            title={submitTitle}
-            onClick={this.handleSubmit.bind(this)}
-          />
+          <div className='row buttons'>
+            <SubmitButton
+              title={submitTitle}
+              onClick={this.handleSubmit.bind(this)}
+            />
+            {!isNew && 
+              <SubmitButton
+                title={'Delete'}
+                className='destroy'
+                onClick={this.handleDelete.bind(this)}
+              />
+            }
+          </div>
           {!!errorFields.size &&
             <label>
               <span></span>