first commit

views/admin/clients.ejs

@@ -0,0 +1,121 @@
+<% title = 'Admin - OAuth Clients'; %>
+<% include ../layouts/main.ejs %>
+<div class="row">
+  <div class="col-12">
+    <ul class="nav nav-tabs mb-3">
+      <li class="nav-item"><a class="nav-link" href="/admin/users">Users</a></li>
+      <li class="nav-item"><a class="nav-link active" href="/admin/clients">OAuth Clients</a></li>
+    </ul>
+
+    <div class="card shadow">
+      <div class="card-header d-flex justify-content-between align-items-center">
+        <span>OAuth Clients (<%= clients.length %>)</span>
+        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#createClientModal">+ Add Client</button>
+      </div>
+      <div class="card-body p-0">
+        <table class="table table-striped mb-0">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Client ID</th>
+              <th>Confidential</th>
+              <th>Grants</th>
+              <th>Owner</th>
+              <th>Created</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <% clients.forEach(function(c) { %>
+            <tr>
+              <td><%= c.name %></td>
+              <td><code><%= c.clientId %></code></td>
+              <td><%= c.isConfidential ? 'Yes' : 'No' %></td>
+              <td><%= c.grants.join(', ') %></td>
+              <td><%= c.owner ? c.owner.email : '-' %></td>
+              <td><%= new Date(c.createdAt).toLocaleDateString() %></td>
+              <td>
+                <button class="btn btn-sm btn-outline-danger" onclick="deleteClient('<%= c.id %>')">Delete</button>
+              </td>
+            </tr>
+            <% }); %>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal fade" id="createClientModal" tabindex="-1">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Create OAuth Client</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+      </div>
+      <div class="modal-body">
+        <form id="createClientForm">
+          <div class="mb-3">
+            <label class="form-label">Name</label>
+            <input type="text" class="form-control" id="clientName" required>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Client ID</label>
+            <input type="text" class="form-control" id="clientId" required>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Description</label>
+            <input type="text" class="form-control" id="clientDesc">
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Redirect URIs (comma separated)</label>
+            <input type="text" class="form-control" id="clientUris" placeholder="http://localhost:5173/callback">
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Grants (comma separated)</label>
+            <input type="text" class="form-control" id="clientGrants" value="authorization_code,refresh_token">
+          </div>
+          <div class="mb-3 form-check">
+            <input type="checkbox" class="form-check-input" id="clientConfidential" checked>
+            <label class="form-check-label">Confidential</label>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-primary" onclick="createClient()">Create</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  const token = localStorage.getItem('access_token');
+  if (!token) window.location.href = '/login';
+
+  async function createClient() {
+    const res = await fetch('/api/admin/clients', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
+      body: JSON.stringify({
+        name: document.getElementById('clientName').value,
+        clientId: document.getElementById('clientId').value,
+        description: document.getElementById('clientDesc').value,
+        redirectUris: document.getElementById('clientUris').value.split(',').map(s => s.trim()),
+        grants: document.getElementById('clientGrants').value.split(',').map(s => s.trim()),
+        isConfidential: document.getElementById('clientConfidential').checked,
+      }),
+    });
+    if (res.ok) location.reload();
+    else alert('Failed to create client');
+  }
+
+  async function deleteClient(id) {
+    if (!confirm('Delete this client?')) return;
+    const res = await fetch(`/api/admin/clients/${id}`, {
+      method: 'DELETE',
+      headers: { 'Authorization': `Bearer ${token}` },
+    });
+    if (res.ok) location.reload();
+    else alert('Failed to delete client');
+  }
+</script>

views/admin/users.ejs

@@ -0,0 +1,141 @@
+<% title = 'Admin'; %>
+<% include ../layouts/main.ejs %>
+<div class="row">
+  <div class="col-12">
+    <div class="row mb-4">
+      <div class="col-md-4">
+        <div class="card text-bg-primary">
+          <div class="card-body">
+            <h5 class="card-title">Users</h5>
+            <h2><%= stats.users %></h2>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-4">
+        <div class="card text-bg-success">
+          <div class="card-body">
+            <h5 class="card-title">OAuth Clients</h5>
+            <h2><%= stats.clients %></h2>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-4">
+        <div class="card text-bg-info">
+          <div class="card-body">
+            <h5 class="card-title">Active Sessions</h5>
+            <h2><%= stats.activeSessions %></h2>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <ul class="nav nav-tabs mb-3">
+      <li class="nav-item"><a class="nav-link active" href="/admin/users">Users</a></li>
+      <li class="nav-item"><a class="nav-link" href="/admin/clients">OAuth Clients</a></li>
+    </ul>
+
+    <div class="card shadow">
+      <div class="card-header d-flex justify-content-between align-items-center">
+        <span>Users (<%= users.length %>)</span>
+        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#createUserModal">+ Add User</button>
+      </div>
+      <div class="card-body p-0">
+        <table class="table table-striped mb-0">
+          <thead>
+            <tr>
+              <th>Email</th>
+              <th>Name</th>
+              <th>Role</th>
+              <th>Active</th>
+              <th>Sessions</th>
+              <th>Created</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <% users.forEach(function(u) { %>
+            <tr>
+              <td><%= u.email %></td>
+              <td><%= u.displayName || '-' %></td>
+              <td><span class="badge bg-<%= u.role === 'ADMIN' ? 'danger' : 'secondary' %>"><%= u.role %></span></td>
+              <td><%= u.isActive ? 'Yes' : 'No' %></td>
+              <td><%= u._count.sessions %></td>
+              <td><%= new Date(u.createdAt).toLocaleDateString() %></td>
+              <td>
+                <button class="btn btn-sm btn-outline-danger" onclick="deleteUser('<%= u.id %>')">Delete</button>
+              </td>
+            </tr>
+            <% }); %>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal fade" id="createUserModal" tabindex="-1">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Create User</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+      </div>
+      <div class="modal-body">
+        <form id="createUserForm">
+          <div class="mb-3">
+            <label class="form-label">Email</label>
+            <input type="email" class="form-control" id="newUserEmail" required>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Password</label>
+            <input type="password" class="form-control" id="newUserPassword" minlength="8" required>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Display Name</label>
+            <input type="text" class="form-control" id="newUserName">
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Role</label>
+            <select class="form-control" id="newUserRole">
+              <option value="USER">User</option>
+              <option value="ADMIN">Admin</option>
+            </select>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-primary" onclick="createUser()">Create</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  const token = localStorage.getItem('access_token');
+  if (!token) window.location.href = '/login';
+
+  async function createUser() {
+    const res = await fetch('/api/admin/users', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
+      body: JSON.stringify({
+        email: document.getElementById('newUserEmail').value,
+        password: document.getElementById('newUserPassword').value,
+        displayName: document.getElementById('newUserName').value,
+        role: document.getElementById('newUserRole').value,
+      }),
+    });
+    if (res.ok) location.reload();
+    else alert('Failed to create user');
+  }
+
+  async function deleteUser(id) {
+    if (!confirm('Delete this user?')) return;
+    const res = await fetch(`/api/admin/users/${id}`, {
+      method: 'DELETE',
+      headers: { 'Authorization': `Bearer ${token}` },
+    });
+    if (res.ok) location.reload();
+    else alert('Failed to delete user');
+  }
+</script>

views/auth/login.ejs

@@ -0,0 +1,168 @@
+<% title = 'Login'; %>
+<% include ../layouts/main.ejs %>
+<div class="row justify-content-center">
+  <div class="col-md-5">
+    <div class="card shadow">
+      <div class="card-body p-4">
+        <h3 class="card-title text-center mb-4">Sign In</h3>
+
+        <ul class="nav nav-tabs mb-3" id="loginTabs" role="tablist">
+          <li class="nav-item" role="presentation">
+            <button class="nav-link active" id="password-tab" data-bs-toggle="tab" data-bs-target="#password" type="button">Password</button>
+          </li>
+          <li class="nav-item" role="presentation">
+            <button class="nav-link" id="email-code-tab" data-bs-toggle="tab" data-bs-target="#email-code" type="button">Email Code</button>
+          </li>
+          <li class="nav-item" role="presentation">
+            <button class="nav-link" id="qr-tab" data-bs-toggle="tab" data-bs-target="#qr" type="button">QR Code</button>
+          </li>
+        </ul>
+
+        <div class="tab-content">
+          <div class="tab-pane fade show active" id="password">
+            <form id="loginForm">
+              <div class="mb-3">
+                <label class="form-label">Email</label>
+                <input type="email" class="form-control" id="loginEmail" required>
+              </div>
+              <div class="mb-3">
+                <label class="form-label">Password</label>
+                <input type="password" class="form-control" id="loginPassword" required>
+              </div>
+              <button type="submit" class="btn btn-primary w-100">Sign In</button>
+            </form>
+          </div>
+
+          <div class="tab-pane fade" id="email-code">
+            <form id="emailCodeForm">
+              <div class="mb-3">
+                <label class="form-label">Email</label>
+                <input type="email" class="form-control" id="codeEmail" required>
+              </div>
+              <div class="mb-3">
+                <label class="form-label">Code</label>
+                <div class="input-group">
+                  <input type="text" class="form-control" id="verificationCode" placeholder="000000" required>
+                  <button type="button" class="btn btn-outline-secondary" id="sendCodeBtn">Send Code</button>
+                </div>
+              </div>
+              <button type="submit" class="btn btn-primary w-100">Sign In with Code</button>
+            </form>
+          </div>
+
+          <div class="tab-pane fade" id="qr">
+            <div class="text-center">
+              <p class="mb-2">Scan with mobile app</p>
+              <div id="qrContainer" class="mb-3">
+                <button class="btn btn-outline-primary" id="showQrBtn">Show QR Code</button>
+              </div>
+              <div id="qrStatus" class="alert d-none"></div>
+            </div>
+          </div>
+        </div>
+
+        <div id="errorMessage" class="alert alert-danger mt-3 d-none"></div>
+        <div id="successMessage" class="alert alert-success mt-3 d-none"></div>
+
+        <p class="text-center mt-3 mb-0">
+          <a href="/register">Don't have an account? Register</a>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  const API = '/api';
+
+  document.getElementById('loginForm').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const email = document.getElementById('loginEmail').value;
+    const password = document.getElementById('loginPassword').value;
+    try {
+      const res = await fetch(`${API}/auth/login`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      });
+      const data = await res.json();
+      if (res.ok) {
+        localStorage.setItem('access_token', data.accessToken);
+        localStorage.setItem('refresh_token', data.refreshToken);
+        window.location.href = '/profile';
+      } else {
+        showError(data.message || 'Login failed');
+      }
+    } catch (err) {
+      showError('Network error');
+    }
+  });
+
+  document.getElementById('sendCodeBtn').addEventListener('click', async () => {
+    const email = document.getElementById('codeEmail').value;
+    if (!email) return;
+    try {
+      await fetch(`${API}/auth/send-email-code`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email }),
+      });
+      alert('Code sent!');
+    } catch { alert('Failed to send code'); }
+  });
+
+  document.getElementById('emailCodeForm').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const email = document.getElementById('codeEmail').value;
+    const code = document.getElementById('verificationCode').value;
+    try {
+      const res = await fetch(`${API}/auth/login/email-code`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, code }),
+      });
+      const data = await res.json();
+      if (res.ok) {
+        localStorage.setItem('access_token', data.accessToken);
+        localStorage.setItem('refresh_token', data.refreshToken);
+        window.location.href = '/profile';
+      } else {
+        showError(data.message || 'Login failed');
+      }
+    } catch { showError('Network error'); }
+  });
+
+  document.getElementById('showQrBtn').addEventListener('click', async () => {
+    try {
+      const res = await fetch(`${API}/auth/qr/init`, { method: 'POST' });
+      const data = await res.json();
+      const container = document.getElementById('qrContainer');
+      container.innerHTML = `<img src="${data.qrDataUrl}" alt="QR Code" class="img-fluid" style="max-width:250px">`;
+      document.getElementById('qrStatus').className = 'alert alert-info';
+      document.getElementById('qrStatus').textContent = 'Scan with mobile app...';
+      const poll = setInterval(async () => {
+        const pollRes = await fetch(`${API}/auth/qr/poll`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ sessionId: data.sessionId }),
+        });
+        const pollData = await pollRes.json();
+        if (pollData.status === 'CONFIRMED') {
+          clearInterval(poll);
+          localStorage.setItem('access_token', pollData.accessToken);
+          window.location.href = '/profile';
+        } else if (pollData.status === 'EXPIRED') {
+          clearInterval(poll);
+          document.getElementById('qrStatus').className = 'alert alert-danger';
+          document.getElementById('qrStatus').textContent = 'QR expired. Try again.';
+        }
+      }, 2000);
+    } catch { showError('Failed to load QR'); }
+  });
+
+  function showError(msg) {
+    const el = document.getElementById('errorMessage');
+    el.textContent = Array.isArray(msg) ? msg.join(', ') : msg;
+    el.classList.remove('d-none');
+  }
+</script>

views/auth/register.ejs

@@ -0,0 +1,60 @@
+<% title = 'Register'; %>
+<% include ../layouts/main.ejs %>
+<div class="row justify-content-center">
+  <div class="col-md-5">
+    <div class="card shadow">
+      <div class="card-body p-4">
+        <h3 class="card-title text-center mb-4">Create Account</h3>
+        <form id="registerForm">
+          <div class="mb-3">
+            <label class="form-label">Email</label>
+            <input type="email" class="form-control" id="regEmail" required>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Display Name</label>
+            <input type="text" class="form-control" id="regName">
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Password</label>
+            <input type="password" class="form-control" id="regPassword" minlength="8" required>
+          </div>
+          <button type="submit" class="btn btn-primary w-100">Register</button>
+        </form>
+        <div id="errorMessage" class="alert alert-danger mt-3 d-none"></div>
+        <p class="text-center mt-3 mb-0">
+          <a href="/login">Already have an account? Sign In</a>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  document.getElementById('registerForm').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const email = document.getElementById('regEmail').value;
+    const password = document.getElementById('regPassword').value;
+    const displayName = document.getElementById('regName').value;
+    try {
+      const res = await fetch('/api/auth/register', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password, displayName }),
+      });
+      const data = await res.json();
+      if (res.ok) {
+        localStorage.setItem('access_token', data.accessToken);
+        localStorage.setItem('refresh_token', data.refreshToken);
+        window.location.href = '/profile';
+      } else {
+        const el = document.getElementById('errorMessage');
+        el.textContent = Array.isArray(data.message) ? data.message.join(', ') : data.message || 'Registration failed';
+        el.classList.remove('d-none');
+      }
+    } catch {
+      const el = document.getElementById('errorMessage');
+      el.textContent = 'Network error';
+      el.classList.remove('d-none');
+    }
+  });
+</script>

views/layouts/main.ejs

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SSO - <%= title || 'Auth Panel' %></title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="/css/style.css">
+</head>
+<body class="bg-light">
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
+    <div class="container">
+      <a class="navbar-brand" href="/">SSO Service</a>
+      <div class="collapse navbar-collapse">
+        <ul class="navbar-nav ms-auto">
+          <% if (locals.user) { %>
+            <li class="nav-item"><a class="nav-link" href="/profile">Profile</a></li>
+            <% if (user.role === 'ADMIN') { %>
+              <li class="nav-item"><a class="nav-link" href="/admin">Admin</a></li>
+            <% } %>
+            <li class="nav-item"><a class="nav-link" href="#" onclick="logout()">Logout</a></li>
+          <% } else { %>
+            <li class="nav-item"><a class="nav-link" href="/login">Login</a></li>
+            <li class="nav-item"><a class="nav-link" href="/register">Register</a></li>
+          <% } %>
+        </ul>
+      </div>
+    </div>
+  </nav>
+
+  <div class="container">
+    <%- body %>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+  <script>
+    function logout() {
+      localStorage.removeItem('access_token');
+      localStorage.removeItem('refresh_token');
+      window.location.href = '/login';
+    }
+  </script>
+</body>
+</html>

views/profile/index.ejs

@@ -0,0 +1,72 @@
+<% title = 'Profile'; %>
+<% include ../layouts/main.ejs %>
+<div class="row justify-content-center">
+  <div class="col-md-6">
+    <div class="card shadow">
+      <div class="card-body p-4">
+        <h3 class="card-title mb-4">My Profile</h3>
+        <div class="mb-3">
+          <label class="form-label fw-bold">Email</label>
+          <p class="form-control-plaintext"><%= user.email %></p>
+        </div>
+        <div class="mb-3">
+          <label class="form-label fw-bold">Display Name</label>
+          <input type="text" class="form-control" id="displayName" value="<%= user.displayName || '' %>">
+        </div>
+        <div class="mb-3">
+          <label class="form-label fw-bold">Phone</label>
+          <input type="tel" class="form-control" id="phone" value="<%= user.phone || '' %>">
+        </div>
+        <div class="mb-3">
+          <label class="form-label fw-bold">Role</label>
+          <p class="form-control-plaintext"><%= user.role %></p>
+        </div>
+        <div class="mb-3">
+          <label class="form-label fw-bold">Email Verified</label>
+          <p class="form-control-plaintext"><%= user.emailVerifiedAt ? 'Yes' : 'No' %></p>
+        </div>
+        <div class="mb-3">
+          <label class="form-label fw-bold">Member Since</label>
+          <p class="form-control-plaintext"><%= new Date(user.createdAt).toLocaleDateString() %></p>
+        </div>
+        <button class="btn btn-primary w-100" onclick="updateProfile()">Save Changes</button>
+        <div id="message" class="alert d-none mt-3"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  async function updateProfile() {
+    const token = localStorage.getItem('access_token');
+    if (!token) { window.location.href = '/login'; return; }
+    try {
+      const res = await fetch('/api/auth/profile/update', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`,
+        },
+        body: JSON.stringify({
+          displayName: document.getElementById('displayName').value,
+          phone: document.getElementById('phone').value,
+        }),
+      });
+      const data = await res.json();
+      const msg = document.getElementById('message');
+      if (res.ok) {
+        msg.className = 'alert alert-success';
+        msg.textContent = 'Profile updated!';
+      } else {
+        msg.className = 'alert alert-danger';
+        msg.textContent = data.message || 'Update failed';
+      }
+      msg.classList.remove('d-none');
+    } catch {
+      const msg = document.getElementById('message');
+      msg.className = 'alert alert-danger';
+      msg.textContent = 'Network error';
+      msg.classList.remove('d-none');
+    }
+  }
+</script>