From 19789eb7ab15d84f0b3d1f5d2c6e1390def2f7fa Mon Sep 17 00:00:00 2001
From: Matteo Pagliazzi <matteopagliazzi@gmail.com>
Date: Thu, 31 Aug 2017 15:15:17 +0200
Subject: [PATCH] Client Fixes (#9003)

* fix strings on login and register pages

* back to older styles for placeholder

* scope->scoped

* remove old css
---
 .../client/components/achievements/death.vue  |  2 +-
 .../components/achievements/dropsEnabled.vue  |  2 +-
 .../components/achievements/lowHealth.vue     |  2 +-
 .../achievements/questCompleted.vue           |  6 -----
 .../achievements/questInvitation.vue          |  6 -----
 .../components/achievements/rebirth.vue       |  6 -----
 .../achievements/rebirthEnabled.vue           |  2 +-
 .../client/components/achievements/streak.vue |  6 -----
 .../components/achievements/testing.vue       |  2 +-
 .../achievements/testingletiant.vue           |  2 +-
 .../components/achievements/ultimateGear.vue  |  2 +-
 .../components/achievements/wonChallenge.vue  |  2 +-
 .../client/components/auth/registerLogin.vue  | 22 +++++++++----------
 website/client/components/settings/api.vue    |  2 +-
 website/client/components/settings/site.vue   |  2 +-
 website/common/locales/en/front.json          | 11 +++++-----
 16 files changed, 27 insertions(+), 50 deletions(-)

diff --git a/website/client/components/achievements/death.vue b/website/client/components/achievements/death.vue
index ca6f571a5a..09a18eaba2 100644
--- a/website/client/components/achievements/death.vue
+++ b/website/client/components/achievements/death.vue
@@ -22,7 +22,7 @@
         h4.text-center(v-html="$t('dyingOftenTips')")
 </template>
 
-<style scope>
+<style scoped>
   .info {
     height: 220px;
   }
diff --git a/website/client/components/achievements/dropsEnabled.vue b/website/client/components/achievements/dropsEnabled.vue
index 11585dc703..9f2aa8f81f 100644
--- a/website/client/components/achievements/dropsEnabled.vue
+++ b/website/client/components/achievements/dropsEnabled.vue
@@ -13,7 +13,7 @@
         button.btn.btn-primary(@click='close()') {{ $t('close') }}
 </template>
 
-<style scope>
+<style scoped>
   .item-drop-icon {
     margin: 0 auto;
   }
diff --git a/website/client/components/achievements/lowHealth.vue b/website/client/components/achievements/lowHealth.vue
index 482b0cd4f8..f0a6958e69 100644
--- a/website/client/components/achievements/lowHealth.vue
+++ b/website/client/components/achievements/lowHealth.vue
@@ -26,7 +26,7 @@
         button.btn.btn-primary(@click='acknowledgeHealthWarning()') {{ $t('ok') }}
 </template>
 
-<style scope>
+<style scoped>
   .hero-stats {
     position: absolute;
     margin-left: 9em;
diff --git a/website/client/components/achievements/questCompleted.vue b/website/client/components/achievements/questCompleted.vue
index 2cc93dc51d..2423937559 100644
--- a/website/client/components/achievements/questCompleted.vue
+++ b/website/client/components/achievements/questCompleted.vue
@@ -9,12 +9,6 @@
       button.btn.btn-primary(@click='setQuestCompleted()') {{ $t('ok') }}
 </template>
 
-<style scope>
-  .dont-despair, .death-penalty {
-    margin-top: 1.5em;
-  }
-</style>
-
 <script>
 import bModal from 'bootstrap-vue/lib/components/modal';
 import quests from 'common/script/content/quests';
diff --git a/website/client/components/achievements/questInvitation.vue b/website/client/components/achievements/questInvitation.vue
index c8cef4b778..f90a39a6ac 100644
--- a/website/client/components/achievements/questInvitation.vue
+++ b/website/client/components/achievements/questInvitation.vue
@@ -44,12 +44,6 @@
       button.btn.btn-primary(ng-click='questAccept(); $close()') {{ $t('accept') }}
 </template>
 
-<style scope>
-  .dont-despair, .death-penalty {
-    margin-top: 1.5em;
-  }
-</style>
-
 <script>
 import bModal from 'bootstrap-vue/lib/components/modal';
 
diff --git a/website/client/components/achievements/rebirth.vue b/website/client/components/achievements/rebirth.vue
index 36b85891be..ba9f19f80e 100644
--- a/website/client/components/achievements/rebirth.vue
+++ b/website/client/components/achievements/rebirth.vue
@@ -12,12 +12,6 @@
     achievement-footer
 </template>
 
-<style scope>
-  .dont-despair, .death-penalty {
-    margin-top: 1.5em;
-  }
-</style>
-
 <script>
 import bModal from 'bootstrap-vue/lib/components/modal';
 import achievementFooter from './achievementFooter';
diff --git a/website/client/components/achievements/rebirthEnabled.vue b/website/client/components/achievements/rebirthEnabled.vue
index 89cde02325..75b465cb3e 100644
--- a/website/client/components/achievements/rebirthEnabled.vue
+++ b/website/client/components/achievements/rebirthEnabled.vue
@@ -10,7 +10,7 @@
         button.btn.btn-primary(@click='close()') {{ $t('close') }}
 </template>
 
-<style scope>
+<style scoped>
   .rebirth_orb {
     margin: 0 auto;
   }
diff --git a/website/client/components/achievements/streak.vue b/website/client/components/achievements/streak.vue
index 6a5ecd9f64..90ded6a32a 100644
--- a/website/client/components/achievements/streak.vue
+++ b/website/client/components/achievements/streak.vue
@@ -15,12 +15,6 @@
     achievement-footer
 </template>
 
-<style scope>
-  .dont-despair, .death-penalty {
-    margin-top: 1.5em;
-  }
-</style>
-
 <script>
 import bModal from 'bootstrap-vue/lib/components/modal';
 import achievementFooter from './achievementFooter';
diff --git a/website/client/components/achievements/testing.vue b/website/client/components/achievements/testing.vue
index ff728c1346..8228642f5e 100644
--- a/website/client/components/achievements/testing.vue
+++ b/website/client/components/achievements/testing.vue
@@ -14,7 +14,7 @@
             .btn.btn-primary(@click='takeMethere()') {{ $t('guildReminderCTA') }}
 </template>
 
-<style scope>
+<style scoped>
   .scene_guilds {
     margin: 0 auto;
   }
diff --git a/website/client/components/achievements/testingletiant.vue b/website/client/components/achievements/testingletiant.vue
index b4965eb726..d31bc3ccf6 100644
--- a/website/client/components/achievements/testingletiant.vue
+++ b/website/client/components/achievements/testingletiant.vue
@@ -15,7 +15,7 @@
             .btn.btn-primary(@click='takeMethere()') {{ $t('guildReminderCTA') }}
 </template>
 
-<style scope>
+<style scoped>
   .scene_guilds {
     margin: 0 auto;
   }
diff --git a/website/client/components/achievements/ultimateGear.vue b/website/client/components/achievements/ultimateGear.vue
index a1c6fe5436..3aab6a0036 100644
--- a/website/client/components/achievements/ultimateGear.vue
+++ b/website/client/components/achievements/ultimateGear.vue
@@ -30,7 +30,7 @@
     achievement-footer
 </template>
 
-<style scope>
+<style scoped>
   .shop_armoire {
     margin: 0 auto;
   }
diff --git a/website/client/components/achievements/wonChallenge.vue b/website/client/components/achievements/wonChallenge.vue
index 93f9a134d3..bfa7137a3c 100644
--- a/website/client/components/achievements/wonChallenge.vue
+++ b/website/client/components/achievements/wonChallenge.vue
@@ -22,7 +22,7 @@
         a.tumblr-share-button(data-href='#{env.BASE_URL}/social/won-challenge', data-notes='none')
 </template>
 
-<style scope>
+<style scoped>
   .achievement-karaoke-2x {
     margin: 0 auto;
     margin-top: 6em;
diff --git a/website/client/components/auth/registerLogin.vue b/website/client/components/auth/registerLogin.vue
index 09940fe61f..e12bbbcd80 100644
--- a/website/client/components/auth/registerLogin.vue
+++ b/website/client/components/auth/registerLogin.vue
@@ -11,26 +11,26 @@
         .svg-icon.habitica-logo(v-html="icons.habiticaIcon")
     .form-group.row.text-center
       .col-6
-        .btn.btn-secondary.social-button(@click='socialAuth("facebook")', v-once)
+        .btn.btn-secondary.social-button(@click='socialAuth("facebook")')
           .svg-icon.social-icon(v-html="icons.facebookIcon")
-          .text {{this.registering ? $t('signUpWithSocial', {social: 'Facebook'}) : $t('loginWithSocial', {social: 'Facebook'})}}
+          .text {{registering ? $t('signUpWithSocial', {social: 'Facebook'}) : $t('loginWithSocial', {social: 'Facebook'})}}
       .col-6
-        .btn.btn-secondary.social-button(@click='socialAuth("google")', v-once)
+        .btn.btn-secondary.social-button(@click='socialAuth("google")')
           .svg-icon.social-icon(v-html="icons.googleIcon")
-          span {{this.registering ? $t('signUpWithSocial', {social: 'Google'}) : $t('loginWithSocial', {social: 'Google'})}}
+          span {{registering ? $t('signUpWithSocial', {social: 'Google'}) : $t('loginWithSocial', {social: 'Google'})}}
     .form-group(v-if='registering')
       label(for='usernameInput', v-once) {{$t('username')}}
       input#usernameInput.form-control(type='text', :placeholder='$t("usernamePlaceholder")', v-model='username')
     .form-group(v-if='!registering')
       label(for='usernameInput', v-once) {{$t('emailOrUsername')}}
-      input#usernameInput.form-control(type='text', :placeholder='$t("emailPlaceholder")', v-model='username')
+      input#usernameInput.form-control(type='text', :placeholder='$t("emailOrUsername")', v-model='username')
     .form-group(v-if='registering')
       label(for='emailInput', v-once) {{$t('email')}}
       input#emailInput.form-control(type='email', :placeholder='$t("emailPlaceholder")', v-model='email')
     .form-group
       label(for='passwordInput', v-once) {{$t('password')}}
       a.float-right.forgot-password(v-once, v-if='!registering', @click='forgotPassword = true') {{$t('forgotPassword')}}
-      input#passwordInput.form-control(type='password', :placeholder='$t("passwordPlaceholder")', v-model='password')
+      input#passwordInput.form-control(type='password', :placeholder='$t(registering ? "passwordPlaceholder" : "password")', v-model='password')
     .form-group(v-if='registering')
       label(for='confirmPasswordInput', v-once) {{$t('confirmPassword')}}
       input#confirmPasswordInput.form-control(type='password', :placeholder='$t("confirmPasswordPlaceholder")', v-model='passwordConfirm')
@@ -40,9 +40,9 @@
       .btn.btn-info(@click='login()', v-if='!registering', v-once) {{$t('login')}}
       .toggle-links
         router-link(:to="{name: 'login'}", v-if='registering', exact)
-          a.toggle-link(v-once) {{ $t('alreadyHaveAccountLogin') }}
+          a.toggle-link(v-once, v-html="$t('alreadyHaveAccountLogin')")
         router-link(:to="{name: 'register'}",  v-if='!registering', exact)
-          a.toggle-link(v-once) Don't have an account? Join Habitica!
+          a.toggle-link(v-once, v-html="$t('dontHaveAccountSignup')")
 
   form#forgot-form(v-on:submit.prevent='handleSubmit', @keyup.enter="handleSubmit", v-if='forgotPassword')
     .text-center
@@ -82,9 +82,6 @@
   .form-wrapper {
     background-color: $purple-200;
     background: $purple-200; /* For browsers that do not support gradients */
-    background: -webkit-linear-gradient(to bottom, #4f2a93, #6133b4); /* For Safari 5.1 to 6.0 */
-    background: -o-linear-gradient(to bottom, #4f2a93, #6133b4); /* For Opera 11.1 to 12.0 */
-    background: -moz-linear-gradient(to bottom, #4f2a93, #6133b4); /* For Firefox 3.6 to 15 */
     background: linear-gradient(to bottom, #4f2a93, #6133b4); /* Standard syntax */
     min-height: 100%;
   }
@@ -101,6 +98,9 @@
   :-moz-placeholder { /* Firefox 18- */
     color: $purple-400;
   }
+  ::placeholder { //  Standard browsers
+    color: $purple-400;
+  }
 
   #login-form, #forgot-form {
     margin: 0 auto;
diff --git a/website/client/components/settings/api.vue b/website/client/components/settings/api.vue
index 98d6c07746..69ff0ff61f 100644
--- a/website/client/components/settings/api.vue
+++ b/website/client/components/settings/api.vue
@@ -59,7 +59,7 @@
                 button.btn.btn-sm.btn-primary(type='submit', @click='addWebhook(newWebhook.url)') {{ $t('add') }}
 </template>
 
-<style scope>
+<style scoped>
   .section {
     margin-top: 2em;
   }
diff --git a/website/client/components/settings/site.vue b/website/client/components/settings/site.vue
index 8a43dcd32a..7183892a70 100644
--- a/website/client/components/settings/site.vue
+++ b/website/client/components/settings/site.vue
@@ -187,7 +187,7 @@
                 popover-trigger='mouseenter', :popover="$t('deleteAccPop')") {{ $t('deleteAccount') }}
 </template>
 
-<style scope>
+<style scoped>
   .usersettings h5 {
     margin-top: 1em;
   }
diff --git a/website/common/locales/en/front.json b/website/common/locales/en/front.json
index 8c9b2ca302..4fb7e37b22 100644
--- a/website/common/locales/en/front.json
+++ b/website/common/locales/en/front.json
@@ -38,7 +38,7 @@
   "dragonsilverQuote": "I can't tell you how many time and task tracking systems I've tried over the decades... [Habitica] is the only thing I've used that actually helps me get things done rather than just list them.",
   "dreimQuote": "When I discovered [Habitica] last summer, I had just failed about half of my exams. Thanks to the Dailies... I was able to organize and discipline myself, and I actually passed all my exams with really good grades a month ago.",
   "elmiQuote": "Every morning I'm looking forward to getting up so I can earn some gold!",
-  "forgotPassword": "Forgot Password",
+  "forgotPassword": "Forgot Password?",
   "emailNewPass": "Email a Password Reset Link",
   "sendLink": "Send Link",
   "evagantzQuote": "My very first dentist appointment where the hygienist was actually excited about my flossing habits. Thanks [Habitica]!",
@@ -192,8 +192,8 @@
   "unlockByline2": "Unlock new motivational tools, such as pet collecting, random rewards, spell-casting, and more!",
   "unlockHeadline": "As you stay productive, you unlock new content!",
   "useUUID": "Use UUID / API Token (For Facebook Users)",
-  "username": "Login Name",
-  "emailOrUsername": "Email or Login Name",
+  "username": "Username",
+  "emailOrUsername": "Email or Username",
   "watchVideos": "Watch Videos",
   "work": "Work",
   "zelahQuote": "With [Habitica], I can be persuaded to go to bed on time by the thought of gaining points for an early night or losing health for a late one!",
@@ -274,12 +274,13 @@
   "cannotFulfillReq":"Your request cannot be fulfilled.  Email admin@habitica.com if this error persists.",
   "modelNotFound":"This model does not exist.",
   "signUpWithSocial": "Sign up with <%= social %>",
-  "loginWithSocial": "Login with <%= social %>",
+  "loginWithSocial": "Log in with <%= social %>",
   "confirmPassword": "Confirm Password",
   "usernamePlaceholder": "e.g., HabitRabbit",
   "emailPlaceholder": "e.g., rabbit@example.com",
   "passwordPlaceholder": "e.g., ******************",
   "confirmPasswordPlaceholder": "Make sure it's the same password!",
   "joinHabitica": "Join Habitica",
-  "alreadyHaveAccountLogin": "Already have a Habitica account? Log in"
+  "alreadyHaveAccountLogin": "Already have a Habitica account? <strong>Log in.</strong>",
+  "dontHaveAccountSignup": "Don’t have a Habitica account? <strong>Sign up.</strong>"
 }