blob: 83361b578e88ae0a9710ca5124163ac6a93d33ad [file] [edit]
{% extends 'base.html' %} {% block head %}
<title>MongoDB Login</title>
{% endblock %} {% block body %}
<main>
<div
class="container-fluid d-flex justify-content-center main-panel-container"
>
<div
class="d-flex flex-column align-items-center justify-content-around panel-container h-auto"
>
<div
class="d-flex flex-column align-items-center"
style="width: -webkit-fill-available"
>
<h2 class="page-title panel-text-styling mt-5">MongoDB</h2>
<div class="mt-3" style="width: 75%">
<ul
class="nav nav-tabs nav-fill login-nav main-text-semi"
id="mongodb-login-tabs"
role="tablist"
>
<li class="nav-item" role="presentation">
<button
class="nav-link active login-nav-link"
id="enter-uri-tab"
data-bs-toggle="tab"
data-bs-target="#enter-uri-panel"
type="button"
role="tab"
>
Enter URI
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link login-nav-link"
id="generate-uri-tab"
data-bs-toggle="tab"
data-bs-target="#generate-uri-panel"
type="button"
role="tab"
>
Generate URI
</button>
</li>
</ul>
<div class="tab-content mt-5" id="tabContent">
<div
class="tab-pane fade show active"
id="enter-uri-panel"
role="tabpanel"
>
<form
class="form-outline d-flex flex-column mt-3 panel-text-styling form-input-shadow"
>
<label for="alias" class="main-text-semi">Alias</label>
<input
class="form-control mt-1 main-text-regular"
type="text"
id="alias"
placeholder="Enter Alias..."
/>
<label for="collection" class="main-text-semi mt-3"
>Collection</label
>
<input
class="form-control mt-1 main-text-regular"
type="text"
id="collection"
placeholder="Enter Collection Name..."
/>
<label for="database" class="main-text-semi mt-3"
>Database</label
>
<input
class="form-control mt-1 main-text-regular"
type="text"
id="database"
placeholder="Enter Database Name..."
/>
<label for="uri" class="main-text-semi mt-3">MongoDB URI</label>
<input
class="form-control mt-1 main-text-regular"
type="text"
id="uri"
name="uri"
placeholder="Enter URI..."
/>
</form>
</div>
<div class="tab-pane fade" id="generate-uri-panel" role="tabpanel">
<form
id="generate-uri-form"
class="form-outline d-flex flex-column mt-3 form-input-shadow"
>
<div
class="d-flex flex-row align-items-center justify-content-center main-text-semi panel-text-styling"
>
<span class="me-2">Standard</span>
<div class="form-check form-switch d-flex flex-row mb-0">
<input
class="form-check-input"
type="checkbox"
role="switch"
id="connection"
checked
/>
</div>
<span class="">DNS Seed List</span>
</div>
<label for="alias" class="main-text-semi mt-3">Alias</label>
<input
class="form-control mt-1 main-text-regular"
type="text"
id="aliasGenerate"
placeholder="Enter Alias..."
/>
<label for="username" class="main-text-semi mt-3"
>Username (Optional)</label
>
<input
class="form-control mt-1 main-text-regular"
type="text"
id="username"
placeholder="Enter Username..."
/>
<label for="password" class="main-text-semi mt-3"
>Password (Optional)</label
>
<input
class="form-control mt-1 main-text-regular"
type="text"
id="password"
placeholder="Enter Password..."
/>
<label for="host" class="main-text-semi mt-3">Host</label>
<input
class="form-control mt-1 main-text-regular"
type="text"
id="host"
placeholder="Enter Host..."
/>
<label for="collection" class="main-text-semi mt-3"
>Collection</label
>
<input
class="form-control mt-1 main-text-regular"
type="text"
id="collectionGenerate"
placeholder="Enter Collection..."
/>
<label for="database" class="main-text-semi mt-3"
>Database</label
>
<input
class="form-control mt-1 main-text-regular"
type="text"
id="databaseGenerate"
placeholder="Enter Database..."
/>
<label for="options" class="main-text-semi mt-3"
>Options (Optional)</label
>
<input
class="form-control mt-1 main-text-regular"
type="text"
id="options"
value="retryWrites=true,w=majority"
/>
</form>
</div>
</div>
</div>
</div>
<div class="d-flex flex-row align-self-end me-3 mt-5 mb-3 buttonGroup">
<button
type="button"
id="login"
class="btn btn-outline-primary btn-box-shadow mt-2 mb-2"
onclick="handleMongoDBLogin(event)"
>
Login
</button>
</div>
</div>
</div>
</main>
<script src="/static/js/login.js"></script>
{% endblock %}