From 932ed5ed5ad92b99406a6362a5ff6314a0b94557 Mon Sep 17 00:00:00 2001
From: barney <15270405776@163.com>
Date: Tue, 27 Sep 2022 00:20:25 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B5=84=E6=96=99=E5=88=A0=E9=99=A4=E4=B8=8E?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=80=9A=E4=BF=A1,=E8=B5=84=E6=96=99?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=B8=8E=E5=BC=82=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 db.sqlite3                               | Bin 196608 -> 196608 bytes
 frontend/src/components/ArticleList.vue  |   2 +-
 frontend/src/components/BlogHeader.vue   | 224 +++++++++++------------
 frontend/src/components/SearchButton.vue |  96 ++++++++++
 frontend/src/main.js                     |   1 +
 frontend/src/router/index.js             |   8 +-
 frontend/src/utils/authorization.js      |  59 ++++++
 frontend/src/views/LoginView.vue         |   4 -
 frontend/src/views/UserCenterView.vue    | 205 +++++++++++++++++++++
 frontend/vue.config.js                   |   1 +
 10 files changed, 473 insertions(+), 127 deletions(-)
 create mode 100644 frontend/src/components/SearchButton.vue
 create mode 100644 frontend/src/utils/authorization.js
 create mode 100644 frontend/src/views/UserCenterView.vue

diff --git a/db.sqlite3 b/db.sqlite3
index f40bc79b661d30b29eb29459f510565f077bc739..d5e7602ece0810e4eca8ab2faa2dd6f3ad381906 100644
GIT binary patch
delta 1269
zcmah{O^6$17@kSCX0mMN+hto?t*qOUrPejceDj~cLX&JJnPjus{A@M}h)yyy`JG87
zna$s2*A?{QLCL|JST7zI3=)bKT6z?ep4_5UtWXrR7B9VcFj=uED1I+Im-qR2AD-tq
zJX|<DTzKaqnt%8CAez7ang_*3l4lvk#`~VP2>=F&1;2*kC-^nT4abe~rB$25fuA5B
zBCl`w?aw+K_R%fvLZGiisY-9NqDKi`X13(uw!z7&bEhDXM779od5EgHrG&H$v0je!
zid12z;R$!Dkc^UgINcR%ozZoD6@{bQ`g3#Bn{SOK+NEN<!bDk7=$mq7KUt>K@}QaJ
zQqFcui=;NQ$^E!scC)+Ta5~jhTBgQyIe(y^lDd5{A?Oi3BQ`forDH;pAW0YDb&>2U
zN%$Dj2RS!G@EpmFD$TXPCZFl_W8rWns-!AKqg*i*wwrK9$>63xmuSIaTCO(Olre0m
zyZzcg+)oVhy<D3g)aewdGJBQg=*uP?`Si6{%uOmB;&V(yYZv)JPut7HXo7W$`C&`o
zYjLVW8)BR>4Qe;J&DO$u>mI3-YZvng&rX}{Bt7xw##6D}Dna-l^wFf7^Aa5I9et)>
zw!Jwu9>LCyZfX|~s$?WC<czo`XWP`UECrOVnv$JEuU6o5eo@MBWWO5KW7~~QFD!9P
zkfbXn6&JVngWOOIQLO*epQjhuRmk`t;Ufq)OK_0)!g=rnv4DpNcmy8K2KoCNue3e^
zZtw`1mt?J~!zp+E)NjmYT}Fp$%Ys?Y+fR4XZ}!>B_VMA|B4%-n5&Xn4p0?>D$HCEM
z%bEBaX@9@OR69mrg0wo+n~GWMR+{>NSBC?G*J?8DR-*lEE#67=s{Uk3bqQuVB(%&R
zD<^oW9u~BE%m}nZSC*GuFrAuas3;{D6jLUb3l$3?CSwc}1EZGV7%3TPM5$h6s)#+1
zS}?b#)J;08$^jwQ?{4u_j8=Okq48?W%u9YHskZ#VQgSF~7&;u1df`}Ks4!)*yQ7c=
zQW=y3ku7nsn=WNZO&6-(9ha0%Y&CtbSu!eZUzKfgait?lg6hqgg?g9ZqwTa_S2d1q
z46gKg!$!N<pvX`*-aE|#5-te;N}qBQ1j}%6eDeOwsLcW<2$+D$(k;v9_-JSG`!%OE
zj{cu@mhm^oFFszxz+D9V3Vs4VfcxMpaCfr!0eTZGoUx+l9CnJf_wFB~SI%PK9s+&`
zPrz^B7x3eh{w=sSUTWP2%X3ycip{__gJ)(i`uV#HXEFRL0zL%?K)}DokMScsi(j3_
zyM*W0F+1W1=N+gW{b$h#uaD&1q?actnmz5!ob@H!jC}6D$dIEsj$mfwIqT%;3-kzL
f7H|gv55S$Nz6p3?#p?g_%)feQnLGfNmB)VoR_b_&

delta 632
zcmYk3&1=(e7{`;f%i6K#sSKIm3ma5a=GG+5uW1W{ZP%{d+OA!yTXWI0&6;H<>D#up
zpmsfbP;&4lhzE}YbJ#)r0|XiKR#=D7fhZ^rK|JWeZYM7f4?OVset5p^_E@_;_Vgl7
zJi8ReiI?}?IAMtHahxzW-A^bW4>7C5#K-{1WZz+$Q<JY8)*UP1Fy5(C`Nb_kSkN}N
zgH$n$mTUB4gI9FqDyEwWt}*AW#C1V0Q@l=9x0TjBr_!RxO09&tktu~rWhJ;&yH%HJ
zb(*0VW`^?5Fldrt0*DQ;%&dp?A&xS-+SSn9y5LXy(<mCr2YpgG8PZnNm4+)Lqr|jW
zkEbMco>sllTtuqYxk|H+?z*e3R6P+%ONHQrTB)oXkJL%yo_^Ujg6-Vcu?#zmhx(Mr
zujIppY@YR}s8tl=Yg<e@8Be$*r6LxVmm7RRE)=P)u;ix|A*aQv5h}mN`MBv)b1fky
zqcKnNO#gp-I)FR@<eOzVA49Rm?SXwo$mZm1L{L2nr}?Cayc+V>qONAvGcWU*Y$CSN
zit%VkO)2TcJ1A507JP9jDx>;(QO*hrNj7J^)@bJ_hGACdVelJ1Ll1tK=h`2@Ww%V=
zXD=jdmh)%Z@Q7s`Z>^PwY?cYTSX9@wH*Kqvz{xH~b_f0KlV<nDP27f`vU=F)fO7z5
zZ}<9%lYk=(e!y2ah9md`zXqrG@cd{OzeW;pjKSYQ_D}c@U-p~_Lm$Czwb*gubQs@0
qU2qa)2ZOip7^37Mxl48iSsJ<5*~dFHfkPjI{(#qoy*><GIr#@!vBw4g

diff --git a/frontend/src/components/ArticleList.vue b/frontend/src/components/ArticleList.vue
index 1d21296..33e56b5 100644
--- a/frontend/src/components/ArticleList.vue
+++ b/frontend/src/components/ArticleList.vue
@@ -182,7 +182,7 @@ export default {
 
 #paginator {
 	text-align: center;
-    padding-bottom: 3rem;
+    padding-bottom: 4rem;
 }
 
 #paginator a {
diff --git a/frontend/src/components/BlogHeader.vue b/frontend/src/components/BlogHeader.vue
index c769c7b..acd3cef 100644
--- a/frontend/src/components/BlogHeader.vue
+++ b/frontend/src/components/BlogHeader.vue
@@ -3,26 +3,39 @@
 		<div class="grid">
 			<div></div>
 			<h1>My Drf-Vue Blog</h1>
-			<div class="search">
-				<form>
-					<input
-						v-model="searchText"
-						type="text"
-						placeholder="输入搜索内容..."
-					/>
-					<button v-on:click.prevent="searchArticles"></button>
-				</form>
-			</div>
-			<hr />
+			<SearchButton />
+		</div>
+		<hr />
+		<div class="grid-1">
 			<div class="register">
-				<div v-if="haslogin">
+				<div v-if="haslogin"></div>
+				<div v-else>
+					<router-link to="/register" class="register-link"
+						>注册</router-link
+					>
 				</div>
-                <div v-else>
-                    <router-link to="/register" class="register-link">注册</router-link>
-                </div>
 			</div>
 			<div class="login">
-				<div v-if="haslogin">欢迎, {{ username }}</div>
+				<div v-if="haslogin">
+					<div class="dropdown">
+						<button class="dropbtn">欢迎你, {{ username }}!</button>
+						<div class="dropdown-content">
+							<router-link
+								:to="{
+									name: 'UserCenter',
+									params: { username: username },
+								}"
+							>
+								用户中心
+							</router-link>
+
+							<router-link to="/" @click="quit"
+							>
+								退出
+							</router-link>
+						</div>
+					</div>
+				</div>
 				<div v-else>
 					<router-link to="/login" class="login-link"
 						>登录</router-link
@@ -34,140 +47,109 @@
 </template>
 
 <script>
-import { ref,onMounted } from "vue";
-import router from "@/router/index";
-import $ from "jquery";
+import { ref } from "vue";
+import SearchButton from "@/components/SearchButton.vue";
+import authorization from "@/utils/authorization";
 
 export default {
 	name: "BlogHeader",
+	components: {
+		SearchButton,
+	},
+	mounted() {
+		authorization().then((data) => ([this.haslogin, this.username] = data));
+	},
 	setup() {
 		let username = ref("");
 		let haslogin = ref(false);
-		let searchText = ref("");
 
-        onMounted(() => {
-            const storage = localStorage;
-            // 过期时间
-            const expired_time = Number(storage.getItem("expired_time"));
-            // 当前时间
-            const current = new Date().getTime();
-            // 刷新令牌
-            const refreshToken = storage.getItem("refresh_blog");
-            // 用户名
-            username.value = storage.getItem("username_blog");
-            // 未过期
-            if (expired_time > current) {
-                haslogin.value = true;
-            }
-            // 初始tokeng过期,如果由刷新令牌申请新的token
-            else if (refreshToken !== null) {
-                $.ajax({
-                    url: "http://127.0.0.1:6789/api/token/refresh/",
-                    type: "POST",
-                    data: {
-                        refresh: refreshToken,
-                    },
-                    success(resp) {
-                        const nextExpiredTime = new Date().getTime() + 60000;
-                        storage.setItem("access_blog", resp.access);
-                        storage.removeItem("refresh_blog"); // 移除刷新令牌
-                        console.log("令牌刷新时间: ",new Date().toLocaleString());
-                        storage.setItem("expired_time", nextExpiredTime);
-                        haslogin.value = true;
-                    },
-                });
-            } else {
-                console.log("登录过期时间: ",new Date().toLocaleString());
-                storage.clear(); // 清除所有有效信息
-                haslogin.value = false;
-            }
-        });
-
-		const searchArticles = () => {
-			const text = searchText.value.trim();
-			if (text.charAt(0) !== "") {
-				router.push({ name: "home", query: { search: text } });
-			}
+		const quit = () => {
+			const storage = localStorage;
+            window.alert("已退出登录!");
+			console.log("登出成功,过期时间: ", new Date().toLocaleString());
+			storage.clear(); // 清除所有有效信息
+			haslogin.value = false;
 		};
 
 		return {
-			searchText,
-			searchArticles,
 			username,
 			haslogin,
+			quit,
 		};
-	},
+    },
+    methods: {
+        refresh() {
+            this.username = localStorage.getItem('username_blog');
+        }
+    }
 };
 </script>
 
 <style scoped>
-#header {
-	text-align: center;
-	margin-top: 20px;
-}
-.grid {
-	display: grid;
-	grid-template-columns: 1fr 4fr 1fr;
+/* 样式来源: https://www.runoob.com/css/css-dropdowns.html* /
+/* 下拉按钮样式 */
+.dropbtn {
+    width: 10vw;
+	background-color: mediumslateblue;
+	color: white;
+	padding: 8px 8px 30px 8px;
+	font-size: 1.1vw;
+	border: none;
+	cursor: pointer;
+	height: 2vw;
+	border-radius: 5px;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
-
-.search {
-	padding-top: 22px;
+/* 容器 <div> - 需要定位下拉内容 */
+.dropdown {
+	position: relative;
+	display: inline-block;
 }
-
-/* 搜索框样式 */
-* {
-	box-sizing: border-box;
+/* 下拉内容 (默认隐藏) */
+.dropdown-content {
+	display: none;
+	position: absolute;
+	background-color: #f9f9f9;
+	width: 10vw;
+	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+	text-align: center;
 }
-
-form {
-	position: relative;
-	width: 20vw;
-	margin: 0 auto;
+/* 下拉菜单的链接 */
+.dropdown-content a {
+	color: black;
+	padding: 12px 16px;
+	text-decoration: none;
+	display: block;
 }
-
-input,
-button {
-	outline: none;
+/* 鼠标移上去后修改下拉菜单链接颜色 */
+.dropdown-content a:hover {
+	background-color: #f1f1f1;
 }
-
-input {
-	border-color: gray;
-	width: 100%;
-	height: 30px;
-	padding-left: 13px;
-	padding-right: 46px;
-	overflow: hidden;
-	text-overflow: ellipsis;
+/* 在鼠标移上去后显示下拉菜单 */
+.dropdown:hover .dropdown-content {
+	display: block;
 }
-
-button {
-	border: none;
-	height: 30px;
-	width: 30px;
-	cursor: pointer;
-	position: absolute;
+/* 当下拉内容显示后修改下拉按钮的背景颜色 */
+.dropdown:hover .dropbtn {
+	background-color: darkslateblue;
 }
+</style>
 
-.search input {
-	border: 2px solid gray;
-	border-radius: 5px;
-	background: transparent;
-	top: 0;
-	right: 0;
+<style scoped>
+#header {
+	text-align: center;
+	margin-top: 20px;
 }
 
-.search button {
-	background: gray;
-	border-radius: 0 5px 5px 0;
-	width: 45px;
-	top: 0;
-	right: 0;
+.grid {
+	display: grid;
+	grid-template-columns: 1fr 4fr 1fr;
 }
 
-.search button:before {
-	content: "搜索";
-	font-size: 13px;
-	color: white;
+.grid-1 {
+	display: grid;
+	grid-template-columns: 8fr 2fr ;
 }
 
 .login-link {
diff --git a/frontend/src/components/SearchButton.vue b/frontend/src/components/SearchButton.vue
new file mode 100644
index 0000000..2889515
--- /dev/null
+++ b/frontend/src/components/SearchButton.vue
@@ -0,0 +1,96 @@
+<template>
+	<div class="search">
+		<form>
+			<input
+				v-model="searchText"
+				type="text"
+				placeholder="输入搜索内容..."
+			/>
+			<button v-on:click.prevent="searchArticles"></button>
+		</form>
+	</div>
+</template>
+
+<script>
+import { ref } from "vue";
+import router from "@/router/index";
+
+export default {
+	name: "SearchButton",
+	setup() {
+		let searchText = ref("");
+		const searchArticles = () => {
+			const text = searchText.value.trim();
+			if (text.charAt(0) !== "") {
+				router.push({ name: "home", query: { search: text } });
+			}
+		};
+		return {
+			searchText,
+			searchArticles,
+		};
+	},
+};
+</script>
+
+<style scoped>
+.search {
+	padding-top: 22px;
+}
+
+/* 搜索框样式 */
+* {
+	box-sizing: border-box;
+}
+
+form {
+	position: relative;
+	width: 20vw;
+	margin: 0 auto;
+}
+
+input,
+button {
+	outline: none;
+}
+
+input {
+	border-color: gray;
+	width: 100%;
+	height: 30px;
+	padding-left: 13px;
+	padding-right: 46px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+button {
+	border: none;
+	height: 30px;
+	width: 30px;
+	cursor: pointer;
+	position: absolute;
+}
+
+.search input {
+	border: 2px solid gray;
+	border-radius: 5px;
+	background: transparent;
+	top: 0;
+	right: 0;
+}
+
+.search button {
+	background: gray;
+	border-radius: 0 5px 5px 0;
+	width: 45px;
+	top: 0;
+	right: 0;
+}
+
+.search button:before {
+	content: "搜索";
+	font-size: 13px;
+	color: white;
+}
+</style>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 8c88c13..b3a9cf4 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -10,4 +10,5 @@ URLSearchParams.prototype.appendIfExists = function (key, value) {
 };
 
 
+
 createApp(App).use(store).use(router).mount('#app')
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 3e6a413..ec4056f 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -3,6 +3,7 @@ import HomePage from '@/views/HomePageView.vue'
 import ArticleDetail from '@/views/ArticleDetailView.vue'
 import LoginView from '@/views/LoginView.vue'
 import RegisterView from '@/views/RegisterView.vue'
+import UserCenter from '@/views/UserCenterView.vue'
 
 const routes = [
     {
@@ -24,7 +25,12 @@ const routes = [
         path: '/register/',
         name: 'register',
         component: RegisterView,
-    }
+    },
+    {
+        path: "/user/:username",
+        name: "UserCenter",
+        component: UserCenter,
+    },
 ]
 
 const router = createRouter({
diff --git a/frontend/src/utils/authorization.js b/frontend/src/utils/authorization.js
new file mode 100644
index 0000000..b344526
--- /dev/null
+++ b/frontend/src/utils/authorization.js
@@ -0,0 +1,59 @@
+import $ from 'jquery';
+
+const authorization = async () => {
+    const storage = localStorage;
+
+    let haslogin = false;
+    // 用户名
+    let username = storage.getItem('username_blog');
+    // 过期时间
+    const expired_time = Number(storage.getItem("expired_time"));
+    console.log("expired_time ",new Date(expired_time).toLocaleString());
+    // 当前时间
+    const current = new Date().getTime();
+    // 刷新令牌
+    const refreshToken = storage.getItem("refresh_blog");
+    // 未过期
+    if (expired_time > current) {
+        haslogin = true;
+        console.log('authorization success');
+    }
+    // 初始tokeng过期,则由刷新令牌申请新的token
+    else if (refreshToken !== null) {
+        try {
+            $.ajax({
+                url: "http://127.0.0.1:6789/api/token/refresh/",
+                type: "POST",
+                async: false,
+                data: {
+                    refresh: refreshToken,
+                },
+                success(resp) {
+                    const nextExpiredTime = new Date().getTime() + 60000;
+                    storage.setItem("access_blog", resp.access);
+                    storage.removeItem("refresh_blog"); // 移除刷新令牌
+                    console.log(
+                        "令牌刷新时间: ",
+                        new Date().toLocaleString()
+                    );
+                    storage.setItem("expired_time", nextExpiredTime);
+                    haslogin = true;
+                },
+            });
+        }catch(err){
+            storage.clear();
+            haslogin = false;
+            console.log('authorization err');
+        }
+        
+    } else {
+        storage.clear(); // 清除所有有效信息
+        haslogin = false;
+        console.log('authorization exp');
+    }
+
+    console.log('authorization done');
+    return [haslogin, username];
+}
+
+export default authorization;
\ No newline at end of file
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index b6b501f..d05896b 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -48,8 +48,6 @@ export default {
 	setup() {
 		let username = ref("");
 		let password = ref("");
-        const current = (new Date()).getTime();
-        console.log(current);
 
 		const login = () => {
 			$.ajax({
@@ -62,7 +60,6 @@ export default {
 				success(resp) {
                     // 将token保存到localStorage
                     const storage = localStorage;
-                    
                     const current = (new Date()).getTime();
                     const expiredTime = current + 60000;
                     storage.setItem('access_blog', resp.access);
@@ -71,7 +68,6 @@ export default {
                     storage.setItem('username_blog', username.value);
                     console.log("登录时间: ",new Date().toLocaleString());
 					router.push({ name: "home" });
-					
 				},
 				error(resp) {
 					console.log(resp);
diff --git a/frontend/src/views/UserCenterView.vue b/frontend/src/views/UserCenterView.vue
new file mode 100644
index 0000000..4b3c328
--- /dev/null
+++ b/frontend/src/views/UserCenterView.vue
@@ -0,0 +1,205 @@
+<template>
+	<BlogHeader ref="header" />
+	<div id="user-center">
+		<h3>更新资料信息</h3>
+		<form>
+			<div class="form-elem">
+				<span>用户名：</span>
+				<input
+					v-model="username"
+					type="text"
+					placeholder="输入用户名"
+				/>
+			</div>
+
+			<div class="form-elem">
+				<span>新密码：</span>
+				<input
+					v-model="password"
+					type="password"
+					placeholder="输入密码"
+					autocomplete="true"
+				/>
+			</div>
+
+			<div class="form-elem">
+				<button v-on:click.prevent="changeInfo">更新</button>
+			</div>
+
+			<div class="form-elem">
+				<button
+					v-on:click.prevent="showingDeleteAlert=true"
+					class="delete-btn"
+				>
+					删除用户
+				</button>
+				<div :class="{ shake: showingDeleteAlert }">
+					<button
+						v-if="showingDeleteAlert"
+						class="confirm-btn"
+						@click.prevent="confirmDelete"
+					>
+						确定？
+					</button>
+				</div>
+			</div>
+		</form>
+	</div>
+	<BlogFooter />
+</template>
+
+<script>
+import BlogHeader from "@/components/BlogHeader.vue";
+import BlogFooter from "@/components/BlogFooter.vue";
+import authorization from "@/utils/authorization";
+import $ from "jquery";
+const storage = localStorage;
+export default {
+	name: "UserCenter",
+	components: { BlogHeader, BlogFooter },
+	data: function () {
+		return {
+			username: "",
+			password: "",
+			token: "",
+			showingDeleteAlert: false,
+		};
+	},
+	mounted() {
+		this.username = storage.getItem("username_blog");
+	},
+	methods: {
+		confirmDelete() {
+			const that = this;
+			authorization().then(function (response) {
+				if (response[0]) {
+					// 获取令牌
+					that.token = storage.getItem("access_blog");
+                    $.ajax({
+                        url: 'http://127.0.0.1:6789/api/user/' + that.username + '/',
+                        type: 'DELETE',
+                        headers: {
+                             Authorization: "Bearer " + that.token 
+                        },
+                        success(resp) {
+                            console.log(resp);
+                            storage.clear();
+							that.$router.push({ name: "home" });
+                        }
+                    })
+				}
+			});
+		},
+		changeInfo() {
+			const that = this;
+			authorization().then(function (response) {
+				if (response[0] === false) {
+					window.alert("登录已过期, 请重新登录!");
+					storage.clear();
+					that.$router.push({ name: "login" });
+					return;
+				}
+				// 密码不能少于6位
+
+				if (that.password.length >= 0 && that.password.length < 6) {
+					window.alert("密码太短了");
+					return;
+				}
+
+				// 旧的用户名
+				const oldName = storage.getItem("username_blog");
+				// 表单数据
+				let data = {};
+				if (that.username !== "") {
+					data.username = that.username;
+				}
+				data.password = that.password;
+				that.token = storage.getItem("access_blog");
+				// 修改用户名或密码
+				$.ajax({
+					url: "http://127.0.0.1:6789/api/user/" + oldName + "/",
+					type: "PATCH",
+					data: data,
+					headers: {
+						Authorization: "Bearer " + that.token,
+					},
+					success(resp) {
+						window.alert("修改成功");
+						const name = resp.username;
+						storage.setItem("username_blog", name);
+						// 跳转到用户界面
+						that.$router.push({
+							name: "UserCenter",
+							params: { username: name },
+						});
+						that.$refs.header.refresh();
+					},
+				});
+			});
+		},
+	},
+};
+</script>
+
+<style scoped>
+#user-center {
+	text-align: center;
+}
+
+.form-elem {
+	padding: 10px;
+}
+
+input {
+	height: 25px;
+	padding-left: 10px;
+}
+
+button {
+	height: 35px;
+	cursor: pointer;
+	border: none;
+	outline: none;
+	background: gray;
+	color: whitesmoke;
+	border-radius: 5px;
+	width: 250px;
+}
+
+.confirm-btn {
+	width: 80px;
+	background-color: darkorange;
+}
+
+.delete-btn {
+	background-color: darkred;
+	margin-bottom: 10px;
+}
+
+.shake {
+	animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+	transform: translate3d(0, 0, 0);
+	backface-visibility: hidden;
+	perspective: 1000px;
+}
+
+@keyframes shake {
+	10%,
+	90% {
+		transform: translate3d(-1px, 0, 0);
+	}
+	20%,
+	80% {
+		transform: translate3d(2px, 0, 0);
+	}
+	30%,
+	50%,
+	70% {
+		transform: translate3d(-4px, 0, 0);
+	}
+	40%,
+	60% {
+		transform: translate3d(4px, 0, 0);
+	}
+}
+</style>
diff --git a/frontend/vue.config.js b/frontend/vue.config.js
index 910e297..af1adf4 100644
--- a/frontend/vue.config.js
+++ b/frontend/vue.config.js
@@ -2,3 +2,4 @@ const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
   transpileDependencies: true
 })
+