fix(usernames): various

z-index modals above Resting banner
force reload after verify username
add missing e-mail validation on frontpage
let Yesterdaily modal float behind username modal

website/client/assets/scss/modal.scss

@@ -11,6 +11,10 @@
   }
 }
 
+.modal {
+  z-index: 1350;
+}
+
 .modal-dialog {
   width: auto;
 

website/client/components/auth/authForm.vue

@@ -156,6 +156,10 @@ export default {
         }
       });
     }, 500),
+    validateEmail (email) {
+      let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+      return re.test(email);
+    },
     // @TODO: Abstract hello in to action or lib
     async socialAuth (network) {
       try {

website/client/components/auth/registerLoginReset.vue

@@ -415,6 +415,10 @@ export default {
         }
       });
     }, 500),
+    validateEmail (email) {
+      let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+      return re.test(email);
+    },
     async register () {
       // @TODO do not use alert
       if (!this.email) {

website/client/components/settings/verifyUsername.vue

@@ -206,6 +206,7 @@
         await this.$store.dispatch('user:fetch', {forceLoad: true});
         this.$root.$emit('habitica::resync-completed');
         this.$root.$emit('bv::hide::modal', 'verify-username');
+        this.$router.go(0);
       },
       restoreEmptyDisplayName () {
         if (this.temporaryDisplayName.length < 1) {

website/client/components/snackbars/notifications.vue

@@ -9,7 +9,7 @@
     position: fixed;
     right: 10px;
     width: 350px;
-    z-index: 1070; // 1070 is above modal backgrounds
+    z-index: 1400; // 1400 is above modal backgrounds
 
     &-top-pos {
       &-normal {

website/client/components/yesterdailyModal.vue

@@ -22,6 +22,17 @@
         button.btn.btn-primary(@click='close()') {{ $t('yesterDailiesCallToAction') }}
 </template>
 
+<style lang="scss">
+  #yesterdaily___BV_modal_outer_ {
+    .modal-dialog   {
+      -webkit-transform: translate(-5%, calc(50vh - 60%));
+      -ms-transform: translate(0, 50vh) translate(-5%, -60%);
+      -o-transform: translate(-5%, calc(50vh - 60%));
+      transform: translate(0, 50vh) translate(-5%, -60%);
+    }
+  }
+</style>
+
 <style lang="scss" scoped>
   @import '~client/assets/scss/colors.scss';