[홍진호] week6

action/base_url.js

@@ -0,0 +1,3 @@
+const BASE_URL = 'https://bootcamp-api.codeit.kr/api'
+
+export default BASE_URL

action/login.js

@@ -1,26 +1,24 @@
-export default async function login(email, password) {
-  const url = 'https://bootcamp-api.codeit.kr/api/sign-in'
-  const data = {
-    email,
-    password,
-  }
-
-  const options = {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(data),
-  }
+import BASE_URL from './base_url.js'
 
+export default async function login(loginOption) {
   try {
-    const response = await fetch(url, options)
-    const responseData = await response.json()
-    if (!!responseData.data) {
-      localStorage.setItem('accessToken', responseData.data.accessToken)
-      return { success: true }
+    const response = await fetch(`${BASE_URL}/sign-in`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(loginOption),
+    })
+    if (!response?.ok) {
+      return {
+        success: false,
+        message: '이메일 혹은 패스워드가 잘못되었습니다.',
+      }
     }
-    return { success: false, message: '이메일 혹은 패스워드가 잘못되었습니다.' }
+    const responseData = await response.json()
+    console.log(responseData)
+    localStorage.setItem('accessToken', responseData.data.accessToken)
+    return { success: true }
   } catch (error) {
     console.error('Error:', error)
     return { success: false, message: '서버 요청에서 에러가 발생하였습니다.' }

action/register.js

@@ -1,32 +1,25 @@
-export default async function register(email, password) {
-  const url = 'https://bootcamp-api.codeit.kr/api/sign-up'
-  const data = {
-    email,
-    password,
-  }
-
-  const options = {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(data),
-  }
+import BASE_URL from './base_url.js'
 
+export default async function register(registerOption) {
+  console.log(registerOption)
   try {
-    const response = await fetch(url, options)
-    const responseData = await response.json()
-    if (responseData.error) {
+    const response = await fetch(`${BASE_URL}/sign-up`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(registerOption),
+    })
+    if (!response?.ok) {
       return {
         success: false,
-        message: '이미 존재하는 이메일 입니다.',
+        message: '요청이 올바르지 않습니다.',
       }
     }
-    if (!!responseData.data) {
-      localStorage.setItem('accessToken', responseData.data.accessToken)
-      return { success: true }
-    }
-    return { success: false, message: '서버 에러' }
+
+    const responseData = await response.json()
+    localStorage.setItem('accessToken', responseData.data.accessToken)
+    return { success: true }
   } catch (error) {
     console.log('Error:', error)
     return { success: false, message: '서버 에러' }

signin/js/handle-submit.js

@@ -0,0 +1,39 @@
+import login from '../../action/login.js'
+import redirect from '../../utils/redirect-home-page.js'
+import {
+  validateLoginEmail,
+  validateLoginPassword,
+} from '../../utils/validate-auth.js'
+
+const emailEl = document.getElementById('signIn-email')
+const emailErrorEl = document.getElementById('signIn-email-error')
+const passwordEl = document.getElementById('signIn-password')
+const passwordErrorEl = document.getElementById('signIn-password-error')
+
+export async function handleSubmit(e) {
+  e.preventDefault()
+  const email = emailEl.value
+  const password = passwordEl.value
+
+  const isValidEmail = validateLoginEmail(email)
+  if (!isValidEmail.success) {
+    emailErrorEl.textContent = isValidEmail.message
+    return
+  }
+
+  const isValidPassword = validateLoginPassword(password)
+
+  if (!isValidPassword.success) {
+    passwordErrorEl.textContent = isValidPassword.message
+    return
+  }
+
+  const isLogin = await login({ email, password })
+
+  if (!isLogin.success) {
+    emailErrorEl.textContent = isLogin.message
+    return
+  }
+
+  redirect('/folder')
+}

signin/js/main.js

@@ -1,34 +1,47 @@
-import handleEmailFocusIn from './handle-event/handle-email-focus-in.js'
-import handlePasswordFocusOut from './handle-event/handle-password-focus-out.js'
-import handlePasswordFocusIn from './handle-event/handle-password-focus-in.js'
-import handleSubmit from './handle-event/handle-submit.js'
-import handleEmailFocusOut from './handle-event/handle-email-focus-out.js'
-import handleEyeOffIconClick from './handle-event/handle-eye-off-click.js'
-import handleEyeOnIconClick from './handle-event/handle-eye-on-click.js'
-
-import {
-  emailEl,
-  eyeOffIconEl,
-  eyeOnIconEl,
-  formEl,
-  passwordEl,
-} from './get-element.js'
 import isLoggedIn from '../../utils/is-logged-in.js'
-import redirectHomePage from '../../utils/redirect-home-page.js'
+import redirect from '../../utils/redirect-home-page.js'
+import { handleSubmit } from './handle-submit.js'
+import {
+  hideInputError,
+  hidePassword,
+  showPassword,
+  validateAndDisplayEmailError,
+  validateAndDisplayPasswordError,
+} from './ui-controller.js'
 
 const checkLoggedIn = isLoggedIn()
 if (checkLoggedIn) {
-  redirectHomePage()
+  redirect('/folder')
 }
 
+const emailEl = document.getElementById('signIn-email')
+const emailErrorEl = document.getElementById('signIn-email-error')
+const passwordEl = document.getElementById('signIn-password')
+const passwordErrorEl = document.getElementById('signIn-password-error')
+const formEl = document.getElementById('signIn-form')
+const eyeOffIconEl = document.getElementById('eye-off')
+const eyeOnIconEl = document.getElementById('eye-on')
+
 function onDocumentReady() {
-  emailEl.addEventListener('focusout', handleEmailFocusOut)
-  emailEl.addEventListener('focusin', handleEmailFocusIn)
-  passwordEl.addEventListener('focusout', handlePasswordFocusOut)
-  passwordEl.addEventListener('focusin', handlePasswordFocusIn)
+  emailEl.addEventListener('focusin', () => {
+    hideInputError(emailEl, emailErrorEl)
+  })
+  emailEl.addEventListener('focusout', () => {
+    validateAndDisplayEmailError(emailEl, emailErrorEl)
+  })
+  passwordEl.addEventListener('focusout', () => {
+    validateAndDisplayPasswordError(passwordEl, passwordErrorEl)
+  })
+  passwordEl.addEventListener('focusin', () => {
+    hideInputError(passwordEl, passwordErrorEl)
+  })
+  eyeOffIconEl.addEventListener('click', () => {
+    showPassword(passwordEl, eyeOffIconEl, eyeOnIconEl)
+  })
+  eyeOnIconEl.addEventListener('click', () => {
+    hidePassword(passwordEl, eyeOffIconEl, eyeOnIconEl)
+  })
   formEl.addEventListener('submit', handleSubmit)
-  eyeOffIconEl.addEventListener('click', handleEyeOffIconClick)
-  eyeOnIconEl.addEventListener('click', handleEyeOnIconClick)
 }
 
 document.addEventListener('DOMContentLoaded', onDocumentReady)

signin/js/ui-controller.js

@@ -0,0 +1,35 @@
+import {
+  validateLoginEmail,
+  validateLoginPassword,
+} from '../../utils/validate-auth.js'
+
+export function validateAndDisplayEmailError(emailEl, emailErrorEl) {
+  const { success, message } = validateLoginEmail(emailEl.value)
+  if (!success) {
+    emailErrorEl.textContent = message
+    return
+  }
+}
+
+export function validateAndDisplayPasswordError(passwordEl, passwordErrorEl) {
+  const { success, message } = validateLoginPassword(passwordEl.value)
+  if (!success) {
+    passwordErrorEl.textContent = message
+    return
+  }
+}
+export function hideInputError(errorElement) {
+  errorElement.textContent = ''
+}
+
+export function showPassword(passwordEl, eyeOffIcon, eyeOnIcon) {
+  passwordEl.setAttribute('type', 'text')
+  eyeOnIcon.style.display = 'inline'
+  eyeOffIcon.style.display = 'none'
+}
+
+export function hidePassword(passwordEl, eyeOffIcon, eyeOnIcon) {
+  passwordEl.setAttribute('type', 'password')
+  eyeOffIcon.style.display = 'inline'
+  eyeOnIcon.style.display = 'none'
+}