From 4dde7fc13cb3ad288a36f7d8204775b33a5393b2 Mon Sep 17 00:00:00 2001
From: Pig Fang <g-plane@hotmail.com>
Date: Thu, 27 Feb 2020 16:02:39 +0800
Subject: [PATCH] make "CSRF token mismatched" error friendly

---
 app/Exceptions/Handler.php                 |  1 +
 resources/assets/src/scripts/net.ts        |  8 +++++++-
 resources/assets/tests/scripts/net.test.ts | 18 +++++++++++++++++-
 resources/lang/en/front-end.yml            |  1 +
 resources/misc/changelogs/en/5.0.0.md      |  1 +
 resources/misc/changelogs/zh_CN/5.0.0.md   |  1 +
 6 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/app/Exceptions/Handler.php b/app/Exceptions/Handler.php
index 64405ead..7394b768 100644
--- a/app/Exceptions/Handler.php
+++ b/app/Exceptions/Handler.php
@@ -18,6 +18,7 @@ class Handler extends ExceptionHandler
         \Symfony\Component\HttpKernel\Exception\HttpException::class,
         \Illuminate\Database\Eloquent\ModelNotFoundException::class,
         \Illuminate\Validation\ValidationException::class,
+        \Illuminate\Session\TokenMismatchException::class,
         PrettyPageException::class,
     ];
 
diff --git a/resources/assets/src/scripts/net.ts b/resources/assets/src/scripts/net.ts
index 2c70b8a0..bf342d11 100644
--- a/resources/assets/src/scripts/net.ts
+++ b/resources/assets/src/scripts/net.ts
@@ -2,7 +2,7 @@ import Vue from 'vue'
 import { emit } from './event'
 import { queryStringify } from './utils'
 import { showModal } from './notify'
-import { trans } from './i18n'
+import { trans, t } from './i18n'
 
 export interface ResponseBody<T = null> {
   code: number
@@ -62,6 +62,12 @@ export async function walkFetch(request: Request): Promise<any> {
         code: 1,
         message: Object.keys(errors).map(field => errors[field][0])[0],
       }
+    } else if (response.status === 419) {
+      showModal({
+        mode: 'alert',
+        text: t('general.csrf'),
+      })
+      return
     } else if (response.status === 403) {
       showModal({
         mode: 'alert',
diff --git a/resources/assets/tests/scripts/net.test.ts b/resources/assets/tests/scripts/net.test.ts
index 561c9e8c..88ff82fa 100644
--- a/resources/assets/tests/scripts/net.test.ts
+++ b/resources/assets/tests/scripts/net.test.ts
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import * as net from '@/scripts/net'
 import { on } from '@/scripts/event'
-import { trans } from '@/scripts/i18n'
+import { trans, t } from '@/scripts/i18n'
 import { showModal } from '@/scripts/notify'
 
 jest.mock('@/scripts/notify')
@@ -198,6 +198,16 @@ test('process backend errors', async () => {
       },
       clone: () => ({}),
     })
+    .mockResolvedValueOnce({
+      status: 419,
+      headers: new Map([['Content-Type', 'application/json']]),
+      json() {
+        return Promise.resolve({
+          message: 'CSRF token mismatched.',
+        })
+      },
+      clone: () => ({}),
+    })
     .mockResolvedValueOnce({
       status: 403,
       headers: new Map([['Content-Type', 'application/json']]),
@@ -229,6 +239,12 @@ test('process backend errors', async () => {
   expect(result.code).toBe(1)
   expect(result.message).toBe('required')
 
+  await net.walkFetch({ headers: new Headers() } as Request)
+  expect(showModal).toBeCalledWith({
+    mode: 'alert',
+    text: t('general.csrf'),
+  })
+
   await net.walkFetch({ headers: new Headers() } as Request)
   expect(showModal).toBeCalledWith({
     mode: 'alert',
diff --git a/resources/lang/en/front-end.yml b/resources/lang/en/front-end.yml
index 2b93089b..fb0ca824 100644
--- a/resources/lang/en/front-end.yml
+++ b/resources/lang/en/front-end.yml
@@ -293,6 +293,7 @@ general:
   skinlib: Skin Library
   loading: Loading
   wait: Please wait...
+  csrf: This page is out-dated. Please refresh it.
   user:
     email: Email
     nickname: Nick Name
diff --git a/resources/misc/changelogs/en/5.0.0.md b/resources/misc/changelogs/en/5.0.0.md
index 8a1ce86a..3c5f7148 100644
--- a/resources/misc/changelogs/en/5.0.0.md
+++ b/resources/misc/changelogs/en/5.0.0.md
@@ -42,6 +42,7 @@
 - Display 3D avatar of player when applying texture to player.
 - New "Plugins Management" page.
 - "Choose Player" Dialog won't be showed if no texture is selected at closet page.
+- Make "CSRF token mismatched" error friendly.
 
 ## Fixed
 
diff --git a/resources/misc/changelogs/zh_CN/5.0.0.md b/resources/misc/changelogs/zh_CN/5.0.0.md
index d0017af6..2121f11b 100644
--- a/resources/misc/changelogs/zh_CN/5.0.0.md
+++ b/resources/misc/changelogs/zh_CN/5.0.0.md
@@ -42,6 +42,7 @@
 - 将材质应用到角色时显示角色的 3D 头像
 - 新的「插件管理」页面
 - 衣柜中未选择材质时点击「应用到角色」不弹出「选择角色」对话框
+- 使 "CSRF token mismatched" 的错误提示变得友好
 
 ## 修复