Added login page (#8)

hugo/content/login-success.html

@@ -0,0 +1,14 @@
+---
+title: "Open Collaboration Tools - Logged In"
+description: "You have successfully logged in to the public service of Open Collaboration Tools"
+layout: "login"
+type: oct
+---
+<div class="content">
+    <div class="content-center">
+        <div class="urbanist-regular">
+            <h1>You are logged in</h1>
+            <p>You can close this page now.</p>
+        </div>
+    </div>
+</div>

hugo/content/login.html

@@ -0,0 +1,79 @@
+---
+title: "Open Collaboration Tools - Log In"
+description: "Log in to the public service of Open Collaboration Tools"
+layout: "login"
+type: oct
+---
+<div class="content">
+    <div class="content-center">
+        <div class="urbanist-regular">
+            <h1>Verified Login</h1>
+            <p>Show others who you are by logging in through a verified authentication provider.</p>
+        </div>
+        <a href="https://api.open-collab.tools/api/login/google" id="login-google">
+            <div class="button">
+                <img src="/assets/google-g.svg" alt="Google logo">
+                <span>Log in with Google</span>
+            </div>
+        </a>
+        <a href="https://api.open-collab.tools/api/login/github" id="login-github">
+            <div class="button">
+                <img src="/assets/github-mark.svg" alt="GitHub logo">
+                <span>Log in with GitHub</span>
+            </div>
+        </a>
+    </div>
+    <div classs="content-center">
+        <div class="urbanist-regular">
+            <h1>Unverified Login</h1>
+            <p>Enter a user name and email as you like – useful for evaluating and testing the service.</p>
+        </div>
+        <form class="login-form" onsubmit="login(event)">
+            <div class="input-field">
+                <label for="login-username">Username</label>
+                <input id="login-username" required>
+            </div>
+            <div class="input-field">
+                <label for="login-email">Email</label>
+                <input id="login-email" type="email" autocomplete="email">
+            </div>
+            <button type="submit" class="button">Log In</button>
+        </form>
+    </div>
+</div>
+
+<script>
+    const token = new URLSearchParams(location.search).get('token');
+    if (token) {
+        document.addEventListener('DOMContentLoaded', () => {
+            const loginGoogle = document.getElementById('login-google');
+            loginGoogle.href += `?token=${token}`;
+            const loginGitHub = document.getElementById('login-github');
+            loginGitHub.href += `?token=${token}`;
+        });
+    }
+    function login(event) {
+        const user = document.getElementById('login-username').value;
+        const email = document.getElementById('login-email').value;
+        fetch('https://api.open-collab.tools/api/login/simple', {
+            method: 'POST',
+            body: JSON.stringify({ user, email, token }),
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        }).then(
+            (response) => {
+                if (response.ok) {
+                    location.href = '/login-success';
+                } else {
+                    response.text().then(
+                        (content) => alert(content || 'No details available'),
+                        () => alert(`Error ${response.status}: ${response.statusText || 'No details available'}`)
+                    );
+                }
+            },
+            (err) => alert(err && err.message ? err.message : err)
+        );
+        event.preventDefault();
+    }
+</script>

hugo/layouts/oct/login.html

@@ -0,0 +1,5 @@
+{{ define "main"}}
+<section>
+    {{ .Content }}
+</section>
+{{ end }}

hugo/layouts/partials/oct-header.html

@@ -13,7 +13,7 @@ <h1 class="barlow-regular fg-indigo-light">Open Collaboration Tools</h1>
         </nav>
         <nav>
             <a href="https://github.com/TypeFox/open-collaboration-tools" target="_blank">
-                <img src="/assets/github-mark.svg" alt="github repository" style="width: 43px; height: 43px;">
+                <img src="/assets/github-mark.svg" alt="GitHub Repository" style="width: 43px; height: 43px;">
             </a>
         </nav>
     </div>

hugo/static/css/style.css

@@ -128,6 +128,14 @@ section {
     margin: 1rem 0 0 0;
 }
 
+.content-center {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+    width: 100%;
+}
+
 .text-content {
     width: 80%;
     max-width: 850px;
@@ -276,4 +284,50 @@ footer a {
 
 .fg-black {
     color: #000000;
+}
+
+.button {
+    padding: 0.5rem 0.75rem;
+    font-family: "Barlow", sans-serif;
+    color: #FFFFFF;
+    font-size: 1.2rem;
+    font-weight: 500;
+    background-color: #643B88;
+    cursor: pointer;
+    border-radius: 0.75rem;
+    display: flex;
+    align-items: center;
+    border-style: none;
+}
+
+.button img {
+    width: 1.75rem;
+    height: 1.75rem;
+    padding-right: 0.5rem;
+}
+
+.login-form {
+    font-family: "Urbanist", sans-serif;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+    justify-content: center;
+}
+
+.input-field {
+    width: 200px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.input-field input {
+    padding: 0.2rem;
+    font-family: "Barlow", sans-serif;
+    font-size: 0.9rem;
+}
+
+.login-form .button {
+    margin-top: 0.75rem;
 }