Version upgrade.

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/typescript/recommended'
+  ],
+  parserOptions: {
+    ecmaVersion: 2020
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+  }
+}

README.md

@@ -2,22 +2,22 @@
 
 ## Project setup
 ```
-yarn install
+npm install
 ```
 
 ### Compiles and hot-reloads for development
 ```
-yarn serve
+npm run serve
 ```
 
 ### Compiles and minifies for production
 ```
-yarn build
+npm run build
 ```
 
 ### Lints and fixes files
 ```
-yarn lint
+npm run lint
 ```
 
 ### Customize configuration

package.json

@@ -10,34 +10,34 @@
   "dependencies": {
     "bulma": "^0.9.3",
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "vue": "^3.0.0",
+    "vue-class-component": "^8.0.0-0",
+    "vue-router": "^4.0.0-0"
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.18.0",
+    "@typescript-eslint/parser": "^4.18.0",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-typescript": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
-    "babel-eslint": "^10.1.0",
+    "@vue/compiler-sfc": "^3.0.0",
+    "@vue/eslint-config-typescript": "^7.0.0",
     "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
+    "eslint-plugin-vue": "^7.0.0",
+    "lint-staged": "^9.5.0",
+    "node-sass": "^4.12.0",
+    "sass-loader": "^8.0.2",
+    "typescript": "~4.1.5"
   },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
+  "gitHooks": {
+    "pre-commit": "lint-staged"
   },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
+  "lint-staged": {
+    "*.{js,jsx,vue,ts,tsx}": [
+      "vue-cli-service lint",
+      "git add"
+    ]
+  }
 }

public/index.html

@@ -11,7 +11,7 @@
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-    <div id="app"></div>
+    <div id="app" class="container"></div>
     <!-- built files will be auto injected -->
     <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
     <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

src/App.vue

@@ -1,53 +1,8 @@
 <template>
-  <div id="app" class="container">
-    <div v-if="loading"><progress class="progress is-small is-primary" max="100">15%</progress></div>
-    <div v-show="!loading">
-      <Login v-if="!authed" v-on:login="handleLoggedIn" v-on:loading="handleLoading"></Login>
-      <div v-if="authed">
-        <div class="notification is-success" v-if="!hideAuthed">
-          <button class="delete" v-on:click="hideAuthed = true"></button>
-          Authed !
-        </div>
-        <Lists></Lists>
-      </div>
-    </div>
-  </div>
+  <router-view/>
 </template>
 
-<script>
-
-import Login from "@/components/Login";
-import Lists from "@/components/Lists";
-export default {
-  name: 'App',
-  components: {
-    Lists,
-    Login
-  },
-  data: function() {
-    return {
-      authed: false,
-      loading: false,
-      hideAuthed: false,
-      lists: []
-    }
-  },
-  methods: {
-    handleLoggedIn: function () {
-      this.authed = true;
-      this.loading = false;
-      setTimeout(() => {
-        this.hideAuthed = true;
-      }, 3000)
-    },
-    handleLoading: function (event) {
-      this.loading = event;
-    }
-  }
-}
-</script>
-
-<style>
+<style lang="scss">
 @import "~bulma/css/bulma.css";
 
 #app {
@@ -56,6 +11,18 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+}
+
+#nav {
+  padding: 30px;
+
+  a {
+    font-weight: bold;
+    color: #2c3e50;
+
+    &.router-link-exact-active {
+      color: #42b983;
+    }
+  }
 }
 </style>

src/main.js

@@ -1,8 +0,0 @@
-import Vue from 'vue'
-import App from './App.vue'
-
-Vue.config.productionTip = false
-
-new Vue({
-  render: h => h(App),
-}).$mount('#app')

src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+createApp(App).use(router).mount('#app')

src/router/index.ts

@@ -0,0 +1,22 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import Login from '../views/Login.vue'
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    name: 'Login',
+    component: Login
+  },
+  {
+    path: '/lists',
+    name: 'Lists',
+    component: () => import('../views/Lists.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
+})
+
+export default router

src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

src/views/Lists.vue

@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import ListCreateUpdateModal from "@/components/ListCreateUpdateModal";
+import ListCreateUpdateModal from "../../../liste-de-courses-www/src/components/ListCreateUpdateModal";
 export default {
   name: "Lists",
   components: {ListCreateUpdateModal},

src/views/Login.vue

@@ -1,4 +1,5 @@
 <template>
+  <div v-if="loading"><progress class="progress is-small is-primary" max="100">15%</progress></div>
   <div class="box">
     <div class="field">
       <label class="label">Key</label>
@@ -15,6 +16,7 @@ export default {
   name: "Login",
   data: function () {
     return {
+      loading: false,
       key: '',
       lsKey: 'KEY'
     }
@@ -28,16 +30,17 @@ export default {
         },
         body: this.key
       }).then(r => {
-        if (r.status !== 404) {
-          localStorage.setItem(this.lsKey, this.key)
-          this.$emit('login')
-        } else {
-          this.$emit('loading')
-        }
+        setTimeout(() => {
+          if (r.status !== 404) {
+            localStorage.setItem(this.lsKey, this.key)
+            this.$router.push('/lists')
+          }
+          this.loading = false;
+        }, 2000);
       })
     }
   }, beforeMount() {
-    this.$emit('loading', true)
+    this.loading = true;
     this.key = localStorage.getItem(this.lsKey) != 'null' ? localStorage.getItem(this.lsKey) : '';
     this.sendKey();
   }

tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}