{% extends "base.html" %}
{% block title %}New vault entry{% endblock %}
{% block content %}
<div class="app-page-header">
  <h1><i class="fas fa-plus-circle" aria-hidden="true"></i> New vault entry</h1>
  <div class="app-page-header-actions">
    <a class="btn btn-secondary btn-sm" href="{{ url_for('organization_vault_page') }}">Back</a>
  </div>
</div>
<form id="f" class="filters-section" style="max-width:520px;padding:14px;">
  <div class="form-group"><label>Name</label><input id="name" required style="width:100%"></div>
  <div class="form-group"><label>Username</label><input id="username" style="width:100%"></div>
  <div class="form-group"><label>Password</label><input id="password" type="password" style="width:100%"></div>
  <div class="form-group"><label>URL</label><input id="url" style="width:100%"></div>
  <div class="form-group"><label>Notes</label><textarea id="notes" rows="3" style="width:100%"></textarea></div>
  <button type="submit" class="btn btn-primary btn-sm">Create</button>
</form>
<pre id="msg" class="muted" style="margin-top:12px;"></pre>
<script>
document.getElementById('f').onsubmit = async function(ev){
  ev.preventDefault();
  const r = await fetch('/api/portal/organization/vault-entries', {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({
      name: document.getElementById('name').value,
      username: document.getElementById('username').value,
      password: document.getElementById('password').value,
      url: document.getElementById('url').value,
      notes: document.getElementById('notes').value,
    })
  });
  const j = await r.json();
  document.getElementById('msg').textContent = JSON.stringify(j, null, 2);
  if (j.success && j.entry && j.entry.id) location.href = '/organization/vault/' + j.entry.id;
};
</script>
{% endblock %}