提交
This commit is contained in:
史悦
236
static/public/code.html
Normal file
236
static/public/code.html
Normal file
@@ -0,0 +1,236 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user