shop10/src/views/account/index.ejs

<%- include('../partials/layout-start') %>

<div class="account">
  <h1>Личный кабинет</h1>

  <% if (success) { %><p class="alert alert--success"><%= success %></p><% } %>
  <% if (error) { %><p class="alert alert--error"><%= error %></p><% } %>

  <nav class="account-tabs" aria-label="Разделы профиля">
    <a href="/account?tab=profile" class="account-tabs__link <%= activeTab === 'profile' ? 'account-tabs__link--active' : '' %>">Профиль</a>
    <a href="/account?tab=email" class="account-tabs__link <%= activeTab === 'email' ? 'account-tabs__link--active' : '' %>">Смена email</a>
    <a href="/account?tab=password" class="account-tabs__link <%= activeTab === 'password' ? 'account-tabs__link--active' : '' %>">Смена пароля</a>
    <a href="/account?tab=reservations" class="account-tabs__link <%= activeTab === 'reservations' ? 'account-tabs__link--active' : '' %>">Бронирования</a>
  </nav>

  <% if (activeTab === 'profile') { %>
    <div class="account-grid">
      <section class="card account-section">
        <h2>Мой профиль</h2>
        <dl class="profile-dl">
          <dt>ID</dt>
          <dd><%= user.id %></dd>
          <dt>Email</dt>
          <dd><%= user.email %></dd>
          <dt>Роль</dt>
          <dd><span class="role-badge role-badge--<%= user.role %>"><%= roleLabels[user.role] || user.role %></span></dd>
          <dt>Регистрация</dt>
          <dd><%= new Date(user.created_at).toLocaleString('ru-RU') %></dd>
          <dt>Заказов</dt>
          <dd><%= orderCount %></dd>
        </dl>
        <a href="/orders" class="btn btn--primary">Мои заказы</a>
      </section>

      <section class="card account-section">
        <h2>Изменить имя</h2>
        <form action="/account/profile" method="post" class="form">
          <label class="label">
            Имя
            <input type="text" name="name" class="input" required value="<%= user.name %>" autocomplete="name">
          </label>
          <button type="submit" class="btn btn--primary">Сохранить</button>
        </form>
      </section>
    </div>
  <% } %>

  <% if (activeTab === 'email') { %>
    <section class="card account-section account-section--narrow">
      <h2>Смена email</h2>
      <p class="muted">Текущий email: <strong><%= user.email %></strong></p>
      <form action="/account/email" method="post" class="form">
        <label class="label">
          Новый email
          <input type="email" name="email" class="input" required autocomplete="email">
        </label>
        <label class="label">
          Текущий пароль (подтверждение)
          <input type="password" name="current_password" class="input" required autocomplete="current-password">
        </label>
        <button type="submit" class="btn btn--primary">Изменить email</button>
      </form>
    </section>
  <% } %>

  <% if (activeTab === 'reservations') { %>
    <section class="card account-section">
      <h2>Мои бронирования</h2>
      <% if (!reservations.length) { %>
        <p class="muted">Активных броней нет.</p>
      <% } else { %>
        <table class="cart-table">
          <thead>
            <tr>
              <th>Товар</th>
              <th>Кол-во</th>
              <th>Статус</th>
              <th>До</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <% const resStatus = { active: 'Активна', fulfilled: 'Выполнена', cancelled: 'Отменена', expired: 'Истекла' }; %>
            <% reservations.forEach(r => { %>
              <tr>
                <td><a href="/product/<%= r.product_slug %>"><%= r.product_name %></a></td>
                <td><%= r.quantity %></td>
                <td><span class="status status--<%= r.status === 'active' ? 'pending' : r.status %>"><%= resStatus[r.status] || r.status %></span></td>
                <td><%= r.status === 'active' ? new Date(r.expires_at).toLocaleString('ru-RU') : '—' %></td>
                <td>
                  <% if (r.status === 'active') { %>
                    <form action="/reservations/<%= r.id %>/cancel" method="post" class="inline-form">
                      <button type="submit" class="btn btn--ghost btn--sm">Отменить</button>
                    </form>
                  <% } %>
                </td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      <% } %>
    </section>
  <% } %>

  <% if (activeTab === 'password') { %>
    <section class="card account-section account-section--narrow">
      <h2>Смена пароля</h2>
      <form action="/account/password" method="post" class="form">
        <label class="label">
          Текущий пароль
          <input type="password" name="current_password" class="input" required autocomplete="current-password">
        </label>
        <label class="label">
          Новый пароль
          <input type="password" name="password" class="input" required minlength="6" autocomplete="new-password">
        </label>
        <label class="label">
          Повторите новый пароль
          <input type="password" name="password2" class="input" required minlength="6" autocomplete="new-password">
        </label>
        <button type="submit" class="btn btn--primary">Изменить пароль</button>
      </form>
    </section>
  <% } %>
</div>

<%- include('../partials/layout-end') %>