feat: read and apply user settings code

apps/chrome-extension/src/chrome/utils.mock.ts

@@ -80,6 +80,10 @@ const getRuleSettings = async (): Promise<SettingsReadingTool> => {
   return buildDefaultSettingsReadingTool()
 }
 
+const openSettingsCode = async () => {
+  await router.push('settings-code')
+}
+
 export {
   getCurrentTab,
   closeCurrentTab,
@@ -95,5 +99,6 @@ export {
   getMaskSettings,
   getRuleSettings,
   saveMaskSettings,
-  saveRuleSettings
+  saveRuleSettings,
+  openSettingsCode
 }

apps/chrome-extension/src/chrome/utils.ts

@@ -102,6 +102,16 @@ const getRuleSettings = async (): Promise<SettingsReadingTool> => {
   return ruleSettings ?? buildDefaultSettingsReadingTool()
 }
 
+const openSettingsCode = async (): Promise<void> => {
+  try {
+    await chrome.tabs.create({
+      url: 'index.html#/settings-code'
+    })
+  } catch (e) {
+    console.error(e)
+  }
+}
+
 export {
   getCurrentTab,
   closeCurrentTab,
@@ -117,5 +127,6 @@ export {
   saveMaskSettings,
   getMaskSettings,
   saveRuleSettings,
-  getRuleSettings
+  getRuleSettings,
+  openSettingsCode
 }

apps/chrome-extension/src/chrome/utilsFactory.ts

@@ -18,6 +18,7 @@ export interface ChromeUtils {
   saveMaskSettings: (maskSettings: SettingsReadingTool) => Promise<void>
   getRuleSettings: () => Promise<SettingsReadingTool>
   saveRuleSettings: (ruleSettings: SettingsReadingTool) => Promise<void>
+  openSettingsCode: () => Promise<void>
 }
 
 const buildUtils = (): ChromeUtils => {

apps/chrome-extension/src/components/SettingsCode.vue

@@ -0,0 +1,66 @@
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from 'vue'
+import { BIconClipboardPlus, VBTooltip } from 'bootstrap-vue'
+import { encodeSettings, Settings } from '@readapt/settings'
+
+const SettingsCode = defineComponent({
+  props: {
+    settings: { type: Object as PropType<Settings>, required: true }
+  },
+  components: {
+    BIconClipboardPlus
+  },
+  directives: {
+    VBTooltip
+  },
+  setup(props) {
+    const copyLabel = ref<string>('COPY')
+
+    const settingsCode = computed<string>(() => {
+      return encodeSettings(props.settings)
+    })
+
+    const copyCode = (): Promise<void> => {
+      copyLabel.value = 'COPIED'
+      return navigator.clipboard.writeText(settingsCode.value)
+    }
+
+    const resetLabel = () => {
+      setTimeout(() => {
+        copyLabel.value = 'COPY'
+      }, 300)
+    }
+
+    return { settingsCode, copyLabel, copyCode, resetLabel }
+  }
+})
+
+export default SettingsCode
+</script>
+
+<template>
+  <div class="d-flex justify-content-between">
+    <div>{{ $t('SETTINGS_CODE.PREFERENCE_CODE') }}:</div>
+    <div class="d-flex copy ml-4" @click="copyCode()" v-b-tooltip.hover.top :title="$t(copyLabel)" @mouseleave="resetLabel()">
+      <div class="settings-code">
+        <code>{{ settingsCode }}</code>
+      </div>
+      <div class="ml-2">
+        <BIconClipboardPlus></BIconClipboardPlus>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.copy {
+  cursor: pointer;
+}
+
+.settings-code {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 120px;
+}
+</style>

apps/chrome-extension/src/i18n/en.json

@@ -85,11 +85,18 @@
     "CANCEL": "Cancel"
   },
   "SETTINGS_CODE": {
-    "PREFERENCE_CODE": "Preference code"
+    "PREFERENCE_CODE": "Preference code",
+    "APPLY_THIS_SETTINGS": "Apply this settings",
+    "APPLY_YOUR_SETTINGS_CODE": "Apply your Settings Code",
+    "WRONG_CODE_ERROR": "Wrong code!",
+    "PASTE_YOUR_SETTINGS": "Paste your settings code here",
+    "PASTE": "Paste your code"
   },
   "LOADING": "Loading",
   "DEFAULT": "Default",
   "MEDIUM": "Medium",
   "LARGE": "Large",
-  "EXTRA_LARGE": "Extra Large"
+  "EXTRA_LARGE": "Extra Large",
+  "COPY": "Copy",
+  "COPIED": "Copied!"
 }

apps/chrome-extension/src/i18n/fr.json

@@ -85,12 +85,18 @@
     "CANCEL": "Annuler"
   },
   "SETTINGS_CODE": {
-    "PREFERENCE_CODE": "Code du profil",
-    "PREFERENCE_CODE_HELP": "Ce code correspond à votre profil. Vous pouvez utiliser ce code sur les autres plateformes que nous supportons."
+    "PREFERENCE_CODE": "Code profile",
+    "APPLY_THIS_SETTINGS": "Appliquer ces préférences",
+    "APPLY_YOUR_SETTINGS_CODE": "Appliquer votre code profil",
+    "WRONG_CODE_ERROR": "Code erroné",
+    "PASTE_YOUR_SETTINGS": "Coller ici votre code profil",
+    "PASTE": "Coller votre code"
   },
   "LOADING": "Chargement en cours",
   "DEFAULT": "Par Défaut",
   "MEDIUM": "Moyen",
   "LARGE": "Grand",
-  "EXTRA_LARGE": "Très Grand"
+  "EXTRA_LARGE": "Très Grand",
+  "COPY": "Copier",
+  "COPIED": "Copié !"
 }

apps/chrome-extension/src/main.ts

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import VueSanitize from 'vue-sanitize'
+import { VBTooltip } from 'bootstrap-vue'
 
 import App from './App.vue'
 import i18n from './i18n'
@@ -11,6 +12,7 @@ import './theme.scss'
 Vue.config.productionTip = false
 
 Vue.use(VueSanitize)
+Vue.directive('b-tooltip', VBTooltip)
 
 new Vue({
   i18n,

apps/chrome-extension/src/router/router.ts

@@ -23,6 +23,10 @@ const routes: Array<RouteConfig> = [
   {
     path: '/settings',
     component: () => import('@/views/SettingsMenu.vue')
+  },
+  {
+    path: '/settings-code',
+    component: () => import('@/views/SettingsCodeEdit.vue')
   }
 ]
 

apps/chrome-extension/src/views/MainMenu.vue

@@ -26,7 +26,17 @@ const MainMenu = defineComponent({
   setup() {
     const readaptEnabled = ref(true)
 
-    const { openSettings, sendMessageToCurrentTab, newSettings, openTemplates, broadcastMessage, getEnabled, saveEnabled, saveLocale } = utils
+    const {
+      openSettings,
+      sendMessageToCurrentTab,
+      newSettings,
+      openTemplates,
+      broadcastMessage,
+      getEnabled,
+      saveEnabled,
+      saveLocale,
+      openSettingsCode
+    } = utils
 
     const settings = computed(() => store.getters.getSettings)
     const defaultProfiles = buildDefaultProfiles()
@@ -60,16 +70,17 @@ const MainMenu = defineComponent({
     return {
       version,
       readaptEnabled,
+      // methods,
       openSettings,
       newSettings,
       sendMessageToCurrentTab,
       broadcastMessage,
       openTemplates,
-      // methods,
       switchEnabled,
       adapt,
       reset,
       selectTemplate,
+      openSettingsCode,
       changeLocale,
       isDefaultSettings
     }
@@ -109,7 +120,7 @@ export default MainMenu
 
     <div class="mt-3" v-if="!isDefaultSettings">
       <h5>{{ $t('MAIN_MENU.ADAPT_TEXT_BY') }}</h5>
-      <ul class="help">
+      <ul class="help mb-0">
         <!-- <li>-->
         <!--   <b-icon-hand-index-thumb />-->
         <!--   {{ $t('MAIN_MENU.CLICKING_ADAPT_PAGE_BUTTON') }}-->
@@ -120,27 +131,27 @@ export default MainMenu
     </div>
     <div v-else class="text-center my-3">{{ $t('MAIN_MENU.FIRST_RUN') }}</div>
 
-    <div class="mt-3 mb-auto d-flex align-items-center" :class="isDefaultSettings ? 'justify-content-center' : 'justify-content-between'">
-      <b-button v-if="!isDefaultSettings" size="sm" variant="primary" @click="openSettings" style="max-width: 150px">
+    <div class="my-3 d-flex align-items-center" :class="isDefaultSettings ? 'justify-content-center' : 'justify-content-between'">
+      <b-button v-if="!isDefaultSettings" size="sm" variant="primary" @click="openSettings" style="max-width: 120px">
         {{ $t('MAIN_MENU.SEE_MODIFY_CURRENT_PROFILE') }}
       </b-button>
 
-      <b-button size="sm" variant="primary" :class="{ 'mr-4': isDefaultSettings }" @click="newSettings" style="max-width: 150px">
+      <b-button size="sm" variant="primary" :class="{ 'mr-3': isDefaultSettings }" @click="newSettings" style="max-width: 120px">
         {{ $t('MAIN_MENU.CREATE_BRAND_NEW_PROFILE') }}
       </b-button>
 
+      <b-button size="sm" variant="primary" :class="{ 'mr-3': isDefaultSettings }" @click="openSettingsCode" style="max-width: 120px">
+        {{ $t('MAIN_MENU.I_HAVE_PROFILE_CODE') }}
+      </b-button>
+
       <b-button size="sm" variant="primary" @click="selectTemplate" style="max-width: 150px">
         {{ $t('MAIN_MENU.BASE_YOUR_PROFILE_FROM_TEMPLATE') }}
       </b-button>
-
-      <!--            <b-button size="sm" variant="primary" disabled>-->
-      <!--              {{ $t('MAIN_MENU.I_HAVE_PROFILE_CODE') }}-->
-      <!--            </b-button>-->
     </div>
 
     <QuickActivate class="mb-auto" />
 
-    <div class="footer">
+    <div class="footer my-2">
       <strong class="version">Version {{ version }}</strong>
 
       <a class="about-you" href="https://forms.gle/ciWCnYnkFjutwEHWA" target="_blank">

apps/chrome-extension/src/views/SettingsCodeEdit.vue

@@ -0,0 +1,100 @@
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue'
+import { BButton } from 'bootstrap-vue'
+
+import { adaptHtmlElementAsyncFn } from '@/visualEngine/adaptHtmlElementAsync'
+import { decodeSettings, getLangConfig } from '@readapt/settings'
+import { AdaptContainer, SaveSettings } from '@readapt/shared-components'
+import store, { saveSettings } from '@/store'
+import utils from '@/chrome'
+
+const { closeCurrentTab } = utils
+
+const SettingsCodeEdit = defineComponent({
+  components: { BButton, AdaptContainer, SaveSettings },
+  setup() {
+    const code = ref<string>('')
+
+    const settings = computed(() => {
+      try {
+        return decodeSettings(code.value)
+      } catch (e) {
+        // wrong code
+      }
+      return undefined
+    })
+
+    const wrongCodeError = computed<boolean>(() => {
+      return !!code.value && !settings.value
+    })
+
+    const textPreview = computed<string>(() => {
+      const lang = settings.value ? settings.value.language : 'en'
+      return getLangConfig(lang).textPreview
+    })
+
+    const paste = async (): Promise<void> => {
+      code.value = await navigator.clipboard.readText()
+    }
+
+    const applyCode = (): void => {
+      if (settings.value) {
+        store.commit('updateSettings', settings.value)
+        saveSettings(settings.value)
+      }
+    }
+
+    const close = async (): Promise<void> => {
+      await closeCurrentTab()
+    }
+
+    return {
+      textPreview,
+      settings,
+      code,
+      wrongCodeError,
+      adaptHtmlElementAsyncFn,
+      applyCode,
+      close,
+      paste
+    }
+  }
+})
+export default SettingsCodeEdit
+</script>
+<template>
+  <div class="container-fluid">
+    <div class="my-4">
+      <h2>{{ $t('SETTINGS_CODE.APPLY_YOUR_SETTINGS_CODE') }}</h2>
+    </div>
+    <div>
+      <textarea class="form-control" rows="3" :placeholder="$t('SETTINGS_CODE.PASTE_YOUR_SETTINGS')" v-model="code"></textarea>
+    </div>
+
+    <div class="d-flex flex-column align-content-between h-100">
+      <div class="mt-3 d-flex justify-content-between">
+        <div class="d-flex" style="gap: 1rem">
+          <b-button size="sm" variant="primary" @click="paste()"> {{ $t('SETTINGS_CODE.PASTE') }}</b-button>
+          <SaveSettings @save-settings="applyCode()" :disabled="!settings" label="SETTINGS_CODE.APPLY_THIS_SETTINGS" />
+        </div>
+
+        <b-button size="sm" variant="outline-primary" @click="close()"> {{ $t('SETTINGS.CLOSE') }}</b-button>
+      </div>
+
+      <p v-if="wrongCodeError" class="text-danger my-2">{{ $t('SETTINGS_CODE.WRONG_CODE_ERROR') }}</p>
+
+      <template v-if="settings">
+        <h3 class="my-4">{{ $t('SETTINGS.TEXT_PREVIEW') }}</h3>
+
+        <AdaptContainer
+          class="settings-code-preview"
+          :adapt-html-element-async="adaptHtmlElementAsyncFn()"
+          :content-to-adapt="$sanitize('<p>' + textPreview + '</p>')"
+          :settings="settings"
+          scope="settings-code-preview"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+<style scoped></style>