174 lines
9.6 KiB
HTML
174 lines
9.6 KiB
HTML
<div class="dropdown is-up is-right" id="settings-dropdown">
|
|
<div class="dropdown-trigger">
|
|
<button class="button is-small {% if not AnyExists %} is-danger{% endif %} to-reduce-opacity"
|
|
aria-haspopup="true" aria-controls="dropdown-menu3"
|
|
onclick="this.parentElement.parentElement.classList.toggle('is-active')">
|
|
<span class="icon"><i class="fa-solid fa-bars"></i></i></span>
|
|
</button>
|
|
</div>
|
|
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
|
|
<div class="dropdown-content">
|
|
<div class="dropdown-item">
|
|
<div class="field">
|
|
<form id="api-keys-form" hx-post="/addKeys" hx-trigger="submit" hx-target="#api-keys-status">
|
|
<div class="field has-addons is-hidden" id="openai-field">
|
|
<p class="control has-icons-left is-expanded">
|
|
<input class="input is-small {% if OpenaiExists %}is-success{% endif %}" type="text"
|
|
{%if not IsLogin %}disabled{% endif %} placeholder="OpenAI API key"
|
|
name="openai_key" autocomplete="off">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-lock"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="field has-addons is-hidden" id="anthropic-field">
|
|
<p class="control has-icons-left is-expanded">
|
|
<input class="input is-small {% if AnthropicExists %}is-success{% endif %}" type="text"
|
|
{% if not IsLogin %}disabled{% endif %} placeholder="Anthropic API key"
|
|
name="anthropic_key" autocomplete="off">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-lock"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="field has-addons is-hidden" id="mistral-field">
|
|
<p class="control has-icons-left is-expanded">
|
|
<input class="input is-small {% if MistralExists %}is-success{% endif %}" type="text"
|
|
{%if not IsLogin %}disabled{% endif %} placeholder="Mistral API key"
|
|
name="mistral_key" autocomplete="off">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-lock"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="field has-addons is-hidden" id="groq-field">
|
|
<p class="control has-icons-left is-expanded">
|
|
<input class="input is-small {% if GroqExists %}is-success{% endif %}" type="text"
|
|
placeholder="Groq API key" {%if not IsLogin %}disabled{% endif %} name="groq_key"
|
|
autocomplete="off">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-lock"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="field has-addons is-hidden" id="gemini-field">
|
|
<p class="control has-icons-left is-expanded">
|
|
<input class="input is-small {% if GoogleExists %}is-success{% endif %}" type="text"
|
|
placeholder="Google API key" name="google_key" autocomplete="off">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-lock"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="field has-addons is-hidden" id="perplexity-field">
|
|
<p class="control has-icons-left is-expanded">
|
|
<input class="input is-small {% if PerplexityExists %}is-success{% endif %}" type="text"
|
|
placeholder="Perplexity API key" name="perplexity_key" autocomplete="off">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-lock"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="field has-addons is-hidden" id="goose-field"
|
|
title="GooseAI chat API will be available soon">
|
|
<p class="control has-icons-left is-expanded">
|
|
<input class="input is-small {% if GooseaiExists %}is-success{% endif %}" type="text"
|
|
{%if not IsLogin %}disabled{% endif %} placeholder="Gooseai API key"
|
|
name="goose_key" autocomplete="off" disabled>
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-lock"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="field has-addons" id="save-field">
|
|
<p class="control">
|
|
<button disabled id="save-keys-button" type="submit" class="button is-small">
|
|
<span class="icon is-small">
|
|
<i class="fas fa-check"></i>
|
|
</span>
|
|
<span>Save keys</span>
|
|
</button>
|
|
</p>
|
|
<p class="control">
|
|
<button id="toggle-keys-button" type="button"
|
|
class="button is-small {% if not AnyExists %}is-danger{% endif %}">
|
|
<span class="icon is-small">
|
|
<i class="fa-solid fa-chevron-down"></i>
|
|
</span>
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</form>
|
|
<p id="api-keys-status"></p>
|
|
</div>
|
|
{% if isBasic or isPremium %}
|
|
<a class="button is-small mt-1" href="{{ StripeSubLink }}" target="_blank">
|
|
<span class="icon is-small" {% if isPremium %}style="color: #b00202" {%else%}style="color: #126d0f"
|
|
{% endif %}>
|
|
<i class="fa-solid fa-heart"></i>
|
|
</span>
|
|
<span>Manage subscription</span>
|
|
</a>
|
|
{% else %}
|
|
<a class="button is-small mt-1" hx-get="/pricingTable" hx-target="#chat-container" hx-swap="outerHTML"
|
|
hx-trigger="click">
|
|
<span class="icon is-small">
|
|
<i class="fa-solid fa-heart"></i>
|
|
</span>
|
|
<span>Subscribe to JADE</span>
|
|
</a>
|
|
{% endif %}
|
|
<a class="button is-small mt-1" hx-get="/generateTermAndService" hx-target="#chat-container"
|
|
hx-swap="outerHTML" hx-trigger="click">
|
|
<span class="icon is-small">
|
|
<i class="fa-regular fa-file-lines"></i>
|
|
</span>
|
|
<span>Terms and conditions</span>
|
|
</a>
|
|
<a class="button is-small mt-1" hx-get="/help" hx-target="#chat-container" hx-swap="outerHTML"
|
|
hx-trigger="click">
|
|
<span class="icon is-small">
|
|
<i class="fa-solid fa-info"></i>
|
|
</span>
|
|
<span>Help</span>
|
|
</a>
|
|
<a class="button is-small mt-1" href="mailto:adrien.bouvais.pro@gmail.com">
|
|
<span class="icon is-small">
|
|
<i class="fa-solid fa-address-card"></i>
|
|
</span>
|
|
<span>Contact</span>
|
|
</a>
|
|
<a class="button is-small mt-1" href="/signout">
|
|
<span class="icon is-small">
|
|
<i class="fa-solid fa-right-from-bracket"></i>
|
|
</span>
|
|
<span>Sign out</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('click', function (event) {
|
|
if (!document.getElementById('settings-dropdown').contains(event.target)) {
|
|
document.getElementById('settings-dropdown').classList.remove('is-active');
|
|
}
|
|
});
|
|
|
|
document.getElementById('toggle-keys-button').addEventListener('click', function () {
|
|
// Do not take the id="save-field"
|
|
var fields = document.querySelectorAll("#api-keys-form .field.has-addons");
|
|
var saveButton = document.getElementById('save-keys-button');
|
|
var toggleIcon = this.querySelector('i');
|
|
|
|
fields.forEach(function (field) {
|
|
if (field.id == "save-field") return;
|
|
field.classList.toggle('is-hidden');
|
|
});
|
|
|
|
saveButton.disabled = !saveButton.disabled;
|
|
toggleIcon.classList.toggle('fa-chevron-up');
|
|
toggleIcon.classList.toggle('fa-chevron-down');
|
|
});
|
|
</script> |