New client many fixes (#8981)

* Footer style fixes

* Limited string display

* Fixed background reload

* Began adding more avatar items

* Fixed challenge updated cats and official to be seen by admins

* Fixed min prize

* Fixed required fields

* Added my challenges and find challenges to menu

* Removed nav to party page when have no party

* Updated user and notifications icon

* Added accept, reject and messages

* Added selfcare

* Underline links

* Added forgot password

* Fixed task adding

* Disabled habit options that should be

* Added markdown to tags

* Added confirm to delete

* Fixed cancel/delete style

* Fixed rounding

* Added gold icon

* Fixed task icon styles

* Fixed margin botton

* Fixed some repeat styles

* Fixed custom reward style

* Hide like count 0

* Added new tavern images

* Redirect to party page after create

* Hid leader options from non leaders

* Removed manager options from non group plan

* Fixed some nav styles

* Fixed overlay color

* Prevented edit data from being transfered to create

* Added hover state for spells

* Add performance fixes for chat avatars

* Fixed merge conflicts

* Updated fron navigation

* Fixed reg gryphon logo

* Began adding gem modal functionality

* Added purchase gems with gold

* Fixed restore

* Replaced description with summary

* Spells that target tasks fix

* Added initial challenge task load

* Fixed lint issue

website/client/components/auth/registerLogin.vue

@@ -3,10 +3,10 @@
   #top-background
     .seamless_stars_varied_opacity_repeat
 
-  form#login-form(v-on:submit.prevent='handleSubmit', @keyup.enter="handleSubmit")
+  form#login-form(v-on:submit.prevent='handleSubmit', @keyup.enter="handleSubmit", v-if='!forgotPassword')
     .text-center
       div
-        .svg-icon.gryphon(v-html="icons.gryphon")
+        .svg-icon.gryphon
       div
         .svg-icon.habitica-logo(v-html="icons.habiticaIcon")
     .form-group.row.text-center
@@ -29,6 +29,7 @@
       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')
     .form-group(v-if='registering')
       label(for='confirmPasswordInput', v-once) {{$t('confirmPassword')}}
@@ -43,6 +44,21 @@
         router-link(:to="{name: 'register'}",  v-if='!registering', exact)
           a.toggle-link(v-once) Don't have an account? Join Habitica!
 
+  form#forgot-form(v-on:submit.prevent='handleSubmit', @keyup.enter="handleSubmit", v-if='forgotPassword')
+    .text-center
+      div
+        .svg-icon.gryphon
+      div
+        .svg-icon.habitica-logo(v-html="icons.habiticaIcon")
+      .header
+        h2 Email a Password Reset Link
+        p Enter the email address you used to register your Habitica account.
+    .form-group.row.text-center
+      label(for='usernameInput', v-once) {{$t('email')}}
+      input#usernameInput.form-control(type='text', :placeholder='$t("emailPlaceholder")', v-model='username')
+    .text-center
+      .btn.btn-info(@click='forgotPasswordLink()', v-once) {{$t('sendLink')}}
+
   #bottom-wrap
     #bottom-background
       .seamless_mountains_demo_repeat
@@ -56,6 +72,7 @@
 
   small a {
     color: #fff;
+    text-decoration: underline;
   }
 </style>
 
@@ -85,7 +102,7 @@
     color: $purple-400;
   }
 
-  #login-form {
+  #login-form, #forgot-form {
     margin: 0 auto;
     width: 40em;
     padding-top: 5em;
@@ -93,9 +110,20 @@
     position: relative;
     z-index: 1;
 
+    .header {
+
+      h2 {
+        color: $white;
+      }
+
+      color: $white;
+    }
+
     .gryphon {
+      background-image: url('~assets/images/melior@3x.png');
       width: 63.2px;
       height: 69.4px;
+      background-size: cover;
       color: $white;
       margin: 0 auto;
     }
@@ -188,9 +216,14 @@
   .toggle-link {
     color: #fff !important;
   }
+
+  .forgot-password {
+    color: #bda8ff !important;
+  }
 </style>
 
 <script>
+import axios from 'axios';
 import hello from 'hellojs';
 
 import gryphon from 'assets/svg/gryphon.svg';
@@ -205,6 +238,7 @@ export default {
       email: '',
       password: '',
       passwordConfirm: '',
+      forgotPassword: false,
     };
 
     data.icons = Object.freeze({
@@ -282,8 +316,25 @@ export default {
         return;
       }
 
+      if (this.forgotPassword) {
+        this.forgotPasswordLink();
+        return;
+      }
+
       this.login();
     },
+    async forgotPasswordLink () {
+      if (!this.username) {
+        alert('Email is required');
+        return;
+      }
+
+      await axios.post('/api/v3/user/reset-password', {
+        email: this.username,
+      });
+
+      alert(this.$t('newPassSent'));
+    },
   },
 };
 </script>