| {% 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 %} |