Updated both signin and register with new seasoned-button and -input components. Still needs some styling fixed, duplicated scoped styling

src/components/Register.vue

@@ -1,43 +1,25 @@
 <template>
   <section class="profile">
     <div class="profile__content">
-      <header class="profile__header">
+      <h2 class='settings__header'>Register new user</h2>
-        <h2 class="profile__title">Register new user</h2>
-      </header>
 
       <form class="form">
-        <div class="form__buffer"></div>
+        <seasoned-input text="username" icon="Email"
+                        @inputValue="setValue('username', $event)"></seasoned-input>
+        <seasoned-input text="password" icon="Keyhole" type="password"
+                        @inputValue="setValue('password', $event)"></seasoned-input>
+        <seasoned-input text="repeat password" icon="Keyhole" type="password"
+                        @inputValue="setValue('passwordRepeat', $event)"></seasoned-input>
 
-        <div class="center">
+        <transition name="message-fade">
-          <div class="form__group">
+          <div class="message" :class="messageClass" v-if="showMessage">
-            <svg class="form__group__input-icon">
+            <span class="message-text">{{ messageText }}</span>
-              <use xlink:href="#iconEmail"></use>
+            <span class="message-dismiss" v-on:click="dismissMessage">X</span>
-            </svg>
-            <input class="form__group-input" type="username" ref="username" placeholder="Username" >
-          </div>
-          <div class="form__group">
-            <svg class="form__group__input-icon">
-              <use xlink:href="#iconKeyhole"></use>
-            </svg>
-            <input class="form__group-input" type="password" ref="password" placeholder="Password">
-          </div>
-          <div class="form__group">
-            <svg class="form__group__input-icon">
-              <use xlink:href="#iconKeyhole"></use>
-            </svg>
-            <input class="form__group-input" type="password" ref="password_re" placeholder="Repeat password">
           </div>
+        </transition>
 
-          <transition name="message-fade">
+        <div class="form__group">
-            <div class="message" :class="messageClass" v-if="showMessage">
+          <seasoned-button @click="requestNewUser">Register</seasoned-button>
-              <span class="message-text">{{ messageText }}</span>
-              <span class="message-dismiss" v-on:click="dismissMessage">X</span>
-            </div>
-          </transition>
-
-          <div class="form__group">
-            <button type="button" class="button" v-on:click="requestNewUser">Register</button>
-          </div>
         </div>
       </form>
       
@@ -47,12 +29,11 @@
         </router-link>
       </div>
 
-      <!-- <created-lists></created-lists> -->
     </div>
     <section class="not-found" v-if="userLoggedIn === false">
       <div class="not-found__content">
         <h2 class="not-found__title">Authentication Request Failed</h2>
-        <button class="not-found__button button" @click="requestToken">Log In</button>
+        <button class="not-found__button button">Log In</button>
       </div>
     </section>
   </section>
@@ -61,15 +42,17 @@
 <script>
 import axios from 'axios'
 import storage from '../storage.js'
-import MoviesList from './MoviesList.vue'
+import SeasonedButton from '@/components/ui/SeasonedButton.vue'
-// import CreatedLists from './CreatedLists.vue'
+import SeasonedInput from '@/components/ui/SeasonedInput.vue'
 
 export default {
-  components: { MoviesList },
+  components: { SeasonedButton, SeasonedInput },
   data(){
     return{
       userLoggedIn: '',
-      userName: '',
+      username: undefined,
+      password: undefined,
+      passwordRepeat: undefined,
       showMessage: false,
       messageClass: 'message-success',
       messageText: 'hello world'
@@ -77,9 +60,9 @@ export default {
   },
   methods: {
     requestNewUser(){
-      let username = this.$refs.username.value;
+      let username = this.username
-      let password = this.$refs.password.value;
+      let password = this.password
-      let password_re = this.$refs.password_re.value;
+      let password_re = this.passwordRepeat
 
       let verifyCredentials = this.checkCredentials(username, password, password_re);
       
@@ -142,6 +125,9 @@ export default {
     dismissMessage(){
       this.showMessage = false;
     },
+    setValue(l, t) {
+      this[l] = t
+    },
     logOut(){
       localStorage.clear();
       eventHub.$emit('setUserStatus');
@@ -158,111 +144,58 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
-.message-enter-active {
+@import "./src/scss/message";
-  transition: all .3s ease;
+
-}
+// DUPLICATE CODE
-.message-fade-leave-active {
+.settings {
-  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+  padding: 35px;
-}
+
-.message-fade-enter, .message-fade-leave-to {
+  &__header {
-  opacity: 0;
+    margin: 0;
-}
+    line-height: 16px;
-.message{
+    color: $c-dark;
-  width: 75%;
-  max-width: 35rem;
-  margin: 0 auto;
-  margin-bottom: 1rem;
-  padding: 12px 15px 12px 15px;
-  position: relative;
-  &-text{
     font-weight: 300;
+    margin-bottom: 20px;
+    text-transform: uppercase;
   }
-  &-dismiss{
+}
-    position: absolute;
+.profile__content {
-    font-size: 17px;
+  padding: 35px;
-    font-weight: 100;
+  display: flex;
-    top: 0;
+  justify-content: center;
-    right: 0;
+  flex-direction: column;
-    margin-top: 2px;
-    margin-right: 5px;
-    cursor: pointer;
-  }
 }
 
-.message-warning{
-  background-color: #f2dede;
-  border: 1px solid #b75b91;
-  color: #b75b91;
-}
-.message-success{
-  background-color: #dff0d9;
-  border: 1px solid #3e7549;
-  color: #3e7549;
-}
 
 .center {
   justify-content: center;
 }
-.form{
+
-  z-index: 15;
+.form {
-  background-color: $c-light;
+  // TODO, fix this. if single child it adds weird margin
-  display: flex;
+  > div:last-child {
-  flex-direction: column;
+    margin-top: 1rem;
-  @include tablet-min{
-  }
-  &__buffer{
-    width: 100%;
-    height: 4rem;
   }
+
   &__group{
-    display: flex;
+     justify-content: unset;
-    justify-content: center;
+     &__input-icon {
-    @include tablet-min{
+        margin-top: 8px;
-    }
+        height: 22px;
-    &-input{
+        width: 22px;
-      width: 75%;
+     }
-      max-width: 35rem;
+     &-input {
-      padding: 15px 10px 15px 45px;
+        padding: 10px 5px 10px 45px;
-      outline: none;
+        height: 40px;
-      background-color: $c-white;
+        font-size: 17px;
-      color: $c-dark;
+        width: 75%;
-      font-weight: 100;
+        // @include desktop-min {
-      font-size: 20px;
+        //    width: 400px;
-      border: 1px solid $c-dark;
+        // }
-      margin-left: -2.2rem;
+     }
-      z-index: 3;
-      &:focus, &:hover {
-        border-color: $c-dark;
-      }
-    }
-    &-input[type="username"] {
-      margin-bottom: 3rem;
-    }
-    &__input-icon{
-      width: 24px;
-      height: 24px;
-      fill: rgba($c-dark, 0.5);
-      transition: fill 0.5s ease;
-      pointer-events: none;
-      margin-top: 15px;
-      margin-left: 15px;
-      z-index: 8;
-    }
-    &-link{
-      text-decoration: none;
-      color: black;
-      margin-top: 1rem;
-    }
-    &-signin{
-      text-transform: uppercase;
-      font-weight: 300;
-      font-size: 11px;
-      line-height: 2;
-      letter-spacing: 0.5px;
-    }
   }
 }
 

src/components/Signin.vue

@@ -1,25 +1,17 @@
 <template>
   <section class="profile">
     <div class="profile__content">
-      <header class="profile__header">
+      <h2 class='settings__header'>Sign in</h2>
-        <h2 class="profile__title">Register new user</h2>
-      </header>
 
       <form class="form">
         <div class="form__buffer"></div>
-        <div>
+
-          <div class="form__group">
+          <seasoned-input text="username" icon="Email" type="username"
-            <svg class="form__group__input-icon">
+                          @inputValue="setValue('username', $event)" />
-              <use xlink:href="#iconEmail"></use>
+          <seasoned-input text="username" icon="Keyhole" type="password"
-            </svg>
+                          @inputValue="setValue('password', $event)" />
-            <input class="form__group-input" type="username" ref="username" placeholder="Username" >
+
-          </div>
+          <seasoned-button @click="signin">sign in</seasoned-button>
-          <div class="form__group">
-            <svg class="form__group__input-icon">
-              <use xlink:href="#iconKeyhole"></use>
-            </svg>
-            <input class="form__group-input" type="password" ref="password" placeholder="Password" v-on:keyup.enter="signin">
-          </div>
           
           <transition name="message-fade">
               <div class="message" :class="messageClass" v-if="showMessage">
@@ -27,11 +19,6 @@
                 <span class="message-dismiss" @click="showMessage=false">X</span>
               </div>
             </transition>
-          
-          <div class="form__group">
-            <button type="button" class="button" v-on:click="signin">Sign in</button>
-          </div>
-        </div>
       </form>
       
       <div class="form__group">
@@ -40,7 +27,6 @@
         </router-link>
       </div>
 
-      <!-- <created-lists></created-lists> -->
     </div>
   </section>
 </template>
@@ -48,24 +34,28 @@
 <script>
 import axios from 'axios'
 import storage from '../storage.js'
-import MoviesList from './MoviesList.vue'
+import SeasonedInput from '@/components/ui/SeasonedInput.vue'
-// import CreatedLists from './CreatedLists.vue'
+import SeasonedButton from '@/components/ui/SeasonedButton.vue'
 
 export default {
-  components: { MoviesList },
+  components: { SeasonedInput, SeasonedButton },
   data(){
     return{
       userLoggedIn: '',
-      userName: '',
       showMessage: false,
       messageClass: 'message-success',
-      messageText: 'hello world'
+      messageText: 'hello world',
+      username: undefined,
+      password: undefined
     }
   },
   methods: {
+    setValue(l, t) {
+      this[l] = t
+    },
     signin(){
-      let username = this.$refs.username.value;
+      let username = this.username;
-      let password = this.$refs.password.value;
+      let password = this.password;
 
       axios.post(`https://api.kevinmidboe.com/api/v1/user/login`, {
         username: username,
@@ -118,5 +108,51 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+@import "./src/scss/message";
+
+// DUPLICATE CODE
+.settings {
+  padding: 35px;
+
+  &__header {
+    margin: 0;
+    line-height: 16px;
+    color: $c-dark;
+    font-weight: 300;
+    margin-bottom: 20px;
+    text-transform: uppercase;
+  }
+}
+.profile__content {
+  padding: 35px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.form {
+  > div:last-child {
+    margin-top: 1rem;
+  }
+
+  &__group{
+     justify-content: unset;
+     &__input-icon {
+        margin-top: 8px;
+        height: 22px;
+        width: 22px;
+     }
+     &-input {
+        padding: 10px 5px 10px 45px;
+        height: 40px;
+        font-size: 17px;
+        width: 75%;
+        // @include desktop-min {
+        //    width: 400px;
+        // }
+     }
+  }
+}
 </style>