PoC building with materialize

package.json

@@ -11,6 +11,9 @@
   "dependencies": {
     "axios": "^0.19.0",
     "core-js": "^2.6.5",
+    "jquery": "^3.4.1",
+    "lodash": "^4.17.11",
+    "materialize-css": "^1.0.0-rc.2",
     "vue": "^2.6.10",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1"

src/App.vue

 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
+    <header>
+      <nav>
+        <div class="nav-wrapper container">
+          <a href="#" class="brand-logo">Retribute App</a>
+          <ul id="nav-mobile" class="right hide-on-med-and-down">
+            <li>
+              <router-link to="/">Home</router-link>
+            </li>
+            <li>
               <router-link to="/about">About</router-link>
+            </li>
+          </ul>
         </div>
-    <router-view/>
+      </nav>
+    </header>
+    <main>
+      <router-view class="container" />
+    </main>
+    <footer>
+      <div class="container">
+
+      </div>
+    </footer>
   </div>
 </template>
 
 <style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-#nav {
-  padding: 30px;
-}
-
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
-}
 </style>

src/assets/sources/mastodon-logo.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 713.35878 175.8678" height="49.633801mm" width="201.3257mm">
+    <path d="M160.55476 105.43125c-2.4125 12.40625-21.5975 25.9825-43.63375 28.61375-11.49125 1.3725-22.80375 2.63125-34.8675 2.07875-19.73-.90375-35.2975-4.71-35.2975-4.71 0 1.92125.11875 3.75.355 5.46 2.565 19.47 19.3075 20.6375 35.16625 21.18125 16.00625.5475 30.2575-3.9475 30.2575-3.9475l.65875 14.4725s-11.19625 6.01125-31.14 7.11625c-10.99875.605-24.65375-.27625-40.56-4.485C6.99851 162.08 1.06601 125.31.15851 88-.11899 76.9225.05226 66.47625.05226 57.74125c0-38.1525 24.99625-49.335 24.99625-49.335C37.65226 2.6175 59.27976.18375 81.76351 0h.5525c22.48375.18375 44.125 2.6175 56.72875 8.40625 0 0 24.99625 11.1825 24.99625 49.335 0 0 .3125 28.1475-3.48625 47.69" fill="#3088d4"/>
+    <path d="M34.65751 48.494c0-5.55375 4.5025-10.055 10.055-10.055 5.55375 0 10.055 4.50125 10.055 10.055 0 5.5525-4.50125 10.055-10.055 10.055-5.5525 0-10.055-4.5025-10.055-10.055M178.86476 60.69975v46.195h-18.30125v-44.8375c0-9.4525-3.9775-14.24875-11.9325-14.24875-8.79375 0-13.2025 5.69125-13.2025 16.94375V89.2935h-18.19375V64.75225c0-11.2525-4.40875-16.94375-13.2025-16.94375-7.955 0-11.9325 4.79625-11.9325 14.24875v44.8375H73.79851v-46.195c0-9.44125 2.40375-16.94375 7.2325-22.495 4.98-5.55 11.50125-8.395 19.595-8.395 9.36625 0 16.45875 3.59875 21.14625 10.79875l4.56 7.6425 4.55875-7.6425c4.68875-7.2 11.78-10.79875 21.1475-10.79875 8.09375 0 14.61375 2.845 19.59375 8.395 4.82875 5.55125 7.2325 13.05375 7.2325 22.495M241.91276 83.663625c3.77625-3.99 5.595-9.015 5.595-15.075 0-6.06-1.81875-11.085-5.595-14.9275-3.63625-3.99125-8.25375-5.91125-13.84875-5.91125-5.59625 0-10.2125 1.92-13.84875 5.91125-3.6375 3.8425-5.45625 8.8675-5.45625 14.9275 0 6.06 1.81875 11.085 5.45625 15.075 3.63625 3.8425 8.2525 5.76375 13.84875 5.76375 5.595 0 10.2125-1.92125 13.84875-5.76375m5.595-52.025h18.04625v73.9h-18.04625v-8.72125c-5.455 7.2425-13.01 10.79-22.80125 10.79-9.3725 0-17.34625-3.695-24.06125-11.23375-6.57375-7.5375-9.93125-16.84875-9.93125-27.785 0-10.78875 3.3575-20.10125 9.93125-27.63875 6.715-7.5375 14.68875-11.38 24.06125-11.38 9.79125 0 17.34625 3.5475 22.80125 10.78875v-8.72zM326.26951 67.258625c5.315 3.99 7.97375 9.60625 7.83375 16.7 0 7.53875-2.65875 13.45-8.11375 17.58875-5.45625 3.99125-12.03 6.06-20.00375 6.06-14.40875 0-24.20125-5.9125-29.3775-17.58875l15.66875-9.31c2.0975 6.35375 6.71375 9.60625 13.70875 9.60625 6.43375 0 9.6525-2.07 9.6525-6.35625 0-3.10375-4.1975-5.91125-12.73-8.1275-3.21875-.8875-5.87625-1.77375-7.97375-2.51375-2.9375-1.18125-5.455-2.5125-7.55375-4.1375-5.17625-3.99-7.83375-9.3125-7.83375-16.11 0-7.2425 2.5175-13.00625 7.55375-17.145 5.17625-4.28625 11.47-6.355 19.025-6.355 12.03 0 20.84375 5.1725 26.5775 15.66625l-15.38625 8.8675c-2.23875-5.02375-6.015-7.53625-11.19125-7.53625-5.45625 0-8.11375 2.06875-8.11375 6.05875 0 3.10375 4.19625 5.91125 12.73 8.12875 6.575 1.4775 11.75 3.695 15.5275 6.50375M383.626635 49.966125h-15.8075v30.7425c0 3.695 1.4 5.91125 4.0575 6.945 1.95875.74 5.875.8875 11.75.59125v17.29375c-12.16875 1.4775-20.9825.295-26.15875-3.69625-5.175-3.8425-7.69375-10.93625-7.69375-21.13375v-30.7425h-12.17v-18.3275h12.17v-14.9275l18.045-5.76375v20.69125h15.8075v18.3275zM441.124885 83.2205c3.6375-3.84375 5.455-8.72125 5.455-14.6325 0-5.91125-1.8175-10.78875-5.455-14.63125-3.6375-3.84375-8.11375-5.76375-13.57-5.76375-5.455 0-9.93125 1.92-13.56875 5.76375-3.4975 3.99-5.31625 8.8675-5.31625 14.63125 0 5.765 1.81875 10.6425 5.31625 14.6325 3.6375 3.8425 8.11375 5.76375 13.56875 5.76375 5.45625 0 9.9325-1.92125 13.57-5.76375m-39.86875 13.15375c-7.13375-7.5375-10.63125-16.70125-10.63125-27.78625 0-10.9375 3.4975-20.1 10.63125-27.6375 7.13375-7.5375 15.9475-11.38 26.29875-11.38 10.3525 0 19.165 3.8425 26.3 11.38 7.135 7.5375 10.77125 16.84875 10.77125 27.6375 0 10.9375-3.63625 20.24875-10.77125 27.78625-7.135 7.53875-15.8075 11.2325-26.3 11.2325-10.49125 0-19.165-3.69375-26.29875-11.2325M524.92126 83.663625c3.6375-3.99 5.455-9.015 5.455-15.075 0-6.06-1.8175-11.085-5.455-14.9275-3.63625-3.99125-8.25375-5.91125-13.84875-5.91125-5.59625 0-10.2125 1.92-13.98875 5.91125-3.63625 3.8425-5.45625 8.8675-5.45625 14.9275 0 6.06 1.82 11.085 5.45625 15.075 3.77625 3.8425 8.5325 5.76375 13.98875 5.76375 5.595 0 10.2125-1.92125 13.84875-5.76375m5.455-81.585h18.04625v103.46h-18.04625v-8.72125c-5.315 7.2425-12.87 10.79-22.66125 10.79-9.3725 0-17.485-3.695-24.2-11.23375-6.575-7.5375-9.9325-16.84875-9.9325-27.785 0-10.78875 3.3575-20.10125 9.9325-27.63875 6.715-7.5375 14.8275-11.38 24.2-11.38 9.79125 0 17.34625 3.5475 22.66125 10.78875v-38.28zM611.79626 83.2205c3.63625-3.84375 5.455-8.72125 5.455-14.6325 0-5.91125-1.81875-10.78875-5.455-14.63125-3.6375-3.84375-8.11375-5.76375-13.57-5.76375-5.455 0-9.9325 1.92-13.56875 5.76375-3.49875 3.99-5.31625 8.8675-5.31625 14.63125 0 5.765 1.8175 10.6425 5.31625 14.6325 3.63625 3.8425 8.11375 5.76375 13.56875 5.76375 5.45625 0 9.9325-1.92125 13.57-5.76375m-39.86875 13.15375c-7.135-7.5375-10.63125-16.70125-10.63125-27.78625 0-10.9375 3.49625-20.1 10.63125-27.6375 7.135-7.5375 15.9475-11.38 26.29875-11.38 10.3525 0 19.165 3.8425 26.3 11.38 7.135 7.5375 10.77125 16.84875 10.77125 27.6375 0 10.9375-3.63625 20.24875-10.77125 27.78625-7.135 7.53875-15.8075 11.2325-26.3 11.2325-10.49125 0-19.16375-3.69375-26.29875-11.2325M713.35876 60.163875v45.37375h-18.04625v-43.00875c0-4.8775-1.25875-8.5725-3.77625-11.38-2.37875-2.5125-5.73625-3.84375-10.0725-3.84375-10.2125 0-15.3875 6.06-15.3875 18.3275v39.905h-18.04625v-73.89875h18.04625v8.27625c4.33625-6.94625 11.19-10.345 20.84375-10.345 7.69375 0 13.98875 2.66 18.885 8.12875 5.035 5.46875 7.55375 12.85875 7.55375 22.465" fill="#fff"/>
+</svg>

src/compat/index.js

-import Mastodon from "./mastodon"
-
-export default {
-  mastodon: Mastodon
-}

src/components/HelloWorld.vue

-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-mocha" target="_blank" rel="noopener">unit-mocha</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/MastodonForm.vue

+<template>
+  <form @submit.prevent="submit">
+    <div class="row">
+      <div class="input-field col s12">
+        <input v-model="domain" id="domain" placeholder="mastodon.server" type="text" class="validate">
+        <label class="active" for="domain">Mastodon domain</label>
+      </div>
+    </div>
+    <button type="submit" class="waves-effect waves-light btn">Authenticate</button>
+  </form>
+</template>
+
+<script>
+import $ from 'jquery'
+export default {
+  props: ["source"],
+  data () {
+    return {
+      domain: ''
+    }
+  },
+  mounted () {
+     $(document).ready(function() {
+      M.updateTextFields();
+    });
+  },
+  methods: {
+    async submit () {
+      let instanceUrl = `https://${this.domain}/`
+      let appData = await this.source.createApp(instanceUrl)
+
+      console.log('Authenticating')
+    }
+  }
+}
+</script>

src/main.js

@@ -3,6 +3,10 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 
+import "jquery"
+import "materialize-css/dist/css/materialize.min.css"
+import "materialize-css/dist/js/materialize.min.js"
+
 Vue.config.productionTip = false
 
 new Vue({

src/router.js

 import Vue from 'vue'
 import Router from 'vue-router'
-import Home from './views/Home.vue'
 
 Vue.use(Router)
 
@@ -11,7 +10,17 @@ export default new Router({
     {
       path: '/',
       name: 'home',
-      component: Home
+      component: () => import(/* webpackChunkName: "main" */ './views/Home.vue')
+    },
+    {
+      path: '/connect',
+      component: () => import(/* webpackChunkName: "main" */ './views/Connect.vue')
+    },
+    {
+      path: '/connect/:sourceId',
+      name: 'connect.source',
+      props: true,
+      component: () => import(/* webpackChunkName: "main" */ './views/ConnectForm.vue')
     },
     {
       path: '/about',

src/sources/index.js

+import Mastodon from "./mastodon"
+
+import sortBy from "lodash/sortBy"
+
+export default {
+  all () {
+    return sortBy(Object.values(this.sources), ["id"])
+  },
+  sources: {
+    mastodon: Mastodon
+  }
+}

src/compat/mastodon.js → src/sources/mastodon.js

+import Form from '../components/MastodonForm.vue'
 
 export function favoritesToRetribute (favorites, cache) {
   if (!cache.profiles) {
@@ -17,6 +18,15 @@ export function favoritesToRetribute (favorites, cache) {
 
 
 export default {
+  id: "mastodon",
+  label: "Mastodon",
+  description: "Mastodon and compatible servers",
+  extendedDescription: "Receive suggestions based on your favorites, follows and boosts",
+  imageBackground: "blue-grey darken-4",
+  form: Form,
+  getLogo () {
+    return require("../assets/sources/mastodon-logo.svg")
+  },
   authDataToKey ({username, domain}) {
     return `mastodon ${domain} ${username}`
   }

src/store.js

 import Vue from 'vue'
 import Vuex from 'vuex'
 
-import providers from '@/compat'
+import sources from '@/sources'
 
 Vue.use(Vuex)
 
 export const storeConfig = {
   state: {
-    accounts: {}
+    accounts: {},
   },
   mutations: {
     addAccount ({state}, payload) {
-      const id = providers[payload.provider].authDataToKey(payload)
+      const id = sources.sources[payload.source].authDataToKey(payload)
       state.accounts[id] = payload
     }
   },

src/views/Connect.vue

+<template>
+  <div>
+    <h2>Available sources</h2>
+    <div class="row">
+      <div class="col s4"  v-for="source in sources" :key="source.id">
+        <div class="card">
+          <div :class="['card-image', source.imageBackground]">
+            <img :src="source.getLogo()">
+          </div>
+          <div class="card-stacked">
+            <div class="card-content">
+              <h4>{{ source.label }}</h4>
+              <p>{{ source.extendedDescription }}</p>
+            </div>
+            <div class="card-action">
+              <router-link :to="{name: 'connect.source', params: {sourceId: source.id}}">Connect</router-link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import sources from "@/sources"
+
+export default {
+  computed: {
+    sources () {
+      return sources.all()
+    }
+  }
+}
+</script>
+<style scoped>
+.card .card-image {
+  padding: 1em;
+}
+</style>

src/views/ConnectForm.vue

+<template>
+  <div>
+    <h2>Connect {{ source.label }} account</h2>
+    <p class="flow-text">To connect Retribute to your {{ source.label }} account, fill in the form below and follow the instructions.</p>
+    <component :is="source.form"></component>
+  </div>
+</template>
+
+<script>
+import sources from "@/sources"
+
+export default {
+  props: ['sourceId'],
+  computed: {
+    source () {
+      return sources.sources[this.sourceId]
+    }
+  }
+}
+</script>
+<style scoped>
+.card .card-image {
+  padding: 1em;
+}
+</style>

src/views/Home.vue

 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div>
+    <div v-if="showIntroduction">
+      <h1>Welcome to retribute</h1>
+      <p class="flow-text">
+        Retribute gives you an easy and convenient way to support your favorite creators.
+      </p>
+      <h2>How does it work?</h2>
+      <ol class="flow-text">
+        <li>Connect Retribute to one or many of your existing accounts (Mastodon, Funkwhale, PeerTube, etc.)</li>
+        <li>Retribute will suggest you creators to tip, with links to their donation platforms</li>
+      </ol>
+      <router-link to="/connect" class="waves-effect waves-light btn-large">Get started</router-link>
+    </div>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
 export default {
-  name: 'home',
-  components: {
-    HelloWorld
+  computed: {
+    showIntroduction () {
+      return true
+    }
   }
 }
 </script>

tests/unit/store.spec.js

@@ -2,9 +2,9 @@ import { expect } from 'chai'
 import {storeConfig as store} from '@/store'
 
 describe('mutations', () => {
-  it('addAcount', () => {
+  it('addAccount', () => {
     const payload = {
-      provider: "mastodon",
+      source: "mastodon",
       username: "user",
       domain: "test.domain"
     }

yarn.lock

@@ -4746,6 +4746,11 @@ javascript-stringify@^1.6.0:
   resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-1.6.0.tgz#142d111f3a6e3dae8f4a9afd77d45855b5a9cce3"
   integrity sha1-FC0RHzpuPa6PSpr9d9RYVbWpzOM=
 
+jquery@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
+  integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
+
 js-levenshtein@^1.1.3:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
@@ -5136,6 +5141,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+materialize-css@^1.0.0-rc.2:
+  version "1.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/materialize-css/-/materialize-css-1.0.0-rc.2.tgz#b9e6b18f698c6ef77bb6b628d59147faf131eff5"
+  integrity sha512-FuQmSyq4Qv0ov7A2qXw0E6/jbQzSWx2P1pg2/XQDYTkkSc/GyiFAxu3fw9zgShwuTvyumEiw5jkxQWT9siqMBQ==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"