Hugging Face's logo

Spaces:
mishrabp
/
northwind-api-gateway
Runtime error

App Files Community
northwind-api-gateway
File size: 5,302 Bytes 
97dab2a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 
<!-- Desktop Header -->
<header class="w-full items-center bg-white py-2 px-6 hidden sm:flex">
    <div class="w-1/2">
        <!-- Countdown Timer -->
        <!-- <% if (userName) { %> -->
        <div class="countdown-timer">
          Token expires in: <span id="countdown">--:--:--</span>
        </div>
        <!-- <% } %> -->
    </div>

    <!-- Notification Marquee -->
    <div class="w-full bg-yellow-100 py-2 px-4 text-center">
        <marquee behavior="scroll" direction="left" class="text-yellow-800 font-semibold">
            <div id="notification">
            🚀 Welcome to the OAuth App! Stay tuned for updates and new features. 🚀
            </div>
        </marquee>
    </div>

    <div x-data="{ isOpen: false }" class="relative w-1/2 flex justify-end">
        <% if (userName) { %>
        <button @click="isOpen = !isOpen" class="realtive z-10 w-12 h-12 rounded-full overflow-hidden border-4 border-gray-400 hover:border-gray-300 focus:border-gray-300 focus:outline-none">
          <img src="/photos/<%= userId %>.jpg" alt="User Photo">
        </button>
        <% } else { %>
        <button @click="isOpen = !isOpen" class="realtive z-10 w-12 h-12 rounded-full overflow-hidden border-4 border-gray-400 hover:border-gray-300 focus:border-gray-300 focus:outline-none">
            <img src="/images/profile.png" alt="User Photo">
        </button>
        <% } %>
        <button x-show="isOpen" @click="isOpen = false" class="h-full w-full fixed inset-0 cursor-default"></button>
        <div x-show="isOpen" class="absolute w-32 bg-white rounded-lg shadow-lg py-2 mt-16">
            <% if (userName) { %>
                <a href="/auth/profile" class="block px-4 py-2 account-link hover:text-white"><%= userName %></a>
                <a href="/auth/logout" class="block px-4 py-2 account-link hover:text-white">Sign Out</a>
            <% } else { %>
                <a href="/auth/login" class="block px-4 py-2 account-link hover:text-white">Sign In</a>
            <% } %>
        </div>
  </div>
</header>

<!-- Mobile Header & Nav -->
<header x-data="{ isOpen: false }" class="w-full bg-sidebar py-5 px-6 sm:hidden">
  <div class="flex items-center justify-between">
      <a href="index.html" class="text-white text-3xl font-semibold uppercase hover:text-gray-300">Oauth</a>
      <button @click="isOpen = !isOpen" class="text-white text-3xl focus:outline-none">
          <i x-show="!isOpen" class="fas fa-bars"></i>
          <i x-show="isOpen" class="fas fa-times"></i>
      </button>
  </div>

  <%- include('./mobilenav') %>

  
  <!-- <button class="w-full bg-white cta-btn font-semibold py-2 mt-5 rounded-br-lg rounded-bl-lg rounded-tr-lg shadow-lg hover:shadow-xl hover:bg-gray-300 flex items-center justify-center">
      <i class="fas fa-plus mr-3"></i> New Report
  </button> -->
</header>

<script>
// Function to decode a JWT token
function decodeJWT(token) {
    const payload = token.split('.')[1];
    return JSON.parse(atob(payload));
}

// Function to start the countdown
function startCountdown(expiryTime) {
    const countdownElement = document.getElementById('countdown');

    function updateCountdown() {
        const now = new Date().getTime();
        const distance = expiryTime * 1000 - now; // Convert expiryTime from seconds to milliseconds

        if (distance < 0) {
            countdownElement.innerHTML = "EXPIRED";
            clearInterval(intervalId);
            return;
        }

        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);

        countdownElement.innerHTML = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    }

    // Update the countdown every second
    //**const intervalId = setInterval(updateCountdown, 1000);
    //**updateCountdown(); // Initial call to display immediately
}

// Function to refresh the expiry time
function refreshExpiryTime() {
    const accessToken = getCookie('accessToken');

    if (accessToken) {
        const decodedToken = decodeJWT(accessToken);
        const expiryTime = decodedToken.exp;
        startCountdown(expiryTime);
    } else {
        console.error("Access token not found in cookies");
        document.getElementById('countdown').innerHTML = "N/A";
    }
}

// Refresh the expiry time every 5 seconds
//**setInterval(refreshExpiryTime, 5000);
//**refreshExpiryTime(); // Initial call to set up countdown immediately


</script>

<script src="http://localhost:3002/socket.io/socket.io.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", () => {
      const socket = io('http://localhost:3002'); // connect to NestJS server

      socket.on('broadcastMessage', (data) => {
        const container = document.getElementById('notification');
        if(data.message && data.message.length > 0) {
            container.innerText = data.message;
        } else {
            container.innerText = "🚀 Welcome to the OAuth App! Stay tuned for updates and new features. 🚀";
        }
        //console.log("Message received from server:", data);
      });
    });
  </script>