From 5ee6f5666ee1458c8567df21ba0bb710808c8907 Mon Sep 17 00:00:00 2001 From: "seonkyu.kim" Date: Thu, 11 Jul 2024 16:34:40 +0900 Subject: [PATCH] =?UTF-8?q?[=E2=9C=A8]=20init=20project=5FFront?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 5 ++ README.md | 1 + admin.html | 14 ++++ login/login.css | 163 +++++++++++++++++++++++++++++++++++++++++++++++ login/login.html | 39 ++++++++++++ login/login.js | 54 ++++++++++++++++ ls | 0 main.html | 0 8 files changed, 276 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 admin.html create mode 100644 login/login.css create mode 100644 login/login.html create mode 100644 login/login.js create mode 100644 ls create mode 100644 main.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..11c82ae --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +.DS_Store + +/resource + +/private diff --git a/README.md b/README.md new file mode 100644 index 0000000..42061c0 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +README.md \ No newline at end of file diff --git a/admin.html b/admin.html new file mode 100644 index 0000000..00093ab --- /dev/null +++ b/admin.html @@ -0,0 +1,14 @@ + + + + + + + Admin Page + + + +

Admin Page

+

Welcome, Administrator!

+ + \ No newline at end of file diff --git a/login/login.css b/login/login.css new file mode 100644 index 0000000..7f5eb90 --- /dev/null +++ b/login/login.css @@ -0,0 +1,163 @@ +@import url('resource/font/fonts.css'); + +body { + font-family: 'NPS Regular', Arial, sans-serif; + background-color: #B2CCF0; /* whiteSora 배경색 */ + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + padding: 0 20px; + box-sizing: border-box; /* 패딩을 포함하도록 설정 */ +} + +.logo-container { + position: relative; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + max-width: 600px; +} + +.login-container { + width: 100%; + padding: 20px; + background: white; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); + border-radius: 8px; + text-align: center; + background-color: #FFF; /* 흰색 배경 */ + border: 2px solid #1F2C59; /* deepBlue 테두리 */ + box-sizing: border-box; + z-index: 1; /* 로그인 컨테이너가 로고 위에 있도록 설정 */ +} + +h2 { + margin-bottom: 20px; + font-family: 'NPS Bold', Arial, sans-serif; + color: #1F2C59; /* deepBlue 색상 */ +} + +.input-group { + margin-bottom: 15px; + text-align: left; +} + +.input-group label { + display: block; + margin-bottom: 5px; + font-weight: bold; + color: #1F2C59; /* deepBlue 색상 */ +} + +.input-group input { + width: 100%; + padding: 8px; + box-sizing: border-box; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 20px; /* 폰트 크기 조정 */ +} + +.button-group { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 20px; /* 버튼 그룹과 입력 필드 사이의 여백 */ +} + +.register { + background: none; /* 배경 제거 */ + border: none; /* 테두리 제거 */ + color: #3678F1; /* 텍스트 색상 */ + text-decoration: underline; /* 밑줄 추가 */ + cursor: pointer; /* 마우스 포인터 */ + font-size: 16px; /* 폰트 크기 */ + font-family: 'NPS Bold', Arial, sans-serif; /* 폰트 패밀리 */ + padding: 0; /* 패딩 제거 */ +} + +.login { + padding: 10px 15px; + background-color: #3678F1; /* radeka 색상 */ + color: white; + border: none; + cursor: pointer; + border-radius: 4px; + font-size: 16px; + font-family: 'NPS Bold', Arial, sans-serif; +} + +.login:hover { + background-color: #1F2C59; /* deepBlue 색상 */ +} + +.register:hover { + color: red; /* 텍스트 색상 */ +} + +.logo { + max-width: 1024px; /* 로고 크기를 조정 */ + height: auto; + position: absolute; /* 로고를 인디케이터 뒤에 위치시키기 위해 position 속성 추가 */ + z-index: 0; /* 로그인 컨테이너 뒤에 위치하도록 설정 */ + filter: blur(4px); /* 블러 효과 추가 */ + opacity: 0.5; /* 투명도 설정 (0.0 ~ 1.0) */ +} + + +/* 인디케이터 백그라운드 스타일 */ +.indicator-background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.3); + display: flex; + justify-content: center; + align-items: center; + z-index: 9999; /* 최상위 레이어 */ +} + +/* 인디케이터 스타일 */ +.indicator { + border: 16px solid #f3f3f3; /* Light grey */ + border-top: 16px solid #3678F1; /* Blue */ + border-radius: 50%; + width: 120px; + height: 120px; + animation: spin 2s linear infinite; +} + +/* 인디케이터 애니메이션 */ +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + + + + +/* 미디어 쿼리 */ +@media (max-width: 600) { + body { + padding: 0 10px; /* 작은 화면에서는 양쪽 여백을 줄임 */ + } + + .login-container { + width: 100%; + padding: 15px; /* 작은 화면에서 패딩 조정 */ + } + + h2 { + font-size: 1.5em; + } + + .login, .register { + font-size: 14px; + padding: 8px 12px; + } +} \ No newline at end of file diff --git a/login/login.html b/login/login.html new file mode 100644 index 0000000..296814d --- /dev/null +++ b/login/login.html @@ -0,0 +1,39 @@ + + + + + + Admin Login + + + + +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/login/login.js b/login/login.js new file mode 100644 index 0000000..da29d5c --- /dev/null +++ b/login/login.js @@ -0,0 +1,54 @@ +document.getElementById('loginForm').addEventListener('submit', function(event) { + event.preventDefault(); + + const username = document.getElementById('username').value; + const password = document.getElementById('password').value; + + const indicatorBackground = document.getElementById('indicator-background'); + indicatorBackground.style.display = 'flex'; + + fetch('/login', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ username, password }) + }) + .then(response => response.json()) + .then(data => { + indicatorBackground.style.display = 'none'; + + if (data.success) { + // alert('로그인이 성공했습니다!'); + fetch(`/getGroups?username=${username}`) + .then(response => response.json()) + .then(groupData => { + console.log('그룹 정보:', groupData); + + // 그룹 데이터에서 name이 'administrators'인 그룹이 있는지 확인 + const isAdmin = groupData.some(group => group.name === 'administrators'); + + if (isAdmin) { + alert('관리자 계정으로 접속하였습니다.'); + window.location.href = '/admin'; // admin 페이지로 리다이렉트 + } else { + alert('로그인에 성공하였습니다.'); + window.location.href = '/'; // 일반 사용자 페이지로 리다이렉트 + } + + // 그룹 정보를 웹 페이지에 표시하거나 처리하는 로직 추가 + }) + .catch(error => { + console.error('그룹 정보를 가져오는 중 오류 발생:', error); + alert('그룹 정보를 가져오는 중 오류가 발생했습니다.'); + }); + } else { + alert('아이디 또는 비밀번호가 잘못되었습니다.'); + } + }) + .catch(error => { + console.error('Error:', error); + indicatorBackground.style.display = 'none'; + alert('로그인 중 오류가 발생했습니다.'); + }); +}); \ No newline at end of file diff --git a/ls b/ls new file mode 100644 index 0000000..e69de29 diff --git a/main.html b/main.html new file mode 100644 index 0000000..e69de29