Merge pull request #1517 from Hirobreak/remove-style

Email Detail Style Wrap

Author: javiteri95

electron_app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "criptext",
-  "version": "0.30.2",
+  "version": "0.30.3",
   "author": {
     "name": "Criptext Inc",
     "email": "[email protected]",

electron_app/src/utils/const.js

@@ -11,6 +11,7 @@ const LINK_DEVICES_FILE_VERSION = '6';
 const PROD_SOCKET_URL = 'wss://socket.criptext.com';
 const PROD_SERVER_URL = 'https://api.criptext.com';
 const PROD_DATA_TRANSFER_URL = 'https://transfer.criptext.com';
+const PROD_ACCOUNT_URL = 'https://account.criptext.com';
 const FILE_SERVER_APP_ID = 'qynhtyzjrshazxqarkpy';
 const FILE_SERVER_KEY = 'lofjksedbxuucdjjpnby';
 const PROD_APP_DOMAIN = 'criptext.com';
@@ -45,5 +46,6 @@ module.exports = {
     ? process.env.DEV_NUCLEUS_ID
     : process.env.PROD_NUCLEUS_ID || nucleusId,
   INSTALLER_TYPE: criptextInstallerType,
-  DEFAULT_PIN
+  DEFAULT_PIN,
+  ACCOUNT_URL: isDevelopment ? process.env.DEV_ACCOUNT_URL : PROD_ACCOUNT_URL
 };

electron_app/src/windows/mailbox.js

@@ -9,7 +9,7 @@ const globalManager = require('./../globalManager');
 const { EVENTS, callEvent } = require('./events');
 const { mailtoProtocolRegex } = require('./../utils/RegexUtils');
 const { removeProtocolFromUrl } = require('./../utils/stringUtils');
-const { API_TRACKING_EVENT } = require('./../utils/const');
+const { API_TRACKING_EVENT, ACCOUNT_URL } = require('./../utils/const');
 const { isFromStore, isDev } = require('./windowUtils');
 const {
   updateUserData,
@@ -26,7 +26,8 @@ const mailboxSize = {
   height: 800
 };
 
-const adminUrl = 'https://admin.criptext.com/?#/account/billing';
+const oldAdminUrl = 'https://admin.criptext.com/?#/account/billing';
+const adminUrl = `${ACCOUNT_URL}/?#/billing`;
 
 const iconPath = path.join(
   __dirname,
@@ -188,7 +189,7 @@ const openLinkInDefaultBrowser = (ev, url) => {
       emailAddress
     });
     return;
-  } else if (url === adminUrl) {
+  } else if (url === adminUrl || url === oldAdminUrl) {
     mailboxWindow.webContents.send('open-plus');
     return;
   }

electron_app/src/windows/upgradePlus.js

@@ -1,5 +1,6 @@
 const { BrowserWindow } = require('electron');
 const language = require('../lang/index');
+const { ACCOUNT_URL } = require('../utils/const');
 
 const openUpgradeToPlusWindow = token => {
   try {
@@ -15,9 +16,7 @@ const openUpgradeToPlusWindow = token => {
       }
     });
     workerWin.loadURL(
-      `https://admin.criptext.com/?#/account/billing?lang=${
-        language.currentLanguage
-      }&token=${token}`
+      `${ACCOUNT_URL}?#/billing?lang=${language.currentLanguage}&token=${token}`
     );
     workerWin.webContents.closeDevTools();
     return workerWin;

email_composer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "email_composer",
-  "version": "0.30.2",
+  "version": "0.30.3",
   "private": true,
   "dependencies": {
     "@criptext/electron-better-ipc": "^0.7.0-rc1-0.2",

email_loading/package.json

@@ -1,6 +1,6 @@
 {
   "name": "email_loading",
-  "version": "0.30.2",
+  "version": "0.30.3",
   "private": true,
   "dependencies": {
     "@criptext/electron-better-ipc": "^0.7.0-rc1-0.2",

email_login/package.json

@@ -1,6 +1,6 @@
 {
   "name": "email_login",
-  "version": "0.30.2",
+  "version": "0.30.3",
   "private": true,
   "dependencies": {
     "@criptext/electron-better-ipc": "^0.7.0-rc1-0.2",

email_mailbox/package.json

@@ -1,13 +1,14 @@
 {
   "name": "email_mailbox",
-  "version": "0.30.2",
+  "version": "0.30.3",
   "private": true,
   "dependencies": {
     "@criptext/electron-better-ipc": "^0.7.0-rc1-0.2",
     "animejs": "^2.2.0",
     "base64-js": "^1.3.0",
     "criptext-files-sdk": "^0.8.0",
     "crypto-js": "^3.1.9-1",
+    "css": "^3.0.0",
     "draft-js": "^0.10.5",
     "draftjs-to-html": "^0.8.4",
     "html-to-draftjs": "^1.4.0",

email_mailbox/src/components/Email.js

@@ -12,8 +12,10 @@ import ButtonUnsend from './ButtonUnsendWrapper';
 import AvatarImage from './AvatarImage';
 import ButtonIcon from './ButtonIcon';
 import { EmailStatus } from './../utils/const';
+import css from 'css';
 import string from '../lang';
 import './email.scss';
+import { logError } from '../utils/ipc';
 
 const DeletePermanenltyPopup = PopupHOC(DialogPopup);
 const BlockRemotePopup = PopupHOC(BlockRemoteContentPopup);
@@ -105,7 +107,10 @@ const Email = props => (
       </div>
       <hr />
       <div className="email-body">
-        <div disabled={props.hideView || props.isUnsend} className="email-text">
+        <div
+          disabled={props.hideView || props.isUnsend}
+          className={`email-text cptx-email-display-${props.email.key}`}
+        >
           <div dangerouslySetInnerHTML={{ __html: theMail(props) }} />
         </div>
         {!!props.files.length &&
@@ -331,10 +336,33 @@ const renderIconSecure = (onMouseEnterTooltip, onMouseLeaveTooltip, id) => {
 };
 
 const theMail = props => {
-  const { content, blockImagesInline } = props;
+  const { content, blockImagesInline, email } = props;
+
+  let newContent = content;
+  try {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = content;
+    const styles = wrapper.getElementsByTagName('style');
+    for (const style of styles) {
+      const parsedCss = css.parse(style.innerText);
+      const sheet = parsedCss.stylesheet;
+      for (const rule in sheet.rules) {
+        const myRule = sheet.rules[rule];
+        for (const s in myRule.selectors) {
+          myRule.selectors[s] =
+            `.cptx-email-display-${email.key} ` + myRule.selectors[s];
+        }
+      }
+      style.innerHTML = css.stringify(parsedCss);
+    }
+    newContent = wrapper.innerHTML;
+  } catch (ex) {
+    logError(ex);
+  }
+
   if (!blockImagesInline)
-    return `<div class="email-container">${content}</div>`;
-  return getDOM(content);
+    return `<div class="email-container">${newContent}</div>`;
+  return getDOM(newContent);
 };
 
 const getDOM = html => {

email_mailbox/src/components/SettingUpgradePlusWrapper.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { myAccount, mySettings } from '../utils/electronInterface';
 import './settingupgradepluss.scss';
+import { accountUrl } from '../utils/const';
 
 const Loading = () => (
   <div className="loading-ring">
@@ -30,7 +31,7 @@ class SettingUpgradePlusWrapper extends Component {
         <iframe
           id="cptx-upgrade-to-plus-iframe"
           title="cptx-upgrade-to-plus-iframe"
-          src={`https://admin.criptext.com/?#/account/billing?lang=${mySettings.language ||
+          src={`${accountUrl}/?#/billing?lang=${mySettings.language ||
             'en'}&token=${myAccount.jwt}`}
           onLoad={this.handleLoad}
           className={