USTC 统一身份认证登录界面改为 UCAS 样式
// ==UserScript==
// @name USTC x UCAS
// @namespace http://tampermonkey.net/
// @version 0.2.1
// @description USTC 统一身份认证登录界面改为 UCAS 样式
// @author PRO
// @license gpl-3.0
// @match https://passport.ustc.edu.cn/login*
// @icon http://passport.ustc.edu.cn/images/favicon.ico
// @grant none
// ==/UserScript==
(function() {
'use strict';
let css = document.createElement("style");
css.textContent = `
body {
background-image: url(https://icourse.ucas.ac.cn/static/img/c-3.8727b282.jpg);
background-size: cover;
}
div.box.center {
margin: 0px auto !important;
border-radius: 6px;
background: rgb(255, 255, 255);
max-width: 400px;
padding: 25px 25px 5px;
box-shadow: none;
height: unset;
}
div.card {
padding: 0px;
}
form.form-style {
margin: 0px;
width: 100%;
height: 282px;
}
#header > h3 {
margin: 0 auto 30px auto;
text-align: center;
color: #707070;
font-weight: 500;
line-height: 1.1;
}
svg.prefix {
position: absolute;
left: 7px;
top: 0;
width: 14px;
height: 39px;
z-index: 1;
color: #bcc6db;
fill: currentColor;
}
input.input-box {
height: 38px;
position: relative;
font-size: 14px;
display: inline-block;
width: 100%;
padding-left: 30px;
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
outline: none;
padding: 0px 15px 0px 30px;
-webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
input.input-box:focus {
border-color: #1890ff;
}
span.error-tip {
color: #ff4949;
font-size: 12px;
line-height: 1;
padding-top: 4px;
position: absolute;
top: 100%;
left: 0;
transition: transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);
transform: scaleY(0);
transform-origin: center top;
}
div.group {
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 22px;
height: unset;
}
div.validate {
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 22px;
height: 38px;
}
div.validate-img-area {
width: 33%;
height: 38px;
}
img.validate-img {
margin-top: 0px;
height: 38px;
}
div.bottom-box {
height: 102px;
}
select.bottom-box-selector {
bottom: unset;
top: 0px;
color: #606266;
height: 19px;
line-height: 20px;
padding: 0px 0;
font-size: 10px;
margin: 0px 0px 25px;
}
a.bottom-box-button-area {
color: #1890ff;
float: right;
position: unset;
right: unset;
bottom: unset;
font-size: 14px;
font-weight: 500;
line-height: unset;
}
a.bottom-box-button-area:hover {
color: #46a6ff;
border-bottom: 1px solid #1890ff;
}
button.btn {
width: 100%;
padding: 10px 20px;
font-size: 14px;
border-radius: 4px;
color: #fff;
background-color: #1890ff;
border: 1px solid #1890ff;
font-weight: 400;
line-height: 14px;
letter-spacing: .2em;
bottom: 22px;
}
button.btn:hover {
background: #46a6ff;
border-color: #46a6ff;
}
div#footer {
position: fixed;
bottom: 1em;
color: #fff;
font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
width: 100%;
}
div#footer a {
color: #fff;
}
`;
let svg = document.createElement("svg");
svg.style.display = "none";
document.querySelector("body").insertAdjacentElement("afterbegin", svg);
let input_mod = { // SVG from https://icourse.ucas.ac.cn/static/js/app.68f39dac.js
"username": ["账号", "请输入您的账号", '<svg class="prefix" viewBox="0 0 130 130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797" /></svg>'],
"password": ["密码", "请输入您的密码", '<svg class="prefix" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><defs><style type="text/css"></style></defs><path d="M868.593046 403.832442c-30.081109-28.844955-70.037123-44.753273-112.624057-44.753273L265.949606 359.079168c-42.554188 0-82.510202 15.908318-112.469538 44.690852-30.236652 28.782533-46.857191 67.222007-46.857191 108.198258l0 294.079782c0 40.977273 16.619516 79.414701 46.702672 108.136859 29.959336 28.844955 70.069869 44.814672 112.624057 44.814672l490.019383 0c42.585911 0 82.696444-15.969717 112.624057-44.814672 30.082132-28.844955 46.579875-67.222007 46.579875-108.136859L915.172921 511.968278C915.171897 471.053426 898.675178 432.677397 868.593046 403.832442zM841.821309 806.049083c0 22.098297-8.882298 42.772152-25.099654 58.306964-16.154935 15.661701-37.81935 24.203238-60.752666 24.203238L265.949606 888.559285c-22.934339 0-44.567032-8.54256-60.877509-24.264637-16.186657-15.474436-25.067932-36.148291-25.067932-58.246589L180.004165 511.968278c0-22.035876 8.881274-42.772152 25.192775-58.307987 16.186657-15.536858 37.81935-24.139793 60.753689-24.139793l490.019383 0c22.933315 0 44.597731 8.602935 60.752666 24.139793 16.21838 15.535835 25.099654 36.272112 25.099654 58.307987L841.822332 806.049083zM510.974136 135.440715c114.914216 0 208.318536 89.75214 208.318536 200.055338l73.350588 0c0-149.113109-126.366036-270.496667-281.669124-270.496667-155.333788 0-281.699824 121.383558-281.699824 270.496667l73.350588 0C302.623877 225.193879 396.059919 135.440715 510.974136 135.440715zM474.299865 747.244792l73.350588 0L547.650453 629.576859l-73.350588 0L474.299865 747.244792z" p-id="2751" /></svg>'],
"validate": ["验证码", "请输入验证码", '<svg class="prefix" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><defs><style type="text/css"></style></defs><path d="M513.3 958.5c-142.2 0-397.9-222.1-401.6-440.5V268c1.7-39.6 31.7-72.3 71.1-77.3 49-4.6 97.1-16.5 142.7-35.3 47.8-14 91.9-38.3 129.4-71.1 30.3-24.4 72.9-26.3 105.3-4.6 39.9 30.7 83.8 55.9 130.5 74.6 48.6 14.7 98.2 25.9 148.4 33.7 38.5 7.6 67.1 40.3 69.5 79.5 3.3 84.9 2.5 169.9-2.6 254.7-33.7 281.6-253.7 436.4-392.7 436.3z m-0.1-813.7c-7.2-0.2-14.3 2-20 6.4-39.7 35.2-86.8 61.1-137.7 75.7-46.8 19.2-96.2 31-146.6 35.2-11 3.2-18.8 13-19.5 24.4v230.1c3.5 180.3 223.3 361 323.9 361s287.3-120.2 317.6-360.5c7.3-142.7 0-228.6 0-229.6-1.3-13.3-11-24.3-24-27.3-49.6-7.7-98.6-19-146.5-33.7-46.3-19.5-89.7-45.3-129-76.7-5.8-3.8-12.7-5.5-19.5-4.9l1.3-0.1z" fill="#C6CCDA" p-id="1940" /><path d="M750.1 428L490.7 673.2c-11.7 11.1-29.5 12.9-43.1 4.2l-6.8-5.8-141.2-149.4c-9.3-9.3-12.7-22.9-9-35.5 3.8-12.6 14.1-22.1 27-24.8 12.9-2.7 26.1 1.9 34.6 11.9L469 597.5l233.7-221c14.6-12.8 36.8-11.6 49.9 2.7 13.2 14.2 11.5 35.3-2.5 48.8" fill="#C6CCDA" p-id="1941" /></svg>']
};
for (let key in input_mod) {
let input = document.querySelector("input#" + key);
if (!input) continue;
input.attributes.removeNamedItem("onfocus");
input.attributes.removeNamedItem("onblur");
input.insertAdjacentHTML("afterend", input_mod[key][2]);
input.placeholder = input_mod[key][0];
let tip = document.createElement("span");
tip.className = "error-tip";
tip.textContent = input_mod[key][1];
tip.id = key + "-error";
input.parentNode.appendChild(tip);
let callback2 = (e) => {
input.removeEventListener("blur", callback2);
css.textContent += `
input.input-box#${key}:invalid ~ span#${key}-error {
visibility: unset;
transform: scaleY(1);
}
input.input-box#${key}:invalid {
border-color: #ff4949;
}`;
};
let callback1 = (e) => {
input.removeEventListener("click", callback1);
input.addEventListener("blur", callback2);
};
input.addEventListener("click", callback1);
}
document.querySelector("head").appendChild(css);
let title = document.createElement("h3");
title.textContent = "中科大在线系统";
header.appendChild(title);
let find_pwd = document.querySelector("a#findPassword");
find_pwd.textContent = "找回用户名密码";
let footer = document.querySelector("div#footer");
document.querySelector("body").insertAdjacentElement("afterbegin", footer);
function cleanStyle(sel) {
let ele = document.querySelector(sel);
if (ele) ele.attributes.removeNamedItem("style");
}
function tryRemove(sel) {
let ele = document.querySelector(sel);
if (ele) ele.remove();
}
["img.validate-img", "form.form-style", "select.bottom-box-selector"].forEach(cleanStyle);
["div.qrcode", "div.input_login", "div#header > h1.header-logo", "div#header > h1.header-des"].forEach(tryRemove);
document.querySelectorAll("span.bar").forEach((ele) => { ele.remove(); })
})();