Refactor authentication handling and enhance UI components. Removed authentication check from segment regeneration function. Updated login form to include tabbed interface for login and signup, improved styling with transitions and animations, and added new elements for better user experience.

app.py

@@ -227,8 +227,6 @@ async def regenerate_segment(
     tharun_voice_id: str = Form(...),
     akshara_voice_id: str = Form(...),
 ):
-    if not authenticated:
-        raise HTTPException(status_code=401, detail="Authentication required")
 
     try:
         # Select the appropriate voice ID based on speaker

static/styles.css

@@ -389,12 +389,67 @@ form button[type="submit"] {
     backdrop-filter: blur(10px);
     width: 100%;
     max-width: 400px;
+    transition: all 0.3s ease;
+}
+
+.login-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
+}
+
+.auth-tabs {
+    display: flex;
+    margin-bottom: 30px;
+    gap: 10px;
+}
+
+.tab-btn {
+    flex: 1;
+    padding: 15px;
+    background: transparent;
+    border: none;
+    color: #cccccc;
+    cursor: pointer;
+    font-size: 1.1em;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+}
+
+.tab-btn:hover {
+    color: #4caf50;
+    background: rgba(76, 175, 80, 0.1);
+}
+
+.tab-btn.active {
+    color: #4caf50;
+    border-bottom: 2px solid #4caf50;
+}
+
+.tab-content {
+    display: none;
+    animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.tab-content.active {
+    display: block;
 }
 
 .login-card h2 {
     text-align: center;
     color: #4caf50;
     margin-bottom: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
 }
 
 .login-form {
@@ -403,41 +458,72 @@ form button[type="submit"] {
     gap: 20px;
 }
 
-.login-form .input-group {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
+.input-group {
+    position: relative;
 }
 
-.login-form label {
-    color: #ffffff;
+.input-group label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+    color: #cccccc;
 }
 
-.login-form input {
+.input-group input {
+    width: 100%;
     padding: 12px;
+    padding-left: 15px;
     border-radius: 8px;
     border: 1px solid #444;
     background: #333;
     color: white;
     transition: all 0.3s ease;
+    font-size: 1em;
+    box-sizing: border-box;
 }
 
-.login-form input:focus {
+.input-group input:focus {
     border-color: #4caf50;
     outline: none;
+    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
 }
 
-.login-form button {
-    background: linear-gradient(45deg, #4caf50, #45a049);
-    color: white;
-    padding: 15px;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
+.input-group input::placeholder {
+    color: #666;
+}
+
+.signup-section {
+    text-align: center;
+    padding: 30px 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+}
+
+.signup-section i.fa-3x {
+    color: #4caf50;
+    margin-bottom: 10px;
+}
+
+.signup-section p {
+    margin: 0;
+    color: #cccccc;
     font-size: 1.1em;
-    transition: transform 0.2s ease;
 }
 
-.login-form button:hover {
+.contact-text span {
+    color: #4caf50;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    transition: all 0.3s ease;
+}
+
+.contact-text a:hover {
+    color: #45a049;
+    text-decoration: none;
     transform: translateY(-2px);
 }

templates/index.html

@@ -12,20 +12,79 @@
     {% if not is_authenticated %}
     <div class="login-container">
       <div class="login-card">
-        <h2>Login</h2>
-        <form action="/login" method="POST" class="login-form">
-          <div class="input-group">
-            <label for="username">Username</label>
-            <input type="text" id="username" name="username" required />
-          </div>
-          <div class="input-group">
-            <label for="password">Password</label>
-            <input type="password" id="password" name="password" required />
+        <div class="auth-tabs">
+          <button class="tab-btn active" onclick="switchTab('login')">
+            <i class="fas fa-sign-in-alt"></i> Login
+          </button>
+          <button class="tab-btn" onclick="switchTab('signup')">
+            <i class="fas fa-user-plus"></i> Sign Up
+          </button>
+        </div>
+
+        <div id="login-content" class="tab-content active">
+          <h2><i class="fas fa-lock"></i> Login</h2>
+          <form action="/login" method="POST" class="login-form">
+            <div class="input-group">
+              <label for="username"><i class="fas fa-user"></i> Username</label>
+              <input
+                type="text"
+                id="username"
+                name="username"
+                placeholder="Enter your username"
+                required
+              />
+            </div>
+            <div class="input-group">
+              <label for="password"><i class="fas fa-key"></i> Password</label>
+              <input
+                type="password"
+                id="password"
+                name="password"
+                placeholder="Enter your password"
+                required
+              />
+            </div>
+            <button type="submit">
+              <i class="fas fa-sign-in-alt"></i> Login
+            </button>
+          </form>
+        </div>
+
+        <div id="signup-content" class="tab-content">
+          <h2><i class="fas fa-user-plus"></i> Sign Up</h2>
+          <div class="signup-section">
+            <i class="fas fa-envelope-open-text fa-3x"></i>
+            <p>
+              Due to skyrocketing API costs, access to NotebookMg is only for
+              the chosen ones.
+            </p>
+            <p class="contact-text">
+              To see if you're worthy of entry, hit up
+              <span>Ronit</span>
+              or
+              <span>Manikanta K</span>
+              on Slack—they're the gatekeepers 🔮
+            </p>
           </div>
-          <button type="submit">Login</button>
-        </form>
+        </div>
       </div>
     </div>
+
+    <script>
+      function switchTab(tab) {
+        // Update tab buttons
+        document.querySelectorAll(".tab-btn").forEach((btn) => {
+          btn.classList.remove("active");
+        });
+        event.currentTarget.classList.add("active");
+
+        // Update content
+        document.querySelectorAll(".tab-content").forEach((content) => {
+          content.classList.remove("active");
+        });
+        document.getElementById(`${tab}-content`).classList.add("active");
+      }
+    </script>
     {% else %}
     <div class="hero">
       <h1>NotebookMg</h1>