Update the application design

.gitignore

@@ -26,3 +26,5 @@
 
 .mvn
 **/node_modules
+src/main/resources/static
+log/spring.log

src/main/resources/application.properties

@@ -11,6 +11,6 @@ spring.jpa.properties.hibernate.temp.use_jdbc_metadata_defaults = false
 # ***********************************************
 # Application custom parameters
 # ***********************************************
-minager.version=0.0.1
+minager.version=1.0.0
 minecraft.server.path=/home/minecraft/server
 minecraft.server.shell.name=minecraft-server.sh

src/main/ts/src/app/app.component.scss

@@ -12,3 +12,9 @@ main {
   font-style: italic;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 }
+
+@media screen and (max-width: 600px) {
+  #versionDiv {
+    margin-top: -14px;
+  }
+}

src/main/ts/src/app/header/header.component.html

@@ -7,8 +7,7 @@
 		</a>
 	</logo>
 	<links>
-		<ul class="navbar-nav ml-auto nav-flex-icons" style="margin-left: 0 !important;">
+		<form class="form-inline waves-light waves-light ml-auto" mdbWavesEffect>
-			<li class="nav-item">
 			<a routerLink="/login"
 					*ngIf="!isAuthenticated()"
 					class="nav-link waves-light"
@@ -21,8 +20,6 @@
 					mdbRippleRadius >
 				<i class="fa fa-sign-out"></i> Déconnexion
 			</a>
-			</li>
+		</form>
-		</ul>
 	</links>
-	<div style="background-color: blue;">Test</div>
 </mdb-navbar>

src/main/ts/src/app/header/header.component.ts

@@ -10,6 +10,10 @@ import { environment } from '../../environments/environment';
       width: 50px;
       height: 50px;
     }
+
+    a, a:visited {
+      color: white;
+    }
   `]
 })
 export class HeaderComponent {

src/main/ts/src/app/login/login.component.html

@@ -1,22 +1,47 @@
-<div>
+<div class="card col-md-8 offset-md-2 col-lg-6 offset-lg-3">
-  <label for="email">Adresse mail</label>
+	<div class="card-body">
-  <input
+		<h4 class="card-title">Connexion</h4>
+		<form id="form" (ngSubmit)="submitLogin()" #loginForm="ngForm">
+			<div class="md-form">
+				<i class="fa fa-envelope prefix grey-text"></i>
+				<input mdbActive
 						id="email"
 						name="email"
 						type="email"
-      [(ngModel)]="model.email" />
+						class="form-control"
+						[(ngModel)]="model.email"
+						#email="ngModel"
+						data-error="Veuillez saisir une adresse email valide"
+						data-sucess=""
+						required />
+				<label for="email">Email</label>
 			</div>
-<div>
+			<div class="md-form">
-  <label for="password">Mot de passe</label>
+				<i class="fa fa-lock prefix grey-text"></i>
-  <input
+				<input mdbActive
 						id="password"
 						name="password"
 						type="password"
-      [(ngModel)]="model.password" />
+						class="form-control"
+						[(ngModel)]="model.password"
+						#password="ngModel"
+						data-error="Veuillez saisir votre mot de passe"
+						data-sucess=""
+						required />
+				<label for="password">Password</label>
 			</div>
-<button (click)="submitLogin()">Suivant</button>
 			<div id="errorMsg" class="card red lighten-2 text-center z-depth-2">
         <div class="card-body">
           <p class="white-text mb-0">{{loginError}}</p>
         </div>
+      </div>
+			<div class="col submitFormArea">
+				<button class="float-right waves-effect waves-light indigo btn"
+            type="submit"
+            [disabled]="!loginForm.form.valid">
+					Suivant
+				</button>
+			</div>
+		</form>
+	</div>
 </div>

src/main/ts/src/app/server/server.component.html

@@ -1,3 +1,8 @@
+<div class="row">
+  <div class="col-xl-8 offset-xl-2">
+    <div class="card">
+      <div class="card-body">
+        <h1 class="card-title">Serveur Minecraft</h1>
         <div>
           Status du serveur :
           <span *ngIf="!serverStartedChecked" class="badge badge-warning">
@@ -8,7 +13,20 @@
             {{serverStarted ? 'Démarré' : 'Éteint'}}
           </span>
         </div>
-<div *ngIf="isAuthenticated()">
+        <div>
+          Adresse du serveur de jeu :
+          <span id="serverAddress"
+              class="badge light-blue"
+              (click)="copyToClipBoard()"
+              mdbTooltip="Cliquez pour copier l'adresse"
+              placement="top">
+            {{serverAddress}}
+          </span>
+          <span id="copiedMsg" style="display: none" class="badge badge-pill indigo">
+            Copié !
+          </span>
+        </div>
+        <div style="text-align:center; margin-top: 15px;" *ngIf="isAuthenticated()">
           <button mdbBtn
               *ngIf="serverStarted"
               type="button"
@@ -29,7 +47,6 @@
             <i class="fa" [ngClass]="serverStarted ? 'fa-stop-circle' : 'fa-play-circle'"></i>&nbsp;
             {{serverStarted ? 'Éteindre' : 'Démarrer'}}
           </button>
-</div>
           <div id="errorMsg" class="msg card red lighten-2 text-center z-depth-2">
             <div class="card-body">
               <p class="white-text mb-0">{{errorMsg}}</p>
@@ -45,3 +62,8 @@
               <p class="white-text mb-0">{{successMsg}}</p>
             </div>
           </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/main/ts/src/app/server/server.component.ts

@@ -12,9 +12,14 @@ import { AuthService } from '../core/services/auth.service';
       transition: max-height 0.5s ease-out;
       margin: 0;
     }
+    #serverAddress {
+      margin-top: 25px;
+      cursor: pointer;
+    }
   `]
 })
 export class ServerComponent implements OnInit {
+  serverAddress = '176.188.217.1:54311';
   serverStartedChecked = false;
   serverStarted = false;
   errorMsg;
@@ -82,4 +87,21 @@ export class ServerComponent implements OnInit {
       }, 550);
     }, 3000);
   }
+
+  copyToClipBoard(): void {
+    document.addEventListener('copy', (e: ClipboardEvent) => {
+      e.clipboardData.setData('text/plain', (this.serverAddress));
+      e.preventDefault();
+      document.removeEventListener('copy', null);
+      this.showCopiedMsg();
+    });
+    document.execCommand('copy');
+  }
+
+  showCopiedMsg(): void {
+    document.getElementById('copiedMsg').style.display = '';
+    setTimeout(() => {
+      document.getElementById('copiedMsg').style.display = 'none';
+    }, 1500);
+  }
 }

src/main/ts/src/environments/environment.integ.ts

@@ -5,7 +5,7 @@
 export const environment = {
   production: false,
   apiUrl: 'http://176.188.217.1:54447',
-  appVersion: '0.0.1',
+  appVersion: '1.0.1',
   title: 'INTÉGRATION'
 };
 

src/main/ts/src/environments/environment.prod.ts

@@ -1,6 +1,6 @@
 export const environment = {
   production: true,
   apiUrl: 'https://176.188.217.1:54446',
-  appVersion: '0.0.1',
+  appVersion: '1.0.1',
   title: ''
 };

src/main/ts/src/environments/environment.ts

@@ -5,7 +5,7 @@
 export const environment = {
   production: false,
   apiUrl: 'http://localhost:8080',
-  appVersion: '0.0.1',
+  appVersion: '1.0.1',
   title: 'LOCAL'
 };
 

src/main/ts/src/styles.scss

@@ -12,8 +12,13 @@ body {
 	flex-direction: column;
 	justify-content:space-between;
 	min-height: 100%;
+	background-image: url("./assets/images/background.png");
+  background-color: #fff;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
 }
 
-.btn-rounded {
+.btn {
   border-radius: 10em;
 }