Updated style of settings for DB

MongoDB connection string test now only tests once

backend/app.js

@@ -1609,7 +1609,7 @@ app.post('/api/transferDB', optionalJwt, async (req, res) => {
 app.post('/api/testConnectionString', optionalJwt, async (req, res) => {
     let success = null;
     let error = '';
-    success = await db_api.connectToDB(5, true);
+    success = await db_api.connectToDB(0, true);
     if (!success) error = 'Connection string failed.';
 
     res.send({success: success, error: error});

backend/db.js

@@ -76,6 +76,7 @@ exports.connectToDB = async (retries = 5, no_fallback = false) => {
     const success = await exports._connectToDB();
     if (success) return true;
 
+    if (retries) {
         logger.warn(`MongoDB connection failed! Retrying ${retries} times...`);
         const retry_delay_ms = 2000;
         for (let i = 0; i < retries; i++) {
@@ -92,6 +93,8 @@ exports.connectToDB = async (retries = 5, no_fallback = false) => {
                 logger.warn(`Retry ${i+1} failed.`);
             }
         }
+    }
+    
     if (no_fallback) {
         logger.error('Failed to connect to MongoDB. Verify your connection string is valid.');
         return;

src/app/settings/settings.component.html

@@ -287,7 +287,6 @@
                 <div class="row">
                     <div class="col-12 mt-3">
                         <div *ngIf="db_info">
-                            <h5 i18n="Database info title">Database Info</h5>
                             <p><ng-container i18n="Database location label">Database location:</ng-container>&nbsp;<strong>{{db_info['using_local_db'] ? 'Local' : 'MongoDB'}}</strong></p>
                             <h6 i18n="Records per table label">Records per table</h6>
                             <mat-list style="padding-top: 0px">
@@ -298,16 +297,16 @@
 
                             <mat-form-field style="width: 100%; margin-top: 15px; margin-bottom: 10px" color="accent">
                                 <input [(ngModel)]="new_config['Database']['mongodb_connection_string']" matInput placeholder="MongoDB Connection String" i18n-placeholder="MongoDB Connection String" required>
-                                <mat-hint><ng-container i18n="MongoDB Connection String setting hint AKA preamble">Example:</ng-container>&nbsp;mongodb://127.0.0.1:27017/?compressors=zlib</mat-hint>
+                                <mat-hint><ng-container i18n="MongoDB Connection String setting hint AKA preamble">Example:</ng-container>&nbsp;mongodb://127.0.0.1:27017/?compressors=zlib<br>Docker: mongodb://&lt;container name&gt;:27017/?compressors=zlib</mat-hint>
                             </mat-form-field>
 
-                            <br>
-
+                            <div class="test-connection-div">
                                 <button (click)="testConnectionString()" [disabled]="testing_connection_string" mat-flat-button color="accent"><ng-container i18n="Test connection string button">Test connection string</ng-container></button>
+                            </div>
 
-                            <br>
-
-                            <button class="transfer-db-button" [disabled]="db_transferring" color="accent" (click)="transferDB()" mat-raised-button><ng-container i18n="Transfer DB button">Transfer DB to </ng-container>{{db_info['using_local_db'] ? 'MongoDB' : 'Local'}}</button>
+                            <div class="transfer-db-div">
+                                <button [disabled]="db_transferring" color="accent" (click)="transferDB()" mat-raised-button><ng-container i18n="Transfer DB button">Transfer DB to </ng-container>{{db_info['using_local_db'] ? 'MongoDB' : 'Local'}}</button>
+                            </div>
                         </div>
                         <div *ngIf="!db_info">
                             <ng-container i18n="Database info not retrieved error message">Database information could not be retrieved. Check the server logs for more information.</ng-container>

src/app/settings/settings.component.scss

@@ -83,7 +83,11 @@
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-.transfer-db-button {
-    margin-top: 10px;
+.test-connection-div {
+    margin-top: 15px;
+    margin-bottom: 10px;
+}
+
+.transfer-db-div {
     margin-bottom: 10px;
 }