Added working oauth2.

ui/src/consent.ts

@@ -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;
+    })
+});*/

ui/src/main.ts

@@ -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);
 
 

ui/src/style.css

@@ -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;
 }