Created a full Vue.js skeleton with user registration/login.

.gitignore

@@ -0,0 +1,5 @@
+.env
+.eslintcache
+.idea/
+build/
+node_modules/

README.md

@@ -0,0 +1,30 @@
+# Node4Ever Vue.js Skeleton
+
+## System setup
+
+    sudo npm install -g @vue/cli
+
+## Running
+
+    npm install
+    npm run serve
+
+**Note:** you may need to restart the node server should you make large changes.
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Run your tests
+```
+npm run test
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}

package.json

@@ -0,0 +1,54 @@
+{
+  "name": "node4ever_vuejs",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "axios": "^0.19.2",
+    "blob-util": "^2.0.2",
+    "core-js": "^2.6.12",
+    "credit-card-type": "^8.3.0",
+    "jwt-decode": "^2.2.0",
+    "vee-validate": "^3.4.5",
+    "vue": "^2.6.12",
+    "vue-axios": "^2.1.5",
+    "vue-js-modal": "^1.3.35",
+    "vue-router": "^3.4.9"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.12.1",
+    "@vue/cli-plugin-eslint": "^3.12.1",
+    "@vue/cli-service": "^3.12.1",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "vue-template-compiler": "^2.6.12"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ],
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  }
+}

packages/simple-jwt-auth/src/SimpleJWTAuth.js

@@ -0,0 +1,37 @@
+"use strict";
+
+import jwtDecode from 'jwt-decode';
+
+class SimpleJWTAuth
+{
+    constructor(router) {
+        this.router = router;
+    }
+
+    login(token, expiresIn) {
+        localStorage.setItem('jwt', token);
+        localStorage.setItem('jwt-expires', (new Date).setSeconds(expiresIn));
+
+        return jwtDecode(token);
+    }
+
+    isLoggedIn() {
+        const jwtToken = localStorage.getItem('jwt');
+        const jwtExpires = localStorage.getItem('jwt-expires');
+
+        if (!jwtToken) {
+            return false;
+        }
+
+        return jwtExpires >= (new Date()).getTime();
+    }
+
+    logout() {
+        localStorage.removeItem('jwt');
+        localStorage.removeItem('jwt-expires');
+
+        this.router.push('/login');
+    }
+}
+
+export default SimpleJWTAuth;

public/assets/css/main.css

@@ -0,0 +1,108 @@
+.divider-text {
+    position: relative;
+    text-align: center;
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+.divider-text span {
+    padding: 7px;
+    font-size: 12px;
+    position: relative;
+    z-index: 2;
+}
+.divider-text:after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    border-bottom: 1px solid #ddd;
+    top: 55%;
+    left: 0;
+    z-index: 1;
+}
+
+.btn-facebook {
+    background-color: #405D9D;
+    color: #fff;
+}
+.btn-twitter {
+    background-color: #42AEEC;
+    color: #fff;
+}
+/*.container{*/
+/*    height: 100%;*/
+/*    align-content: center;*/
+/*}*/
+
+/*.card{*/
+/*    height: 370px;*/
+/*    margin-top: auto;*/
+/*    margin-bottom: auto;*/
+/*    width: 400px;*/
+/*    background-color: rgba(0,0,0,0.5) !important;*/
+/*}*/
+
+.social_icon span {
+    font-size: 60px;
+    margin-left: 10px;
+    color: darkblue;
+}
+
+.social_icon span:hover {
+    color: white;
+    cursor: pointer;
+}
+
+.social_icon {
+    position: absolute;
+    right: 20px;
+    top: -45px;
+}
+
+/*.card-header h3{*/
+/*    color: white;*/
+/*}*/
+
+
+.input-group-prepend span{
+    width: 50px;
+    background-color: darkblue;
+    color: white;
+    border:0 !important;
+}
+
+input:focus{
+    outline: 0 0 0 0  !important;
+    box-shadow: 0 0 0 0 !important;
+
+}
+
+.remember{
+    color: white;
+}
+
+.remember input
+{
+    width: 20px;
+    height: 20px;
+    margin-left: 15px;
+    margin-right: 5px;
+}
+
+.login_btn{
+    color: black;
+    background-color: #FFC312;
+    width: 100px;
+}
+
+.login_btn:hover{
+    color: black;
+    background-color: white;
+}
+
+.links{
+    color: white;
+}
+
+.links a{
+    margin-left: 4px;
+}

public/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<!-- begin::Head -->
+<head>
+    <base href="">
+    <meta charset="utf-8" />
+    <title>Node4Ever Vue.js Skeleton</title>
+    <meta name="description" content="Updates and statistics">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!--begin::Global Theme Styles(used by all pages) -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" integrity="sha512-oc9+XSs1H243/FRN9Rw62Fn8EtxjEYWHXRvjS43YtueEewbS6ObfXcJNyohjHqVKFPoXXUxwc+q1K7Dee6vv9g==" crossorigin="anonymous" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js" integrity="sha512-8qmis31OQi6hIRgvkht0s6mCOittjMa9GMqtK9hes5iEQBQE/Ca6yGE5FsW36vyipGoWQswBj/QBm2JR086Rkw==" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />    <link rel="stylesheet" href="/assets/css/main.css" />
+    <!--end::Global Theme Styles -->
+
+    <!--end::Layout Skins -->
+    <link rel="shortcut icon" href="/favicon.ico" />
+</head>
+
+<!-- end::Head -->
+
+<!-- begin::Body -->
+<body>
+
+    <noscript>
+        <strong>We're sorry but this website requires JavaScript. Please use another browser.</strong>
+    </noscript>
+    <div id="app"></div>
+<!--end::Page Scripts -->
+</body>
+
+<!-- end::Body -->
+</html>

src/App.vue

@@ -0,0 +1,108 @@
+<template>
+    <section id="base">
+        <MobileHeader/>
+        <div class="kt-grid kt-grid--hor kt-grid--root">
+            <Header :user="user" />
+            <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--ver kt-page">
+                <SideMenu/>
+                <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor kt-wrapper" id="kt_wrapper">
+                    <div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor" id="kt_content">
+                        <router-view @loggedIn="loggedIn" :user="user"></router-view>
+                    </div>
+                    <Footer/>
+                </div>
+            </div>
+        </div>
+        <div id="kt_scrolltop" class="kt-scrolltop"><i class="fa fa-arrow-up"></i></div>
+    </section>
+</template>
+
+<script>
+    import {UserRepo} from "@/repositories/UserRepo";
+
+    import Header from "./components/partials/Header";
+    import MobileHeader from "./components/partials/MobileHeader";
+
+    export default {
+        name: 'app',
+        components: {
+            Header,
+            MobileHeader
+        },
+        data() {
+            return {
+                // Component State
+                loading: true,
+                error: null,
+                success: false,
+
+                // Model State
+                email: null,
+                has_error: false,
+                user: {
+                    id: null,
+                    status: null,
+                    prefix: null,
+                    firstName: '',
+                    lastName: '',
+                    suffix: null,
+                    email: '',
+                    phone: {
+                        home: null,
+                        cell: null,
+                        work: null,
+                    }
+                },
+            };
+        },
+        created() {
+            // Refetch it from scratch.
+            this.fetchUserInfo(true);
+        },
+        methods: {
+            loggedIn: function () {
+                console.log("You've logged in!!");
+                this.fetchUserInfo(true);
+            },
+            fetchUserInfo: function (noCache) {
+                this.error = this.user = null;
+                this.loading = true;
+                this.user_id = localStorage.getItem('user:id');
+
+                if (!this.user_id) {
+                    return;
+                }
+
+                // Use the cache, if possible.
+                const grabCachedUser = function () {
+                    if (noCache) { return null; }
+
+                    return JSON.parse(localStorage.getItem('user'));
+                };
+
+                const user = grabCachedUser();
+                if (user) {
+                    alert("using cached user");
+                    this.user = user;
+                    return;
+                }
+                const userRepo = new UserRepo(this.axios, this.user_id);
+                userRepo.fetchInfo()
+                    .then(user => {
+                        this.user = user;
+                        localStorage.setItem('user', JSON.stringify(this.user));
+                    })
+                    .catch(error => {
+                        if (error.response.status === 401) {
+                            this.$auth.logout();
+                        }
+
+                        console.warn(error);
+                        this.error = error;
+                    })
+                    .finally(() => this.loading = false);
+            }
+        }
+    }
+</script>
+