Add logout function

web/static/css/main.css

@@ -18,6 +18,10 @@ body {
     max-height: 100%;
 }
 
+a {
+    text-decoration: none;
+}
+
 /* width */
 ::-webkit-scrollbar {
     width: 10px;
@@ -40,6 +44,51 @@ body {
     min-height: 100%;
 }
 
+.dropdown-container {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    cursor: pointer;
+    border-radius: 10px;
+    transition: all .1s linear;
+}
+
+.dropdown-container:hover {
+    background-color: rgba(142, 142, 142, 20%);
+}
+
+.dropdown-container:hover ul {
+    opacity: 1;
+}
+
+.dropdown-container ul {
+    list-style: none;
+    position: absolute;
+    padding: .5rem;
+    border-radius: 10px;
+    top: 68px;
+    width: 100%;
+    opacity: 0;
+    background-color: rgba(142, 142, 142, 20%);
+    transition: all .1s linear;
+}
+
+.dropdown-container li {
+    display: flex;
+    padding: .5rem .8rem;
+    justify-content: center;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    border-radius: 4px;
+    transition: all .2s linear;
+    color: #FF0000;
+}
+
+.dropdown-container li:hover {
+    background-color: rgba(142, 142, 142, 30%);
+}
+
 .header {
     display: flex;
     padding: 1rem;
@@ -167,12 +216,6 @@ body {
     align-items: center;
     border-radius: 12px;
     padding: 10px;
-    transition: all .2s;
-    cursor: pointer;
-}
-
-.header .right .account:hover {
-    background-color: rgba(142, 142, 142, 20%);
 }
 
 .header .right .account img {

web/templates/index.html

@@ -42,9 +42,16 @@
                 </div>
             </div>
             <div class="right">
-                <div class="account">
-                    <img src="{{ user.avatar.url }}" />
-                    <p>{{ user.username }}</p>
+                <div class="dropdown-container">
+                    <div class="account">
+                        <img src="{{ user.avatar.url }}" />
+                        <p>{{ user.username }}</p>
+                    </div>
+                    <ul>
+                        <a class="dropdown-item" href="logout">
+                            <li><i class="fa-solid fa-right-from-bracket"></i> Log Out</li>
+                        </a>
+                    </ul>
                 </div>
             </div>
         </div>

web/webapp.py

@@ -159,6 +159,14 @@ def login():
     }
     return redirect(f'{DISCORD_API_BASE_URL}/oauth2/authorize?{"&".join([f"{k}={v}" for k, v in params.items()])}')
 
+# Logout page
+@app.route('/logout')
+@login_required
+def logout(user: User):
+    session.pop("discord_token", None)
+    
+    return redirect(url_for("home"))
+
 # callback page
 @app.route('/callback')
 def callback():