@esershnr/artalk-sidebar 1.0.3

package/src/components/SiteCreate.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import type { ArtalkType } from '@esershnr/artalk'
+import { artalk } from '../global'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  initVal?: { name: string; urls: string }
+}>()
+
+const emit = defineEmits<{
+  (evt: 'close'): void
+  (evt: 'done', siteNew: ArtalkType.SiteData): void
+}>()
+
+const isLoading = ref(false)
+const site = ref<{ name: string; urls: string }>({
+  name: '',
+  urls: '',
+})
+
+onMounted(() => {
+  site.value.name = props.initVal?.name || ''
+  site.value.urls = props.initVal?.urls || ''
+})
+
+async function submit() {
+  const siteName = site.value.name.trim()
+  const siteUrls = site.value.urls
+    .trim()
+    .split(',')
+    .map((v) => v.trim())
+    .filter((v) => !!v)
+
+  if (siteName === '') {
+    alert(t('siteNameInputHint'))
+    return
+  }
+
+  isLoading.value = true
+  let s: ArtalkType.SiteData
+  try {
+    s = (
+      await artalk!.ctx.getApi().sites.createSite({
+        name: siteName,
+        urls: siteUrls,
+      })
+    ).data
+  } catch (err: any) {
+    window.alert(err.message)
+    console.error(err)
+    return
+  } finally {
+    isLoading.value = false
+  }
+
+  emit('done', s)
+}
+
+function close() {
+  emit('close')
+}
+</script>
+
+<template>
+  <div class="atk-site-add">
+    <div class="atk-header">
+      <div class="atk-title">{{ t('createSite') }}</div>
+      <div class="atk-close-btn" @click="close()">
+        <i class="atk-icon atk-icon-close"></i>
+      </div>
+    </div>
+    <form class="atk-form" @submit.prevent="submit()">
+      <input
+        v-model="site.name"
+        type="text"
+        name="AtkSiteName"
+        :placeholder="t('siteName')"
+        autocomplete="off"
+      />
+      <input
+        v-model="site.urls"
+        type="text"
+        name="AtkSiteUrls"
+        :placeholder="`${t('siteUrls')} (${t('multiSepHint')})`"
+        autocomplete="off"
+      />
+      <button type="submit" class="atk-btn" name="AtkSubmit">
+        {{ t('add') }}
+      </button>
+    </form>
+    <LoadingLayer v-if="isLoading" />
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

package/src/components/SiteEditor.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import type { ArtalkType } from '@esershnr/artalk'
+import { artalk } from '../global'
+
+const props = defineProps<{
+  site: ArtalkType.SiteData
+}>()
+
+const emit = defineEmits<{
+  (evt: 'close'): void
+  (evt: 'update', page: ArtalkType.SiteData): void
+  (evt: 'remove', id: number): void
+}>()
+
+const { site } = toRefs(props)
+const isLoading = ref(false)
+const editFieldKey = ref<keyof ArtalkType.SiteData | null>(null)
+const editFieldVal = computed(() => {
+  if (editFieldKey.value === 'urls') return site.value.urls_raw || ''
+  return String(editFieldKey.value ? site.value[editFieldKey.value!] || '' : '')
+})
+
+const { t } = useI18n()
+
+function close() {
+  emit('close')
+}
+
+function openURL(url: string) {
+  window.open(url)
+}
+
+function rename() {
+  editFieldKey.value = 'name'
+}
+
+function editURL() {
+  editFieldKey.value = 'urls'
+}
+
+function del() {
+  const del = async () => {
+    isLoading.value = true
+    try {
+      await artalk!.ctx.getApi().sites.deleteSite(site.value.id)
+    } catch (err: any) {
+      alert(err.message)
+      console.error(err)
+      return
+    } finally {
+      isLoading.value = false
+    }
+    emit('remove', site.value.id)
+  }
+  if (window.confirm(t('siteDeleteConfirm', { name: site.value.name }))) del()
+}
+
+async function onFieldEditorYes(val: string) {
+  if (!editFieldKey.value) return
+
+  if (editFieldVal.value !== val) {
+    isLoading.value = true
+    let s: ArtalkType.SiteData
+    try {
+      let finalVal: string | string[] = val
+      if (Array.isArray(site.value[editFieldKey.value]))
+        finalVal = val
+          .split(',')
+          .map((v) => v.trim())
+          .filter((v) => !!v)
+      s = (
+        await artalk!.ctx.getApi().sites.updateSite(site.value.id, {
+          ...site.value,
+          [editFieldKey.value]: finalVal,
+        })
+      ).data
+    } catch (err: any) {
+      alert(err.message)
+      console.error(err)
+      return false
+    } finally {
+      isLoading.value = false
+    }
+    emit('update', s)
+  }
+
+  editFieldKey.value = null
+  return true
+}
+
+function onFiledEditorNo() {
+  editFieldKey.value = null
+}
+</script>
+
+<template>
+  <div class="atk-site-edit">
+    <div class="atk-header">
+      <div class="atk-site-info">
+        <span class="atk-site-name" @click="!site.first_url || openURL(site.first_url)">
+          {{ site.name }}
+        </span>
+        <span class="atk-site-urls">
+          <div v-for="(url, i) in site.urls" :key="i" class="atk-url-item" @click="openURL(url)">
+            {{ url }}
+          </div>
+        </span>
+      </div>
+      <div class="atk-close-btn" @click="close()">
+        <i class="atk-icon atk-icon-close"></i>
+      </div>
+    </div>
+    <div class="atk-main">
+      <div class="atk-site-text-actions">
+        <div class="atk-item atk-rename-btn" @click="rename()">
+          {{ t('rename') }}
+        </div>
+        <div class="atk-item atk-edit-url-btn" @click="editURL()">{{ t('edit') }} URL</div>
+        <!--<div class="atk-item atk-export-btn">Export</div>
+        <div class="atk-item atk-import-btn">Import</div>-->
+      </div>
+      <div class="atk-site-btn-actions">
+        <div class="atk-item atk-del-btn" @click="del()">
+          <i class="atk-icon atk-icon-del"></i>
+        </div>
+      </div>
+      <LoadingLayer v-if="isLoading" style="z-index: 1000" />
+      <ItemTextEditor
+        v-if="!!editFieldKey"
+        :init-value="editFieldVal"
+        @yes="onFieldEditorYes"
+        @no="onFiledEditorNo"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

package/src/components/SiteSwitcher.vue

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { useNavStore } from '../stores/nav'
+import { useUserStore } from '../stores/user'
+import { isOpenFromSidebar } from '@/global'
+
+const el = ref<HTMLElement | null>(null)
+
+const nav = useNavStore()
+const { siteSwitcherShow: curtShow, sites } = storeToRefs(nav)
+const { site: curtSite } = storeToRefs(useUserStore())
+
+const router = useRouter()
+const { t } = useI18n()
+
+onMounted(() => {
+  nav.refreshSites()
+})
+
+interface IDisplaySite {
+  label: string
+  name: string
+  logoText: string
+}
+
+function switchSite(siteName: string) {
+  if (siteName === '__SITE_MANAGEMENT__') {
+    router.replace('/sites')
+  } else {
+    curtSite.value = siteName
+  }
+
+  curtShow.value = false
+}
+
+const displaySites = computed(() => {
+  const displays: IDisplaySite[] = []
+  displays.push({ label: t('allSites'), name: '', logoText: '_' })
+  sites.value.forEach((site) => {
+    displays.push({
+      label: site.name,
+      name: site.name,
+      logoText: site.name.substring(0, 1),
+    })
+  })
+  displays.push({
+    label: t('siteManage'),
+    name: '__SITE_MANAGEMENT__',
+    logoText: '+',
+  })
+  return displays
+})
+
+function outsideChecker(evt: MouseEvent) {
+  const isClickInside = el.value?.contains(evt.target as any)
+  if (!isClickInside) {
+    curtShow.value = false
+  }
+}
+
+watch(curtShow, (value) => {
+  if (value) {
+    setTimeout(() => {
+      document.addEventListener('click', outsideChecker)
+    }, 80)
+  } else {
+    document.removeEventListener('click', outsideChecker)
+  }
+})
+
+function logout() {
+  if (!window.confirm(t('logoutConfirm'))) return
+
+  useUserStore().logout()
+  nextTick(() => {
+    router.replace('/login')
+  })
+}
+</script>
+
+<template>
+  <Transition>
+    <div v-show="curtShow" ref="el" class="atk-site-list-floater">
+      <div class="atk-sites">
+        <div
+          v-for="(site, i) in displaySites"
+          :key="i"
+          class="atk-site-item"
+          :class="{ 'atk-active': curtSite === site.name }"
+          @click="switchSite(site.name)"
+        >
+          <div class="atk-site-logo">{{ site.logoText }}</div>
+          <div class="atk-site-name">{{ site.label }}</div>
+        </div>
+
+        <!-- Logout Button -->
+        <div v-if="!isOpenFromSidebar()" class="atk-site-item" @click="logout()">
+          <svg
+            class="atk-site-logo"
+            stroke="currentColor"
+            fill="currentColor"
+            stroke-width="0"
+            viewBox="-6 -6 36 36"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5 22C4.44772 22 4 21.5523 4 21V3C4 2.44772 4.44772 2 5 2H19C19.5523 2 20 2.44772 20 3V6H18V4H6V20H18V18H20V21C20 21.5523 19.5523 22 19 22H5ZM18 16V13H11V11H18V8L23 12L18 16Z"
+            ></path>
+          </svg>
+          <div class="atk-site-name">{{ t('logout') }}</div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped lang="scss">
+.atk-site-list-floater {
+  @extend .atk-slim-scrollbar;
+
+  position: absolute;
+  z-index: 9999;
+  left: calc((100% - 80%) / 2);
+  top: 70px;
+  pointer-events: all;
+  background: var(--at-color-bg);
+  width: 80%;
+  max-height: 40%;
+  margin: 0 auto;
+  border: 1px solid var(--at-color-border);
+  border-radius: 4px;
+  overflow-y: auto;
+  transition: all 0.2s ease;
+
+  @media (min-width: 1024px) {
+    left: 10px;
+    max-width: 260px;
+  }
+
+  .atk-sites {
+    display: flex;
+    flex-direction: column;
+    padding: 7px 0;
+
+    .atk-site-item {
+      display: flex;
+      flex-direction: row;
+      cursor: pointer;
+      align-items: center;
+      padding: 0 10px;
+      margin-bottom: 1px;
+
+      .atk-site-logo {
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+        background: #5b6f7e;
+        margin: 10px;
+        border-radius: 3px;
+        text-align: center;
+        color: #fff;
+        font-size: 12px;
+      }
+
+      .atk-site-name {
+        color: var(--at-color-deep);
+        font-size: 17px;
+        margin-left: 7px;
+      }
+
+      &.atk-active,
+      &:hover {
+        background: var(--at-color-bg-grey);
+      }
+    }
+  }
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+  transform: scale3d(1.05, 1.05, 1.05);
+}
+</style>

package/src/components/UserEditor.vue

@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import type { ArtalkType } from '@esershnr/artalk'
+import { artalk } from '../global'
+
+const { t } = useI18n()
+
+interface IUserEditData {
+  id: number
+  name: string
+  email: string
+  link: string
+  password?: string
+  badge_name: string
+  badge_color: string
+  is_admin: boolean
+  receive_email: boolean
+}
+
+const props = defineProps<{
+  user?: IUserEditData
+}>()
+
+const emit = defineEmits<{
+  (evt: 'close'): void
+  (evt: 'update', user: ArtalkType.UserDataForAdmin): void
+}>()
+
+const editUser = ref<IUserEditData>()
+
+const isLoading = ref(false)
+const isCreateMode = ref(false)
+
+const showFullDetails = ref(false)
+
+onBeforeMount(() => {
+  if (!props.user) {
+    isCreateMode.value = true
+    editUser.value = {
+      id: 0,
+      name: '',
+      email: '',
+      link: '',
+      password: '',
+      badge_name: '',
+      badge_color: '',
+      is_admin: false,
+      receive_email: true,
+    }
+  } else {
+    editUser.value = {
+      ...props.user,
+      password: '',
+    }
+  }
+})
+
+function close() {
+  emit('close')
+}
+
+function submit() {
+  isLoading.value = true
+
+  // The default badge color
+  if (editUser.value!.badge_name !== '' && editUser.value!.badge_color === '') {
+    editUser.value!.badge_color = '#0083ff'
+  }
+
+  if (isCreateMode.value) {
+    artalk!.ctx
+      .getApi()
+      .users.createUser({
+        ...editUser.value!,
+      })
+      .then((res) => {
+        emit('update', res.data)
+      })
+      .catch((e: ArtalkType.FetchError) => {
+        alert(e.message)
+      })
+      .finally(() => {
+        isLoading.value = false
+      })
+  } else {
+    const user = editUser.value!
+    artalk!.ctx
+      .getApi()
+      .users.updateUser(user.id, {
+        ...editUser.value!,
+      })
+      .then((res) => {
+        emit('update', res.data)
+      })
+      .catch((e: ArtalkType.FetchError) => {
+        alert(e.message)
+      })
+      .finally(() => {
+        isLoading.value = false
+      })
+  }
+}
+</script>
+
+<template>
+  <div class="user-editor-layer">
+    <div class="header">
+      <div class="title">
+        {{ isCreateMode ? t('userCreate') : t('userEdit') }}
+      </div>
+      <div v-if="!isCreateMode" class="close-btn" @click="close()">
+        <i class="atk-icon atk-icon-close"></i>
+      </div>
+    </div>
+    <div v-if="!isCreateMode" class="user-log">
+      <div>
+        <span>{{ t('comments') }}</span>
+        {{ (editUser as any).comment_count }}
+      </div>
+      <div>
+        <span>{{ t('last') }} IP</span>
+        {{ (editUser as any).last_ip || '-' }}
+      </div>
+      <div>
+        <span>{{ t('last') }} UA</span>
+        <template v-if="showFullDetails || !(editUser as any).last_ua">
+          {{ (editUser as any).last_ua || '-' }}
+        </template>
+        <template v-else>
+          <span
+            style="cursor: pointer; color: var(--at-color-main)"
+            @click="showFullDetails = true"
+          >
+            {{ t('Show') }}
+          </span>
+        </template>
+      </div>
+    </div>
+    <form v-if="editUser" class="atk-form" @submit.prevent="submit()">
+      <div class="atk-label required">{{ t('username') }}</div>
+      <input v-model="editUser.name" type="text" placeholder="" autocomplete="off" />
+      <div class="atk-label required">{{ t('email') }}</div>
+      <input v-model="editUser.email" type="text" placeholder="" autocomplete="off" />
+      <div class="atk-label">{{ t('link') }}</div>
+      <input v-model="editUser.link" type="text" placeholder="" autocomplete="off" />
+      <div class="atk-label">{{ t('badgeText') }}</div>
+      <input v-model="editUser.badge_name" type="text" placeholder="" autocomplete="off" />
+      <div class="atk-label">{{ t('badgeColor') }} (Color Hex)</div>
+      <input v-model="editUser.badge_color" type="text" placeholder="" autocomplete="off" />
+      <div class="atk-label required">{{ t('role') }}</div>
+      <select v-model="editUser.is_admin">
+        <option :value="false">{{ t('normal') }}</option>
+        <option :value="true">{{ t('admin') }}</option>
+      </select>
+      <template v-if="editUser.is_admin">
+        <div class="atk-label required">{{ t('password') }}</div>
+        <input
+          v-model="editUser.password"
+          type="text"
+          :placeholder="isCreateMode ? '' : `(${t('passwordEmptyHint')})`"
+          autocomplete="off"
+        />
+      </template>
+      <div class="atk-label required">{{ t('emailNotify') }}</div>
+      <select v-model="editUser.receive_email">
+        <option :value="true">{{ t('enabled') }}</option>
+        <option :value="false">{{ t('disabled') }}</option>
+      </select>
+      <button type="submit" class="atk-btn">{{ t('save') }}</button>
+    </form>
+    <LoadingLayer v-if="isLoading" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.user-editor-layer {
+  z-index: 5;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  min-height: calc(100vh - 160px);
+  background: var(--at-color-bg);
+  overflow-y: auto;
+}
+
+.header {
+  position: sticky;
+  top: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 20px 20px 10px 20px;
+  background: var(--at-color-bg-transl);
+
+  .title {
+    margin-left: 10px;
+    flex: 1;
+    font-size: 19px;
+  }
+}
+
+.close-btn {
+  width: 50px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover i::after {
+    background-color: var(--at-color-red);
+  }
+}
+
+.user-log {
+  margin: 0 30px;
+  padding: 15px 25px;
+  border-radius: 2px;
+  font-size: 13px;
+  background: var(--at-color-bg-grey);
+  line-height: 1.8;
+
+  & > div > span:first-child {
+    display: inline-block;
+    width: 5em;
+  }
+}
+</style>

package/src/global.ts

@@ -0,0 +1,62 @@
+import Artalk from '@esershnr/artalk'
+import type { LocalUser } from '@esershnr/artalk'
+
+export let artalk: Artalk | null = null
+
+export function setArtalk(artalkInstance: Artalk) {
+  artalk = artalkInstance
+}
+
+export function getArtalk() {
+  return artalk
+}
+
+/**
+ * Boot params from URL search params
+ *
+ * TODO: Refactor to a singleton store
+ */
+export const bootParams = getBootParams()
+
+function getBootParams() {
+  const p = new URLSearchParams(document.location.search)
+
+  // call history api to clear search params
+  // on purpose to prevent the params (e.g. user token)
+  // from being leaked like from the referrer header or the browser history
+  if (!!p.get('user') && window.history.replaceState) {
+    window.history.replaceState({}, '', window.location.pathname)
+  }
+
+  const userFromURL = JSON.parse(p.get('user') || '{}')
+  const user: LocalUser = {
+    name: userFromURL.name || '',
+    email: userFromURL.email || '',
+    link: userFromURL.link || '',
+    token: userFromURL.token || '',
+    is_admin: userFromURL.is_admin || false,
+  }
+
+  let darkMode: boolean
+  if (p.get('darkMode') != null) {
+    darkMode = p.get('darkMode') == '1'
+  } else {
+    darkMode =
+      localStorage.getItem('ATK_SIDEBAR_DARK_MODE') != null
+        ? localStorage.getItem('ATK_SIDEBAR_DARK_MODE') == '1'
+        : window.matchMedia('(prefers-color-scheme: dark)').matches
+  }
+
+  return {
+    user,
+    pageKey: p.get('pageKey') || '',
+    site: p.get('site') || '',
+    view: p.get('view') || '',
+    viewParams: <any>null,
+    darkMode,
+  }
+}
+
+export function isOpenFromSidebar() {
+  return !!bootParams.user?.email
+}