[#345] - shared dialog page for charts

frontend/app/components/shared-dialogs/charts-dialog.js

@@ -0,0 +1,33 @@
+import config from 'flaredown/config/environment';
+import CryptoJS from 'cryptojs';
+import Component from '@ember/component';
+import { get, set, computed } from '@ember/object';
+
+export default Component.extend({
+  classNames: ['flaredown-white-box', 'sharedChartsDialog'],
+
+  secretPhrase: config.encryptionSecret,
+  staticUrl: config.staticUrl,
+
+  encryptedUrl: computed('session.isAuthenticated', 'session.email', function() {
+    if(get(this, 'session.isAuthenticated')) {
+      const email = get(this, 'session.email');
+      const encryptedEmail = CryptoJS.AES.encrypt(email, get(this, 'secretPhrase'));
+
+      return `${get(this, 'staticUrl')}/charts/${encodeURIComponent(encryptedEmail)}`;
+    } else {
+      return '';
+    }
+  }),
+
+  actions: {
+    sendEmail() {
+      const encryptedUrl = encodeURIComponent(get(this, 'encryptedUrl'));
+      const currentUser = get(this, 'session.currentUser');
+      const screenName = currentUser ?  get(currentUser, 'profile.screenName') : "";
+      const subject = `${screenName} would like to share their health charts with you`;
+
+      window.location.href = `mailto:?subject=${subject}&body=${encryptedUrl}`;
+    },
+  },
+});

frontend/app/routes/charts/index.js

@@ -0,0 +1,6 @@
+import AuthenticatedRouteMixin from 'flaredown/mixins/authenticated-route-mixin';
+import Route from '@ember/routing/route';
+import { get } from '@ember/object';
+
+export default Route.extend(AuthenticatedRouteMixin, {
+});

frontend/app/styles/global.scss

@@ -582,6 +582,12 @@ input[type="submit"] {
 // Sharing Charts
 .sharedChartsBtn {
   width: 100%;
+  background-color: $primary;
+
+  &:hover,
+  &:focus {
+    background-color: darken($primary, 10%);
+  }
 }
 
 .sharedChartsUrl {

frontend/app/templates/components/shared-dialogs/charts-dialog.hbs

@@ -1,11 +1,13 @@
 <h3 class="centered">{{t "sharedCharts.dialog.title"}}</h3>
 
-{{input type="submit" class="sharedChartsBtn" value=(t "sharedCharts.dialog.buttonText")}}
+<button class="sharedChartsBtn" {{action "sendEmail"}}>
+  {{t "sharedCharts.dialog.buttonText"}}
+</button>
 
-  <div class="sharedChartsUrl centered">
-    <label>{{t "sharedCharts.dialog.sharedUrl"}}</label>
-    {{input value=encryptedUrl}}
-  </div>
+<div class="sharedChartsUrl centered">
+  <label>{{t "sharedCharts.dialog.sharedUrl"}}</label>
+  {{input value=encryptedUrl}}
+</div>
 
 <div class="sharedBottom centered">
   {{#link-to 'chart'}}{{t "sharedCharts.dialog.done"}}{{/link-to}}