-
Notifications
You must be signed in to change notification settings - Fork 4
/
connect.html
117 lines (98 loc) · 4.92 KB
/
connect.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<html layout:decorate="~{usr/layout/layout.html}">
<head>
<title>인스타 아이디 입력</title>
</head>
<body>
<main layout:fragment="main" class="flex-grow flex items-center justify-center">
<script>
function ConnectForm__submit(form) {
// username 이(가) 올바른지 체크
form.username.value = form.username.value.trim(); // 입력란의 입력값에 있을지 모르는 좌우공백제거
if (form.username.value.length === 0) {
toastWarning('인스타그램 아이디를 입력해주세요.');
form.username.focus();
return;
}
if (form.username.value.length < 3) {
toastWarning('인스타그램 아이디를 3자 이상 입력해주세요.');
form.username.focus();
return;
}
const $checkedGenderRadioButton = $(form).find("[name=gender]:checked");
if ($checkedGenderRadioButton.length === 0) {
toastWarning('성별을 선택해주세요.');
$(form).find("[name=gender]:first").focus();
return;
}
form.submit(); // 폼 발송
}
</script>
<div class="max-w-2xl w-full px-4">
<h1 class="mb-4">
<i class="fa-brands fa-instagram"></i>
인스타아이디 입력
</h1>
<form class="flex flex-col gap-6" method="POST" th:action onsubmit="ConnectForm__submit(this); return false;">
<div class="form-control">
<label class="label">
<span class="label-text">
<i class="fa-brands fa-instagram"></i>
인스타 아이디
</span>
</label>
<input type="text" name="username" placeholder="인스타 아이디" class="input input-bordered" autofocus
onchange="$(this).keyup();"
onkeyup="$(this).next().children(':last-child').text(this.value.trim());"
onpaste="setTimeoutZero(() => $(this).keyup());"/>
<a href="#" onclick="$(this).attr('href', $(this).text().replaceAll(' ', ''));" target="_blank"
class="block mt-3 text-sm break-all underline text-blue-400">
<span>https://instagram.com/</span><span class="text-red-300"></span>
</a>
<script>
// input : 태그가 input 인 녀석 선택
// input[name="username"] 태그가 input 이고 name 속성의 값이 username 인 녀석을 선택
// input[name="username"]:last : 태그가 input 이고 name 속성의 값이 username 인 녀석들 중에서 꼴등 한명 선택
// .keyup(); : 강제로 keyup 이벤트 트리거(이벤트를 강제로 발동시킨다.)
$(`input[name="username"]:last`).keyup();
</script>
</div>
<div class="form-control">
<label class="label">
<span class="label-text">
<i class="fa-solid fa-person-half-dress"></i>
성별
</span>
</label>
<!-- 라벨을 클릭하면 라벨의 하위요소인 버튼(체크,라디오,일반 등)이 클릭되는 효과) -->
<div class="flex justify-center gap-4">
<label class="flex gap-2 items-center cursor-pointer">
<input type="radio" name="gender" value="W" class="radio peer">
<span class="text-gray-400 peer-checked:text-gray-900 peer-checked:font-bold peer-focus:text-gray-700">
<i class="fa-solid fa-person-dress"></i>
여성
</span>
</label>
<label class="flex gap-2 items-center cursor-pointer">
<input type="radio" name="gender" value="M" class="radio peer">
<span class="text-gray-400 peer-checked:text-gray-900 peer-checked:font-bold peer-focus:text-gray-700">
<i class="fa-solid fa-person"></i>
남성
</span>
</label>
</div>
</div>
<button id="btn-insta-member-connect-1" class="btn btn-block btn-primary gap-1">
<i class="fa-brands fa-instagram"></i>
<span>인스타 아이디 입력</span>
</button>
</form>
<div class="mt-4">
<a href="/oauth2/authorization/instagram" class="btn btn-block btn-outline gap-1">
<i class="fa-brands fa-instagram text-[color:#E1306C]"></i>
<span>인스타 아이디 연결</span>
</a>
</div>
</div>
</main>
</body>
</html>