Merge pull request #7 from x86chi/async-without-callback

use axios for sync without callback

Author: shiftpsh

3rdparty/axios.0.19.0.min.js

@@ -27,7 +27,7 @@
             "all_frames": true,
             "js": [
                 "3rdparty/jquery.3.3.1.min.js",
-                "3rdparty/bootstrap.3.2.0.min.js",
+				"3rdparty/bootstrap.3.2.0.min.js",
                 "content.js",
                 "inject_stylesheet.js"
             ]
@@ -36,4 +36,4 @@
     "browser_action": {
         "default_popup": "options_login.html"
     }
-}
+}

manifest.json

@@ -12,7 +12,8 @@
         <h1 id="user_id">...</h1>
 
         <div id="submit" class="button">로그아웃</div>
-    </div>
+	</div>
+	<script src="3rdparty/axios.0.19.0.min.js"></script>
     <script src="options_logged_info.js"></script>
 </body>
-</html>
+</html>

options_logged_info.html

@@ -1,5 +1,6 @@
 const loggedInUser = document.getElementById('user_id')
 const logoutButton = document.getElementById('submit')
+const URL = 'https://api.solved.ac/validate_token.php'
 
 const logout = () => {
 	chrome.storage.local.remove('token', () => {
@@ -11,29 +12,13 @@ const logout = () => {
 	})
 }
 
-const validateToken = token => {
-	const params = { token }
-	const xhr = new XMLHttpRequest()
-	xhr.open('POST', 'https://api.solved.ac/validate_token.php', true)
-	xhr.setRequestHeader('Content-type', 'application/json')
-	xhr.onload = ({ responseText }) => {
-		console.log(responseText)
-		if (!this.status === 200) {
-			alert(JSON.parse(responseText).error)
-			logout()
-			return
-		}
-		const { user } = JSON.parse(responseText)
-		loggedInUser.innerText = user.user_id
-	}
-	xhr.send(JSON.stringify(params))
+const validateToken = ({ token }) => {
+	debugger
+	axios.post(URL, { token }).then(({ data, status }) => {
+		loggedInUser.innerText = data.user.user_id
+	})
 }
 
-chrome.storage.local.get(['token'], ({ token }) => {
-	debugger
-	if (token) {
-		validateToken(token)
-	}
-})
+chrome.storage.local.get(['token'], validateToken)
 
 logoutButton.addEventListener('click', logout)

options_logged_info.js

@@ -19,7 +19,8 @@ <h3 class="input_caption">비밀번호</h3>
 
         <br>
         <div id="submit" class="button">로그인</div>
-    </div>
+	</div>
+	<script src="3rdparty/axios.0.19.0.min.js"></script>
     <script src="options_login.js"></script>
 </body>
-</html>
+</html>

options_login.html

@@ -6,31 +6,25 @@ chrome.storage.local.get(['token'], ({ token }) => {
 const submitButton = document.getElementById('submit')
 const userIdInput = document.getElementById('user_id')
 const passwordInput = document.getElementById('password')
+const URL = 'https://api.solved.ac/request_token.php'
 
 const validate = () => {
 	const { value: user_id } = userIdInput
 	const { value: password } = passwordInput
-	const params = { user_id, password }
-	const xhr = new XMLHttpRequest()
-	xhr.open('POST', 'https://api.solved.ac/request_token.php', true)
-	xhr.setRequestHeader('Content-type', 'application/json')
-	xhr.onload = ({ responseText, status }) => {
-		console.log(responseText)
-		if (!status === 200) {
-			alert(JSON.parse(this.responseText).error)
-			return
-		}
-
-		chrome.storage.local.set({ token: JSON.parse(responseText).token }, () => {
-			chrome.tabs.getSelected(null, tab => {
-				const code = 'window.location.reload();'
-				chrome.tabs.executeScript(tab.id, { code })
+	axios
+		.post(URL, { user_id, password })
+		.then(({ data, status }) => {
+			const { token } = data
+			console.log(token)
+			chrome.storage.local.set({ token }, () => {
+				chrome.tabs.getSelected(null, ({ id }) => {
+					const code = 'window.location.reload();'
+					chrome.tabs.executeScript(id, { code })
+				})
+				window.location.href = '/options_logged_info.html'
 			})
-			window.location.href = '/options_logged_info.html'
 		})
-		return
-	}
-	xhr.send(JSON.stringify(params))
+		.catch(({ message }) => alert(message))
 }
 
 const onKeyPress = ({ keyCode }) => (keyCode === 13 ? validate() : null)