MOCO Browser Extension (#2)
* spike * initial draft * updated styling * skeleton * added bubble script to webpack * added linter settings * installs * first implementation * Update webpack config - write bundle to `/build` - add support for SASS - improve options view as a proof o concept for styling * Update es-lint rules to mach mocoapp * Upgrade npm packages * Mount Bubble only for configured services * Update react and babel * Move module resolution config to webpack * Syncrhonize apiClient with chrome storage * Load projects and initialize form with last project and task * Enhance service * Improve handling of changeset with defaults * Create activity * Show error page on missing configuration * Refactor so that changeset can be used as activity params * Show form errors * Fetch and show booked hours for service * Allow to book hours with colon, error handling, spinner * WIP: Shadow DOM * Remove shadow dom * Render App in iframe * Refactor App component to load projects and create activity * Bugsnag integration * Add title to form and timer hint to hours input field * Configure positioning of bubble * Get rid of shared browser instance * Show Calendar and animate buble * Update webpack config * Prevent double animation of bubble * Fix eslint * Add margin to iframe body * Submit form when pressing enter on textarea * Open select on Enter * Use local environment for development * Show upgrade error if version invalid * Add asana service * Add jira and wunderlist services, add better support for query strings * Match urls with hash * Show popup in browser action * Pump version, add version to zip file * Add youtrack service * WIP: always show browserAction * Refactor * Update design * Finalize release 1.0.3 * Fix styles * Add support for Firefox browser * Extract common webpack config * Fix eslint * Close modal with ESC key * Use TimeInputParser to parse hours input * Improve webpack config * Show modal instead of popup when clicking on browser action * Pre-select last booked activities on service * Remove badge from booked hours * Show error and success feedback on options page * Remove updateBrowserActionForTab * Animate Bubble on unmount * Fix select date * Refactor * Fix key shortcut * Show schedule in calendar * Upload source maps to bugsnag * Upload sourcemaps to bugsnag * Define command shortcuts * Fix race condition where both Bubble and content wanted to mount Popup The content script is now the only place, where the Popup is mounted * Replace hash in filename by version * No new line in textarea and updated shortcuts for chrome * Change shortcut to Ctrl+Shift+K * Fix cors issue in new chrome 73 * Style improvements * Only report errors from own sources * Prevent sending messages to browser tabs * Fix scrollbars in iframe * Add error page for unknown error * Add stop propagation to Bubble click event * Update error pages * Remove timeout in tabHandler. The messaging error occurs only when the browser extension is reloaded/updated without refreshing the browser tab. * Refactor messaging * Show spinner in popup * Extract message handler to own module * Update styles and texts of error pages * Ensure focus is on document when opening popup * Find projects by identifier and value, do not highlight selected option in select component * Update docs * Spread match properties on service; improve remote service configuration for jira and wunderlist * Add webpack plugin to remove source mapping url * Bugsnag do not collect user ip * Upload source maps before removing source mapping url in bundles * Add support for regex url patterns, update asana config. * Fix animation Set default transform property via css * Improve config for asana * Change to fad-in/out animation
This commit is contained in:
Manuel Bouza
103
src/js/components/Options.js
Normal file
103
src/js/components/Options.js
Normal file
@@ -0,0 +1,103 @@
|
||||
import React, { Component } from "react"
|
||||
import { observable } from "mobx"
|
||||
import { observer } from "mobx-react"
|
||||
import { isChrome, getSettings, setStorage } from "utils/browser"
|
||||
import ApiClient from "api/Client"
|
||||
|
||||
@observer
|
||||
class Options extends Component {
|
||||
@observable subdomain = "";
|
||||
@observable apiKey = "";
|
||||
@observable errorMessage = null;
|
||||
@observable isSuccess = false;
|
||||
|
||||
componentDidMount() {
|
||||
getSettings().then(({ subdomain, apiKey }) => {
|
||||
this.subdomain = subdomain || ""
|
||||
this.apiKey = apiKey || ""
|
||||
})
|
||||
}
|
||||
|
||||
onChange = event => {
|
||||
this[event.target.name] = event.target.value.trim()
|
||||
};
|
||||
|
||||
handleSubmit = _event => {
|
||||
this.isSuccess = false
|
||||
this.errorMessage = null
|
||||
setStorage({ subdomain: this.subdomain, apiKey: this.apiKey }).then(() => {
|
||||
const { version } = chrome.runtime.getManifest()
|
||||
const apiClient = new ApiClient({
|
||||
subdomain: this.subdomain,
|
||||
apiKey: this.apiKey,
|
||||
version
|
||||
})
|
||||
apiClient
|
||||
.login()
|
||||
.then(() => {
|
||||
this.isSuccess = true
|
||||
this.closeWindow()
|
||||
})
|
||||
.catch(error => {
|
||||
this.errorMessage =
|
||||
error.response?.data?.message || "Anmeldung fehlgeschlagen"
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
handleInputKeyDown = event => {
|
||||
if (event.key === "Enter") {
|
||||
this.handleSubmit()
|
||||
}
|
||||
};
|
||||
|
||||
closeWindow = () => {
|
||||
isChrome() && window.close()
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="moco-bx-options">
|
||||
<h2 style={{ textAlign: "center" }}>Einstellungen</h2>
|
||||
{this.errorMessage && (
|
||||
<div className="text-danger">{this.errorMessage}</div>
|
||||
)}
|
||||
{this.isSuccess && (
|
||||
<div className="text-success">Anmeldung erfolgreich</div>
|
||||
)}
|
||||
<div className="form-group">
|
||||
<label>Internetadresse</label>
|
||||
<div className="input-group">
|
||||
<input
|
||||
type="text"
|
||||
name="subdomain"
|
||||
value={this.subdomain}
|
||||
onKeyDown={this.handleInputKeyDown}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
<span className="input-group-addon">.mocoapp.com</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>API-Schlüssel</label>
|
||||
<input
|
||||
type="text"
|
||||
name="apiKey"
|
||||
value={this.apiKey}
|
||||
onKeyDown={this.handleInputKeyDown}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
<p className="text-muted">
|
||||
Den API-Schlüssel findest du in deinem Profil unter
|
||||
"Integrationen".
|
||||
</p>
|
||||
</div>
|
||||
<button className="moco-bx-btn" onClick={this.handleSubmit}>
|
||||
OK
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Options
|
||||
Reference in New Issue
Block a user