From 4185f2d8ac115a619e8bac7ba3633852827998be Mon Sep 17 00:00:00 2001
From: Yehor Butko <crawter@hotmail.com>
Date: Tue, 23 Apr 2019 17:46:54 +0300
Subject: [PATCH] satellite bugfix (#1816)

* satellite bugfix
---
 satellite/console/service.go                  |  1 +
 web/satellite/src/App.vue                     | 27 +++++++++++++++++-
 .../src/components/common/HeaderlessInput.vue | 12 ++++++--
 web/satellite/src/store/modules/appState.ts   |  7 -----
 web/satellite/src/store/modules/projects.ts   |  1 +
 web/satellite/src/utils/avatarColorManager.ts |  2 +-
 .../views/forgotPassword/ForgotPassword.vue   | 28 +++++++++++++++----
 .../views/forgotPassword/forgotPassword.html  | 10 +++----
 .../views/forgotPassword/forgotPassword.scss  |  2 +-
 web/satellite/src/views/login/Login.vue       | 27 ++++++++++++++++--
 web/satellite/src/views/login/login.html      | 16 ++++++-----
 web/satellite/src/views/login/login.scss      | 14 +++++-----
 web/satellite/src/views/register/Register.vue |  4 ++-
 .../src/views/register/register.scss          |  2 +-
 14 files changed, 110 insertions(+), 43 deletions(-)

diff --git a/satellite/console/service.go b/satellite/console/service.go
index 396a234bc..546afa5c6 100644
--- a/satellite/console/service.go
+++ b/satellite/console/service.go
@@ -317,6 +317,7 @@ func (s *Service) UpdateAccount(ctx context.Context, info UserInfo) (err error)
 		ShortName:    info.ShortName,
 		Email:        email,
 		PasswordHash: nil,
+		Status:       auth.User.Status,
 	})
 	if err != nil {
 		return errs.New(internalErrMsg)
diff --git a/web/satellite/src/App.vue b/web/satellite/src/App.vue
index e65c9a34d..7accd9202 100644
--- a/web/satellite/src/App.vue
+++ b/web/satellite/src/App.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div id="app">
+    <div id="app" v-on:click="onClick">
         <router-view/>
         <!-- Area for displaying notification -->
         <NotificationArea/>
@@ -15,9 +15,34 @@ import NotificationArea from '@/components/notifications/NotificationArea.vue';
 import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 
 @Component({
+    data: function() {
+        return {
+            ids: [
+                'accountDropdown',
+                'accountDropdownButton',
+                'projectDropdown',
+                'projectDropdownButton',
+                'sortTeamMemberByDropdown',
+                'sortTeamMemberByDropdownButton',
+                'notificationArea',
+            ]
+        };
+    },
     components: {
         NotificationArea
     },
+    methods: {
+        onClick: function(e) {
+            let target: any = e.target;
+            while (target) {
+                if (this.$data.ids.includes(target.id)) {
+                    return;
+                }
+                target = target.parentNode;
+            }
+            this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
+        }
+    }
 })
 
 export default class App extends Vue {
diff --git a/web/satellite/src/components/common/HeaderlessInput.vue b/web/satellite/src/components/common/HeaderlessInput.vue
index ad803aa5e..646b010f6 100644
--- a/web/satellite/src/components/common/HeaderlessInput.vue
+++ b/web/satellite/src/components/common/HeaderlessInput.vue
@@ -9,11 +9,11 @@
 			<h3 class="label-container__error" v-if="error" :style="style.errorStyle">{{error}}</h3>
 		</div>
         <input
-            v-bind:class="[error ? 'inputError' : null]"
+            :class="{'inputError' : error}"
             @input="onInput"
-            :placeholder="this.$props.placeholder"
+            :placeholder="placeholder"
             v-model="value"
-            v-bind:type="[isPassword ? passwordType : textType]"
+            :type="[isPassword ? passwordType : textType]"
             :style="style.inputStyle"/>
         <!--2 conditions of eye image (crossed or not) -->
             <svg v-if="isPassword && !isPasswordShown" v-on:click="changeVision()" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -141,8 +141,14 @@ h3 {
 .label-container {
     display: flex;
     justify-content: flex-start;
+    align-items: flex-end;
+    padding-bottom: 8px;
     flex-direction: row;
 
+    h3 {
+        margin-bottom: 0;
+    }
+
     &__add-label {
         margin-left: 5px;
         font-family: 'font_regular';
diff --git a/web/satellite/src/store/modules/appState.ts b/web/satellite/src/store/modules/appState.ts
index 2cfa28a7b..316d9bb61 100644
--- a/web/satellite/src/store/modules/appState.ts
+++ b/web/satellite/src/store/modules/appState.ts
@@ -69,16 +69,9 @@ export const appStateModule = {
         },
         // Mutation that closes each popup/dropdown
         [APP_STATE_MUTATIONS.CLOSE_ALL](state: any): void {
-            state.appState.isAddTeamMembersPopupShown = false;
-            state.appState.isNewProjectPopupShown = false;
             state.appState.isProjectsDropdownShown = false;
             state.appState.isAccountDropdownShown = false;
-            state.appState.isDeleteProjectPopupShown = false;
-            state.appState.isDeleteAccountPopupShown = false;
             state.appState.isSortProjectMembersByPopupShown = false;
-            state.appState.isNewAPIKeyPopupShown = false;
-            state.appState.isSuccessfulRegistrationPopupShown = false;
-            state.appState.isSuccessfulProjectCreationPopupShown = false;
         },
         [APP_STATE_MUTATIONS.CHANGE_STATE](state: any, newFetchState: AppState): void {
             state.appState.fetchState = newFetchState;
diff --git a/web/satellite/src/store/modules/projects.ts b/web/satellite/src/store/modules/projects.ts
index 6345dc091..bebf19aec 100644
--- a/web/satellite/src/store/modules/projects.ts
+++ b/web/satellite/src/store/modules/projects.ts
@@ -26,6 +26,7 @@ export const projectsModule = {
         },
         [PROJECTS_MUTATIONS.SELECT](state: any, projectID: string): void {
             const selected = state.projects.find((project: any) => project.id === projectID);
+
             if (!selected) {
                 return;
             }
diff --git a/web/satellite/src/utils/avatarColorManager.ts b/web/satellite/src/utils/avatarColorManager.ts
index 263c1af23..a1df32ec3 100644
--- a/web/satellite/src/utils/avatarColorManager.ts
+++ b/web/satellite/src/utils/avatarColorManager.ts
@@ -1,4 +1,4 @@
-// Copyright (C) 2018 Storj Labs, Inc.
+// Copyright (C) 2019 Storj Labs, Inc.
 // See LICENSE for copying information.
 
 // getColor - returns color string depends on first symbol of first name
diff --git a/web/satellite/src/views/forgotPassword/ForgotPassword.vue b/web/satellite/src/views/forgotPassword/ForgotPassword.vue
index 4a3984344..d15289a06 100644
--- a/web/satellite/src/views/forgotPassword/ForgotPassword.vue
+++ b/web/satellite/src/views/forgotPassword/ForgotPassword.vue
@@ -5,11 +5,12 @@
 
 <script lang="ts">
     import { Component, Vue } from 'vue-property-decorator';
-    import HeaderlessInput from '../../components/common/HeaderlessInput.vue';
+    import HeaderlessInput from '@/components/common/HeaderlessInput.vue';
     import { LOADING_CLASSES } from '@/utils/constants/classConstants';
     import { forgotPasswordRequest } from '@/api/users';
     import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
     import ROUTES from '@/utils/constants/routerConstants';
+    import { validateEmail } from '@/utils/validation';
 
     @Component(
         {
@@ -17,6 +18,7 @@
                 return {
                     loadingClassName: LOADING_CLASSES.LOADING_OVERLAY,
                     email: '',
+                    emailError: '',
                 };
             },
             components: {
@@ -25,24 +27,38 @@
             methods: {
                 setEmail: function (value: string): void {
                     this.$data.email = value;
+                    this.$data.emailError = '';
                 },
                 onSendConfigurations: async function (): Promise<any> {
-                    if (!this.$data.email) {
+                    let self = this as any;
+
+                    if (!self.validateFields()) {
                         return;
                     }
 
                     let passwordRecoveryResponse = await forgotPasswordRequest(this.$data.email);
-                    if (passwordRecoveryResponse.isSuccess) {
-                        this.$store.dispatch(NOTIFICATION_ACTIONS.SUCCESS, 'Please look for instructions at your email');
-                    } else {
+                    if (!passwordRecoveryResponse.isSuccess) {
                         this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, passwordRecoveryResponse.errorMessage);
+
+                        return;
                     }
+
+                    this.$store.dispatch(NOTIFICATION_ACTIONS.SUCCESS, 'Please look for instructions at your email');
                 },
                 onBackToLoginClick: function() {
                     this.$router.push(ROUTES.LOGIN.path);
                 },
                 onLogoClick: function () {
-                   location.reload()
+                   location.reload();
+                },
+                validateFields: function (): boolean {
+                    const isEmailValid = validateEmail(this.$data.email.trim());
+
+                    if (!isEmailValid) {
+                        this.$data.emailError = 'Invalid Email';
+                    }
+
+                    return isEmailValid;
                 }
             }
         })
diff --git a/web/satellite/src/views/forgotPassword/forgotPassword.html b/web/satellite/src/views/forgotPassword/forgotPassword.html
index d1cc855e4..f338c394a 100644
--- a/web/satellite/src/views/forgotPassword/forgotPassword.html
+++ b/web/satellite/src/views/forgotPassword/forgotPassword.html
@@ -8,8 +8,8 @@
 	<img class="image" src="../../../static/images/AuthImage.svg" alt="" >
 	<div class="forgot-password-container__wrapper">
 		<div class="forgot-password-container__header">
-			<img v-on:click="onLogoClick" class="forgot-password-container__logo" src="../../../static/images/Logo.svg" alt="logo">
-			<div class="forgot-password-container__login-button" v-on:click="onBackToLoginClick">
+			<img @click="onLogoClick" class="forgot-password-container__logo" src="../../../static/images/Logo.svg" alt="logo">
+			<div class="forgot-password-container__login-button" @click="onBackToLoginClick">
 				<p>Back to Login</p>
 			</div>
 		</div>
@@ -22,12 +22,12 @@
 				<HeaderlessInput
 						class="full-input"
 						placeholder="Enter Your Email"
+                        :error="emailError"
 						@setData="setEmail"
 						width="100%"
-						height="46px"
-						isWhite>
+						height="46px">
 				</HeaderlessInput>
-				<div class="forgot-password-area__submit-container" v-on:click.prevent="onSendConfigurations">
+				<div class="forgot-password-area__submit-container" @click.prevent="onSendConfigurations">
 					<div class="forgot-password-area__submit-container__send-button" >
 						<p>Send Configurations</p>
 					</div>
diff --git a/web/satellite/src/views/forgotPassword/forgotPassword.scss b/web/satellite/src/views/forgotPassword/forgotPassword.scss
index ba8c5d183..0d6138636 100644
--- a/web/satellite/src/views/forgotPassword/forgotPassword.scss
+++ b/web/satellite/src/views/forgotPassword/forgotPassword.scss
@@ -160,7 +160,7 @@ body {
       }
 
       &:hover {
-        box-shadow: 0px 16px 24px #3A54DF;
+        box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4);
       }
     }
   }
diff --git a/web/satellite/src/views/login/Login.vue b/web/satellite/src/views/login/Login.vue
index a678b85ba..090ec5616 100644
--- a/web/satellite/src/views/login/Login.vue
+++ b/web/satellite/src/views/login/Login.vue
@@ -1,4 +1,4 @@
- // Copyright (C) 2019 Storj Labs, Inc.
+// Copyright (C) 2019 Storj Labs, Inc.
 // See LICENSE for copying information.
 
 <template src="./login.html"></template>
@@ -13,16 +13,18 @@ import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actio
 import { getTokenRequest } from '@/api/users';
 import { LOADING_CLASSES } from '@/utils/constants/classConstants';
 import { AppState } from '@/utils/constants/appStateEnum';
+import { validateEmail, validatePassword } from '@/utils/validation';
 
 @Component({
     data: function () {
-
         return {
             email: '',
             password: '',
             loadingClassName: LOADING_CLASSES.LOADING_OVERLAY,
             loadingLogoClassName: LOADING_CLASSES.LOADING_LOGO,
             forgotPasswordRouterPath: ROUTES.FORGOT_PASSWORD.path,
+            emailError: '',
+            passwordError: '',
         };
     },
     methods: {
@@ -31,16 +33,20 @@ import { AppState } from '@/utils/constants/appStateEnum';
         },
         setEmail: function (value: string): void {
             this.$data.email = value;
+            this.$data.emailError = '';
         },
         setPassword: function (value: string): void {
             this.$data.password = value;
+            this.$data.passwordError = '';
         },
         activateLoadingOverlay: function(): void {
             this.$data.loadingClassName = LOADING_CLASSES.LOADING_OVERLAY_ACTIVE;
             this.$data.loadingLogoClassName = LOADING_CLASSES.LOADING_LOGO_ACTIVE;
         },
         onLogin: async function (): Promise<any> {
-            if (!this.$data.email || !this.$data.password) {
+            let self = this as any;
+
+            if (!self.validateFields()) {
                 return;
             }
 
@@ -59,6 +65,21 @@ import { AppState } from '@/utils/constants/appStateEnum';
                 this.$router.push(ROUTES.PROJECT_DETAILS.path);
             }, 2000);
         },
+        validateFields: function (): boolean {
+            let isNoErrors = true;
+
+            if (!validateEmail(this.$data.email.trim())) {
+                this.$data.emailError = 'Invalid Email';
+                isNoErrors = false;
+            }
+
+            if (!validatePassword(this.$data.password)) {
+                this.$data.passwordError = 'Invalid Password';
+                isNoErrors = false;
+            }
+
+            return isNoErrors;
+        },
         onSignUpClick: function (): void {
             this.$router.push(ROUTES.REGISTER.path);
         },
diff --git a/web/satellite/src/views/login/login.html b/web/satellite/src/views/login/login.html
index a2694e5c9..a32d2d6a7 100644
--- a/web/satellite/src/views/login/login.html
+++ b/web/satellite/src/views/login/login.html
@@ -1,14 +1,14 @@
 <!--Copyright (C) 2019 Storj Labs, Inc.-->
 <!--See LICENSE for copying information.-->
 
-<div class="login-container" v-on:keyup.enter="onLogin">
-	<div v-bind:class="loadingClassName"></div>
-	<img v-bind:class="loadingLogoClassName" src="../../../static/images/LogoWhite.svg" alt="loading-logo">
+<div class="login-container" @keyup.enter="onLogin">
+	<div :class="loadingClassName"></div>
+	<img :class="loadingLogoClassName" src="../../../static/images/LogoWhite.svg" alt="loading-logo">
 	<img class="image" src="../../../static/images/AuthImage.svg" alt="" >
 	<div class="login-container__wrapper">
 		<div class="login-container__header">
-			<img class="login-container__logo" src="../../../static/images/Logo.svg" alt="logo" v-on:click="onLogoClick">
-			<div class="login-container__register-button" v-on:click.prevent="onSignUpClick">
+			<img class="login-container__logo" src="../../../static/images/Logo.svg" alt="logo" @click="onLogoClick">
+			<div class="login-container__register-button" @click.prevent="onSignUpClick">
 				<p>Create Account</p>
 			</div>
 		</div>
@@ -20,6 +20,7 @@
 				<HeaderlessInput
 						class="login-area__email-input"
 						placeholder="Email"
+                        :error="emailError"
 						@setData="setEmail"
 						height="46px"
 						width="100%">
@@ -27,16 +28,17 @@
 				<HeaderlessInput
 						class="login-area__password-input"
 						placeholder="Password"
+                        :error="passwordError"
 						@setData="setPassword"
 						width="100%"
 						height="46px"
 						isPassword>
 				</HeaderlessInput>
 				<div class="login-area__submit-area">
-					<router-link v-bind:to="forgotPasswordRouterPath" class="login-area__navigation-area__nav-link" exact>
+					<router-link :to="forgotPasswordRouterPath" class="login-area__navigation-area__nav-link" exact>
 						<h3><strong>Forgot password?</strong></h3>
 					</router-link>
-					<div class="login-area__submit-area__login-button" v-on:click.prevent="onLogin">
+					<div class="login-area__submit-area__login-button" @click.prevent="onLogin">
 						<p>Log In</p>
 					</div>
 				</div>
diff --git a/web/satellite/src/views/login/login.scss b/web/satellite/src/views/login/login.scss
index 8a8aea9f2..ebf5ebbd7 100644
--- a/web/satellite/src/views/login/login.scss
+++ b/web/satellite/src/views/login/login.scss
@@ -158,7 +158,7 @@
   &__info-area {
     width: 100%;
     height: 42px;
-    margin-top: 300px;
+    margin-top: 250px;
     display: flex;
     align-items: flex-end;
     justify-content: flex-start;
@@ -255,8 +255,8 @@
 
   &__logo {
     position: absolute;
-    left: 50%;
-    top: 50%;
+    left: calc(50% - 104px);
+    top: calc(50% - 60px);
     transform: translate(-50%);
     display: block;
     width: 240px;
@@ -391,7 +391,7 @@
     }
 
     &__info-area {
-      margin-top: 200px;
+      margin-top: 150px;
       font-size: 10px;
 
       &__signature {
@@ -484,7 +484,7 @@
 @media screen and (max-height: 850px) {
   .login-area {
     &__info-area {
-      margin-top: 200px;
+      margin-top: 150px;
     }
   }
 }
@@ -492,7 +492,7 @@
 @media screen and (max-height: 700px) {
   .login-area {
     &__info-area {
-      margin-top: 150px;
+      margin-top: 100px;
     }
   }
 }
@@ -500,7 +500,7 @@
 @media screen and (max-height: 610px) {
   .login-area {
     &__info-area {
-      margin-top: 100px;
+      margin-top: 50px;
     }
   }
 }
diff --git a/web/satellite/src/views/register/Register.vue b/web/satellite/src/views/register/Register.vue
index 1db15a2a4..d9ca81690 100644
--- a/web/satellite/src/views/register/Register.vue
+++ b/web/satellite/src/views/register/Register.vue
@@ -102,7 +102,9 @@ import { createUserRequest } from '../../api/users';
             onCreateClick: function (): any {
                 let self = this as any;
 
-                if (!self.validateFields()) return;
+                if (!self.validateFields()) {
+                    return;
+                }
 
                 this.$data.loadingClassName = LOADING_CLASSES.LOADING_OVERLAY_ACTIVE;
 
diff --git a/web/satellite/src/views/register/register.scss b/web/satellite/src/views/register/register.scss
index baafd40e2..1528ee527 100644
--- a/web/satellite/src/views/register/register.scss
+++ b/web/satellite/src/views/register/register.scss
@@ -27,7 +27,7 @@ body {
 
     span {
       position: absolute;
-      top: 66px;
+      top: 58px;
       right: 43px;
     }
   }