From da6f86283a461ed671331b59045e5aed16ef585f Mon Sep 17 00:00:00 2001
From: Elias Boukamza <elias.boukamza@contentsquare-ext.com>
Date: Thu, 3 Nov 2022 12:13:01 +0100
Subject: [PATCH 1/5] feat(settings): add methods encodeSettings() and
 decodeSettings()

---
 packages/settings/jest.config.js             |  6 ++++++
 packages/settings/package.json               |  2 +-
 packages/settings/src/index.ts               |  1 +
 packages/settings/src/settingsCode.ts        | 12 ++++++++++++
 packages/settings/tests/settingsCode.spec.ts |  9 +++++++++
 5 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 packages/settings/jest.config.js
 create mode 100644 packages/settings/src/settingsCode.ts
 create mode 100644 packages/settings/tests/settingsCode.spec.ts

diff --git a/packages/settings/jest.config.js b/packages/settings/jest.config.js
new file mode 100644
index 00000000..cabd5887
--- /dev/null
+++ b/packages/settings/jest.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  displayName: 'settings',
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  coverageDirectory: '../../coverage/packages/settings'
+}
diff --git a/packages/settings/package.json b/packages/settings/package.json
index 2f950050..e2d1f81d 100644
--- a/packages/settings/package.json
+++ b/packages/settings/package.json
@@ -6,7 +6,7 @@
   "types": "dist/types/index.d.ts",
   "scripts": {
     "clean": "shx rm -rf dist",
-    "test": "echo 'no test yet'",
+    "test": "jest",
     "build": "rollup -c rollup.config.js"
   },
   "publishConfig": {
diff --git a/packages/settings/src/index.ts b/packages/settings/src/index.ts
index adaba117..5fb70ba0 100644
--- a/packages/settings/src/index.ts
+++ b/packages/settings/src/index.ts
@@ -4,3 +4,4 @@ export * from './options'
 export * from './langConfig'
 export * from './defaultSettings'
 export * from './defaultProfiles'
+export * from './settingsCode'
diff --git a/packages/settings/src/settingsCode.ts b/packages/settings/src/settingsCode.ts
new file mode 100644
index 00000000..81b2670d
--- /dev/null
+++ b/packages/settings/src/settingsCode.ts
@@ -0,0 +1,12 @@
+import { Settings } from './models'
+
+const encodeSettings = (settings: Settings): string => {
+  const str = JSON.stringify(settings, null, '')
+  return btoa(str)
+}
+
+const decodeSettings = (code: string): Settings => {
+  return JSON.parse(atob(code)) as Settings
+}
+
+export { encodeSettings, decodeSettings }
diff --git a/packages/settings/tests/settingsCode.spec.ts b/packages/settings/tests/settingsCode.spec.ts
new file mode 100644
index 00000000..faee1a4d
--- /dev/null
+++ b/packages/settings/tests/settingsCode.spec.ts
@@ -0,0 +1,9 @@
+import { decodeSettings, encodeSettings, Settings } from '../src'
+
+describe('SettingsCode', () => {
+  test('should encode and decode settings', () => {
+    const settings: Settings = { language: 'en', fontSize: '140%', phonemesActive: false } as Settings
+    const code = encodeSettings(settings)
+    expect(decodeSettings(code)).toEqual(settings)
+  })
+})

From 22773b22fab1b8af6b22beaaa08c8c975f425704 Mon Sep 17 00:00:00 2001
From: Elias Boukamza <elias.boukamza@contentsquare-ext.com>
Date: Thu, 3 Nov 2022 12:20:07 +0100
Subject: [PATCH 2/5] feat(shared-components): in SaveSettings component add
 props disabled and label to be more customizable

---
 .../src/components/buttons/SaveSettings.vue                 | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/shared-components/src/components/buttons/SaveSettings.vue b/packages/shared-components/src/components/buttons/SaveSettings.vue
index 789feed4..bb97e931 100644
--- a/packages/shared-components/src/components/buttons/SaveSettings.vue
+++ b/packages/shared-components/src/components/buttons/SaveSettings.vue
@@ -6,6 +6,10 @@ import SettingsSaveConfirmation from '../modals/SettingsSaveConfirmation.vue'
 
 const SaveSetting = defineComponent({
   components: { BButton, SettingsSaveConfirmation },
+  props: {
+    disabled: { type: Boolean, default: false },
+    label: { type: String, default: 'SETTINGS.SAVE' }
+  },
   setup(_, { emit }) {
     const shouldShowModal = ref(false)
 
@@ -27,7 +31,7 @@ export default SaveSetting
 
 <template>
   <div>
-    <b-button size="sm" variant="primary" @click="saveSettings">{{ $t('SETTINGS.SAVE') }}</b-button>
+    <b-button size="sm" variant="primary" @click="saveSettings" :disabled="disabled">{{ $t(label) }}</b-button>
     <template v-if="shouldShowModal">
       <SettingsSaveConfirmation @confirm="closeModal" />
     </template>

From 506a35d187299cb065f777896d2d4dea6505bde3 Mon Sep 17 00:00:00 2001
From: Elias Boukamza <elias.boukamza@contentsquare-ext.com>
Date: Thu, 3 Nov 2022 12:21:08 +0100
Subject: [PATCH 3/5] fix(shared-components): fix resetState sharedMutation

---
 packages/shared-components/src/sharedStoreOptions.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/shared-components/src/sharedStoreOptions.ts b/packages/shared-components/src/sharedStoreOptions.ts
index 97b11fd5..6ac3932b 100644
--- a/packages/shared-components/src/sharedStoreOptions.ts
+++ b/packages/shared-components/src/sharedStoreOptions.ts
@@ -3,7 +3,8 @@ import { StoreModel, buildDefaultSettings, ColoredItem, ColoredOption, getLangCo
 
 const sharedStoreMutations: MutationTree<StoreModel> = {
   resetState(state, newState: StoreModel) {
-    state = newState
+    state.language = newState.language
+    state.profiles = newState.profiles
   },
   updateSettings(state, settings: Settings) {
     const language = settings.language

From 03b2ed39aeacec10c017df238fd2d5efde3aa584 Mon Sep 17 00:00:00 2001
From: Elias Boukamza <elias.boukamza@contentsquare-ext.com>
Date: Thu, 3 Nov 2022 13:57:59 +0100
Subject: [PATCH 4/5] feat(chrome-extension): settings code

---
 .../chrome-extension/src/chrome/utils.mock.ts |   7 +-
 apps/chrome-extension/src/chrome/utils.ts     |  13 ++-
 .../src/chrome/utilsFactory.ts                |   1 +
 .../src/components/SettingsCode.vue           |  66 ++++++++++++
 apps/chrome-extension/src/i18n/en.json        |  11 +-
 apps/chrome-extension/src/i18n/fr.json        |  12 ++-
 apps/chrome-extension/src/main.ts             |   2 +
 apps/chrome-extension/src/router/router.ts    |   4 +
 apps/chrome-extension/src/views/MainMenu.vue  |  33 ++++--
 .../src/views/SettingsCodeEdit.vue            | 100 ++++++++++++++++++
 .../src/views/SettingsMenu.vue                |  16 ++-
 11 files changed, 244 insertions(+), 21 deletions(-)
 create mode 100644 apps/chrome-extension/src/components/SettingsCode.vue
 create mode 100644 apps/chrome-extension/src/views/SettingsCodeEdit.vue

diff --git a/apps/chrome-extension/src/chrome/utils.mock.ts b/apps/chrome-extension/src/chrome/utils.mock.ts
index 623498d7..56fab8f9 100644
--- a/apps/chrome-extension/src/chrome/utils.mock.ts
+++ b/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
 }
diff --git a/apps/chrome-extension/src/chrome/utils.ts b/apps/chrome-extension/src/chrome/utils.ts
index 6819bc2f..1a73dab9 100644
--- a/apps/chrome-extension/src/chrome/utils.ts
+++ b/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
 }
diff --git a/apps/chrome-extension/src/chrome/utilsFactory.ts b/apps/chrome-extension/src/chrome/utilsFactory.ts
index 5fda905e..d3b528fe 100644
--- a/apps/chrome-extension/src/chrome/utilsFactory.ts
+++ b/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 => {
diff --git a/apps/chrome-extension/src/components/SettingsCode.vue b/apps/chrome-extension/src/components/SettingsCode.vue
new file mode 100644
index 00000000..04d97209
--- /dev/null
+++ b/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>
diff --git a/apps/chrome-extension/src/i18n/en.json b/apps/chrome-extension/src/i18n/en.json
index f85ee274..ebc013fa 100644
--- a/apps/chrome-extension/src/i18n/en.json
+++ b/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!"
 }
diff --git a/apps/chrome-extension/src/i18n/fr.json b/apps/chrome-extension/src/i18n/fr.json
index 97997f4f..03b60673 100644
--- a/apps/chrome-extension/src/i18n/fr.json
+++ b/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é !"
 }
diff --git a/apps/chrome-extension/src/main.ts b/apps/chrome-extension/src/main.ts
index 8b7393ef..f988ef86 100644
--- a/apps/chrome-extension/src/main.ts
+++ b/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,
diff --git a/apps/chrome-extension/src/router/router.ts b/apps/chrome-extension/src/router/router.ts
index 7b89f11a..9d7816bf 100644
--- a/apps/chrome-extension/src/router/router.ts
+++ b/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')
   }
 ]
 
diff --git a/apps/chrome-extension/src/views/MainMenu.vue b/apps/chrome-extension/src/views/MainMenu.vue
index 30b94acd..1fd5f54c 100644
--- a/apps/chrome-extension/src/views/MainMenu.vue
+++ b/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">
diff --git a/apps/chrome-extension/src/views/SettingsCodeEdit.vue b/apps/chrome-extension/src/views/SettingsCodeEdit.vue
new file mode 100644
index 00000000..536dc7b8
--- /dev/null
+++ b/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>
diff --git a/apps/chrome-extension/src/views/SettingsMenu.vue b/apps/chrome-extension/src/views/SettingsMenu.vue
index af24deac..f65c1e78 100644
--- a/apps/chrome-extension/src/views/SettingsMenu.vue
+++ b/apps/chrome-extension/src/views/SettingsMenu.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref, watch } from 'vue'
-import { BCol, BNav, BNavItem, BRow } from 'bootstrap-vue'
+import { BButton, BCol, BNav, BNavItem, BRow } from 'bootstrap-vue'
 import isEqual from 'lodash/isEqual'
 
 import { AdaptContainer, CloseSettings, PreviewContainer, SaveSettings } from '@readapt/shared-components'
@@ -12,6 +12,7 @@ import router from '@/router'
 import utils from '@/chrome'
 import SettingsMenuGeneral from '@/views/SettingsMenuGeneral.vue'
 import SettingsMenuTableItems from '@/views/SettingsMenuTableItems.vue'
+import SettingsCode from '@/components/SettingsCode.vue'
 
 const { closeCurrentTab } = utils
 
@@ -19,6 +20,7 @@ type TabName = 'GENERAL' | 'LETTERS' | 'PHONEMES'
 
 const SettingsMenu = defineComponent({
   components: {
+    BButton,
     BRow,
     BCol,
     BNav,
@@ -28,7 +30,8 @@ const SettingsMenu = defineComponent({
     PreviewContainer,
     AdaptContainer,
     SaveSettings,
-    CloseSettings
+    CloseSettings,
+    SettingsCode
   },
   setup() {
     const settings = computed(() => store.getters.getSettings)
@@ -100,7 +103,12 @@ export default SettingsMenu
     <div class="mt-3">
       <div>
         <span class="h2">{{ $t('SETTINGS.MY_PREFERENCES') }}</span>
-        <a class="ml-2 float-right" :href="settingsFile" download="settings.json" target="_blank">{{ $t('SETTINGS.DOWNLOAD_SETTINGS') }}</a>
+        <a class="ml-2 float-right" :href="settingsFile" download="settings.json" target="_blank">
+          <b-button variant="outline-primary">{{ $t('SETTINGS.DOWNLOAD_SETTINGS') }}</b-button>
+        </a>
+        <router-link to="/settings-code" class="ml-2 float-right">
+          <b-button variant="outline-primary">{{ $t('MAIN_MENU.I_HAVE_PROFILE_CODE') }}</b-button>
+        </router-link>
       </div>
       <b-nav class="d-flex flex-row">
         <b-nav-item @click="activateTab('GENERAL')" :active="activeTab === 'GENERAL'">{{ $t('SETTINGS.GENERAL_SETTINGS') }}</b-nav-item>
@@ -150,6 +158,8 @@ export default SettingsMenu
             />
           </PreviewContainer>
 
+          <SettingsCode class="mt-auto" :settings="settings" />
+
           <div class="mt-3 d-flex justify-content-between">
             <SaveSettings @save-settings="save" />
             <CloseSettings :is-settings-dirty="isSettingsDirty" @close-settings="close" />

From 116be5b6b5ce9a882ade34af194a9a2932d938da Mon Sep 17 00:00:00 2001
From: Elias Boukamza <elias.boukamza@contentsquare-ext.com>
Date: Thu, 3 Nov 2022 14:45:37 +0100
Subject: [PATCH 5/5] feat(ms-word-addin); settings code

---
 .../src/components/SettingsCode.vue           | 66 +++++++++++++
 apps/ms-word-addin/src/i18n/en.json           | 15 ++-
 apps/ms-word-addin/src/i18n/fr.json           | 15 ++-
 apps/ms-word-addin/src/main.ts                |  4 +-
 apps/ms-word-addin/src/router/router.ts       |  4 +
 apps/ms-word-addin/src/views/MainMenu.vue     |  7 ++
 .../src/views/SettingsCodeEdit.vue            | 98 +++++++++++++++++++
 apps/ms-word-addin/src/views/SettingsMenu.vue |  8 +-
 8 files changed, 209 insertions(+), 8 deletions(-)
 create mode 100644 apps/ms-word-addin/src/components/SettingsCode.vue
 create mode 100644 apps/ms-word-addin/src/views/SettingsCodeEdit.vue

diff --git a/apps/ms-word-addin/src/components/SettingsCode.vue b/apps/ms-word-addin/src/components/SettingsCode.vue
new file mode 100644
index 00000000..04d97209
--- /dev/null
+++ b/apps/ms-word-addin/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>
diff --git a/apps/ms-word-addin/src/i18n/en.json b/apps/ms-word-addin/src/i18n/en.json
index 84ac9864..f431ba8a 100644
--- a/apps/ms-word-addin/src/i18n/en.json
+++ b/apps/ms-word-addin/src/i18n/en.json
@@ -8,7 +8,8 @@
     "WELCOME_2": "Configure elements like font, text size and spacing, phonemes and letters. Use tools to help with reading and concentration.",
     "WELCOME_3": "Readapt was designed for those with reading challenges like dyslexia and poor vision.",
     "CONTACT_US": "Contact us!",
-    "TELL_US_ABOUT_YOU": "Tell us about you"
+    "TELL_US_ABOUT_YOU": "Tell us about you",
+    "I_HAVE_PROFILE_CODE": "I have profile code"
   },
   "DIALOG_BOX": {
     "PRINT": "Print",
@@ -77,9 +78,19 @@
     "SELECT": "Select",
     "CANCEL": "Cancel"
   },
+  "SETTINGS_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!"
 }
diff --git a/apps/ms-word-addin/src/i18n/fr.json b/apps/ms-word-addin/src/i18n/fr.json
index 7909c310..5d8053cd 100644
--- a/apps/ms-word-addin/src/i18n/fr.json
+++ b/apps/ms-word-addin/src/i18n/fr.json
@@ -8,7 +8,8 @@
     "WELCOME_2": "Configurez des éléments comme la police, la taille et l'espacement du texte, les phonèmes et les lettres. D’autres outils vous permettront de faciliter votre lecture et votre concentration.",
     "WELCOME_3": "Readapt a été conçu pour les personnes présentant des troubles de la lecture tel que la dyslexie ou un déficit visuel.",
     "CONTACT_US": "Contactez-nous !",
-    "TELL_US_ABOUT_YOU": "Dites nous en plus sur vous"
+    "TELL_US_ABOUT_YOU": "Dites nous en plus sur vous",
+    "I_HAVE_PROFILE_CODE": "J'ai un code de profil"
   },
   "DIALOG_BOX": {
     "PRINT": "Imprimer",
@@ -77,9 +78,19 @@
     "SELECT": "Selectionner",
     "CANCEL": "Annuler"
   },
+  "SETTINGS_CODE": {
+    "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é !"
 }
diff --git a/apps/ms-word-addin/src/main.ts b/apps/ms-word-addin/src/main.ts
index 535bf15c..fed27438 100644
--- a/apps/ms-word-addin/src/main.ts
+++ b/apps/ms-word-addin/src/main.ts
@@ -1,5 +1,5 @@
 import VueSanitize from 'vue-sanitize'
-import { ToastPlugin, SidebarPlugin } from 'bootstrap-vue'
+import { SidebarPlugin, VBTooltip } from 'bootstrap-vue'
 import Vue from 'vue'
 
 import App from './App.vue'
@@ -12,8 +12,8 @@ import './theme.scss'
 Vue.config.productionTip = false
 
 Vue.use(VueSanitize)
-Vue.use(ToastPlugin)
 Vue.use(SidebarPlugin)
+Vue.directive('b-tooltip', VBTooltip)
 
 Office.onReady(() => {
   new Vue({
diff --git a/apps/ms-word-addin/src/router/router.ts b/apps/ms-word-addin/src/router/router.ts
index 4554e43a..36e311b6 100644
--- a/apps/ms-word-addin/src/router/router.ts
+++ b/apps/ms-word-addin/src/router/router.ts
@@ -19,6 +19,10 @@ const routes: Array<RouteConfig> = [
   {
     path: '/settings',
     component: () => import('@/views/SettingsMenu.vue')
+  },
+  {
+    path: '/settings-code',
+    component: () => import('@/views/SettingsCodeEdit.vue')
   }
 ]
 
diff --git a/apps/ms-word-addin/src/views/MainMenu.vue b/apps/ms-word-addin/src/views/MainMenu.vue
index 1c7d8852..e3366214 100644
--- a/apps/ms-word-addin/src/views/MainMenu.vue
+++ b/apps/ms-word-addin/src/views/MainMenu.vue
@@ -231,6 +231,13 @@ export default MainMenu
           </b-button>
         </router-link>
       </div>
+      <div class="my-2" style="min-width: 250px">
+        <router-link to="/settings-code">
+          <b-button class="w-100" size="md" variant="primary">
+            {{ $t('MAIN_MENU.I_HAVE_PROFILE_CODE') }}
+          </b-button>
+        </router-link>
+      </div>
       <div v-if="!isDefaultSettings" class="my-2" style="min-width: 250px">
         <a href="https://forms.gle/tXTeYXhxevafZPF69" target="_blank">
           <b-button size="sm" variant="primary" class="w-100">{{ $t('MAIN_MENU.TELL_US_ABOUT_YOU') }}</b-button>
diff --git a/apps/ms-word-addin/src/views/SettingsCodeEdit.vue b/apps/ms-word-addin/src/views/SettingsCodeEdit.vue
new file mode 100644
index 00000000..83b0122d
--- /dev/null
+++ b/apps/ms-word-addin/src/views/SettingsCodeEdit.vue
@@ -0,0 +1,98 @@
+<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 router from '@/router'
+
+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 = (): void => {
+      router.push({ path: '/' })
+    }
+
+    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>
diff --git a/apps/ms-word-addin/src/views/SettingsMenu.vue b/apps/ms-word-addin/src/views/SettingsMenu.vue
index b8279eb1..cb0e478c 100644
--- a/apps/ms-word-addin/src/views/SettingsMenu.vue
+++ b/apps/ms-word-addin/src/views/SettingsMenu.vue
@@ -12,6 +12,7 @@ import router from '@/router'
 
 import SettingsMenuGeneral from './SettingsMenuGeneral.vue'
 import SettingsMenuTableItems from './SettingsMenuTableItems.vue'
+import SettingsCode from '@/components/SettingsCode.vue'
 
 type TabName = 'GENERAL' | 'LETTERS' | 'PHONEMES'
 
@@ -26,7 +27,8 @@ const SettingsMenu = defineComponent({
     PreviewContainer,
     AdaptContainer,
     SaveSettings,
-    CloseSettings
+    CloseSettings,
+    SettingsCode
   },
   setup() {
     const settings = computed(() => store.getters.getSettings)
@@ -134,7 +136,9 @@ export default SettingsMenu
       </b-col>
     </b-row>
 
-    <div>
+    <div class="mt-auto">
+      <SettingsCode class="mt-2" :settings="settings" />
+
       <div class="mt-3 mb-3 d-flex justify-content-between">
         <SaveSettings @save-settings="save" />
         <CloseSettings :is-settings-dirty="isSettingsDirty" @close-settings="close" />