Replaced most of dom with seasoned-input and -button components.

src/components/Settings.vue

@@ -1,44 +1,35 @@
 <template>
   <section class="profile">
-   <demo-login-modal/>
     <div class="profile__content" v-if="userLoggedIn">
       <section class='settings'>
         <h3 class='settings__header'>Plex account</h3>
         <span class="settings__info">Sign in to your plex account to get information about recently added movies and to see your watch history</span>
 
         <form class="form">
-            <div class="form__group">
+          <seasoned-input text="plex username" icon="Email"
-               <svg class="form__group__input-icon"><use xlink:href="#iconEmail"></use></svg>
+                          @inputValue="setValue('plexUsername', $event)"/>
-               <input class="form__group-input" type="text" ref="plex_username" placeholder="Plex username"/>
+          <seasoned-input text="plex password" icon="Keyhole" type="password"
-            </div>
+                          @inputValue="setValue('plexPassword', $event)"/>
-            <div class="form__group">
+
-               <svg class="form__group__input-icon"><use xlink:href="#iconKeyhole"></use></svg>
+          <seasoned-button @click="authenticatePlex">link plex account</seasoned-button>
-               <input class="form__group-input" type="password" ref="plex_password" placeholder="Repeat new password">
-            </div>
         </form>
-         <div class="plex">
-            <button type="button" class="button" @click="authenticatePlex">Link plex account</button>
-         </div>
 
         <hr class='setting__divider'>
 
         <h3 class='settings__header'>Change password</h3>
         <form class="form">
-            <div class="form__group">
+          <seasoned-input text="new password" icon="Keyhole" type="password"
-               <svg class="form__group__input-icon"><use xlink:href="#iconKeyhole"></use></svg>
+                          @inputValue="setValue('newPass', $event)"/>
-               <input class="form__group-input" type="password" ref="password" placeholder="New password"/>
+          <seasoned-input text="repeat new password" icon="Keyhole" type="password"
-            </div>
+                          @inputValue="setValue('newPassConfirm', $event)"/>
-            <div class="form__group">
+
-               <svg class="form__group__input-icon"><use xlink:href="#iconKeyhole"></use></svg>
+          <seasoned-button @click="changePassword">change password</seasoned-button>
-               <input class="form__group-input" type="password" ref="password_re" placeholder="Repeat new password">
-            </div>
-            <div class="form__group">
-               <button type="button" class="button" @click="$modal.show('demo-login')">Change password</button>
-            </div>
         </form>
+
         <hr class='setting__divider'>
       </section>
     </div>
+
     <section class="not-found" v-if="!userLoggedIn">
       <div class="not-found__content">
         <h2 class="not-found__title">Authentication Request Failed</h2>
@@ -53,20 +44,31 @@
 <script>
 import axios from 'axios'
 import storage from '../storage.js'
-import DemoLoginModal from './demo.vue'
+import SeasonedInput from '@/components/ui/SeasonedInput.vue'
-// import CreatedLists from './CreatedLists.vue'
+import SeasonedButton from '@/components/ui/SeasonedButton.vue'
 
 export default {
-  components: { DemoLoginModal },
+  components: { SeasonedInput, SeasonedButton },
   data(){
     return{
       userLoggedIn: '',
+      plexUsername: undefined,
+      plexPassword: undefined,
+      newPass: undefined,
+      newPassConfirm: undefined
     }
   },
   methods: {
+  setValue(l, t) {
+    console.log('l, t', l, t)
+    this[l] = t
+  },
+  changePassword() {
+    return
+  },
    authenticatePlex() {
-      let username = this.$refs.plex_username.value;
+      let username = this.plexUsername
-      let password = this.$refs.plex_password.value;
+      let password = this.plexPassword
       console.log(username, password)
 
       axios({
@@ -78,7 +80,7 @@ export default {
             'X-Plex-Version': 'v2.0.24',
             'X-Plex-Platform-Version': '4.13.0-36-generic',
             'X-Plex-Device-Name': 'Tautulli',
-            'X-Plex-Client-Identifier': 'f9e0748ec84440dd8d0e759ab598326c'
+            'X-Plex-Client-Identifier': '123'
          },
       })
       .then((resp) => {
@@ -108,10 +110,14 @@ export default {
 a {
    text-decoration: none;
 }
-.plex {
+
-   margin-top: 20px;
+// DUPLICATE CODE
+.form {
+  > div:last-child {
+    margin-top: 1rem;
   }
-.form__group{
+
+  &__group{
      justify-content: unset;
      &__input-icon {
         margin-top: 8px;
@@ -128,6 +134,7 @@ a {
         }
      }
   }
+}
 .settings {
    padding: 35px;