Improve login UI of the authentication system of Osaka University to allow password autocompletion and redesigned on the theme of Sci-Fi to fit modern style.
目前為
// ==UserScript==
// @name Osaka University Login Redesigned
// @name:ja 阪大ログイン画面再設計版
// @namespace https://yocjyet.dev/
// @version 1.0
// @description Improve login UI of the authentication system of Osaka University to allow password autocompletion and redesigned on the theme of Sci-Fi to fit modern style.
// @description:ja 阪大のログイン画面をSF風に再設計し、パスワード管理ソフトの自動記入不能の問題を修正した。
// @author Yo Cjyet
// @match https://ou-idp.auth.osaka-u.ac.jp/idp/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=osaka-u.ac.jp
// @grant none
// @license MIT
// ==/UserScript==
(function () {
('use strict');
// Remove original styles
const STYLES = document.querySelectorAll('link[rel="stylesheet"]');
for (const style of STYLES) {
style.remove();
}
// Add new Styles
function addStyle(css) {
window.addEventListener('load', function () {
var style = document.createElement('style');
style.innerHTML = css;
document.head.appendChild(style);
});
}
addStyle(`
body > *:not(main) {
display: none;
}
`);
// ---- Add Icon ----
const ICON_URL = 'https://www.osaka-u.ac.jp/favicon.ico';
const ICON_LINK = document.createElement('link');
ICON_LINK.setAttribute('rel', 'icon');
ICON_LINK.setAttribute('type', 'image/png');
ICON_LINK.setAttribute('href', ICON_URL);
document.head.appendChild(ICON_LINK);
const main = document.createElement('main');
main.innerHTML = `
<h1>
<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 116.131 114.063">
<path
fill="currentColor"
d="M115.627 48.364C112.563 25.037 95.65 6.081 73.418 0L58.065 15.351c19.595 0 35.952 13.871 39.79 32.33C81.611 49.536 67.4 58.079 58.064 70.514c-9.336-12.43-23.547-20.978-39.791-22.834 3.84-18.459 20.195-32.33 39.792-32.33L42.713 0C20.479 6.081 3.572 25.037.501 48.364A58.564 58.564 0 0 0 0 55.997c0 3.463.318 6.849.901 10.145A40.585 40.585 0 0 1 18.5 65.3c13.604 2.325 24.9 11.405 30.311 23.673a40.08 40.08 0 0 1 2.366 7.076c.698 2.99 1.081 6.1 1.081 9.302 0 2.849-.295 5.631-.853 8.319-.032.134-.065.262-.098.393h13.511c-.025-.131-.065-.259-.094-.393a40.822 40.822 0 0 1-.854-8.319c0-3.202.385-6.31 1.082-9.302a40.355 40.355 0 0 1 2.366-7.076c5.409-12.268 16.706-21.35 30.308-23.673a40.632 40.632 0 0 1 17.604.842c.58-3.296.9-6.682.9-10.145a58.043 58.043 0 0 0-.503-7.633z"
/>
</svg>
大阪大学
</h1>
<div class="input" title="大阪大学個人ID">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"
><path
d="M231.937 211.986a120.486 120.486 0 0 0-67.12-54.142a72 72 0 1 0-73.633 0a120.488 120.488 0 0 0-67.12 54.14a8 8 0 1 0 13.85 8.013a104.037 104.037 0 0 1 180.174.002a8 8 0 1 0 13.849-8.013zM72 96a56 56 0 1 1 56 56a56.064 56.064 0 0 1-56-56z"
fill="currentColor"
/></svg
>
<input type="text" id="username" />
</div>
<div class="input" title="パスワード">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
><path
d="M127.994 112a27.998 27.998 0 0 0-8 54.83V184a8 8 0 1 0 16 0v-17.17a27.998 27.998 0 0 0-8-54.83zm0 40a12 12 0 1 1 12-12a12.014 12.014 0 0 1-12 12zm80-72h-108V52a28 28 0 1 1 56 0a8 8 0 0 0 16 0a44 44 0 1 0-88 0v28h-36a16.018 16.018 0 0 0-16 16v112a16.018 16.018 0 0 0 16 16h160a16.018 16.018 0 0 0 16-16V96a16.018 16.018 0 0 0-16-16zm0 128h-160V96h160l.01 112z"
fill="currentColor"
/></svg
>
<input type="password" id="password" />
</div>
<button id="login" title="ログイン">LOGIN</button>
<div class="actions">
<a href="https://web.auth.osaka-u.ac.jp/portal/" target="_blank" title="ポータルサイト">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"
><path
d="M151.965 215.992v-64h-48v64L39.97 216V115.539a8 8 0 0 1 2.618-5.92l79.994-72.734a8 8 0 0 1 10.764 0l80.005 72.734a8 8 0 0 1 2.619 5.92V216z"
opacity=".2"
fill="currentColor"
/><path
d="M239.97 208h-16v-92.461a16.037 16.037 0 0 0-5.236-11.839l-80.006-72.735a15.936 15.936 0 0 0-21.527 0L37.207 103.7a16.034 16.034 0 0 0-5.236 11.839V208h-16a8 8 0 1 0 0 16h224a8 8 0 0 0 0-16zm-192-92.462l79.995-72.734l80.006 72.735V208h-48.006v-48.008a16.018 16.018 0 0 0-16-16h-32a16.018 16.018 0 0 0-16 16V208H47.97zM143.966 208h-32v-48.008h32z"
fill="currentColor"
/></svg
></a
>
<a
href="https://web.auth.osaka-u.ac.jp/portal/ja/security_contact.html"
target="_blank"
title="情報セキュリティに関する連絡先"
>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"
><path
d="M32 128v56a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16v-40a16 16 0 0 0-16-16z"
opacity=".2"
fill="currentColor"
/><path
d="M225.456 128h-32a16 16 0 0 0-16 16v40a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16z"
opacity=".2"
fill="currentColor"
/><path
d="M202.72 54.188A103.282 103.282 0 0 0 129.464 24l-.735.002l-.736-.002A104 104 0 0 0 24 128v56a24.027 24.027 0 0 0 24 24h16a24.027 24.027 0 0 0 24-24v-40a24.027 24.027 0 0 0-24-24H40.355a88.02 88.02 0 0 1 88.313-79.998h.12A88.017 88.017 0 0 1 217.1 120h-23.645a24.027 24.027 0 0 0-24 24v40a24.027 24.027 0 0 0 24 24h16a23.894 23.894 0 0 0 8-1.376V208a24.027 24.027 0 0 1-24 24H136a8 8 0 0 0 0 16h57.456a40.046 40.046 0 0 0 40-40v-80a103.283 103.283 0 0 0-30.735-73.813zM64 136a8.01 8.01 0 0 1 8 8v40a8.01 8.01 0 0 1-8 8H48a8.01 8.01 0 0 1-8-8v-48zm145.456 56h-16a8.01 8.01 0 0 1-8-8v-40a8.01 8.01 0 0 1 8-8h24v48a8.01 8.01 0 0 1-8 8z"
fill="currentColor"
/></svg
>
</a>
<a
href="https://web.auth.osaka-u.ac.jp/portal/ja/okomariguide.html"
target="_blank"
title="ログインにお困りの場合はこちら"
>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"
><circle cx="128.002" cy="128" r="96" opacity=".2" fill="currentColor" /><path
d="M128.002 24a104 104 0 1 0 104 104a104.118 104.118 0 0 0-104-104zm0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88zm12-36a12 12 0 1 1-12-12a12 12 0 0 1 12 12zm24-71.995a36.065 36.065 0 0 1-28 35.104v.896a8 8 0 0 1-16 0v-8a8 8 0 0 1 8-8a20 20 0 1 0-20-20a8 8 0 0 1-16 0a36 36 0 1 1 72 0z"
fill="currentColor"
/></svg
>
</a>
</div>
`;
document.body.appendChild(main);
addStyle(`
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300;500&display=swap');
:root {
--color-background: #16163e;
--color-primary: #2b2b7b;
--color-primary-light: #382c83;
--color-primary-lighter: #257c8e;
--color-secondary: #1ba493;
--color-highlight: hwb(164 7% 20%);
--color-accent: #07f49e;
font-family: 'Kiwi Maru', sans-serif;
font-size: 18px;
color-scheme: light dark;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
body {
background: linear-gradient(-45deg, var(--color-background) 0%, var(--color-primary) 100%);
color: var(--color-highlight);
margin: 0;
display: grid;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
main {
display: flex;
flex-direction: column;
align-items: center;
gap: 1em;
margin: 0 auto;
backdrop-filter: blur(10px);
background: rgba(0, 0, 0, 0.18);
padding: 1.8em 3.1em;
border-radius: 0.5em;
box-shadow: 0 0 1em rgba(0, 0, 0, 0.25), 0 0 5em rgba(17, 204, 153, 0.1), inset 0 0 3em rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 255, 255, 0.1);
text-shadow: 0 0 0.5em rgba(17, 204, 153, 0.2);
}
svg,
button {
filter: drop-shadow(0 0 3px rgba(17, 204, 153, 0.5));
}
h1 {
font-size: 3.2em;
line-height: 1.1;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin: 0.4em 0;
}
.logo {
width: 5rem;
}
input {
border: 1px solid white;
border-radius: 0.25em;
background: transparent;
color: white;
}
button,
input {
color: inherit;
font-size: inherit;
font-family: inherit;
}
button {
width: 100%;
background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-accent) 100%);
color: white;
border: none;
border-radius: 0.25em;
padding: 0.8em 0;
font-weight: bold;
transition: all 0.1s ease-in-out;
cursor: pointer;
}
button:focus {
outline: none;
filter: brightness(1.12);
transform: scale(1.01);
}
.input {
display: flex;
align-items: center;
gap: 0.5em;
border: 1px solid var(--color-secondary);
padding: 0.85em 0.5em;
border-radius: 0.25em;
color: var(--color-secondary);
transition: all 0.1s ease-in-out;
}
.input > svg {
width: 1.5em;
height: 1.5em;
}
.input > input {
border: none;
}
.input:focus-within {
border: 1px solid var(--color-accent);
color: var(--color-accent);
}
.input > input:focus {
outline: none;
}
.input:hover {
border: 1px solid var(--color-highlight);
color: var(--color-highlight);
}
.actions {
color: var(--color-primary-lighter);
display: flex;
align-items: center;
gap: 1.2em;
padding: 0.1em;
}
.actions > a,
.actions > a:visited {
color: inherit;
transition: all 0.1s ease-in-out;
}
.actions > a:hover {
color: var(--color-highlight);
}
.actions > a:focus {
outline: none;
color: var(--color-accent);
transform: scale(1.1);
}
`);
const username = document.getElementById('username');
const password = document.getElementById('password');
const loginButton = document.getElementById('login');
loginButton.addEventListener('click', () => {
const hiddenFrm = document.forms['cmdForm'];
if (hiddenFrm !== null) {
hiddenFrm.elements[0].value = username.value;
hiddenFrm.elements[1].value = password.value;
hiddenFrm.elements['IDButton'].value = 'ログイン';
execSrvStatus();
}
});
})();