kalvium-worklog 1.0.3 → 1.2.0

package/templates/worklog_standalone.html

@@ -1,423 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-    <meta name="apple-mobile-web-app-title" content="Worklog">
-    <meta name="theme-color" content="#0f172a">
-    <title>Kalvium Worklog</title>
-    <style>
-        * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
-        body {
-            font-family: -apple-system, sans-serif;
-            background: #0f172a; color: #f8fafc;
-            min-height: 100vh; display: flex; flex-direction: column;
-            align-items: center; justify-content: center; padding: 20px;
-            -webkit-user-select: none; user-select: none;
-        }
-        .card {
-            background: #1e293b; border-radius: 20px; padding: 28px 22px;
-            width: 100%; max-width: 380px; box-shadow: 0 10px 40px rgba(0,0,0,0.4);
-        }
-        .header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
-        .logo { width: 36px; height: 36px; border-radius: 10px; background: #3b82f6;
-                display: flex; align-items: center; justify-content: center;
-                font-weight: 800; font-size: 18px; color: white; flex-shrink: 0; }
-        h1 { font-size: 20px; font-weight: 700; }
-        .sub { color: #64748b; font-size: 13px; margin-bottom: 20px; }
-        textarea {
-            width: 100%; min-height: 80px; border-radius: 12px;
-            border: 2px solid #334155; background: #0f172a; color: #f8fafc;
-            padding: 14px; font-size: 16px; resize: none; margin-bottom: 14px;
-            -webkit-user-select: text; user-select: text; font-family: inherit;
-        }
-        textarea:focus { outline: none; border-color: #3b82f6; }
-        .btn {
-            width: 100%; padding: 15px; border-radius: 12px; border: none;
-            font-size: 16px; font-weight: 600; cursor: pointer; transition: 0.15s;
-            -webkit-user-select: none; user-select: none;
-        }
-        .btn-submit { background: #3b82f6; color: white; margin-bottom: 8px; }
-        .btn-submit:active { transform: scale(0.97); background: #2563eb; }
-        .btn-submit:disabled { opacity: 0.4; }
-        .btn-status { background: #334155; color: #94a3b8; font-size: 14px; }
-        .btn-status:active { transform: scale(0.97); }
-        .btn-setup { background: transparent; color: #64748b; font-size: 13px;
-                     margin-top: 12px; text-decoration: underline; }
-        #result {
-            margin-top: 14px; padding: 12px 14px; border-radius: 10px;
-            font-size: 14px; display: none; line-height: 1.4;
-        }
-        .success { background: #064e3b; color: #6ee7b7; }
-        .error { background: #7f1d1d; color: #fca5a5; }
-        .loading { background: #1e293b; color: #94a3b8; }
-        .spinner { display: inline-block; width: 14px; height: 14px;
-                   border: 2px solid #64748b; border-top-color: #f8fafc;
-                   border-radius: 50%; animation: spin 0.8s linear infinite;
-                   vertical-align: middle; margin-right: 6px; }
-        @keyframes spin { to { transform: rotate(360deg); } }
-        .setup-panel { display: none; margin-top: 16px; }
-        .setup-panel textarea { min-height: 120px; font-size: 12px; }
-        .token-status { font-size: 12px; color: #64748b; text-align: center; margin-top: 10px; }
-        .setup-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
-        .tab-btn { flex: 1; padding: 10px; border-radius: 8px; border: none;
-                   font-size: 13px; cursor: pointer; background: #0f172a; color: #64748b; }
-        .tab-btn.active { background: #3b82f6; color: white; }
-        .tab-content { display: none; }
-        .tab-content.active { display: block; }
-        .hint { font-size: 12px; color: #64748b; margin-top: 8px; line-height: 1.5; }
-    </style>
-</head>
-<body>
-    <div class="card">
-        <div class="header">
-            <div class="logo">K</div>
-            <div>
-                <h1>Kalvium Worklog</h1>
-                <div class="sub" id="dateDisplay"></div>
-            </div>
-        </div>
-
-        <textarea id="text" placeholder="What did you worked on today?">Working on assigned task</textarea>
-
-        <button class="btn btn-submit" id="submitBtn" onclick="submitWorklog()">Submit Worklog</button>
-        <button class="btn btn-status" onclick="checkStatus()">Check Status</button>
-        <button class="btn btn-setup" onclick="toggleSetup()">Setup / Token</button>
-
-        <div class="setup-panel" id="setupPanel">
-            <div class="setup-tabs">
-                <button class="tab-btn active" onclick="switchTab('paste')">Paste Token</button>
-                <button class="tab-btn" onclick="switchTab('url')">From URL</button>
-            </div>
-
-            <div class="tab-content active" id="tab-paste">
-                <p class="sub" style="margin-bottom:10px">Paste token JSON from computer setup:</p>
-                <textarea id="tokenInput" placeholder='{"refresh_token":"eyJ...","access_token":"eyJ..."}'></textarea>
-                <button class="btn btn-submit" onclick="saveToken()" style="margin-top:8px">Save Token</button>
-            </div>
-
-            <div class="tab-content" id="tab-url">
-                <p class="sub" style="margin-bottom:10px">If you opened a link with a token, it will be loaded automatically.</p>
-                <p class="hint" id="urlStatus">No token found in URL.</p>
-            </div>
-        </div>
-
-        <div class="token-status" id="tokenStatus"></div>
-        <div id="result"></div>
-    </div>
-
-<script>
-// ─── Config ──────────────────────────────────────────────────────────────
-const KEYCLOAK_URL = "https://auth.kalvium.community/auth/realms/kalvium/protocol/openid-connect/token";
-const CLIENT_ID = "login_client";
-const WORK_STATUS = "Working on-site (Company location)";
-const CATEGORY = "on_site";
-const API_BASE = "https://student-api.kalvium.community/api/internships/worklogs";
-
-// ─── JWT decode (extract position_id from token sub claim) ───────────────
-function decodeJwt(token) {
-    try {
-        const payload = token.split('.')[1];
-        const decoded = atob(payload.replace(/-/g, '+').replace(/_/g, '/'));
-        return JSON.parse(decoded);
-    } catch (e) { return null; }
-}
-
-function getPositionId() {
-    const tokens = getTokenData();
-    if (!tokens || !tokens.access_token) return null;
-    const payload = decodeJwt(tokens.access_token);
-    return payload ? payload.sub : null;
-}
-
-function getWorklogApi() {
-    const posId = getPositionId();
-    return posId ? `${API_BASE}/${posId}` : null;
-}
-
-// ─── Token Management ────────────────────────────────────────────────────
-function getTokenData() {
-    try { return JSON.parse(localStorage.getItem("kalvium_tokens")); }
-    catch { return null; }
-}
-
-function saveTokenData(data) {
-    localStorage.setItem("kalvium_tokens", JSON.stringify(data));
-}
-
-let pendingAction = null;
-
-async function refreshAccessToken() {
-    const tokens = getTokenData();
-    if (!tokens || !tokens.refresh_token) {
-        const err = new Error("No token stored");
-        err.code = "NO_TOKEN";
-        throw err;
-    }
-
-    const body = new URLSearchParams({
-        grant_type: "refresh_token",
-        client_id: CLIENT_ID,
-        refresh_token: tokens.refresh_token
-    });
-
-    const res = await fetch(KEYCLOAK_URL, {
-        method: "POST",
-        headers: { "Content-Type": "application/x-www-form-urlencoded" },
-        body: body
-    });
-
-    const data = await res.json();
-    if (data.error) {
-        const err = new Error(`Token expired (${data.error})`);
-        err.code = "TOKEN_EXPIRED";
-        throw err;
-    }
-
-    saveTokenData(data);
-    updateTokenStatus();
-    return data.access_token;
-}
-
-function showTokenExpiredUI(originalError) {
-    const result = document.getElementById("result");
-    result.style.display = "block";
-    result.className = "error";
-    result.innerHTML = `
-        ✗ ${originalError.message}<br><br>
-        <b>Token expired.</b> Get a new token from your computer:<br>
-        1. Run <code>python ~/.kalvium/capture_token.py</code> on your computer<br>
-        2. Copy the token JSON<br>
-        3. Tap "Setup / Token" below and paste it<br>
-        4. Your action will retry automatically
-    `;
-    document.getElementById("setupPanel").style.display = "block";
-    document.getElementById("tokenInput").focus();
-}
-
-// ─── Submit Worklog ──────────────────────────────────────────────────────
-async function submitWorklog() {
-    const text = document.getElementById("text").value.trim();
-    if (!text) return alert("Enter some text first");
-
-    pendingAction = { type: 'submit', text: text };
-    await doSubmit(text);
-}
-
-async function doSubmit(text) {
-    const btn = document.getElementById("submitBtn");
-    const result = document.getElementById("result");
-    btn.disabled = true;
-    result.style.display = "block";
-    result.className = "loading";
-    result.innerHTML = '<span class="spinner"></span>Refreshing token...';
-
-    try {
-        const accessToken = await refreshAccessToken();
-        const worklogApi = getWorklogApi();
-        if (!worklogApi) throw new Error("Could not determine position ID from token");
-
-        result.innerHTML = '<span class="spinner"></span>Submitting worklog...';
-
-        const body = JSON.stringify({
-            title: WORK_STATUS, description: WORK_STATUS, category: CATEGORY,
-            timeSpent: 0, priorityLevel: "medium", blockers: "",
-            worklogs: JSON.stringify({ content: `<p>${text}</p>` })
-        });
-
-        const res = await fetch(worklogApi, {
-            method: "PUT",
-            headers: {
-                "authorization": `Bearer ${accessToken}`,
-                "content-type": "application/json",
-                "origin": "https://kalvium.community",
-                "referer": "https://kalvium.community/"
-            },
-            body: body
-        });
-
-        const data = await res.json();
-        if (res.ok && data.worklogId) {
-            result.className = "success";
-            result.innerHTML = `✓ Submitted!<br>ID: ${data.worklogId} | Status: ${data.status}`;
-            pendingAction = null;
-        } else if (res.status === 401 || res.status === 403) {
-            const err = new Error("Token rejected by server");
-            err.code = "TOKEN_EXPIRED";
-            throw err;
-        } else if (res.status === 404) {
-            result.className = "success";
-            result.innerHTML = "✓ Already submitted today!";
-            pendingAction = null;
-        } else {
-            result.className = "error";
-            result.innerHTML = `✗ ${data.message || "Failed"}`;
-        }
-    } catch (e) {
-        if (e.code === "TOKEN_EXPIRED" || e.code === "NO_TOKEN") {
-            showTokenExpiredUI(e);
-        } else {
-            result.className = "error";
-            result.innerHTML = `✗ ${e.message}`;
-        }
-    }
-    btn.disabled = false;
-}
-
-// ─── Check Status ────────────────────────────────────────────────────────
-async function checkStatus() {
-    pendingAction = { type: 'status' };
-    await doCheckStatus();
-}
-
-async function doCheckStatus() {
-    const result = document.getElementById("result");
-    result.style.display = "block";
-    result.className = "loading";
-    result.innerHTML = '<span class="spinner"></span>Checking...';
-
-    try {
-        const accessToken = await refreshAccessToken();
-        const worklogApi = getWorklogApi();
-        if (!worklogApi) throw new Error("Could not determine position ID from token");
-
-        const res = await fetch(worklogApi, {
-            headers: { "authorization": `Bearer ${accessToken}` }
-        });
-
-        if (res.status === 401 || res.status === 403) {
-            const err = new Error("Token rejected by server");
-            err.code = "TOKEN_EXPIRED";
-            throw err;
-        }
-
-        const worklogs = await res.json();
-        const today = new Date().toISOString().slice(0, 10);
-
-        let html = "";
-        for (const w of worklogs.slice(0, 5)) {
-            const date = (w.worklogDate || "").slice(0, 10);
-            const status = w.status || "?";
-            let content = "";
-            if (w.worklogs) content = (w.worklogs.content || "").replace(/<\/?p>/g, "");
-            const marker = date === today ? " ← TODAY" : "";
-            html += `${date} | ${status} | ${content}${marker}<br>`;
-        }
-        result.className = "success";
-        result.innerHTML = html;
-        pendingAction = null;
-    } catch (e) {
-        if (e.code === "TOKEN_EXPIRED" || e.code === "NO_TOKEN") {
-            showTokenExpiredUI(e);
-        } else {
-            result.className = "error";
-            result.innerHTML = `✗ ${e.message}`;
-        }
-    }
-}
-
-// ─── Setup ───────────────────────────────────────────────────────────────
-function toggleSetup() {
-    document.getElementById("setupPanel").style.display =
-        document.getElementById("setupPanel").style.display === "block" ? "none" : "block";
-}
-
-function switchTab(tab) {
-    document.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active"));
-    document.querySelectorAll(".tab-content").forEach(c => c.classList.remove("active"));
-    event.target.classList.add("active");
-    document.getElementById("tab-" + tab).classList.add("active");
-}
-
-function saveToken() {
-    const input = document.getElementById("tokenInput").value.trim();
-    try {
-        const data = JSON.parse(input);
-        if (data.refresh_token) {
-            saveTokenData(data);
-            updateTokenStatus();
-            document.getElementById("tokenInput").value = "";
-            document.getElementById("setupPanel").style.display = "none";
-
-            // Auto-retry the pending action if there was one
-            if (pendingAction) {
-                if (pendingAction.type === 'submit') {
-                    alert("Token saved! Retrying your submission...");
-                    doSubmit(pendingAction.text);
-                } else if (pendingAction.type === 'status') {
-                    alert("Token saved! Retrying status check...");
-                    doCheckStatus();
-                }
-            } else {
-                alert("Token saved! You can now submit worklogs.");
-            }
-        } else {
-            alert("Invalid token JSON — no refresh_token found");
-        }
-    } catch (e) {
-        alert("Invalid JSON: " + e.message);
-    }
-}
-
-function updateTokenStatus() {
-    const tokens = getTokenData();
-    const el = document.getElementById("tokenStatus");
-    if (tokens && tokens.refresh_token) {
-        const posId = getPositionId();
-        el.textContent = `✓ Token stored${posId ? ' (ID: ' + posId.slice(0,8) + '...)' : ''}`;
-        el.style.color = "#6ee7b7";
-    } else {
-        el.textContent = "⚠ No token — tap Setup to add";
-        el.style.color = "#fca5a5";
-    }
-}
-
-// ─── URL token loading (for hosted version) ──────────────────────────────
-function loadTokenFromUrl() {
-    // Check URL hash for token (e.g., #token=base64encodedjson)
-    const hash = window.location.hash;
-    if (hash.startsWith("#token=")) {
-        try {
-            const encoded = hash.substring(7);
-            const decoded = atob(encoded);
-            const data = JSON.parse(decoded);
-            if (data.refresh_token) {
-                saveTokenData(data);
-                updateTokenStatus();
-                document.getElementById("urlStatus").textContent = "✓ Token loaded from URL!";
-                document.getElementById("urlStatus").style.color = "#6ee7b7";
-                // Clean the URL
-                history.replaceState(null, "", window.location.pathname);
-            }
-        } catch (e) {
-            document.getElementById("urlStatus").textContent = "✗ Invalid token in URL";
-        }
-    }
-    // Also check query param
-    const params = new URLSearchParams(window.location.search);
-    const tokenParam = params.get("token");
-    if (tokenParam) {
-        try {
-            const data = JSON.parse(atob(tokenParam));
-            if (data.refresh_token) {
-                saveTokenData(data);
-                updateTokenStatus();
-                document.getElementById("urlStatus").textContent = "✓ Token loaded from URL!";
-                document.getElementById("urlStatus").style.color = "#6ee7b7";
-                history.replaceState(null, "", window.location.pathname);
-            }
-        } catch (e) {}
-    }
-}
-
-// ─── Init ────────────────────────────────────────────────────────────────
-document.getElementById("dateDisplay").textContent = new Date().toLocaleDateString("en-US", {
-    weekday: "long", year: "numeric", month: "long", day: "numeric"
-});
-loadTokenFromUrl();
-updateTokenStatus();
-</script>
-</body>
-</html>