From c432c58d6a7a2fc01b8f3e69793f68d9a37a5bdd Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Wed, 17 Apr 2024 12:24:34 +0530
Subject: [PATCH] feat: add access token and notification preferences

---
 .../settings/personal/AccessToken.vue         |  26 +++
 .../settings/personal/AudioNotifications.vue  |  79 +++++++++
 .../settings/personal/ChangePassword.vue      |  48 ++++++
 .../dashboard/settings/personal/Index.vue     |  31 ++++
 .../personal/NotificationPreferences.vue      | 161 ++++++++++++++++++
 5 files changed, 345 insertions(+)
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/personal/AccessToken.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/personal/AudioNotifications.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/personal/ChangePassword.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue

diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/AccessToken.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/AccessToken.vue
new file mode 100644
index 000000000..f331ec0c5
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/AccessToken.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="flex flex-row justify-between gap-4">
+    <form-input
+      name="access_token"
+      class="flex-1"
+      type="password"
+      value="1234567890"
+      :class="{ error: false }"
+      placeholder="Please enter your new password"
+      :has-error="false"
+      :error-message="$t('REGISTER.FULL_NAME.ERROR')"
+    />
+    <woot-button
+      icon="copy"
+      variant="hollow"
+      color-scheme="secondary"
+      class="rounded-xl w-fit"
+      @click="$emit('click')"
+    >
+      Copy
+    </woot-button>
+  </div>
+</template>
+<script setup>
+import FormInput from 'v3/components/Form/Input.vue';
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/AudioNotifications.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioNotifications.vue
new file mode 100644
index 000000000..2b60ca2de
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioNotifications.vue
@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <form-select
+      name="timezone"
+      spacing="compact"
+      label="Alert tone"
+      placeholder="Ding"
+      class="max-w-xl"
+    >
+      <option v-for="file in audioFiles" :key="file.label" :value="file.value">
+        {{ file.label }}
+      </option>
+    </form-select>
+
+    <div>
+      <label
+        class="flex justify-between pb-1 text-sm font-medium leading-6 text-slate-900 dark:text-white"
+      >
+        Alert events for conversations
+      </label>
+      <div
+        class="flex flex-row justify-between h-10 max-w-xl p-2 border border-solid rounded-md border-slate-75 dark:border-slate-600"
+      >
+        <div
+          class="flex flex-row items-center justify-center gap-1 border-r border-slate-75 grow"
+        >
+          <input type="radio" name="hotkey" value="enter" checked />
+          <label>None</label>
+        </div>
+        <div
+          class="flex flex-row items-center justify-center gap-1 border-r border-slate-75 grow"
+        >
+          <input type="radio" name="hotkey" value="enter" />
+          <label>Assigned</label>
+        </div>
+        <div class="flex flex-row items-center justify-center gap-1 grow">
+          <input type="radio" name="hotkey" value="enter" />
+          <label>All</label>
+        </div>
+      </div>
+    </div>
+    <div>
+      <label
+        class="flex justify-between pb-1 text-sm font-medium leading-6 text-slate-900 dark:text-white"
+      >
+        Alert conditions
+      </label>
+      <div class="flex flex-row items-center justify-start gap-2">
+        <input
+          type="checkbox"
+          name="send"
+          :checked="true"
+          class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+        />
+        <label>
+          Send audio alerts only if the browser window is not active
+        </label>
+      </div>
+      <div class="flex flex-row items-center justify-start gap-2">
+        <input
+          type="checkbox"
+          name="send"
+          :checked="false"
+          class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+        />
+        <label>
+          Send alerts every 30s until all the assigned conversations are read
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import FormSelect from 'v3/components/Form/Select.vue';
+const audioFiles = [
+  { label: 'Ding', value: 'ding' },
+  { label: 'Dong', value: 'dong' },
+];
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/ChangePassword.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/ChangePassword.vue
new file mode 100644
index 000000000..5ec3996e9
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/ChangePassword.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="flex flex-col w-full gap-4">
+    <h4 class="text-lg font-medium text-slate-900 dark:text-slate-25">
+      Change password
+    </h4>
+    <div class="flex flex-row items-center justify-between gap-4">
+      <div class="flex-grow h-0.5 bg-slate-50 dark:bg-slate-700" />
+    </div>
+    <form-input
+      name="current_password"
+      class="flex-1"
+      :class="{ error: false }"
+      label="Current password"
+      placeholder="Please enter your current password"
+      :has-error="false"
+      error-message="Please enter your current password"
+    />
+    <form-input
+      name="new_password"
+      class="flex-1"
+      :class="{ error: false }"
+      label="New password"
+      placeholder="Please enter your new password"
+      :has-error="false"
+      error-message="Please enter your new password"
+    />
+
+    <form-input
+      name="confirm_password"
+      class="flex-1"
+      :class="{ error: false }"
+      label="Confirm password"
+      placeholder="Please confirm your new password"
+      :has-error="false"
+      error-message="Please confirm your new password"
+    />
+    <woot-button
+      color-scheme="primary"
+      class="rounded-xl w-fit"
+      @click="$emit('click')"
+    >
+      Update password
+    </woot-button>
+  </div>
+</template>
+<script setup>
+import FormInput from 'v3/components/Form/Input.vue';
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
index 981fa7114..00d8639b9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
@@ -43,6 +43,33 @@
             </div>
           </template>
         </personal-wrapper>
+        <change-password />
+        <personal-wrapper
+          header="Audio notifications"
+          description="Enable audio notifications in dashboard for new messages and conversations."
+          :show-action-button="false"
+        >
+          <template #settingsItem>
+            <audio-notifications />
+          </template>
+        </personal-wrapper>
+        <personal-wrapper
+          header="Notification preferences"
+          :show-action-button="false"
+        >
+          <template #settingsItem>
+            <notification-preferences />
+          </template>
+        </personal-wrapper>
+        <personal-wrapper
+          header="Access Token"
+          description="This token can be used if you are building an API based integration."
+          :show-action-button="false"
+        >
+          <template #settingsItem>
+            <access-token />
+          </template>
+        </personal-wrapper>
       </div>
     </div>
   </div>
@@ -52,6 +79,10 @@ import UserBasicProfile from './UserBasicProfile.vue';
 import MessageSignature from './MessageSignature.vue';
 import PersonalWrapper from './PersonalWrapper.vue';
 import HotKeyCard from './HotKeyCard.vue';
+import ChangePassword from './ChangePassword.vue';
+import NotificationPreferences from './NotificationPreferences.vue';
+import AudioNotifications from './AudioNotifications.vue';
+import AccessToken from './AccessToken.vue';
 
 const keyOptions = [
   {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
new file mode 100644
index 000000000..f8bcf9511
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <!-- Draw a line -->
+    <div class="flex flex-row items-center justify-between gap-4">
+      <div class="flex-grow h-0.5 bg-slate-50 dark:bg-slate-700" />
+    </div>
+    <div class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl">
+      <table-header-cell :span="6" label="Notification type" />
+      <table-header-cell :span="3" label="Email" />
+      <table-header-cell :span="3" label="Push notification" />
+    </div>
+    <div class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl">
+      <div
+        class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+      >
+        <span class="text-slate-700 dark:text-slate-200">
+          A new conversation is created
+        </span>
+      </div>
+      <div
+        class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+      >
+        <input
+          type="checkbox"
+          name="email"
+          :checked="true"
+          class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+        />
+      </div>
+      <div
+        class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+      >
+        <input
+          type="checkbox"
+          name="email"
+          :checked="false"
+          class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+        />
+      </div>
+    </div>
+    <div class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl">
+      <div
+        class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+      >
+        <span class="text-slate-700 dark:text-slate-200">
+          Conversation is assigned to you
+        </span>
+      </div>
+      <div
+        class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+      >
+        <input
+          type="checkbox"
+          name="email"
+          :checked="true"
+          class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+        />
+      </div>
+      <div
+        class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+      >
+        <input
+          type="checkbox"
+          name="email"
+          :checked="false"
+          class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+        />
+      </div>
+    </div>
+    <div class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl">
+      <div
+        class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+      >
+        <span class="text-slate-700 dark:text-slate-200">
+          Conversation is assigned to you
+        </span>
+      </div>
+      <div
+        class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+      >
+        <input
+          type="checkbox"
+          name="email"
+          :checked="true"
+          class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+        />
+      </div>
+      <div
+        class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+      >
+        <input
+          type="checkbox"
+          name="email"
+          :checked="false"
+          class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+        />
+      </div>
+    </div>
+    <div class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl">
+      <div
+        class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+      >
+        <span class="text-slate-700 dark:text-slate-200">
+          You are mentioned in a conversation
+        </span>
+      </div>
+      <div
+        class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+      >
+        <input
+          type="checkbox"
+          name="email"
+          :checked="true"
+          class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+        />
+      </div>
+      <div
+        class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+      >
+        <input
+          type="checkbox"
+          name="email"
+          :checked="false"
+          class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+        />
+      </div>
+    </div>
+    <div class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl">
+      <div
+        class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+      >
+        <span class="text-slate-700 dark:text-slate-200">
+          New message is created in an assigned conversation
+        </span>
+      </div>
+      <div
+        class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+      >
+        <input
+          type="checkbox"
+          name="email"
+          :checked="true"
+          class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+        />
+      </div>
+      <div
+        class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
+      >
+        <input
+          type="checkbox"
+          name="email"
+          :checked="false"
+          class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import TableHeaderCell from 'dashboard/components/widgets/TableHeaderCell.vue';
+</script>