Updated login to new UI (#282)

* Updated login to new UI

* translations added

* larger image added

src/app/components/login/login.component.html

@@ -1,17 +1,30 @@
 <div class="container">
-    <h3>Login</h3>
-    <form (ngSubmit)="tryLogin()" name="loginForm">
-        <div class="form-group">
-            <label for="user">{{'PHONE_NUMBER' | translate}}</label>
-            <input [(ngModel)]="user" type="text" name="user" class="form-control" id="user" required>
+    <div class="d-flex justify-content-center">
+        <div class="d-flex justify-content-center flex-column header align-items-center">
+            <div class="logo d-flex justify-content-center align-items-center">
+                <img
+                src="../../../assets/vote_monitor_trans_lg.png"
+                class="brand-logo"
+                alt=""
+                />
+            </div>
+            <h4>Welcome to VoteMonitor</h4>
+            <form (ngSubmit)="tryLogin()" name="loginForm" class="d-flex justify-content-center flex-column p-4">
+                <h6>{{ 'LOGIN' | translate }}:</h6>
+                <hr/>
+                <div class="form-group">
+                    <label for="user">{{'PHONE_NUMBER' | translate}}</label>
+                    <input [(ngModel)]="user" type="text" name="user" class="form-control" id="user" required>
+                </div>
+                <div class="form-group">
+                    <label for="password">{{'PASSWORD' | translate}}</label>
+                    <input [(ngModel)]="password" type="password" name="user" class="form-control" id="password">
+                </div>
+                <p *ngIf="invalid" style="color:red">
+                    {{'CREDENTIALS_INVALID' | translate}}
+                </p>
+                <button type="submit" class="btn btn-warning mt-4">{{ 'LOGIN' | translate }}</button>
+            </form>
         </div>
-        <div class="form-group">
-            <label for="password">Password</label>
-            <input [(ngModel)]="password" type="password" name="user" class="form-control" id="password">
-        </div>
-        <p *ngIf="invalid" style="color:red">
-            Credentials are invalid
-        </p>
-        <button type="submit" class="btn btn-default">Login</button>
-    </form>
+    </div>
 </div>

src/app/components/login/login.component.scss

@@ -0,0 +1,37 @@
+.container {
+    .header{
+        height: 70vh;
+        h4 {
+            margin:2rem 0;
+        }
+        .logo {
+            background: #fbd844;
+            border-radius: 50%;
+            height:200px;
+            width:200px;
+            img {
+                width:200px;
+            }
+        }
+    }
+    form {
+        background-color:#fff;
+        -webkit-box-shadow: 0px 0px 15px 5px rgba(204,204,204,1);
+        -moz-box-shadow: 0px 0px 15px 5px rgba(204,204,204,1);
+        box-shadow: 0px 0px 15px 5px rgba(204,204,204,1);
+        border-radius: 0.5rem;
+        width:450px;
+
+        hr {
+            width: calc(100% + 3rem);
+            margin-left: -1.5rem;
+            margin-right: -1.5rem;
+        }
+
+        label {
+            color:rgba(0, 0, 0, 0.7);
+        }
+
+
+    }
+}

src/assets/i18n/en.json

@@ -1,4 +1,5 @@
 {
+  "LOGIN": "Login",
   "PHONE_NUMBER": "Phone Number",
   "ARRIVAL_TIME": "Arrival Time",
   "DEPARTURE_TIME": "Departure Time",
@@ -74,9 +75,11 @@
   "SEND_NOTIFICATIONS_TO": "Send notification to",
   "SEND_NOTIFICATIONS_TO_ALL": "Send notification to all",
   "RESET": "Clear filter",
+  "PASSWORD": "Password",
   "ENTER_NEW_PASSWORD": "Enter new pin for observer: ",
   "RESET_PASSWORD": "Reset password",
   "DOWNLOAD_ANSWERS": "Download answers",
+  "CREDENTIALS_INVALID": "Credentials are invalid",
   "FROM": "From",
   "TO": "To",
   "ANSWERS_DOWNLOAD_CONFIRMATION": "Are you sure you want to launch a data download request?",

src/assets/i18n/ro.json

@@ -1,4 +1,5 @@
 {
+  "LOGIN": "Autentificare",
   "PHONE_NUMBER": "Numar de telefon",
   "ARRIVAL_TIME": "Ora sosirii",
   "DEPARTURE_TIME": "Ora plecarii",
@@ -75,5 +76,7 @@
   "FLAG_OPTION": "Opțiunea de semnalizare",
   "UNFLAG_OPTION": "Opțiunea Unflag",
 
+  "PASSWORD": "Parola",
+  "CREDENTIALS_INVALID": "Acreditările sunt nevalide",
   "LOGOUT": "Deconectare"
 }

src/styles.scss

@@ -3,6 +3,10 @@
 
 @import "../node_modules/bootstrap/scss/bootstrap.scss";
 
+body {
+  background-color:#f6f6f6;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }