237 lines
6.7 KiB
HTML
237 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>登录 Github Copilot</title>
|
|
<style>
|
|
:root {
|
|
--primary-color: #0066CC;
|
|
--hover-color: #0256A8;
|
|
--background-light: #ffffff;
|
|
--text-color: #1d1d1f;
|
|
--input-background: #fbfbfd;
|
|
--input-border: #d2d2d7;
|
|
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
body, html {
|
|
height: 100%;
|
|
margin: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
|
|
background-color: var(--background-light);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.login-container {
|
|
background-color: var(--background-light);
|
|
padding: 3em 4em;
|
|
border-radius: 20px;
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
|
|
text-align: center;
|
|
width: 90%;
|
|
max-width: 440px;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 24px;
|
|
font-weight: 500;
|
|
margin-bottom: 1.5em;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.input-wrapper {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
max-width: 300px;
|
|
padding: 12px 16px;
|
|
margin: 6px 0;
|
|
border: 1px solid var(--input-border);
|
|
border-radius: 12px;
|
|
background-color: var(--input-background);
|
|
font-size: 15px;
|
|
transition: var(--transition);
|
|
outline: none;
|
|
}
|
|
|
|
input:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1);
|
|
}
|
|
|
|
button {
|
|
width: 100%;
|
|
max-width: 300px;
|
|
padding: 12px;
|
|
margin-top: 24px;
|
|
border: none;
|
|
border-radius: 12px;
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
button:hover {
|
|
background-color: var(--hover-color);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
button:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.footer {
|
|
margin-top: 32px;
|
|
font-size: 13px;
|
|
color: #86868b;
|
|
}
|
|
|
|
.footer a {
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.footer a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Dark mode */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background-light: #1d1d1f;
|
|
--text-color: #f5f5f7;
|
|
--input-background: #2c2c2e;
|
|
--input-border: #3a3a3c;
|
|
}
|
|
|
|
.login-container {
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
|
|
}
|
|
}
|
|
|
|
#password {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-container">
|
|
<h1>登录 Github Copilot</h1>
|
|
<form onsubmit="submitForm()">
|
|
<div class="input-wrapper">
|
|
<input type="text" id="password"
|
|
placeholder="请输入访问密码">
|
|
</div>
|
|
<div class="input-wrapper">
|
|
<input type="text" id="authorization"
|
|
placeholder="请输入授权码" autofocus>
|
|
</div>
|
|
<div class="input-wrapper">
|
|
<input type="text" id="displayUserName"
|
|
placeholder="GitHub 用户名（可选）">
|
|
</div>
|
|
<button type="submit">登录</button>
|
|
</form>
|
|
|
|
<div class="footer">
|
|
© 2024 Open Source Contributors
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
async function getLoginConfig() {
|
|
const result = await fetch('/login/config');
|
|
const resultJson = await result.json();
|
|
if (resultJson.is_login_password) {
|
|
document.getElementById('password').style.display = 'block';
|
|
}
|
|
}
|
|
|
|
getLoginConfig();
|
|
|
|
function getQueryParam(param) {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
return urlParams.get(param);
|
|
}
|
|
|
|
function setCodeInputValue(){
|
|
const code = getQueryParam('user_code');
|
|
if (code !== null) {
|
|
document.getElementById('authorization').value = code;
|
|
}
|
|
}
|
|
setCodeInputValue();
|
|
|
|
async function submitForm() {
|
|
event.preventDefault();
|
|
const authorization = document.getElementById('authorization').value;
|
|
const password = document.getElementById('password').value;
|
|
const displayUserName = document.getElementById('displayUserName').value;
|
|
const code = getQueryParam('user_code');
|
|
|
|
if (code === null) {
|
|
alert('链接打开方式不正确，请重新打开');
|
|
return false;
|
|
}
|
|
|
|
if (authorization === '') {
|
|
alert('请输入授权码');
|
|
return false;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/login/device', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
code,
|
|
authorization,
|
|
password,
|
|
displayUserName
|
|
})
|
|
})
|
|
|
|
if (!response.ok) {
|
|
alert('HTTP error! status: ' + response.status);
|
|
return false;
|
|
}
|
|
|
|
const result = await response.json();
|
|
if (result?.error !== 0) {
|
|
alert(result.message);
|
|
return false;
|
|
}
|
|
alert('登录成功, 请返回IDE查看并使用');
|
|
window.close();
|
|
} catch (e) {
|
|
alert('提交表单时出错，请稍后再试');
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|