chore(signin): display server error for signin (#1678)

* Display proper error for signin

* Package lock

ui/src/onboarding/containers/SigninPage.tsx

@@ -1,7 +1,7 @@
 // Libraries
 import React, {PureComponent, ChangeEvent} from 'react'
 import {connect} from 'react-redux'
-import _ from 'lodash'
+import _, {get} from 'lodash'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -114,7 +114,13 @@ class SigninPage extends PureComponent<Props, State> {
       await signin(links.signin, {username, password})
       onSignInUser()
     } catch (error) {
-      notify(copy.SigninError)
+      const message = get(error, 'data.msg', '')
+
+      if (!message) {
+        return notify(copy.SigninError)
+      }
+
+      notify({...copy.SigninError, message})
     }
   }
 }

ui/src/shared/components/notifications/Notifications.scss

@@ -26,20 +26,21 @@ $notification-margin: 12px;
   padding: 12px 40px;
   @extend %no-user-select;
   transform: translateX(105%);
-  transition:
-    transform 0.25s ease 0.25s,
-    opacity 0.25s ease;
+  transition: transform 0.25s ease 0.25s, opacity 0.25s ease;
 
   > span.icon {
-   position: absolute;
-   top: 50%;
-   left: 20px;
-   transform: translate(-50%,-50%);
-   font-size: $ix-text-base-2;
- }
+    position: absolute;
+    top: 50%;
+    left: 20px;
+    transform: translate(-50%, -50%);
+    font-size: $ix-text-base-2;
+  }
 }
 
 .notification-message {
+  &:first-letter {
+    text-transform: uppercase;
+  }
   font-weight: 500;
   font-size: 14px;
   line-height: 16px;
@@ -57,8 +58,7 @@ $notification-margin: 12px;
   width: 20px;
   height: 20px;
   opacity: 0.25;
-  transition:
-    opacity 0.25s ease;
+  transition: opacity 0.25s ease;
 
   &:before,
   &:after {
@@ -72,10 +72,10 @@ $notification-margin: 12px;
     background-color: $g20-white;
   }
   &:before {
-    transform: translate(-50%,-50%) rotate(-45deg);
+    transform: translate(-50%, -50%) rotate(-45deg);
   }
   &:after {
-    transform: translate(-50%,-50%) rotate(45deg);
+    transform: translate(-50%, -50%) rotate(45deg);
   }
 
   &:hover {
@@ -93,11 +93,12 @@ $notification-margin: 12px;
   }
   &.notification-dismissed {
     height: 0 !important;
-    .notification {opacity: 0;}
+    .notification {
+      opacity: 0;
+    }
   }
 }
 
-
 //  Mixin for Alert Themes
 //  ----------------------------------------------------------------------------
 @mixin notification-styles(
@@ -105,10 +106,11 @@ $notification-margin: 12px;
   $bg-color-2,
   $text-color,
   $link-color,
-  $link-hover) {
+  $link-hover
+) {
   font-size: 16px;
 
-  @include gradient-h($bg-color,$bg-color-2);
+  @include gradient-h($bg-color, $bg-color-2);
   color: $text-color;
 
   a:link,
@@ -116,8 +118,7 @@ $notification-margin: 12px;
     color: $link-color;
     font-weight: 700;
     text-decoration: underline;
-    transition:
-      color 0.25s ease;
+    transition: color 0.25s ease;
   }
   a:hover {
     color: $link-hover;
@@ -135,20 +136,56 @@ $notification-margin: 12px;
 //  Alert Themes
 //  ----------------------------------------------------------------------------
 .notification-success {
-  @include notification-styles($c-rainforest,$c-pool,$g20-white,$c-wasabi,$g20-white);
+  @include notification-styles(
+    $c-rainforest,
+    $c-pool,
+    $g20-white,
+    $c-wasabi,
+    $g20-white
+  );
 }
 .notification-primary {
-  @include notification-styles($c-pool,$c-ocean,$g20-white,$c-neutrino,$g20-white);
+  @include notification-styles(
+    $c-pool,
+    $c-ocean,
+    $g20-white,
+    $c-neutrino,
+    $g20-white
+  );
 }
 .notification-warning {
-  @include notification-styles($c-star,$c-pool,$g20-white,$c-neutrino,$g20-white);
+  @include notification-styles(
+    $c-star,
+    $c-pool,
+    $g20-white,
+    $c-neutrino,
+    $g20-white
+  );
 }
 .notification-error {
-  @include notification-styles($c-curacao,$c-star,$g20-white,$c-marmelade,$g20-white);
+  @include notification-styles(
+    $c-curacao,
+    $c-star,
+    $g20-white,
+    $c-marmelade,
+    $g20-white
+  );
 }
 .notification-info {
-  @include notification-styles($g20-white,$g16-pearl,$g8-storm,$ix-link-default,$ix-link-default-hover);
+  @include notification-styles(
+    $g20-white,
+    $g16-pearl,
+    $g8-storm,
+    $ix-link-default,
+    $ix-link-default-hover
+  );
 }
 .notification-dark {
-  @include notification-styles($c-sapphire,$c-shadow,$c-moonstone,$ix-link-default,$ix-link-default-hover);
+  @include notification-styles(
+    $c-sapphire,
+    $c-shadow,
+    $c-moonstone,
+    $ix-link-default,
+    $ix-link-default-hover
+  );
 }

ui/src/shared/copy/notifications.ts

@@ -114,7 +114,7 @@ export const SigninSuccessful: Notification = {
 }
 export const SigninError: Notification = {
   ...defaultErrorNotification,
-  message: `OH Noes! Sign In did not work. :(`,
+  message: `Could not sign in`,
 }
 
 //  Hosts Page Notifications