embeded-component-prototype/StructuredRequests.html at main · Scalesoft/embeded-component-prototype · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>App B - Embed Auth Status</title>
    <style>
        html, body {
            font-family: Arial, sans-serif;
            color: white;
        }
        .user-text {
            font-size: 18px;
            margin-bottom: 20px;
        }

        .user-image {
            max-width: 100%;
            max-height: 100%;
            border-radius: 12px;
            background: white;
            box-shadow: 0 8px 20px rgba(0,0,0,0.3);
        }

        .red {
            font-weight: bold;
            color: red;
        }

        .green {
            font-weight: bold;
            color: white;
        }
    </style>
</head>

<body>
<div class="container">
    <div id="userText" class="red">Uzivatel neni prihlasen</div>
    <img id="userImage" src="" alt="" class="user-image" style="display:none;">
</div>

<script>
    // Ask parent - FE - for current login status immediately
    window.parent.postMessage({ type: "REQUEST_AUTH_STATE" }, "*");

    const userText = document.getElementById("userText");
    const userImage = document.getElementById("userImage");

    // Receive updates from parent - FE
    window.addEventListener("message", (event) => {
        if (event.origin !== "https://mimaisawesome.github.io" &&
            event.origin !== "http://localhost:5173") return;

        if (event.data.type === "AUTH_UPDATE") {
            if (event.data.loggedIn) {
                userText.textContent = `Uzivatel je prihlasen jako: ${event.data.user}`;
                userText.className = "green";

                userImage.src = "src/str.png";
                userImage.style.display = "block";
            } else {
                userText.textContent = "Uzivatel neni prihlasen";
                userText.className = "red";
                userImage.style.display = "none";
            }
        }
    });
</script>

</body>
</html>