完成作業

Author: GitHubPlayerZero

src/assets/images/empty.png

@@ -4,6 +4,7 @@ const apiBase = 'https://todolist-api.hexschool.io';
 const apiUsers = `${apiBase}/users`;
 const apiTodos = `${apiBase}/todos`;
 
+
 const getAuthHeader = (token) => {
 	return {
 		headers: {
@@ -23,6 +24,7 @@ const getAuthHeader = (token) => {
  */
 const postSignUp = (data) => axios.post(`${apiUsers}/sign_up`, data);
 
+
 /**
  * 登入。
  * @param {Object} data
@@ -32,6 +34,7 @@ const postSignUp = (data) => axios.post(`${apiUsers}/sign_up`, data);
  */
 const postSignIn = (data) => axios.post(`${apiUsers}/sign_in`, data);
 
+
 /**
  * 登出。
  * @param {String} token
@@ -41,67 +44,71 @@ const postSignOut = (token) =>
 	axios({
 		method: 'post',
 		url: `${apiUsers}/sign_out`,
-		// headers: {
-		// 	authorization: token,
-		// },
 		...getAuthHeader(token),
 	});
 
+	
 /**
  * 驗證。
  * @param {String} token
  * @returns {Promise}
  */
 const getCheckout = (token) => axios.get(`${apiUsers}/checkout`, getAuthHeader(token));
 
+
 /**
  * 取得所有代辦事項。
  * @param {String} token
  * @returns {Promise}
  */
 const getTodos = (token) => axios.get(`${apiTodos}/`, getAuthHeader(token));
 
+
 /**
  * 新增代辦事項。
+ * @param {String} token
  * @param {Object} data
  * 		@param {String} data.content
- * @param {String} token
  * @returns {Promise}
  */
-const postTodos = (data, token) => axios.post(`${apiTodos}/`, data, getAuthHeader(token));
+const postTodos = (token, data) => axios.post(`${apiTodos}/`, data, getAuthHeader(token));
+
 
 /**
  * 更新代辦事項。
+ * @param {String} token
  * @param {String} id - 代辦事項 id
  * @param {Object} data
  * 		@param {String} data.content
- * @param {String} token
  * @returns {Promise}
  */
-const putTodos = (id, data, token) =>
+const putTodos = (token, id, data) =>
 	axios.put(`${apiTodos}/${id}`, data, getAuthHeader(token));
 
+
 /**
  * 刪除代辦事項。
- * @param {String} id - 代辦事項 id
  * @param {String} token
+ * @param {String} id - 代辦事項 id
  * @returns {Promise}
  */
-const deleteTodos = (id, token) => axios.delete(`${apiTodos}/${id}`, getAuthHeader(token));
+const deleteTodos = (token, id) => axios.delete(`${apiTodos}/${id}`, getAuthHeader(token));
+
 
 /**
  * 切換代辦事項狀態。
- * @param {String} id - 代辦事項 id
  * @param {String} token
+ * @param {String} id - 代辦事項 id
  * @returns {Promise}
  */
-const patchTodosToggle = (id, token) =>
+const patchTodosToggle = (token, id) =>
 	axios({
 		method: 'patch',
 		url: `${apiTodos}/${id}/toggle`,
 		...getAuthHeader(token),
 	});
 
+	
 /**
  * 解析 API 傳回的 error。
  * @param {Object} error
@@ -112,6 +119,7 @@ const patchTodosToggle = (id, token) =>
  */
 const parseError = (error) => error.response?.data?.message ?? error.message;
 
+
 export const api = {
 	postSignUp,
 	postSignIn,

src/assets/js/api.js

@@ -1,43 +1,15 @@
 import router from '@/router';
 import { loginToken } from './loginToken';
-import { api } from './api';
 
 /**
- *  執行登入動作。
+ * 執行登入動作。
  * @param {String} token - 使用者登入的 token。
  */
 function login (token) {
 	loginToken.add(token);	// 加入 token
 	router.push({ name: 'index' });	// 跳轉主頁面
 }
 
-// TODO
-// async function check () {
-// 	const token = loginToken.get();
-// 	console.log(`[check] token ==>`, token);
-
-// 	let result = false;
-
-// 	if (token) {
-// 		await api.getCheckout(token)
-// 			.then((res) => {
-// 				console.log(`[check] res ==>`, res);
-// 				result = true;
-// 			})
-// 			.catch((error) => {
-// 				console.error(`[check] error ==>`, error);
-// 			})
-// 			.finally(() => {
-// 				console.log(`[check] finally...`);
-// 			});
-// 	}
-
-// 	console.log(`[check] end. result ==>`, result);
-// 	return result;
-// }
-
-
 export const auth = {
 	login,
-	// check,
 };

src/assets/js/auth.js

@@ -6,7 +6,8 @@
  * 		@param {Date} options.expires - cookie 的 expires。
  * 		@param {Number} options.maxAge - cookie 的 max-age。
  */
-function setCookie (name, val = '', options = {}) {
+function setCookie (name, val = '', options = {})
+{
 	const { expires, maxAge } = options;
 	let strCookie = `${name}=${val};`;
 
@@ -28,20 +29,22 @@ function setCookie (name, val = '', options = {}) {
  * @param {String} name - cookie 名稱。
  * @returns 使用 cookie 的各種方法。
  */
-export function useCookie (name) {
-
+export function useCookie (name)
+{
 	let settings = {
 		value: '',
 	};
 
+	
 	/**
 	 * 設定 cookie 內容。
 	 * @param {String} val - cookie 內容
 	 */
 	const setValue = (val) => {
 		settings.value = val;
 	}
-
+	
+	
 	/**
 	 * 設定 expires 日期時間。
 	 * @param {Date} date - expires 日期時間。
@@ -50,6 +53,7 @@ export function useCookie (name) {
 		settings.expires = date.toUTCString();
 	}
 
+	
 	/**
 	 * 設置 cookie。
 	 * @param {Object} [customSetting = settings] - 自訂的設定。  
@@ -58,7 +62,8 @@ export function useCookie (name) {
 	const setup = (customSetting = settings) => {
 		setCookie(name, customSetting.value, customSetting);
 	}
-
+	
+	
 	/**
 	 * 檢查此 cookie 是否存在。
 	 * @returns {Boolean} cookie 存在則回傳 true；否則回傳 false。
@@ -68,6 +73,7 @@ export function useCookie (name) {
 		return reg.test(document.cookie);
 	}
 
+	
 	/**
 	 * 取得 cookie 內容。
 	 * @returns {String} cookie 內容。
@@ -76,14 +82,16 @@ export function useCookie (name) {
 		const reg = new RegExp(`(?:(?:^|.*;)\\s*${name}\\s*\\=\\s*([^;]*).*$)|^.*$`);
 		return document.cookie.replace(reg, '$1');
 	};
-
+	
+	
 	/**
 	 * 刪除 cookie。
 	 */
 	const remove = () => {
 		setup({ maxAge: 0 });
 	}
-
+	
+	
 	/**
 	 * 清除所有設定。  
 	 * 僅是清除變數內容，不會修改、刪除 cookie 本身。  
@@ -95,6 +103,7 @@ export function useCookie (name) {
 		};
 	}
 
+	
 	/**
 	 * 取得 settings 內容。
 	 * @returns {String} 格式化為 JSON 字串的 settings 內容。

src/assets/js/cookie.js

@@ -3,11 +3,13 @@ import { useCookie } from "./cookie";
 const name = 'todos_login';
 const tokenCookie = useCookie(name);
 
+
 /**
  * 將 token 加入 cookie。
  * @param {String} token - 使用者登入時產生的 token。
  */
-const add = (token) => {
+const add = (token) =>
+{
 	// 時效設定為第二天的凌晨 1 點
 	const expirationDate = new Date();
 	expirationDate.setDate(expirationDate.getDate() + 1);
@@ -20,12 +22,14 @@ const add = (token) => {
 	tokenCookie.setup();
 };
 
+
 /**
  * 取得 token。
  * @returns {String} token
  */
 const get = () => tokenCookie.getValue();
 
+
 /**
  * 檢查 token 是否存在。
  * @returns {Boolean} token 存在就回傳 true；否則回傳 false。
@@ -38,13 +42,15 @@ const isExist = () => {
 	return false;
 }
 
+
 /**
  * 刪除 token。
  */
 const remove = () => {
 	tokenCookie.remove();
 };
 
+
 export const loginToken = {
 	add,
 	get,

src/assets/js/loginToken.js

@@ -1,17 +1,20 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script setup>
+
 import { RouterLink } from 'vue-router';
 import { ref } from 'vue';
 import { api, auth } from '@/assets/js';
 
-// 登入資料
+// 資料 - 登入
 const loginData = ref({
 	email: '[email protected]',
 	password: '123456',
 });
 
+
 // 登入
-function signin() {
+function signin()
+{
 	api.postSignIn(loginData.value)
 		.then((res) => {
 			auth.login(res.data.token);
@@ -20,31 +23,31 @@ function signin() {
 			console.error(`[login] error ==>`, error);
 			alert(api.parseError(error));
 		});
-	// .finally(() => {});
 }
+
 </script>
 
+
 <template>
 	<form class="formControls" @submit.prevent="signin">
+		
 		<h2 class="formControls_txt">最實用的線上代辦事項服務</h2>
+		
 		<label class="formControls_label" for="email">Email</label>
 		<input
 			v-model="loginData.email"
 			class="formControls_input"
-			type="email"
-			id="email"
-			name="email"
+			type="email" id="email" name="email"
 			placeholder="請輸入 email"
 			required
 		/>
 		<span>此欄位不可留空</span>
+		
 		<label class="formControls_label" for="pwd">密碼</label>
 		<input
 			v-model="loginData.password"
 			class="formControls_input"
-			type="password"
-			name="pwd"
-			id="pwd"
+			type="password" name="pwd" id="pwd"
 			placeholder="請輸入密碼"
 			required
 		/>