Compare commits
7 Commits
main
..
b92eeb0a71
| Author | SHA1 | Date | |
|---|---|---|---|
| b92eeb0a71 | |||
| af67ef9980 | |||
| a1bb947ab5 | |||
| b5d05b4ebb | |||
| 81d484cad9 | |||
| db9abe9e3a | |||
| a21493ff41 |
@@ -4,9 +4,9 @@
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<link href="/custom/launcher/css/style.css?v=20260722_wol1" rel="stylesheet" />
|
<link href="/custom/common/css/launcher.css" rel="stylesheet" />
|
||||||
<div id="findMyShortcut" class="find-container"></div>
|
<div id="findMyShortcut" class="find-container"></div>
|
||||||
<script src="/custom/launcher/js/main.js?v=20260722_wol1"></script>
|
<script src="/custom/launcher/js/main.js"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## 기능
|
## 기능
|
||||||
@@ -17,7 +17,6 @@
|
|||||||
- 차량 모니터 이동
|
- 차량 모니터 이동
|
||||||
- 공통 암호 로그인
|
- 공통 암호 로그인
|
||||||
- 공통 암호 변경
|
- 공통 암호 변경
|
||||||
- 4자리 숫자 PIN 입력과 커스텀 숫자 키패드
|
|
||||||
- 사이트 관리자 로그인 상태에서만 관리 버튼 표시
|
- 사이트 관리자 로그인 상태에서만 관리 버튼 표시
|
||||||
- 사이트 관리자 로그인 상태에서는 미니앱 실행 시 공통 암호 생략
|
- 사이트 관리자 로그인 상태에서는 미니앱 실행 시 공통 암호 생략
|
||||||
- 사이트 관리자 세션으로 미니앱 진입 시 공통 접근 쿠키 자동 발급
|
- 사이트 관리자 세션으로 미니앱 진입 시 공통 접근 쿠키 자동 발급
|
||||||
@@ -31,24 +30,12 @@
|
|||||||
|
|
||||||
## 공통 모듈 연동
|
## 공통 모듈 연동
|
||||||
|
|
||||||
인증, 암호 hash 저장, Home Assistant/Control 호출 설정은 `/custom/common` 모듈을 사용합니다. 런처는 더 이상 Home Assistant 토큰, Control 토큰, 웹훅을 브라우저로 직접 노출하지 않습니다.
|
인증, 암호 hash 저장, Home Assistant 호출은 `/custom/common` 모듈을 사용합니다. 런처는 더 이상 Home Assistant 토큰이나 웹훅을 브라우저로 직접 노출하지 않습니다.
|
||||||
|
|
||||||
런처 CSS 원본은 `/custom/common/css/launcher.css`를 사용합니다. 기존 운영 HTML이 `/custom/launcher/css/style.css`를 참조해도 호환 파일이 공용 CSS를 import합니다.
|
런처 CSS 원본은 `/custom/common/css/launcher.css`를 사용합니다. 기존 운영 HTML이 `/custom/launcher/css/style.css`를 참조해도 호환 파일이 공용 CSS를 import합니다.
|
||||||
|
|
||||||
런처는 채건닷컴 본문 안에 들어가는 배너라서 파일 변경 감시로 전체 Rhymix 페이지를 다시 열지 않습니다. 배포 직후 브라우저 캐시를 새로 받아야 할 때는 삽입 HTML의 `?v=` 값만 바꿉니다. 나의 찾기나 속도 측정처럼 화면 자체가 도구인 서비스만 공통 파일 변경 감시를 씁니다.
|
|
||||||
|
|
||||||
## 운영 메모
|
## 운영 메모
|
||||||
|
|
||||||
일반 사용자 화면은 나의 찾기, 콕 찌르기, 니모, 프로젝트 4개 버튼을 표시합니다. 프로젝트 바로가기는 공개 저장소 목록으로 이동하므로 공통 암호 인증을 거치지 않습니다.
|
메인 버튼은 기존 4개를 유지합니다. Rhymix 사이트 관리자 로그인 상태에서는 미니앱 실행 시 공통 암호를 묻지 않습니다. 이때 `/custom/launcher/api.php?adminSession=1` 또는 `session=1` 응답에서 공통 접근 쿠키를 함께 발급해, 이동한 미니앱 내부 세션 검사에서도 바로 통과합니다.
|
||||||
|
|
||||||
Rhymix 사이트 관리자 로그인 상태에서는 첫 줄에 나의 찾기, 콕 찌르기, 니모, 프로젝트를 일반 사용자 화면과 같은 순서로 표시하고, 두 번째 줄에 PC 켜기, Block, Notice, Speed Stats를 표시합니다. PC 켜기는 `/custom/wakeonlan/api.php`를 통해 Control의 `wake_lan` API로 WOL 요청을 보냅니다. Weblog는 관리자 대시보드에서도 접근할 수 있으므로 런처 관리자 바로가기에서는 제외합니다. 프로젝트 바로가기는 공개 저장소 목록인 `https://git.chaegeon.com/explore/repos`로 이동합니다. 관리자 상태에서 미니앱을 실행하면 공통 암호를 묻지 않습니다. 이때 `/custom/launcher/api.php?adminSession=1` 또는 `session=1` 응답에서 관리자 공통 접근 쿠키를 함께 발급해, 이동한 미니앱 내부 세션 검사에서도 바로 통과합니다.
|
|
||||||
|
|
||||||
공통 암호로 로그인한 일반 인증 쿠키는 30분만 유지합니다. 사이트 관리자 세션이 확인되어 발급된 관리자 인증 쿠키는 반영구 운영값으로 10년 유지합니다. `/custom/launcher/api.php?session=1`은 현재 브라우저가 가진 공통 쿠키 또는 사이트 관리자 세션을 확인하고, `/custom/launcher/api.php?adminSession=1`은 관리 버튼 노출처럼 실제 Rhymix 관리자 세션이 필요한 화면에서만 사용합니다. `adminSession=1`은 일반 공통 쿠키를 인증으로 섞지 않고 실제 관리자 여부만 내려줍니다. 런처가 관리자 아이콘을 표시한 뒤에도 브라우저 포커스가 돌아오거나 탭이 다시 보이면 관리자 세션을 재확인하고, 이미 관리자 로그인이 풀렸으면 일반 사용자 화면으로 다시 그립니다.
|
|
||||||
|
|
||||||
Rhymix 로그인 실패 차단 세션이 살아 있으면 `session=1` 응답이 `loginBlocked`를 내려줍니다. 이때 런처는 아이콘, 관리 버튼, PIN 입력을 숨기고 빨간 제한 안내만 표시합니다.
|
|
||||||
|
|
||||||
암호는 숫자 4자리만 허용합니다. 로그인과 암호 변경 입력창은 `inputmode=numeric`, `[0-9]*` 패턴, 커스텀 숫자 키패드를 사용하며 Android/iPhone에서 문자 키보드가 뜨지 않도록 `readonly` 입력창에 화면 키패드로 값을 넣습니다. 서버 API도 4자리 숫자가 아닌 암호를 거부합니다.
|
|
||||||
|
|
||||||
로그인은 확인 버튼 없이 4자리가 입력되면 즉시 검증하고 성공 시 원래 선택한 미니앱으로 이동합니다. 암호 변경 화면도 변경/확인 버튼 없이 현재 암호, 새 암호, 새 암호 확인 순서로 4자리 입력이 끝날 때마다 다음 칸으로 이동하며, 마지막 칸까지 입력되면 바로 변경을 검증합니다. 이미 값이 들어간 입력창을 누르면 로그인 화면은 해당 칸을 지우고, 암호 변경 화면은 클릭한 칸부터 뒤 칸까지 지운 뒤 다시 입력받습니다. 현재 입력 중인 칸은 상태 문구와 파란 테두리로 표시합니다.
|
|
||||||
|
|
||||||
암호 변경은 배너 우하단의 작은 `관리` 링크에서 처리하며, 이 링크는 사이트 관리자 로그인 상태에서만 표시합니다. 암호 변경 시에는 현재 공통 암호 입력을 계속 요구합니다.
|
암호 변경은 배너 우하단의 작은 `관리` 링크에서 처리하며, 이 링크는 사이트 관리자 로그인 상태에서만 표시합니다. 암호 변경 시에는 현재 공통 암호 입력을 계속 요구합니다.
|
||||||
|
|||||||
@@ -8,23 +8,14 @@ header('Cache-Control: no-store');
|
|||||||
|
|
||||||
$config = custom_config();
|
$config = custom_config();
|
||||||
|
|
||||||
function launcher_is_digit_password(string $password): bool
|
|
||||||
{
|
|
||||||
return preg_match('/^\d{4}$/', $password) === 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||||
$data = custom_read_request_data();
|
$data = custom_read_request_data();
|
||||||
$action = $data['action'] ?? 'login';
|
$action = $data['action'] ?? 'login';
|
||||||
|
|
||||||
if ($action === 'login') {
|
if ($action === 'login') {
|
||||||
$password = (string)($data['password'] ?? '');
|
$password = (string)($data['password'] ?? '');
|
||||||
if (!launcher_is_digit_password($password)) {
|
|
||||||
custom_json(['result' => 'fail', 'message' => 'password_digits_only'], 401);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (custom_verify_password($password)) {
|
if (custom_verify_password($password)) {
|
||||||
custom_issue_auth_cookie(false);
|
custom_issue_auth_cookie();
|
||||||
custom_json(['result' => 'ok']);
|
custom_json(['result' => 'ok']);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -40,19 +31,19 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||||||
$current = (string)($data['currentPassword'] ?? '');
|
$current = (string)($data['currentPassword'] ?? '');
|
||||||
$next = (string)($data['newPassword'] ?? '');
|
$next = (string)($data['newPassword'] ?? '');
|
||||||
|
|
||||||
if (!launcher_is_digit_password($current) || !launcher_is_digit_password($next)) {
|
|
||||||
custom_json(['result' => 'fail', 'message' => 'password_digits_only'], 422);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!custom_verify_password($current)) {
|
if (!custom_verify_password($current)) {
|
||||||
custom_json(['result' => 'fail', 'message' => 'current_password_invalid'], 401);
|
custom_json(['result' => 'fail', 'message' => 'current_password_invalid'], 401);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (mb_strlen($next) < 4) {
|
||||||
|
custom_json(['result' => 'fail', 'message' => 'password_too_short'], 422);
|
||||||
|
}
|
||||||
|
|
||||||
if (!custom_save_password_hash(password_hash($next, PASSWORD_DEFAULT))) {
|
if (!custom_save_password_hash(password_hash($next, PASSWORD_DEFAULT))) {
|
||||||
custom_json(['result' => 'fail', 'message' => 'password_save_failed'], 500);
|
custom_json(['result' => 'fail', 'message' => 'password_save_failed'], 500);
|
||||||
}
|
}
|
||||||
|
|
||||||
custom_issue_auth_cookie(false);
|
custom_issue_auth_cookie();
|
||||||
custom_json(['result' => 'ok']);
|
custom_json(['result' => 'ok']);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -72,35 +63,24 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||||||
|
|
||||||
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
|
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
|
||||||
if (isset($_GET['session'])) {
|
if (isset($_GET['session'])) {
|
||||||
$denied = custom_login_denied_state();
|
if (custom_has_auth_cookie()) {
|
||||||
if (!empty($denied['denied'])) {
|
custom_json(['authenticated' => true, 'admin' => false]);
|
||||||
custom_json([
|
|
||||||
'authenticated' => false,
|
|
||||||
'admin' => false,
|
|
||||||
'loginBlocked' => true,
|
|
||||||
'blockedType' => $denied['type'] ?? '',
|
|
||||||
'blockedMessage' => $denied['message'] ?? '현재 로그인할 수 없는 상태입니다.',
|
|
||||||
]);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (custom_is_site_admin()) {
|
if (custom_is_site_admin()) {
|
||||||
custom_issue_auth_cookie(true);
|
custom_issue_auth_cookie();
|
||||||
custom_json(['authenticated' => true, 'admin' => true]);
|
custom_json(['authenticated' => true, 'admin' => true]);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (custom_has_auth_cookie()) {
|
|
||||||
custom_json(['authenticated' => true, 'admin' => false]);
|
|
||||||
}
|
|
||||||
|
|
||||||
custom_json(['authenticated' => false, 'admin' => false]);
|
custom_json(['authenticated' => false, 'admin' => false]);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isset($_GET['adminSession'])) {
|
if (isset($_GET['adminSession'])) {
|
||||||
$isAdmin = custom_is_site_admin();
|
$isAdmin = custom_is_site_admin();
|
||||||
if ($isAdmin) {
|
if ($isAdmin) {
|
||||||
custom_issue_auth_cookie(true);
|
custom_issue_auth_cookie();
|
||||||
}
|
}
|
||||||
custom_json(['admin' => $isAdmin, 'authenticated' => $isAdmin]);
|
custom_json(['admin' => $isAdmin, 'authenticated' => $isAdmin || custom_has_auth_cookie()]);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isset($_GET['failMessages'])) {
|
if (isset($_GET['failMessages'])) {
|
||||||
@@ -112,7 +92,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'GET') {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (isset($_GET['pokeCount'])) {
|
if (isset($_GET['pokeCount'])) {
|
||||||
$state = custom_ha_state('mokpo', $config['entities']['poke_count']);
|
$state = custom_ha_state('main', $config['entities']['poke_count']);
|
||||||
$count = $state['state'] ?? null;
|
$count = $state['state'] ?? null;
|
||||||
|
|
||||||
if ($count === null) {
|
if ($count === null) {
|
||||||
|
|||||||
+43
-273
@@ -1,17 +1,21 @@
|
|||||||
const shortcut = document.getElementById('findMyShortcut');
|
const shortcut = document.getElementById('findMyShortcut');
|
||||||
let failIndex = 0;
|
let failIndex = 0;
|
||||||
let lastRenderedAdmin = null;
|
|
||||||
|
|
||||||
const apiUrl = '/custom/launcher/api.php';
|
const apiUrl = '/custom/launcher/api.php';
|
||||||
const PIN_LENGTH = 4;
|
|
||||||
|
|
||||||
const userIconItems = [
|
const iconItems = [
|
||||||
{
|
{
|
||||||
id: 'findmydevice',
|
id: 'findmydevice',
|
||||||
img: '/custom/launcher/img/find-my.svg',
|
img: '/custom/launcher/img/find-my.svg',
|
||||||
label: '나의 찾기',
|
label: '나의 찾기',
|
||||||
onclick: () => requireAccess(() => location.href = '/findmydevice')
|
onclick: () => requireAccess(() => location.href = '/findmydevice')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 'wakeonlan',
|
||||||
|
img: '/custom/launcher/img/wakeonlan-svgrepo-com.svg',
|
||||||
|
label: 'PC 켜기',
|
||||||
|
onclick: () => requireAccess(wakeComputer)
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 'poke',
|
id: 'poke',
|
||||||
img: '/custom/launcher/img/R1280x0.jpg',
|
img: '/custom/launcher/img/R1280x0.jpg',
|
||||||
@@ -23,60 +27,14 @@ const userIconItems = [
|
|||||||
img: '/custom/launcher/img/car.png',
|
img: '/custom/launcher/img/car.png',
|
||||||
label: '니모',
|
label: '니모',
|
||||||
onclick: () => requireAccess(() => location.href = 'https://seo.chaegeon.com/car/monitor.php')
|
onclick: () => requireAccess(() => location.href = 'https://seo.chaegeon.com/car/monitor.php')
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'project',
|
|
||||||
img: 'https://git.chaegeon.com/assets/img/favicon.svg',
|
|
||||||
label: '프로젝트',
|
|
||||||
onclick: () => location.href = 'https://git.chaegeon.com/explore/repos'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const adminIconItems = [
|
|
||||||
userIconItems[0],
|
|
||||||
userIconItems[1],
|
|
||||||
userIconItems[2],
|
|
||||||
userIconItems[3],
|
|
||||||
{
|
|
||||||
id: 'wakeonlan',
|
|
||||||
img: '/custom/launcher/img/wakeonlan-svgrepo-com.svg',
|
|
||||||
label: 'PC 켜기',
|
|
||||||
onclick: () => requireAccess(wakeComputer)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'block',
|
|
||||||
img: '/admin/favicon/block/favicon.svg',
|
|
||||||
label: 'Block',
|
|
||||||
onclick: () => requireAccess(() => location.href = 'https://chaegeon.com/admin/index.php')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'notice',
|
|
||||||
img: '/admin/favicon/notice/favicon.svg',
|
|
||||||
label: 'Notice',
|
|
||||||
onclick: () => requireAccess(() => location.href = 'https://chaegeon.com/admin/notice.php')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'speedstats',
|
|
||||||
img: '/custom/speedtest/favicon.ico',
|
|
||||||
label: 'Speed Stats',
|
|
||||||
onclick: () => requireAccess(() => location.href = 'https://chaegeon.com/custom/speedtest/results/stats.php')
|
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
async function renderIcons() {
|
async function renderIcons() {
|
||||||
const session = await getSession();
|
shortcut.className = 'find-container';
|
||||||
if (session.loginBlocked) {
|
|
||||||
renderLoginBlocked(session);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const isAdmin = !!session.admin;
|
|
||||||
lastRenderedAdmin = isAdmin;
|
|
||||||
const items = isAdmin ? adminIconItems : userIconItems;
|
|
||||||
shortcut.className = `find-container ${isAdmin ? 'launcher-admin-grid' : ''}`;
|
|
||||||
shortcut.innerHTML = '';
|
shortcut.innerHTML = '';
|
||||||
|
|
||||||
items.forEach(item => {
|
iconItems.forEach(item => {
|
||||||
const div = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
div.className = 'iconContainer';
|
div.className = 'iconContainer';
|
||||||
div.id = item.id;
|
div.id = item.id;
|
||||||
@@ -95,7 +53,7 @@ async function renderIcons() {
|
|||||||
shortcut.appendChild(div);
|
shortcut.appendChild(div);
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!isAdmin) {
|
if (!await hasAdminSession()) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -116,23 +74,15 @@ async function hasAdminSession() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getSession() {
|
|
||||||
try {
|
|
||||||
return await fetch(`${apiUrl}?session=1`, { credentials: 'same-origin' }).then(res => res.json());
|
|
||||||
} catch (_) {
|
|
||||||
return { authenticated: false, admin: false };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function requireAccess(nextAction) {
|
async function requireAccess(nextAction) {
|
||||||
try {
|
try {
|
||||||
const session = await getSession();
|
if (await hasAdminSession()) {
|
||||||
if (session.loginBlocked) {
|
nextAction && nextAction();
|
||||||
renderLoginBlocked(session);
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (session.admin || session.authenticated) {
|
const session = await fetch(`${apiUrl}?session=1`, { credentials: 'same-origin' }).then(res => res.json());
|
||||||
|
if (session.authenticated) {
|
||||||
nextAction && nextAction();
|
nextAction && nextAction();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -142,47 +92,20 @@ async function requireAccess(nextAction) {
|
|||||||
showPasswordForm(nextAction);
|
showPasswordForm(nextAction);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function refreshAdminModeIfNeeded() {
|
|
||||||
if (lastRenderedAdmin !== true) return;
|
|
||||||
const isAdmin = await hasAdminSession();
|
|
||||||
if (!isAdmin) {
|
|
||||||
await renderIcons();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('visibilitychange', () => {
|
|
||||||
if (!document.hidden) {
|
|
||||||
refreshAdminModeIfNeeded();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
window.addEventListener('focus', refreshAdminModeIfNeeded);
|
|
||||||
|
|
||||||
function renderLoginBlocked(session = {}) {
|
|
||||||
shortcut.className = 'launcher-blocked';
|
|
||||||
shortcut.innerHTML = '';
|
|
||||||
|
|
||||||
const title = document.createElement('strong');
|
|
||||||
title.textContent = '현재 로그인할 수 없는 상태입니다.';
|
|
||||||
|
|
||||||
const message = document.createElement('div');
|
|
||||||
message.textContent = session.blockedMessage || '잠시 후 다시 시도하세요.';
|
|
||||||
|
|
||||||
shortcut.appendChild(title);
|
|
||||||
shortcut.appendChild(message);
|
|
||||||
}
|
|
||||||
|
|
||||||
function showPasswordForm(onSuccess) {
|
function showPasswordForm(onSuccess) {
|
||||||
shortcut.className = 'password-container';
|
shortcut.className = 'password-container';
|
||||||
shortcut.innerHTML = '';
|
shortcut.innerHTML = '';
|
||||||
|
|
||||||
const title = createFormHeader('비밀번호', renderIcons);
|
const title = createFormHeader('비밀번호', renderIcons);
|
||||||
const input = createPinInput('blog_secret', '비밀번호');
|
const input = createPasswordInput('blog_secret', '비밀번호');
|
||||||
|
const button = createButton('확인');
|
||||||
const msg = document.createElement('div');
|
const msg = document.createElement('div');
|
||||||
msg.id = 'failMsg';
|
msg.id = 'failMsg';
|
||||||
|
|
||||||
const inputRow = document.createElement('div');
|
const inputRow = document.createElement('div');
|
||||||
inputRow.className = 'launcher-input-row';
|
inputRow.className = 'launcher-input-row';
|
||||||
inputRow.appendChild(input);
|
inputRow.appendChild(input);
|
||||||
|
inputRow.appendChild(button);
|
||||||
|
|
||||||
const column = document.createElement('div');
|
const column = document.createElement('div');
|
||||||
column.className = 'launcher-form-column';
|
column.className = 'launcher-form-column';
|
||||||
@@ -191,9 +114,7 @@ function showPasswordForm(onSuccess) {
|
|||||||
shortcut.appendChild(column);
|
shortcut.appendChild(column);
|
||||||
|
|
||||||
const submit = async () => {
|
const submit = async () => {
|
||||||
const password = onlyDigits(input.value);
|
const password = input.value;
|
||||||
input.value = password;
|
|
||||||
if (password.length !== PIN_LENGTH) return;
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const messageRes = await fetch(`${apiUrl}?failMessages=1`);
|
const messageRes = await fetch(`${apiUrl}?failMessages=1`);
|
||||||
@@ -228,9 +149,10 @@ function showPasswordForm(onSuccess) {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const keypad = createPinKeypad([input], submit);
|
button.addEventListener('click', submit);
|
||||||
column.appendChild(keypad);
|
input.addEventListener('keydown', e => {
|
||||||
attachPinInputEvents(input, submit);
|
if (e.key === 'Enter') submit();
|
||||||
|
});
|
||||||
input.focus();
|
input.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -239,45 +161,30 @@ function showPasswordChangeForm() {
|
|||||||
shortcut.innerHTML = '';
|
shortcut.innerHTML = '';
|
||||||
|
|
||||||
const title = createFormHeader('암호 변경', renderIcons);
|
const title = createFormHeader('암호 변경', renderIcons);
|
||||||
const currentInput = createPinInput('current_password', '현재 암호');
|
const currentInput = createPasswordInput('current_password', '현재 암호');
|
||||||
const newInput = createPinInput('new_password', '새 암호');
|
const newInput = createPasswordInput('new_password', '새 암호');
|
||||||
const confirmInput = createPinInput('confirm_password', '새 암호 확인');
|
const confirmInput = createPasswordInput('confirm_password', '새 암호 확인');
|
||||||
|
const button = createButton('변경');
|
||||||
const msg = document.createElement('div');
|
const msg = document.createElement('div');
|
||||||
msg.id = 'failMsg';
|
msg.id = 'failMsg';
|
||||||
|
|
||||||
const status = document.createElement('div');
|
|
||||||
status.className = 'launcher-pin-status';
|
|
||||||
status.textContent = '현재 암호 입력';
|
|
||||||
|
|
||||||
const column = document.createElement('div');
|
const column = document.createElement('div');
|
||||||
column.className = 'launcher-form-column';
|
column.className = 'launcher-form-column';
|
||||||
column.appendChild(title);
|
column.appendChild(title);
|
||||||
column.appendChild(status);
|
|
||||||
column.appendChild(currentInput);
|
column.appendChild(currentInput);
|
||||||
column.appendChild(newInput);
|
column.appendChild(newInput);
|
||||||
column.appendChild(confirmInput);
|
column.appendChild(confirmInput);
|
||||||
|
column.appendChild(button);
|
||||||
column.appendChild(msg);
|
column.appendChild(msg);
|
||||||
shortcut.appendChild(column);
|
shortcut.appendChild(column);
|
||||||
|
|
||||||
const submit = async () => {
|
const submit = async () => {
|
||||||
const currentPassword = onlyDigits(currentInput.value);
|
const currentPassword = currentInput.value;
|
||||||
const newPassword = onlyDigits(newInput.value);
|
const newPassword = newInput.value;
|
||||||
const confirmPassword = onlyDigits(confirmInput.value);
|
const confirmPassword = confirmInput.value;
|
||||||
currentInput.value = currentPassword;
|
|
||||||
newInput.value = newPassword;
|
|
||||||
confirmInput.value = confirmPassword;
|
|
||||||
|
|
||||||
if ([currentPassword, newPassword, confirmPassword].some(value => value.length !== PIN_LENGTH)) return;
|
|
||||||
|
|
||||||
if (newPassword !== confirmPassword) {
|
if (newPassword !== confirmPassword) {
|
||||||
msg.textContent = '새 암호가 일치하지 않습니다.';
|
msg.textContent = '새 암호가 일치하지 않습니다.';
|
||||||
newInput.value = '';
|
|
||||||
confirmInput.value = '';
|
|
||||||
newInput.focus();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!isDigitPin(currentPassword) || !isDigitPin(newPassword)) {
|
|
||||||
msg.textContent = '암호는 숫자만 입력할 수 있습니다.';
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -298,36 +205,20 @@ function showPasswordChangeForm() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
msg.style.color = 'red';
|
msg.style.color = 'red';
|
||||||
msg.textContent = data.message === 'password_digits_only' ? '암호는 숫자 4자리여야 합니다.' : '현재 암호가 틀립니다.';
|
msg.textContent = data.message === 'password_too_short' ? '새 암호는 4자 이상이어야 합니다.' : '현재 암호가 틀립니다.';
|
||||||
if (data.message === 'current_password_invalid') {
|
|
||||||
currentInput.value = '';
|
|
||||||
newInput.value = '';
|
|
||||||
confirmInput.value = '';
|
|
||||||
currentInput.focus();
|
|
||||||
}
|
|
||||||
} catch (_) {
|
} catch (_) {
|
||||||
msg.style.color = 'red';
|
msg.style.color = 'red';
|
||||||
msg.textContent = '요청을 처리하지 못했습니다.';
|
msg.textContent = '요청을 처리하지 못했습니다.';
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const labels = new Map([
|
button.addEventListener('click', submit);
|
||||||
[currentInput, '현재 암호 입력'],
|
|
||||||
[newInput, '새 암호 입력'],
|
|
||||||
[confirmInput, '새 암호 확인 입력'],
|
|
||||||
]);
|
|
||||||
const syncStatus = () => {
|
|
||||||
const active = document.activeElement && labels.has(document.activeElement) ? document.activeElement : currentInput;
|
|
||||||
status.textContent = labels.get(active);
|
|
||||||
};
|
|
||||||
const keypad = createPinKeypad([currentInput, newInput, confirmInput], submit, syncStatus);
|
|
||||||
column.insertBefore(keypad, msg);
|
|
||||||
[currentInput, newInput, confirmInput].forEach(input => {
|
[currentInput, newInput, confirmInput].forEach(input => {
|
||||||
attachPinInputEvents(input, submit);
|
input.addEventListener('keydown', e => {
|
||||||
input.addEventListener('focus', syncStatus);
|
if (e.key === 'Enter') submit();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
currentInput.focus();
|
currentInput.focus();
|
||||||
syncStatus();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function wakeComputer() {
|
async function wakeComputer() {
|
||||||
@@ -345,19 +236,9 @@ async function wakeComputer() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const sent = await fetch('/custom/wakeonlan/api.php', { method: 'POST', credentials: 'same-origin' })
|
await fetch('/custom/wakeonlan/api.php', { method: 'POST', credentials: 'same-origin' })
|
||||||
.then(res => res.ok ? res.json() : Promise.reject());
|
.then(res => res.ok ? res.json() : Promise.reject());
|
||||||
|
|
||||||
if (sent && sent.result === 'already') {
|
|
||||||
launcherAlert('wakeonlan_already');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!sent || sent.result !== 'sent') {
|
|
||||||
launcherAlert('error');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
launcherAlert('wakeonlan_request_sent');
|
launcherAlert('wakeonlan_request_sent');
|
||||||
|
|
||||||
let attempts = 0;
|
let attempts = 0;
|
||||||
@@ -469,131 +350,20 @@ function createFormHeader(text, onBack) {
|
|||||||
return header;
|
return header;
|
||||||
}
|
}
|
||||||
|
|
||||||
function onlyDigits(value) {
|
function createPasswordInput(id, placeholder) {
|
||||||
return String(value || '').replace(/\D+/g, '');
|
|
||||||
}
|
|
||||||
|
|
||||||
function isDigitPin(value) {
|
|
||||||
return new RegExp(`^\\d{${PIN_LENGTH}}$`).test(String(value || ''));
|
|
||||||
}
|
|
||||||
|
|
||||||
function createPinInput(id, placeholder) {
|
|
||||||
const input = document.createElement('input');
|
const input = document.createElement('input');
|
||||||
input.type = 'password';
|
input.type = 'password';
|
||||||
input.placeholder = placeholder;
|
input.placeholder = placeholder;
|
||||||
input.id = id;
|
input.id = id;
|
||||||
input.inputMode = 'numeric';
|
input.autocomplete = 'current-password';
|
||||||
input.pattern = '[0-9]*';
|
|
||||||
input.autocomplete = 'off';
|
|
||||||
input.enterKeyHint = 'done';
|
|
||||||
input.maxLength = PIN_LENGTH;
|
|
||||||
input.readOnly = true;
|
|
||||||
input.className = 'launcher-pin-input';
|
|
||||||
input.setAttribute('aria-label', placeholder);
|
|
||||||
return input;
|
return input;
|
||||||
}
|
}
|
||||||
|
|
||||||
function attachPinInputEvents(input, onEnter) {
|
function createButton(text) {
|
||||||
input.addEventListener('focus', () => {
|
const button = document.createElement('button');
|
||||||
document.querySelectorAll('.launcher-pin-input').forEach(el => el.classList.toggle('active', el === input));
|
button.type = 'button';
|
||||||
});
|
button.textContent = text;
|
||||||
input.addEventListener('input', () => {
|
return button;
|
||||||
input.value = onlyDigits(input.value);
|
|
||||||
});
|
|
||||||
input.addEventListener('paste', e => {
|
|
||||||
e.preventDefault();
|
|
||||||
input.value = (input.value + onlyDigits(e.clipboardData?.getData('text') || '')).slice(0, PIN_LENGTH);
|
|
||||||
if (input.value.length === PIN_LENGTH) onEnter();
|
|
||||||
});
|
|
||||||
input.addEventListener('keydown', e => {
|
|
||||||
if (/^\d$/.test(e.key)) {
|
|
||||||
e.preventDefault();
|
|
||||||
input.value = (input.value + e.key).slice(0, PIN_LENGTH);
|
|
||||||
if (input.value.length === PIN_LENGTH) onEnter();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (e.key === 'Backspace') {
|
|
||||||
e.preventDefault();
|
|
||||||
input.value = input.value.slice(0, -1);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (e.key === 'Delete') {
|
|
||||||
e.preventDefault();
|
|
||||||
input.value = '';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
e.preventDefault();
|
|
||||||
onEnter();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function createPinKeypad(inputs, onEnter, onActiveChange = null) {
|
|
||||||
let activeInput = inputs[0];
|
|
||||||
const keypad = document.createElement('div');
|
|
||||||
keypad.className = 'launcher-pin-keypad';
|
|
||||||
const clearInputsFrom = input => {
|
|
||||||
const startIndex = inputs.indexOf(input);
|
|
||||||
if (startIndex < 0) return;
|
|
||||||
inputs.slice(startIndex).forEach(item => {
|
|
||||||
item.value = '';
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const setActiveInput = (input, clear = false, clearFollowing = false) => {
|
|
||||||
activeInput = input;
|
|
||||||
if (clearFollowing) {
|
|
||||||
clearInputsFrom(activeInput);
|
|
||||||
} else if (clear) {
|
|
||||||
activeInput.value = '';
|
|
||||||
}
|
|
||||||
activeInput.focus();
|
|
||||||
document.querySelectorAll('.launcher-pin-input').forEach(el => el.classList.toggle('active', el === activeInput));
|
|
||||||
if (typeof onActiveChange === 'function') onActiveChange(activeInput);
|
|
||||||
};
|
|
||||||
inputs.forEach(input => {
|
|
||||||
input.addEventListener('focus', () => {
|
|
||||||
activeInput = input;
|
|
||||||
if (typeof onActiveChange === 'function') onActiveChange(activeInput);
|
|
||||||
});
|
|
||||||
input.addEventListener('click', () => {
|
|
||||||
setActiveInput(input, input.value.length > 0, inputs.length > 1 && input.value.length > 0);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
['1', '2', '3', '4', '5', '6', '7', '8', '9', 'clear', '0', 'back'].forEach(key => {
|
|
||||||
const btn = document.createElement('button');
|
|
||||||
btn.type = 'button';
|
|
||||||
btn.className = `launcher-pin-key ${key === 'clear' || key === 'back' ? 'launcher-pin-action' : ''}`;
|
|
||||||
btn.textContent = key === 'clear' ? 'C' : (key === 'back' ? '⌫' : key);
|
|
||||||
btn.setAttribute('aria-label', key === 'clear' ? '전체 지우기' : (key === 'back' ? '한 글자 지우기' : `${key} 입력`));
|
|
||||||
btn.addEventListener('click', () => {
|
|
||||||
activeInput.focus();
|
|
||||||
if (key === 'clear') {
|
|
||||||
activeInput.value = '';
|
|
||||||
} else if (key === 'back') {
|
|
||||||
activeInput.value = activeInput.value.slice(0, -1);
|
|
||||||
} else {
|
|
||||||
activeInput.value = (activeInput.value + key).slice(0, PIN_LENGTH);
|
|
||||||
if (activeInput.value.length === PIN_LENGTH) {
|
|
||||||
if (inputs.length === 1) {
|
|
||||||
onEnter();
|
|
||||||
} else {
|
|
||||||
const idx = inputs.indexOf(activeInput);
|
|
||||||
if (idx >= 0 && idx < inputs.length - 1) {
|
|
||||||
const nextInput = inputs[idx + 1];
|
|
||||||
setActiveInput(nextInput, nextInput.value.length > 0, nextInput.value.length > 0);
|
|
||||||
} else {
|
|
||||||
onEnter();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
keypad.appendChild(btn);
|
|
||||||
});
|
|
||||||
|
|
||||||
return keypad;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function launcherAlert(name) {
|
function launcherAlert(name) {
|
||||||
|
|||||||
Reference in New Issue
Block a user