Admin checker update & Comment delete function for admin.

ArtalkJS · Apr 29, 2020 · 40e8279 · 40e8279
1 parent 2d15ef5
commit 40e8279
Show file tree

Hide file tree

Showing 20 changed files with 267 additions and 60 deletions.
diff --git a/README.md b/README.md
@@ -51,6 +51,7 @@
   new Artalk({
     el: '#ArtalkComments',
     placeholder: '来啊，快活啊 (/ω＼)',
+    noComment: '快来成为第一个评论的人吧~',
     defaultAvatar: 'mp',
     pageKey: '[页面唯一标识]',
     serverUrl: '[后端程序URL]',

diff --git a/dist/Artalk.css b/dist/Artalk.css
diff --git a/dist/Artalk.js b/dist/Artalk.js
diff --git a/index-tpl.ejs b/index-tpl.ejs
@@ -8,7 +8,8 @@
     body { padding:45px 10px;margin:0;background:#f4f4f4 }
     .card { margin:0 auto;max-width:700px;position:relative;overflow:hidden;background:#FFF;border-radius:4px;padding:20px }
     .card:not(:last-child) { margin-bottom:10px }
-    .title > a { display:block;text-decoration:none;color:#0083ff;font-size:35px;margin-top:0;margin-bottom:10px;margin-left:-30px }
+    .card.billboard { text-align: center; }
+    .title > a { display:block;text-decoration:none;color:#0083ff;font-size:35px;margin-top:0;margin-bottom:10px; }
     .title > a:hover { margin-left:0 }
     .title > a > span { opacity:0 }
     .title > a:hover>span { opacity:1 }
@@ -18,12 +19,13 @@
   </style>
 </head>
 <body>
-  <div class="card">
+  <div class="card billboard">
     <div class="title"><a href="https://github.com/qwqcode/Artalk" target="_blank"><span>&gt; </span>Artalk<span> &lt;</span></a></div>
     <div class="desc">一款简洁有趣的自托管评论系统</div>
     <div class="social">
       <a href="https://www.npmjs.com/package/artalk" target="_blank"><img src="https://img.shields.io/npm/v/artalk.svg?style=flat-square"></a>
       <a href="https://www.npmjs.com/package/artalk" target="_blank"><img src="https://img.shields.io/npm/dt/artalk.svg?style=flat-square"></a>
+      <a href="https://github.com/qwqcode/Artalk/commits/master" target="_blank"><img src="https://img.shields.io/github/last-commit/qwqcode/Artalk?style=flat-square"></a>
       <a href="https://github.com/qwqcode/Artalk/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/github/license/qwqcode/Artalk.svg?style=flat-square"></a>
       <a href="https://github.com/qwqcode/Artalk#%E6%8D%90%E5%8A%A9" target="_blank"><img src="https://img.shields.io/badge/%24-donate-%23ff69b4.svg?style=flat-square"></a>
       <a href="https://github.com/qwqcode/Artalk" target="_blank"><img src="https://img.shields.io/github/stars/qwqcode/Artalk.svg?style=social"></a>

diff --git a/index.html b/index.html
@@ -8,22 +8,24 @@
     body { padding:45px 10px;margin:0;background:#f4f4f4 }
     .card { margin:0 auto;max-width:700px;position:relative;overflow:hidden;background:#FFF;border-radius:4px;padding:20px }
     .card:not(:last-child) { margin-bottom:10px }
-    .title > a { display:block;text-decoration:none;color:#0083ff;font-size:35px;margin-top:0;margin-bottom:10px;margin-left:-30px }
+    .card.billboard { text-align: center; }
+    .title > a { display:block;text-decoration:none;color:#0083ff;font-size:35px;margin-top:0;margin-bottom:10px; }
     .title > a:hover { margin-left:0 }
     .title > a > span { opacity:0 }
     .title > a:hover>span { opacity:1 }
     .desc { font-size:12px;color:#757e91 }
     .social { margin-top:20px }
     .social > a:not(:last-child) { margin-right:2px }
   </style>
-<link href="dist/Artalk.css?e642fb503d9cfa14360f" rel="stylesheet"><script type="text/javascript" src="dist/Artalk.js?e642fb503d9cfa14360f"></script></head>
+<link href="dist/Artalk.css?82c528f645795e4a1731" rel="stylesheet"><script type="text/javascript" src="dist/Artalk.js?82c528f645795e4a1731"></script></head>
 <body>
-  <div class="card">
+  <div class="card billboard">
     <div class="title"><a href="https://github.com/qwqcode/Artalk" target="_blank"><span>&gt; </span>Artalk<span> &lt;</span></a></div>
     <div class="desc">一款简洁有趣的自托管评论系统</div>
     <div class="social">
       <a href="https://www.npmjs.com/package/artalk" target="_blank"><img src="https://img.shields.io/npm/v/artalk.svg?style=flat-square"></a>
       <a href="https://www.npmjs.com/package/artalk" target="_blank"><img src="https://img.shields.io/npm/dt/artalk.svg?style=flat-square"></a>
+      <a href="https://github.com/qwqcode/Artalk/commits/master" target="_blank"><img src="https://img.shields.io/github/last-commit/qwqcode/Artalk?style=flat-square"></a>
       <a href="https://github.com/qwqcode/Artalk/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/github/license/qwqcode/Artalk.svg?style=flat-square"></a>
       <a href="https://github.com/qwqcode/Artalk#%E6%8D%90%E5%8A%A9" target="_blank"><img src="https://img.shields.io/badge/%24-donate-%23ff69b4.svg?style=flat-square"></a>
       <a href="https://github.com/qwqcode/Artalk" target="_blank"><img src="https://img.shields.io/github/stars/qwqcode/Artalk.svg?style=social"></a>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "artalk",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "一款简洁有趣的自托管评论系统",
   "author": "qwqcode <[email protected]> (https://github.com/qwqcode)",
   "keywords": [
@@ -59,6 +59,7 @@
     "less": "^3.11.1",
     "less-loader": "^6.0.0",
     "marked": "^0.7.0",
+    "md5": "^2.2.1",
     "mini-css-extract-plugin": "^0.8.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-loader": "^3.0.0",

diff --git a/src/Artalk.ts b/src/Artalk.ts
@@ -33,6 +33,14 @@ export default class Artalk {
   public list: List
   public sidebar: Sidebar
 
+  public user: {
+    nick: string|null,
+    email: string|null,
+    link: string|null,
+    password: string|null,
+    isAdmin: boolean
+  }
+
   constructor (public conf: ArtalkConfig) {
     // Version Information
     console.log(`\n %c `
@@ -62,12 +70,36 @@ export default class Artalk {
 
     // Components
     this.ui = new Ui()
+    this.initUser()
     this.initMarked()
     this.editor = new Editor()
     this.list = new List()
     this.sidebar = new Sidebar()
   }
 
+  /** 初始化用户数据 */
+  initUser () {
+    // 从 localStorage 导入
+    const localUser = JSON.parse(window.localStorage.getItem('ArtalkUser') || '{}')
+    this.user = {
+      nick: localUser.nick || '',
+      email: localUser.email || '',
+      link: localUser.link || '',
+      password: localUser.password || '',
+      isAdmin: localUser.isAdmin || false
+    }
+  }
+
+  /** 保存用户到 localStorage 中 */
+  saveUser () {
+    window.localStorage.setItem('ArtalkUser', JSON.stringify(this.user))
+  }
+
+  /** 是否已填写基本用户信息 */
+  checkHasBasicUserInfo () {
+    return !!this.user.nick && !!this.user.email
+  }
+
   public marked: (src: string, callback?: (error: any, parseResult: string) => void) => string
 
   private initMarked () {

diff --git a/src/components/Checker.ts b/src/components/Checker.ts
@@ -17,18 +17,19 @@ export default class Checker extends ArtalkContext {
   public static submitCaptchaImgData: string
 
   private static readonly LIST: {[key: string]: CheckerItem} = {
-    '密码': {
+    '管理员': {
       body: () => Utils.createElement('<span>敲入密码来验证管理员身份：</span>'),
       reqAct: 'AdminCheck',
       reqObj: (inputVal) => {
         return {
-          nick: ArtalkInstance.editor.user.nick,
-          email: ArtalkInstance.editor.user.email,
+          nick: ArtalkInstance.user.nick,
+          email: ArtalkInstance.user.email,
           password: inputVal
         }
       },
       onSuccess: (msg, data, inputVal) => {
-        ArtalkInstance.editor.user.password = inputVal
+        ArtalkInstance.user.isAdmin = true
+        ArtalkInstance.user.password = inputVal
         ArtalkInstance.editor.saveUser()
       }
     },
@@ -64,13 +65,13 @@ export default class Checker extends ArtalkContext {
     }
   }
 
-  public static checkAction (name: '密码'|'验证码', action: () => void) {
+  public static checkAction (name: '管理员'|'验证码', action: () => void) {
     const checker = Checker.LIST[name]
 
     const formEl = Utils.createElement()
     formEl.appendChild(checker.body())
 
-    const input = Utils.createElement(`<input id="check" type="${(name === '密码' ? 'password' : 'text')}" required placeholder="">`) as HTMLInputElement
+    const input = Utils.createElement(`<input id="check" type="${(name === '管理员' ? 'password' : 'text')}" required placeholder="">`) as HTMLInputElement
     formEl.appendChild(input)
     setTimeout(() => {
       input.focus() // 延迟以保证有效

diff --git a/src/components/Comment.ts b/src/components/Comment.ts
@@ -9,6 +9,7 @@ export default class Comment extends ArtalkContext {
   public elem: HTMLElement
   public contentEl: HTMLElement
   public childrenEl: HTMLElement
+  public actionsEl: HTMLElement
 
   public parent: Comment|null
   public nestedNum: number
@@ -22,15 +23,22 @@ export default class Comment extends ArtalkContext {
 
     this.elem = Utils.createElement(require('../templates/Comment.ejs')(this))
     this.contentEl = this.elem.querySelector('.artalk-content')
+    this.actionsEl = this.elem.querySelector('.artalk-comment-actions')
 
     this.parent = null
     this.nestedNum = 1 // 现在已嵌套 n 层
     this.childrenEl = null
 
     // 绑定回复按钮事件
-    this.elem.querySelector('[data-comment-action="reply"]').addEventListener('click', () => {
+    this.actionsEl.querySelector('[data-comment-action="reply"]').addEventListener('click', () => {
       this.artalk.editor.setReply(this)
     })
+
+    // 绑定删除按钮事件
+    const actionDelBtnEl: HTMLElement = this.actionsEl.querySelector('[data-comment-action="delete"]')
+    actionDelBtnEl.addEventListener('click', () => {
+      this.adminDelete(this.data.id, actionDelBtnEl)
+    })
   }
 
   getIsRoot () {
@@ -42,6 +50,9 @@ export default class Comment extends ArtalkContext {
     this.getChildrenEl().appendChild(comment.getElem())
     comment.parent = this
     comment.nestedNum = this.nestedNum + 1 // 嵌套层数 +1
+
+    comment.playFadeInAnim()
+    this.list.refreshUI()
   }
 
   getChildren () {
@@ -157,4 +168,51 @@ export default class Comment extends ArtalkContext {
     }
     this.elem.addEventListener('animationend', onAnimEnded)
   }
+
+  /** 管理员 - 评论删除 */
+  adminDelete (commentId: number, btnElem: HTMLElement) {
+    const comment = this.list.findComment(commentId)
+    if (!comment) throw Error(`未找到评论 ${commentId}`)
+
+    if (btnElem.classList.contains('artalk-in-process')) return // 若正在删除中
+
+    // 删除确认
+    const btnClicked = Number(btnElem.getAttribute('data-btn-clicked') || 1)
+    if (btnClicked < 2) {
+      if (btnClicked === 1) {
+        const btnTextOrg = btnElem.innerText
+        btnElem.innerText = '确认删除'
+        setTimeout(() => {
+          btnElem.innerText = btnTextOrg
+          btnElem.setAttribute('data-btn-clicked', '')
+        }, 2000)
+        btnElem.setAttribute('data-btn-clicked', String(btnClicked+1))
+      }
+      return
+    }
+    const btnTextOrg = btnElem.innerText
+    this.artalk.request('CommentDel', {
+      id: commentId,
+      nick: this.artalk.user.nick,
+      email: this.artalk.user.email,
+      password: this.artalk.user.password
+    }, () => {
+      btnElem.classList.add('artalk-in-process')
+      btnElem.innerText = '删除中...'
+    }, () => {
+      btnElem.innerText = btnTextOrg
+    }, (msg, data) => {
+      this.list.deleteComment(comment)
+      this.list.refreshUI()
+      btnElem.classList.remove('artalk-in-process')
+    }, (msg, data) => {
+      btnElem.classList.add('artalk-error')
+      btnElem.innerText = '删除失败'
+      setTimeout(() => {
+        btnElem.innerText = btnTextOrg
+        btnElem.classList.remove('artalk-error')
+        btnElem.classList.remove('artalk-in-process')
+      }, 2000)
+    })
+  }
 }
diff --git a/src/components/Editor.ts b/src/components/Editor.ts
@@ -23,16 +23,13 @@ export default class Editor extends ArtalkContext {
   public submitBtn: HTMLButtonElement
   public notifyWrapEl: HTMLElement
 
-  public user: {
-    nick: string|null,
-    email: string|null,
-    link: string|null,
-    password: string|null
-  }
-
   private replyComment: Comment
   private sendReplyEl: HTMLElement
 
+  private get user () {
+    return this.artalk.user
+  }
+
   constructor () {
     super()
 
@@ -57,14 +54,6 @@ export default class Editor extends ArtalkContext {
   }
 
   initLocalStorage () {
-    const localUser = JSON.parse(window.localStorage.getItem('ArtalkUser') || '{}')
-    this.user = {
-      nick: localUser.nick || '',
-      email: localUser.email || '',
-      link: localUser.link || '',
-      password: localUser.password || ''
-    }
-
     const localContent = window.localStorage.getItem('ArtalkContent') || ''
     if (localContent.trim() !== '') {
       this.showNotify('已自动恢复', 'i')
@@ -84,17 +73,24 @@ export default class Editor extends ArtalkContext {
         inputEl.addEventListener('input', (evt) => {
           this.user[field] = inputEl.value.trim()
           this.user.password = ''
+          this.user.isAdmin = false
           this.saveUser()
+          this.artalk.list.refreshUI()
+
+          if (this.artalk.checkHasBasicUserInfo()
+              && this.artalk.list.checkNickEmailIsAdmin(this.user.nick, this.user.email)) {
+            // 昵称为管理员，显示管理员密码验证 dialog
+            Checker.checkAction('管理员', () => {
+              this.artalk.list.refreshUI()
+            })
+          }
         })
       }
     })
   }
 
-  /**
-   * 保存用户到 localStorage 中
-   */
   saveUser () {
-    window.localStorage.setItem('ArtalkUser', JSON.stringify(this.user))
+    this.artalk.saveUser()
   }
 
   saveContent () {
@@ -281,17 +277,15 @@ export default class Editor extends ArtalkContext {
       const newComment = new Comment(this.artalk.list, data.comment)
       if (this.getReplyComment() !== null) {
         this.getReplyComment().setChild(newComment)
-        newComment.playFadeInAnim()
       } else {
-        this.artalk.list.data.total += 1 // 评论总数+1
         this.artalk.list.putComment(newComment)
       }
       this.artalk.ui.scrollIntoView(newComment.getElem())
       this.clearEditor()
     }, (msg, data) => {
       if ((typeof data === 'object') && data !== null && typeof data.need_password === 'boolean' && data.need_password === true) {
         // 管理员密码验证
-        Checker.checkAction('密码', () => {
+        Checker.checkAction('管理员', () => {
           this.submit()
         })
       } else if ((typeof data === 'object') && data !== null && typeof data.need_captcha === 'boolean' && data.need_captcha === true) {