@esershnr/artalk-sidebar 1.0.3

package/src/pages/transfer.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { useNavStore } from '../stores/nav'
+import { useUserStore } from '../stores/user'
+import { artalk } from '../global'
+
+const nav = useNavStore()
+const user = useUserStore()
+const { curtTab } = storeToRefs(nav)
+const { t } = useI18n()
+
+const importParams = ref({
+  siteName: '',
+  siteURL: '',
+  payload: '',
+})
+
+const isLoading = ref(false)
+
+const uploadApiURL = ref('')
+const importTaskApiURL = ref('')
+
+const uploadedFilename = ref('')
+
+const importTaskStarted = ref(false)
+const importTaskParams = ref<Record<string, string>>({})
+
+const exportTaskStarted = ref(false)
+
+onMounted(() => {
+  nav.updateTabs(
+    {
+      import: 'import',
+      export: 'export',
+    },
+    'import',
+  )
+  watch(curtTab, (tab) => {
+    if (tab === 'export') {
+      startExportTask()
+      curtTab.value = 'import'
+    }
+  })
+
+  uploadApiURL.value = `${artalk?.ctx.conf.server}/api/v2/transfer/upload`
+  importTaskApiURL.value = `${artalk?.ctx.conf.server}/api/v2/transfer/import`
+})
+
+function setError(msg: string) {
+  window.alert(msg)
+}
+
+function fileUploaded(filename: string) {
+  uploadedFilename.value = filename
+}
+
+function startImportTask() {
+  if (!uploadedFilename.value) {
+    setError(`Please upload a data file first`)
+    return
+  }
+
+  const p = importParams.value
+  const siteName = p.siteName.trim()
+  const siteURL = p.siteURL.trim()
+  const payload = p.payload.trim()
+
+  // Prepare request params
+  let rData: any = {}
+  if (payload) {
+    // Validate payload JSON
+    try {
+      rData = JSON.parse(payload)
+    } catch (err) {
+      setError(`Payload JSON invalid: ${err}`)
+      return
+    }
+
+    if (typeof rData !== 'object' || Array.isArray(rData)) {
+      setError(`Payload should be an object`)
+      return
+    }
+  }
+  if (siteName) rData.target_site_name = siteName
+  if (siteURL) rData.target_site_url = siteURL
+  rData.json_file = uploadedFilename.value
+
+  // Create an import task
+  importTaskParams.value = {
+    ...rData,
+    token: user.token,
+  }
+  importTaskStarted.value = true
+}
+
+function importTaskDone() {
+  importTaskStarted.value = false
+}
+
+async function startExportTask() {
+  if (exportTaskStarted.value) return
+  exportTaskStarted.value = true
+  isLoading.value = true
+  try {
+    const res = await artalk!.ctx.getApi().transfer.exportArtrans()
+    downloadFile(`backup-${getYmdHisFilename()}.artrans`, res.data.artrans)
+  } catch (err: any) {
+    console.error(err)
+    window.alert(`${String(err)}`)
+    return
+  } finally {
+    exportTaskStarted.value = false
+    isLoading.value = false
+  }
+}
+
+function downloadFile(filename: string, text: string) {
+  const el = document.createElement('a')
+  el.setAttribute('href', `data:text/json;charset=utf-8,${encodeURIComponent(text)}`)
+  el.setAttribute('download', filename)
+  el.style.display = 'none'
+  document.body.appendChild(el)
+  el.click()
+  document.body.removeChild(el)
+}
+
+function getYmdHisFilename() {
+  const date = new Date()
+
+  const year = date.getFullYear()
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+  const hours = date.getHours()
+  const minutes = date.getMinutes()
+  const seconds = date.getSeconds()
+
+  return `${year}${month}${day}-${hours}${padWithZeros(minutes, 2)}${padWithZeros(seconds, 2)}`
+}
+
+function padWithZeros(vNumber: number, width: number) {
+  let numAsString = vNumber.toString()
+  while (numAsString.length < width) {
+    numAsString = `0${numAsString}`
+  }
+  return numAsString
+}
+
+const artransferToolHint = computed(() =>
+  t('artransferToolHint', { link: '__LINK__' }).replace(
+    '__LINK__',
+    `<a href="https://artalk.js.org/guide/transfer.html" target="_blank">${t('artransfer')}</a>`,
+  ),
+)
+</script>
+
+<template>
+  <LoadingLayer v-if="isLoading" />
+  <LogTerminal
+    v-if="importTaskStarted"
+    :api-url="importTaskApiURL"
+    :req-params="importTaskParams"
+    @back="importTaskDone()"
+  />
+  <div v-show="!importTaskStarted" class="atk-form">
+    <div class="atk-label atk-data-file-label">Artrans {{ t('dataFile') }}</div>
+    <FileUploader :api-url="uploadApiURL" @done="fileUploaded">
+      <template #tip>
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <span v-html="artransferToolHint" />
+      </template>
+      <template #done-msg>
+        {{ t('uploadReadyToImport') }}
+      </template>
+    </FileUploader>
+    <div class="atk-label">{{ t('targetSiteName') }}</div>
+    <input
+      v-model="importParams.siteName"
+      type="text"
+      name="AtkSiteName"
+      :placeholder="t('inputHint')"
+      autocomplete="off"
+    />
+    <div class="atk-label">{{ t('targetSiteURL') }}</div>
+    <input
+      v-model="importParams.siteURL"
+      type="text"
+      name="AtkSiteURL"
+      :placeholder="t('inputHint')"
+      autocomplete="off"
+    />
+    <div class="atk-label">{{ t('payload') }} ({{ t('optional') }})</div>
+    <textarea v-model="importParams.payload" name="AtkPayload"></textarea>
+    <span class="atk-desc">
+      <a href="https://artalk.js.org/guide/transfer.html" target="_blank">
+        {{ t('moreDetails') }}
+      </a>
+    </span>
+    <button class="atk-btn" name="AtkSubmit" @click="startImportTask()">
+      {{ t('import') }}
+    </button>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

package/src/pages/users.vue

@@ -0,0 +1,271 @@
+<script setup lang="ts">
+import type { ArtalkType } from '@esershnr/artalk'
+import { storeToRefs } from 'pinia'
+import { useNavStore } from '../stores/nav'
+import { artalk } from '../global'
+import Pagination from '../components/Pagination.vue'
+
+const nav = useNavStore()
+const { curtTab } = storeToRefs(nav)
+const users = ref<ArtalkType.UserDataForAdmin[]>([])
+const { t } = useI18n()
+
+const pageSize = ref(30)
+const pageTotal = ref(0)
+const pagination = ref<InstanceType<typeof Pagination>>()
+const curtType = ref<'all' | 'admin' | 'in_conf' | undefined>('all')
+
+const userEditorState = reactive({
+  show: false,
+  user: undefined as ArtalkType.UserDataForAdmin | undefined,
+})
+const search = ref('')
+
+watch(curtTab, (tab) => {
+  if (tab === 'create') {
+    createUser()
+  } else {
+    curtType.value = tab as any
+    fetchUsers(0)
+    closeUserEditor()
+  }
+})
+
+onMounted(() => {
+  fetchUsers(0)
+
+  nav.updateTabs(
+    {
+      all: 'all',
+      admin: 'admin',
+      create: 'create',
+    },
+    'all',
+  )
+
+  // Users search
+  nav.enableSearch(
+    (value: string) => {
+      search.value = value
+      fetchUsers(0)
+    },
+    () => {
+      if (search.value === '') return
+      search.value = ''
+      fetchUsers(0)
+    },
+  )
+})
+
+watch(
+  () => userEditorState.show,
+  () => nav.scrollPageToTop(),
+)
+
+function fetchUsers(offset: number) {
+  if (offset === 0) pagination.value?.reset()
+  nav.setPageLoading(true)
+  artalk?.ctx
+    .getApi()
+    .users.getUsers(curtType.value, {
+      offset,
+      limit: pageSize.value,
+      search: search.value,
+    })
+    .then((res) => {
+      pageTotal.value = res.data.count
+      users.value = res.data.users
+      nav.scrollPageToTop()
+    })
+    .finally(() => {
+      nav.setPageLoading(false)
+    })
+}
+
+function onChangePage(offset: number) {
+  fetchUsers(offset)
+}
+
+function editUser(user: ArtalkType.UserDataForAdmin) {
+  if (user.is_in_conf) {
+    alert(t('userInConfCannotEditHint'))
+    return
+  }
+
+  userEditorState.show = true
+  userEditorState.user = user
+}
+
+function createUser() {
+  userEditorState.show = true
+  userEditorState.user = undefined
+}
+
+function updateUser(user: ArtalkType.UserDataForAdmin) {
+  const index = users.value.findIndex((u) => u.id === user.id)
+  if (index != -1) {
+    // Edit user
+    const orgUser = users.value[index]
+    Object.keys(user).forEach((key) => {
+      ;(orgUser as any)[key] = (user as any)[key]
+    })
+  } else {
+    // Create user
+    fetchUsers(0)
+  }
+
+  closeUserEditor()
+}
+
+function closeUserEditor() {
+  userEditorState.show = false
+  userEditorState.user = undefined
+}
+
+function delUser(user: ArtalkType.UserDataForAdmin) {
+  if (
+    window.confirm(
+      t('userDeleteConfirm', {
+        name: user.name,
+        email: user.email,
+      }),
+    )
+  ) {
+    artalk!.ctx
+      .getApi()
+      .users.deleteUser(user.id)
+      .then(() => {
+        const index = users.value.findIndex((u) => u.id === user.id)
+        users.value.splice(index, 1)
+
+        if (user.is_in_conf) {
+          alert(t('userDeleteManuallyHint'))
+        }
+      })
+      .catch((e: ArtalkType.FetchError) => {
+        alert(e.message)
+      })
+  }
+}
+</script>
+
+<template>
+  <div class="user-list-wrap">
+    <div class="user-list">
+      <div v-for="user in users" :key="user.id" class="user-item">
+        <div class="user-main">
+          <div class="title">
+            {{ user.name }}
+            <span class="badge-grp">
+              <span
+                v-if="user.badge_name"
+                class="badge"
+                :style="{ backgroundColor: user.badge_color }"
+              >
+                {{ user.badge_name }}
+              </span>
+              <span v-else-if="user.is_admin" class="badge admin" :title="t('userAdminHint')">
+                {{ t('Admin') }}
+              </span>
+              <span v-if="user.is_in_conf" class="badge in-conf" :title="t('userInConfHint')">
+                {{ t('Config') }}
+              </span>
+            </span>
+          </div>
+          <div class="sub">{{ user.email }}</div>
+        </div>
+        <div class="user-actions">
+          <span @click="editUser(user)">{{ t('edit') }}</span>
+          <span>{{ t('comment') }} ({{ user.comment_count }})</span>
+          <span @click="delUser(user)">{{ t('delete') }}</span>
+        </div>
+      </div>
+    </div>
+    <Pagination
+      ref="pagination"
+      :page-size="pageSize"
+      :total="pageTotal"
+      :disabled="nav.isPageLoading"
+      @change="onChangePage"
+    />
+
+    <UserEditor
+      v-if="userEditorState.show"
+      :user="userEditorState.user"
+      @update="updateUser"
+      @close="closeUserEditor"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.user-list-wrap {
+  .user-list {
+    .user-item {
+      padding: 15px 30px;
+
+      &:not(:last-child) {
+        border-bottom: 1px solid var(--at-color-border);
+      }
+
+      .user-main {
+        .title {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          color: var(--at-color-deep);
+          font-size: 20px;
+
+          .badge-grp {
+            display: flex;
+            margin-left: 5px;
+          }
+
+          .badge {
+            margin-left: 6px;
+            font-size: 13px;
+            color: var(--at-color-meta);
+            background: var(--at-color-bg-grey);
+            padding: 0 6px;
+            line-height: 17px;
+            border-radius: 2px;
+            color: #fff;
+
+            &.admin {
+              background: #0083ff;
+            }
+
+            &.in-conf {
+              background: #89b1a5;
+            }
+          }
+        }
+
+        .sub {
+          color: var(--at-color-sub);
+          font-size: 15px;
+          margin-top: 5px;
+        }
+      }
+
+      .user-actions {
+        margin-top: 10px;
+
+        & > span {
+          cursor: pointer;
+          color: var(--at-color-meta);
+          font-size: 13px;
+
+          &:not(:last-child) {
+            margin-right: 16px;
+          }
+
+          &:hover {
+            color: var(--at-color-deep);
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/src/stores/nav.ts

@@ -0,0 +1,114 @@
+import { defineStore } from 'pinia'
+import type { ArtalkType } from '@esershnr/artalk'
+import { artalk, bootParams, getArtalk } from '@/global'
+import { useMobileWidth } from '@/hooks/MobileWidth'
+
+type TabsObj = { [name: string]: string }
+
+export const useNavStore = defineStore('nav', () => {
+  const curtTab = ref('')
+  const tabs = ref<TabsObj>({})
+
+  const curtPage = ref('comments')
+  const sites = ref<ArtalkType.SiteData[]>([])
+  const siteSwitcherShow = ref(false)
+
+  const isSearchEnabled = ref(false)
+  const searchEvent = ref<((val: string) => void) | null>(null)
+  const searchResetEvent = ref<(() => void) | null>(null)
+
+  const isPageLoading = ref(false)
+  const scrollableArea = ref<HTMLElement | null>(null)
+
+  const darkMode = ref(bootParams.darkMode)
+  watch(darkMode, (val) => {
+    getArtalk()?.setDarkMode(val)
+    if (val != window.matchMedia('(prefers-color-scheme: dark)').matches)
+      localStorage.setItem('ATK_SIDEBAR_DARK_MODE', val ? '1' : '0')
+    else localStorage.removeItem('ATK_SIDEBAR_DARK_MODE') // enable auto switch
+  })
+
+  const updateTabs = (aTabs: TabsObj, activeTab?: string) => {
+    tabs.value = aTabs
+    if (activeTab) curtTab.value = activeTab
+  }
+
+  const setTabActive = (tabName: string) => {
+    curtTab.value = tabName
+  }
+
+  const showSiteSwitcher = () => {
+    siteSwitcherShow.value = true
+  }
+
+  const hideSiteSwitcher = () => {
+    siteSwitcherShow.value = false
+  }
+
+  const toggleSiteSwitcher = () => {
+    siteSwitcherShow.value = !siteSwitcherShow.value
+  }
+
+  const scrollPageToTop = () => {
+    scrollableArea.value?.scrollTo(0, 0)
+  }
+
+  const scrollPageToEl = (el: HTMLElement) => {
+    scrollableArea.value?.scrollTo(0, el.offsetTop)
+  }
+
+  const setPageLoading = (pageLoading: boolean) => {
+    isPageLoading.value = pageLoading
+  }
+
+  const refreshSites = () => {
+    artalk?.ctx
+      .getApi()
+      .sites.getSites()
+      .then((res) => {
+        sites.value = res.data.sites
+      })
+  }
+
+  const enableSearch = (searchEvt: (val: string) => void, searchResetEvt: () => void) => {
+    isSearchEnabled.value = true
+    searchEvent.value = searchEvt
+    searchResetEvent.value = searchResetEvt
+  }
+
+  const toggleDarkMode = () => {
+    darkMode.value = !darkMode.value
+  }
+
+  useRouter().beforeEach((to, from) => {
+    isSearchEnabled.value = false
+  })
+
+  const isMobile = useMobileWidth()
+
+  return {
+    sites,
+    curtPage,
+    curtTab,
+    tabs,
+    siteSwitcherShow,
+    scrollableArea,
+    isPageLoading,
+    updateTabs,
+    setTabActive,
+    showSiteSwitcher,
+    hideSiteSwitcher,
+    toggleSiteSwitcher,
+    scrollPageToTop,
+    scrollPageToEl,
+    setPageLoading,
+    refreshSites,
+    isSearchEnabled,
+    searchEvent,
+    searchResetEvent,
+    enableSearch,
+    isMobile,
+    darkMode,
+    toggleDarkMode,
+  }
+})

package/src/stores/user.ts

@@ -0,0 +1,48 @@
+import type { LocalUser } from '@esershnr/artalk'
+import { defineStore } from 'pinia'
+import sha256 from 'crypto-js/sha256'
+import md5 from 'crypto-js/md5'
+import { bootParams, getArtalk } from '../global'
+
+interface UserState extends LocalUser {
+  /**
+   * Current site name
+   */
+  site: string
+}
+
+export const useUserStore = defineStore('user', {
+  state: () =>
+    <UserState>{
+      site: bootParams.site || '',
+      ...bootParams.user,
+    },
+  actions: {
+    logout() {
+      this.$reset()
+      getArtalk()?.ctx.getUser().logout()
+    },
+    sync() {
+      const user = getArtalk()?.ctx.getUser()
+      if (!user) throw new Error('Artalk is not initialized')
+      if (!user.checkHasBasicUserInfo()) throw new Error('User is not logged in')
+      this.$patch({ ...user.getData(), site: '' })
+    },
+  },
+  getters: {
+    avatar: (state) => getGravatar(state.email),
+  },
+})
+
+function getGravatar(email: string) {
+  // TODO get avatar url from backend api
+  const conf = getArtalk()?.ctx.conf?.gravatar
+  if (!conf) return ''
+
+  const emailHash =
+    typeof conf.params == 'string' && conf.params.includes('sha256=1')
+      ? sha256(email.toLowerCase()).toString()
+      : md5(email.toLowerCase()).toString()
+
+  return `${conf.mirror.replace(/\/$/, '')}/${emailHash}?${conf.params.replace(/^\?/, '')}`
+}