mirrors/etherpad-lite
1
0
Fork 0
mirror of https://github.com/ether/etherpad-lite.git synced 2025-05-05 22:57:11 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 52

Added working oauth2.

Browse source
This commit is contained in:
SamTV12345 2024-03-25 15:34:37 +01:00
parent 04e4a5eee0
commit c966e12926
19 changed files with 401 additions and 198 deletions
Download patch file Download diff file Expand all files Collapse all files

17
ui/consent.html
View file

@ -2,12 +2,23 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + TS</title>
<title>Consent Etherpad</title>
</head>
<body>
<div id="app"></div>
<div id="app">
<div class="login-background login-page">
<div class="login-box login-form">
<h1 class="login-title">Etherpad <span id="client"></span></h1>
<form class="login-inner-box input-control" method="post">
<input type="hidden" name="prompt" value="consent"/>
<input type="submit" value="Login" class="login-button"/>
<div id="error"></div>
</form>
</div>
</div>
</div>
<script type="module" src="/src/consent.ts"></script>
</body>
</html>

45
ui/login.html
View file

@ -1,13 +1,38 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + TS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>SSO Etherpad</title>
</head>
<body>
<div id="app">
<div class="login-background login-page">
<div class="login-box login-form">
<h1 class="login-title">Etherpad <span id="client"></span></h1>
<form class="login-inner-box input-control">
<label>
<input class="login-textinput input-control" required type="text" name="login" placeholder="Username"/>
</label>
<div class="icon-input">
<label class="password-label">
<input class="login-textinput" type="password" required name="password" placeholder="Password"/>
<svg id="eye-visible" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 toggle-password-visibility">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
</svg>
<svg id="eye-hide" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
</svg>
</label>
</div>
<input type="submit" value="Login" class="login-button"/>
<div id="error"></div>
</form>
</div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

3
ui/package.json
View file

@ -10,6 +10,7 @@
},
"devDependencies": {
"typescript": "^5.2.2",
"vite": "^5.2.0"
"vite": "^5.2.0",
"vite-plugin-singlefile": "^2.0.1"
}
}

1
ui/public/vite.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.5 KiB

35
ui/src/consent.ts
View file

@ -0,0 +1,35 @@
import "./style.css"
//import {MapArrayType} from "ep_etherpad-lite/node/types/MapType";
const form = document.querySelector('form')!;
const sessionId = new URLSearchParams(window.location.search).get('state');
form.action = '/interaction/' + sessionId;
/*form.addEventListener('submit', function (event) {
event.preventDefault();
const formData = new FormData(form);
const data: MapArrayType<any> = {};
formData.forEach((value, key) => {
data[key] = value;
});
const sessionId = new URLSearchParams(window.location.search).get('state');
fetch('/interaction/' + sessionId, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
}).then(response => {
if (response.ok) {
if (response.redirected) {
window.location.href = response.url;
}
} else {
document.getElementById('error')!.innerText = "Error signing in";
}
}).catch(error => {
document.getElementById('error')!.innerText = "Error signing in" + error;
})
});*/

55
ui/src/main.ts
View file

@ -1,3 +1,58 @@
import './style.css'
import {MapArrayType} from "ep_etherpad-lite/node/types/MapType.ts";
const searchParams = new URLSearchParams(window.location.search);
document.getElementById('client')!.innerText = searchParams.get('client_id')!;
const form = document.querySelector('form')!;
form.addEventListener('submit', function (event) {
event.preventDefault();
const formData = new FormData(form);
const data: MapArrayType<any> = {};
formData.forEach((value, key) => {
data[key] = value;
});
const sessionId = new URLSearchParams(window.location.search).get('state');
fetch('/interaction/' + sessionId, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
redirect: 'follow',
body: JSON.stringify(data),
}).then(response => {
if (response.ok) {
if (response.redirected) {
window.location.href = response.url;
}
} else {
document.getElementById('error')!.innerText = "Error signing in";
}
}).catch(error => {
document.getElementById('error')!.innerText = "Error signing in" + error;
})
});
const hidePassword = document.querySelector('.toggle-password-visibility')! as HTMLElement
const showPassword = document.getElementById('eye-hide')! as HTMLElement
const togglePasswordVisibility = () => {
const passwordInput = document.getElementsByName('password')[0] as HTMLInputElement;
if (passwordInput.type === 'password') {
showPassword.style.display = 'block';
hidePassword.style.display = 'none';
passwordInput.type = 'text';
} else {
showPassword.style.display = 'none';
hidePassword.style.display = 'block';
passwordInput.type = 'password';
}
}
hidePassword.addEventListener('click', togglePasswordVisibility);
showPassword.addEventListener('click', togglePasswordVisibility);

177
ui/src/style.css
View file

@ -1,96 +1,125 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
--color-etherpad: #0f775b;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
font-size: 16px;
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
max-width: 1280px;
margin: auto;
padding: 2rem;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vanilla:hover {
filter: drop-shadow(0 0 2em #3178c6aa);
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
.login-box {
background-color: #f2f6f7;
padding: 40px;
border-radius: 20px;
color: #607278;
}
body {
background: radial-gradient(100% 100% at 50% 0%, var(--color-etherpad) 0%, #003A47 100%) fixed
}
input {
border-radius: 8px;
border: 1px solid #d1d1d1;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #f9f9f9;
transition: border-color 0.25s;
}
.login-inner-box {
display: flex;
flex-direction: column;
gap: 10px;
}
.login-inner-box input[type=submit] {
background-color: var(--color-etherpad);
color: white;
border: none;
cursor: pointer;
margin-top: 20px;
}
.password-label {
position: relative;
}
.password-label svg {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
width: 16px;
}
#eye-hide {
display: none;
}
label {
display: flex;
}
label input {
flex-grow: 1;
}

7
ui/vite.config.ts
View file

@ -3,12 +3,15 @@ import { resolve } from 'path'
import { defineConfig } from 'vite'
export default defineConfig({
base: '/views/',
build: {
outDir: resolve(__dirname, '../src/static/oidc'),
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
nested: resolve(__dirname, 'nested/index.html'),
main: resolve(__dirname, 'consent.html'),
nested: resolve(__dirname, 'login.html'),
},
},
emptyOutDir: true,
},
})