Add welcome window (with Terms and Conditions)

app/index.js

@@ -2,6 +2,7 @@ import { app, dialog, shell } from 'electron'
 import { autoUpdater } from 'electron-updater'
 import { join as pathJoin } from 'path'
 import pjson from '../package.json'
+import Settings from 'electron-settings'
 import './report'
 import rootDir from 'app-root-dir'
 import setupTrayIcon from './setup-tray-icon'
@@ -24,6 +25,7 @@ import {
 
 import LoadingWindow from './windows/Loading/window'
 import StorageWindow from './windows/Storage/window'
+import WelcomeWindow from './windows/Welcome/window'
 
 // Let's create the main window
 app.mainWindow = null
@@ -72,7 +74,18 @@ function askWhichNodeToUse (apiVersion) {
   return btnId === 1
 }
 
-app.on('ready', () => {
+/**
+ * This method will:
+ *  1. setup the tray icon (except on macOS)
+ *  2. check for updates
+ *  3. show loading window
+ *  4. check if an API is already running
+ *  5. start the daemon if not
+ *  6. connect to the API
+ *  7. connect to the Siderus peers (and add them as bootstrap nodes)
+ *  8. show storage window
+ */
+function startOrion () {
   // On MacOS it's expected for the app not to close, and to re-open it from Launchpad
   if (process.platform !== 'darwin') {
     setupTrayIcon()
@@ -238,6 +251,28 @@ app.on('ready', () => {
         app.quit()
       })
   })
+}
+
+app.on('start-orion', () => {
+  startOrion()
+})
+
+app.on('ready', () => {
+  const userAgreement = Settings.getSync('userAgreement')
+
+  if (userAgreement) {
+    startOrion()
+  } else {
+    // If the user did not accept our ToS, show the welcome window
+    const welcomeWindow = WelcomeWindow.create(app)
+    welcomeWindow.on('closed', () => {
+      // If the user did not accept ToS, but closed the welcome window, quit (don't run the the bg)
+      const userAgreement = Settings.getSync('userAgreement')
+      if (!userAgreement) {
+        app.quit()
+      }
+    })
+  }
 })
 
 app.on('activate', () => {

app/windows/Welcome/Components/TermsOfServicePage.jsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import styled from 'styled-components'
+import ToS from './ToS'
+
+import {
+  Window,
+  Content,
+  Toolbar,
+  Actionbar,
+  Button,
+  CheckBox
+} from 'react-photonkit'
+
+const StyledContent = styled.div`
+  h1:first-child {
+    margin-top: 0px;
+  }
+`
+
+const TermsSection = styled.section`
+  background: white;
+  height: calc(100vh - 250px);
+  overflow: auto;
+  padding: 0px 10px;
+`
+
+class TermsOfServicePage extends React.Component {
+  state = {
+    checked: false
+  }
+
+  handleCheckChange = () => {
+    this.setState(prevState => ({ checked: !prevState.checked }))
+  }
+
+  handleSubmit = (event) => {
+    event.preventDefault()
+    if (!this.state.checked) return
+
+    this.props.onAccept()
+  }
+
+  render () {
+    const { onQuit } = this.props
+    const { checked } = this.state
+
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <Window>
+          <Content>
+            <StyledContent>
+              <h1>Terms and Conditions</h1>
+              <p>In order to continue, you need to accept the Terms and Conditions:</p>
+              <TermsSection>
+                <ToS />
+              </TermsSection>
+              <CheckBox
+                label="I accept terms and conditions"
+                checked={checked}
+                onChange={this.handleCheckChange}
+              />
+            </StyledContent>
+          </Content>
+          <Toolbar ptType="footer">
+            <Actionbar>
+              <Button text="Quit" ptStyle="default" onClick={onQuit} />
+              {
+                checked &&
+                <Button
+                  text="Done"
+                  ptStyle="primary"
+                  type="submit"
+                  pullRight
+                />
+              }
+            </Actionbar>
+          </Toolbar>
+        </Window>
+      </form>
+    )
+  }
+}
+
+export default TermsOfServicePage

app/windows/Welcome/Components/WelcomePage.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import OrionLogo from '../../../../docs/logo.svg'
+import styled from 'styled-components'
+
+import {
+  Window,
+  Content,
+  Toolbar,
+  Actionbar,
+  Button
+} from 'react-photonkit'
+
+const Centered = styled.div`
+  text-align: center !important;
+`
+
+function WelcomePage ({ onNext }) {
+  return (
+    <Window>
+      <Content>
+        <Centered>
+          <OrionLogo width='150px' />
+          <h1>Siderus Orion</h1>
+          <h3>Welcome</h3>
+          <p>Siderus Orion is the easiest way to start using the decentralised web with IPFS and Siderus Network. It supports a larger number of dApps as wel as the IPFS Browser Companion, to speed up your connection when surfing the decentralised web.</p>
+          <p>This wizard will help you with the initial requirements.</p>
+        </Centered>
+      </Content>
+      <Toolbar ptType="footer">
+        <Actionbar>
+          <Button text="Next" ptStyle="primary" onClick={onNext} pullRight />
+        </Actionbar>
+      </Toolbar>
+    </Window>
+  )
+}
+
+export default WelcomePage

app/windows/Welcome/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Welcome</title>
+  <style>
+  .window-content {
+    padding: 24px !important;
+    display: initial !important;
+    background-color: rgb(236, 236, 236) !important;
+  }
+  </style>
+</head>
+
+<body>
+  <div id="host"></div>
+</body>
+
+<!-- Electron Javascript -->
+<script src="loader.js" charset="utf-8"></script>
+</html>

app/windows/Welcome/loader.js

@@ -0,0 +1,7 @@
+import Spinner from 'spin.js'
+
+var target = document.getElementById('host')
+new Spinner().spin(target)
+
+// After the spinner is rendered, we require the actual component
+setTimeout(() => require('./renderer.jsx'), 0)

app/windows/Welcome/renderer.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import ReactDom from 'react-dom'
+
+import WelcomePage from './Components/WelcomePage'
+import TermsOfServicePage from './Components/TermsOfServicePage'
+import { remote } from 'electron'
+import Settings from 'electron-settings'
+
+class WelcomeWindow extends React.Component {
+  state = {
+    page: 0
+  }
+
+  handleNext = () => {
+    this.setState({ page: 1 })
+  }
+
+  handleQuit = () => {
+    window.close()
+  }
+
+  handleAccept = () => {
+    Settings.setSync('userAgreement', true)
+    remote.app.emit('start-orion')
+    window.close()
+  }
+
+  render () {
+    const { page } = this.state
+
+    return (
+      page === 0
+        ? <WelcomePage onNext={this.handleNext} />
+        : <TermsOfServicePage onQuit={this.handleQuit} onAccept={this.handleAccept} />
+    )
+  }
+}
+
+ReactDom.render(<WelcomeWindow />, document.querySelector('#host'))

app/windows/Welcome/window.js

@@ -0,0 +1,70 @@
+/**
+ * This window will prompt the user with the a short description about Orion
+ * and with the Terms and Conditions which need to be read and accepted
+ */
+
+import path from 'path'
+import url from 'url'
+
+import { BrowserWindow, remote } from 'electron'
+
+import isRenderer from 'is-electron-renderer'
+
+// Allow us to use create() in both electron windows and main process
+let BrowserWindowClass
+if (isRenderer) {
+  BrowserWindowClass = remote.BrowserWindow
+} else {
+  BrowserWindowClass = BrowserWindow
+}
+
+module.exports = {}
+
+module.exports.create = function createResolveIPNSWindow (app) {
+  // Create the browser modal window.
+  let thisWindow = new BrowserWindowClass({
+    title: 'Welcome',
+    parent: app.mainWindow,
+    modal: true,
+
+    width: 600,
+    minWidth: 600,
+    height: 600,
+    minHeight: 600,
+
+    maximizable: false,
+    resizable: true,
+    fullscreenable: false,
+    icon: path.join(__dirname, '../../../docs/logo.png'),
+
+    show: false,
+    webPreferences: {
+      preload: path.join(__dirname, '../../report.js')
+    }
+  })
+
+  // Show menu only on StorageList
+  thisWindow.setMenu(null)
+
+  // Show the window only when ready
+  thisWindow.once('ready-to-show', () => {
+    thisWindow.show()
+  })
+
+  // Load the index.html of the app.
+  thisWindow.loadURL(url.format({
+    pathname: path.join(__dirname, 'index.html'),
+    protocol: 'file:',
+    slashes: true
+  }))
+
+  // Emitted when the window is closed.
+  thisWindow.on('closed', () => {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    thisWindow = null
+  })
+
+  return thisWindow
+}