Update login page and other small changes

* Optimize all images
* Fix syntax errors

src/App.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="sans-serif" id="app">
-    <umi-header />
+    <umi-header v-if="routeName !== 'login'" />
     <div v-if="newDomain" class="fixed bottom-0 right-0 z-max bg-light-blue pa3 code shadow-1 br2 br--top br--left">
       <span>📢 <b>UPDATE:</b> umi.bruggie.com is now umi.party! 🎉</span>
       <span class="f6 fw5 dib ml1 ba b--black bg-transparent bg-animate hover-bg-blue hover-white br1 pointer ph2 pv1 tc" @click="newDomain = false">Close</span>
-
     </div>
-    <main class="bg-white center pv1 ph3 mv3">
+    <router-view v-if="routeName === 'login'"></router-view>
+    <main class="bg-white center pv1 ph3 mv3" v-else>
       <router-view v-if="loaded"></router-view>
       <div v-else-if="error">
         <img src="https://my.mixtape.moe/gazrbv.gif" class="fl pr3">

src/components/MediaItem.vue

@@ -7,7 +7,7 @@
           <i class="fa fa-question-circle-o black-40 missing-icon" aria-hidden="true"></i>
         </div>
         <div class="bg-gray playhead" style="margin-top: -4px;">
-          <div class="bg-blue playhead" :style="`width: ${Math.min(100, (data.playhead / data.duration) * 100)}%`"></div>
+          <div class="bg-blue playhead" :style="playheadStyle"></div>
         </div>
         <div class="child absolute bg-black-40 top-0 image-size">
           <i class="fa fa-play white tc play-icon" aria-hidden="true"></i>
@@ -38,6 +38,11 @@
     computed: {
       data () {
         return this.$store.state.media[this.id]
+      },
+      playheadStyle () {
+        return {
+          width: `${Math.min(100, (this.data.playhead / this.data.duration) * 100)}%`
+        }
       }
     }
   }
@@ -48,6 +53,10 @@
     height: 4px;
   }
 
+  .playhead > div {
+    width: 0;
+  }
+
   .media-item.medium {
     width: 300px;
   }

src/pages/Dashboard.vue

@@ -41,7 +41,7 @@
     <div class="dashboard-section">
       <h2 class="fw4 mv0 pb3 bb"><i class="fa fa-calendar-o mr1" aria-hidden="true"></i> Latest releases</h2>
       <div v-if="Object.keys(splits).length !== 0">
-        <div v-for="(media, title) in splits">
+        <div v-for="(media, title) in splits" :key="title">
           <h3 class="fw4 near-black pb2 bb b--silver">{{title}}</h3>
           <div class="center">
             <media-item v-for="d in media" :key="d.media_id" :id="d.media_id" :collectionName="d.series_name" size="dashboard" />

src/pages/Login.vue

@@ -1,26 +1,31 @@
 <template>
-  <div>
-    <form class="measure center mt4" @submit.prevent="login">
-      <fieldset class="ba b--transparent ph0 mh0 pb2">
-        <legend class="f3 fw6 ph0 mh0">
-          <span v-if="!loading && !formError">Sign In</span>
-          <span v-if="loading">Signing in...</span>
-          <span class="dark-red" v-if="formError">{{ formError }}</span>
-        </legend>
-        <div class="mt3">
-          <label class="db fw6 lh-copy f6 dark-gray" for="username">Username / Email</label>
-          <input class="pa2 input-reset ba b--black-20 br1 bg-transparent w-100" type="text" name="username" v-model="username" required>
+  <div class="relative overflow-hidden login-container">
+    <div class="w-100 ph5 pv3 center absolute z-2">
+      <h1 class="tc white f1 mb0">UMI!</h1>
+      <h2 class="tc white fw5 mt1 mb2">The improved Crunchyroll player.</h2>
+      <h3 class="tc white fw5 mt0">Watch together online, sync to MyAnimeList, and more.</h3>
+      <form class="measure center bg-white shadow-2 br2 pa3" @submit.prevent="login">
+        <span class="dark-red" v-if="formError">{{ formError }}</span>
+        <legend class="f4 fw6 ph0 mt0 mb1">Sign in with Crunchyroll</legend>
+        <fieldset class="ba b--transparent ph0 mh0 pb2">
+          <div>
+            <label class="db fw6 lh-copy f6 dark-gray" for="username">Username / Email</label>
+            <input class="pa2 input-reset ba b--black-20 br1 bg-transparent w-100" type="text" name="username" v-model="username" @focus="umiHover = true" @blur="umiHover = false" required>
+          </div>
+          <div class="mv3">
+            <label class="db fw6 lh-copy f6 dark-gray" for="password">Password</label>
+            <input class="b pa2 input-reset ba b--black-20 br1 bg-transparent w-100" type="password" name="password" v-model="password" @focus="umiHover = true" @blur="umiHover = false" required>
+          </div>
+        </fieldset>
+        <div>
+          <input class="fw6 ph3 pv2 input-reset ba b--black-20 bg-white bg-animate hover-bg-blue black hover-white br1 pointer f6 dib w-100" type="submit" :value="loading ? 'Signing in...' : 'Sign in'">
         </div>
-        <div class="mv3">
-          <label class="db fw6 lh-copy f6 dark-gray" for="password">Password</label>
-          <input class="b pa2 input-reset ba b--black-20 br1 bg-transparent w-100" type="password" name="password" v-model="password" required>
-        </div>
-      </fieldset>
-      <div>
-        <input class="fw6 ph3 pv2 input-reset ba b--black-20 bg-white bg-animate hover-bg-blue black hover-white br1 pointer f6 dib w-100" type="submit" value="Sign in">
-      </div>
-      <img src="https://media.tenor.co/images/27f277a3ecf2e3cea170ed293f6d59f7/raw" class="mt3" alt="">
-    </form>
+        <small class="pt3 db">
+          <i class="fa fa-info-circle pr1" aria-hidden="true"></i> Your password is sent to Crunchyroll, and never stored by Umi player.
+          </small>
+      </form>
+    </div>
+    <img class="absolute left-0 right-0 center umi-illustration" :class="{hover: umiHover}" src="../assets/umi-login.png" alt="Illustration of the character Umi Sonoda">
   </div>
 </template>
 
@@ -35,7 +40,8 @@
         username: '',
         password: '',
         formError: '',
-        loading: false
+        loading: false,
+        umiHover: false
       }
     },
     methods: {
@@ -44,14 +50,34 @@
 
         this.formError = null
         this.loading = true
+        this.umiHover = true
         try {
           await $store.dispatch('login', {username, password})
           $router.replace($route.query.next || '/')
         } catch (err) {
           this.formError = typeof err.message === 'string' ? err.message : err.data.message
           this.loading = false
+          this.umiHover = false
         }
       }
     }
   }
 </script>
+
+<style scoped>
+  .login-container {
+    height: 100vh;
+    min-width: 600px;
+    min-height: 965px;
+    background: linear-gradient(to bottom, #357EDD, #00449E);
+  }
+
+  .umi-illustration {
+    top: 450px;
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+
+  .umi-illustration.hover {
+    transform: translateY(-15px);
+  }
+</style>

src/pages/Queue.vue

@@ -10,7 +10,7 @@
       <queue-item v-for="d in sortedData" :key="d.queue_entry_id" :data="d" />
     </div>
     <div v-else>
-      <div v-for="n in 10" class="bg-near-white w-100 mb2 pa3 cf bb bw2 b--light-gray">
+      <div v-for="n in 10" :key="n" class="bg-near-white w-100 mb2 pa3 cf bb bw2 b--light-gray">
         <div class="animated-background">
           <div class="bg-near-white absolute mask vid-sep"></div>
           <div class="bg-near-white absolute mask vid-below-line"></div>
@@ -19,7 +19,7 @@
         </div>
       </div>
     </div>
-    <h2 class="tc" v-else>Loading your queue...</h2>
+    <h2 class="tc">Loading your queue...</h2>
   </div>
 </template>
 

src/store/index.js

@@ -98,7 +98,7 @@ const store = new Vuex.Store({
 
           const data = resp.data.data
           if (data.user.premium.indexOf('anime') === -1) {
-            return reject(new Error('Your Crunchyroll account must be premium to use Umi.'))
+            return reject(new Error('You must have a premium Crunchyroll account to use Umi.'))
           }
           commit('UPDATE_AUTH', {
             token: data.auth,
@@ -107,7 +107,7 @@ const store = new Vuex.Store({
           })
           resolve()
         } catch (err) {
-          handleError(err, reject)
+          reject(err)
         }
       })
     },