corretto altro ts...

ora manca ancora il vuelidate

jest.config.js

@@ -8,12 +8,17 @@ module.exports = {
   coverageDirectory: '<rootDir>/test/coverage',
   collectCoverageFrom: [
     '<rootDir>/src/components/**/*.vue',
+    '<rootDir>/src/common/**/*.ts',
+    '<rootDir>/src/directives/**/*.ts',
     '<rootDir>/src/layouts/**/*.vue',
+    '<rootDir>/src/mixins/**/*.ts',
+    '<rootDir>/src/model/**/*.ts',
     '<rootDir>/src/pages/**/*.vue',
     '<rootDir>/src/plugins/**/*.ts',
-    '<rootDir>/src/mixins/**/*.ts',
-    '<rootDir>/src/directives/**/*.ts',
-    '<rootDir>/src/utils/**/*.ts'
+    '<rootDir>/src/root/**/*.ts',
+    '<rootDir>/src/utils/**/*.ts',
+    '<rootDir>/src/views/**/*.ts',
+    '<rootDir>/src/views/**/*.vue',
   ],
   coverageThreshold: {
     global: {

quasar.conf.js

@@ -21,6 +21,17 @@ const extendTypescriptToWebpack = (config) => {
     })
 };
 
+const extendHTMLToWebpack = (config) => {
+  config.resolve
+    .extensions
+    .add('.html');
+  config.module
+    .rule('html')
+    .test(/\.html?$/)
+    .use('html')
+    .loader('vue-html-loader')
+};
+
 module.exports = function (ctx) {
   return {
     sourceFiles: {
@@ -42,6 +53,7 @@ module.exports = function (ctx) {
     ],
     supportIE: false,
     build: {
+      showProgress: true,
       env: envparser(),
       scopeHoisting: true,
       vueRouterMode: 'history',
@@ -51,6 +63,7 @@ module.exports = function (ctx) {
       // extractCSS: false,
       chainWebpack(config) {
         extendTypescriptToWebpack(config);
+        // extendHTMLToWebpack(config);
         config.resolve
           .alias
           .set('~', __dirname)

src/common/axios.ts

@@ -3,60 +3,64 @@ import {
   AxiosError,
   AxiosRequestConfig,
   AxiosResponse
-} from "axios";
-import { default as VueRouter } from "vue-router";
-import { TokenHelper } from "./token-helper";
+} from 'axios'
+import { default as VueRouter } from 'vue-router'
+// import { TokenHelper } from "./token-helper";
 
-let initialized: boolean = false;
+let initialized: boolean = false
 
 interface IRequestConfig extends AxiosRequestConfig {
-  ignore: number[];
+  ignore: number[]
 }
 
 function handle(status: number, exclude: number[]) {
-  if (exclude.length === 0) return true;
-  else return exclude.find(o => o === status) === undefined;
+  if (exclude.length === 0) return true
+  else return exclude.find(o => o === status) === undefined
 }
 
 export function UseAxios(router: VueRouter) {
   if (!initialized) {
+    // @ts-ignore
     Axios.interceptors.request.use((config: IRequestConfig) => {
-      if (!config.headers["Authorization"]) {
+      if (!config.headers['Authorization']) {
         // append authorization header
-        let bearerToken = TokenHelper.getBearerToken();
+        /* ++Todo: disattivato per ora...
+        let bearerToken = TokenHelper.getBearerToken()
 
         if (bearerToken.Authorization)
-          Object.assign(config.headers, bearerToken);
+          Object.assign(config.headers, bearerToken)
+          */
       }
 
       if (!config.maxRedirects || config.maxRedirects === 5)
         // ensure axios does not follow redirects, so custom response interceptor below can push to app login page
-        config.maxRedirects = 0;
+        config.maxRedirects = 0
 
-      return config;
-    });
+      return config
+    })
 
     Axios.interceptors.response.use(undefined, (config: AxiosError) => {
-      let response: AxiosResponse = config.response;
-      let exclude = (<IRequestConfig>config.config).ignore || [];
+      // @ts-ignore
+      let response: AxiosResponse = config.response
+      let exclude = (<IRequestConfig>config.config).ignore || []
 
       if (response.status === 401 && handle(response.status, exclude)) {
         let location: string =
-          response.headers["location"] || response.headers["Location"];
+          response.headers['location'] || response.headers['Location']
 
         if (location) {
-          let redirectTo = "/" + location;
-          window.setTimeout(() => router.replace(redirectTo), 200);
+          let redirectTo = '/' + location
+          window.setTimeout(() => router.replace(redirectTo), 200)
         }
       }
 
       if (response.status === 403 && handle(response.status, exclude)) {
-        window.setTimeout(() => router.replace("/forbidden"), 200);
+        window.setTimeout(() => router.replace('/forbidden'), 200)
       }
 
-      return config;
-    });
+      return config
+    })
 
-    initialized = true;
+    initialized = true
   }
 }

src/common/debounce.ts

@@ -2,8 +2,8 @@
  * Returns a function, that, as long as it continues to be invoked, will not
  * be triggered. The function will be called after it stops being called for
  * N milliseconds. If `immediate` is passed, trigger the function on the
- * leading edge, instead of the trailing. The function also has a property 'clear' 
- * that is a function which will clear the timer to prevent previously scheduled executions. 
+ * leading edge, instead of the trailing. The function also has a property 'clear'
+ * that is a function which will clear the timer to prevent previously scheduled executions.
  *
  * @source underscore.js
  * @see http://unscriptable.com/2009/03/20/debouncing-javascript-methods/
@@ -14,13 +14,17 @@
  */
 
 export function Debounce(func: Function, wait?: number, immediate?: boolean) {
-  let timeout, args, context, timestamp, result
-  if (null == wait) wait = 100
+  // @ts-ignore
+  let timeout: any, args: any, context: any, timestamp: any, result: any
+  if (null == wait)
+    wait = 100
 
   function later() {
     let last = Date.now() - timestamp
 
+    // @ts-ignore
     if (last < wait && last > 0) {
+      // @ts-ignore
       timeout = setTimeout(later, wait - last)
     } else {
       timeout = null
@@ -33,6 +37,7 @@ export function Debounce(func: Function, wait?: number, immediate?: boolean) {
 
   let debounced = function () {
 
+    // @ts-ignore
     context = this
     args = arguments
     timestamp = Date.now()
@@ -47,4 +52,4 @@ export function Debounce(func: Function, wait?: number, immediate?: boolean) {
   }
 
   return debounced
-}
+}

src/common/index.ts

@@ -1,3 +1,5 @@
 export * from './pattern'
 export * from './axios'
 export * from './debounce'
+export * from './message'
+export { default as GlobalConfig } from '../config'

src/common/message.ts

@@ -0,0 +1,7 @@
+export const PayloadMessageTypes = {
+    error: 'Error',
+    info: 'Info',
+    failure: 'Failure',
+    success: 'Success',
+    warning: 'Warning'
+}

src/components/Header.vue

@@ -59,8 +59,6 @@
 
   // import user from '../store/modules/user';
 
-  import * as types from '../store/mutation-types'
-
   export default {
     components: {
       drawer,

src/config.ts

@@ -0,0 +1,39 @@
+
+interface IUriConfig {
+    auth?: string;
+    content?: string;
+    site?: string;
+    services?: string;
+}
+
+const uri: IUriConfig = {};
+
+const addProp = (obj: {}, propName: string, value: string) => {
+    Object.defineProperty(obj, propName, {
+        enumerable: false,
+        get: () => {
+            return '//' + window.location.host + value;
+        }
+    });
+};
+
+addProp(uri, 'auth', '/auth/');
+addProp(uri, 'content', '/api/content/');
+addProp(uri, 'site', '');
+addProp(uri, 'services', '/api/');
+
+const config = {
+    uri: uri,
+    claimsNamespace: '//toucan/claims',
+    auth: {
+        accessTokenKey: 'AUTH-LOCAL',
+        externalProviderKey: 'AUTH-EXTERNAL'
+    },
+    uopt: 'UOPT',
+    xsrf: {
+        cookieName: 'XSRF-TOKEN',
+        headerName: 'X-XSRF-TOKEN'
+    }
+};
+
+export default config;

src/layouts/drawer/drawer.vue

@@ -31,8 +31,6 @@
   import menuOne from './menuOne.vue'
   import menuTwo from './menuTwo.vue'
 
-  import * as types from '../../store/mutation-types'
-
   import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
   import { GlobModule } from '../../store/modules/glob'
   import { UserModule } from '../../store/modules/user';

src/mixins/mixin-router.ts

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import { Route, default as VueRouter } from 'vue-router'
+
+export type IRouterMixinData = VueRouter
+
+export type IRouteMixinData = Route
+
+export interface IRouterMixin {
+    $route: IRouteMixinData
+    $router: IRouterMixinData
+}
+

src/model/index.ts

@@ -2,3 +2,4 @@ export * from './user'
 export * from './glob'
 export * from './signup-option'
 export * from './key-value'
+export * from './payload';

src/model/other.ts

@@ -0,0 +1,18 @@
+export interface IToken {
+  access: string
+  token: string
+}
+
+
+export interface ILinkReg {
+  idLink: string
+}
+
+export interface IIdToken {
+  idToken: string
+}
+
+export interface IResult {
+  status: number
+  statusText: string
+}

src/model/payload/index.ts

@@ -0,0 +1,4 @@
+export { IPayload } from './payload';
+export { IPayloadMessage } from './payload-message';
+export * from './payload-mapper';
+

src/model/payload/payload-mapper.ts

@@ -0,0 +1,85 @@
+import { AxiosError, AxiosResponse } from 'axios'
+import { PayloadMessageTypes } from '@/common'
+import { IPayload } from './payload'
+
+export { PayloadMessageTypes } from '../../common/message'
+
+export class PayloadMapper {
+
+    private fromError<T>(o: Error): IPayload<T> {
+
+      return {
+        // @ts-ignore
+            data: null,
+            message: {
+                messageTypeId: PayloadMessageTypes.error,
+                text: o.message,
+                title: o.name
+            }
+        }
+    }
+
+    private fromAxiosError<T>(o: AxiosError): IPayload<T> {
+
+        // @ts-ignore
+        let data: T = null
+
+        if (o.response && isAxiosResponse(o.response))
+            data = this.fromAxiosResponse<T>(o.response).data
+
+        return {
+            data: data,
+            message: {
+                messageTypeId: PayloadMessageTypes.error,
+                text: o.message,
+                title: 'Code:' + o.code + '. ' + o.name
+            }
+        }
+    }
+
+    private fromAxiosResponse<T>(o: AxiosResponse): IPayload<T> {
+
+      // @ts-ignore
+        let value: IPayload<T> = null
+
+        if (isPayload<T>(o.data))
+            value = o.data
+        else
+            value = {
+                data: <any>o.data,
+                message: {
+                    messageTypeId: PayloadMessageTypes.success,
+                  // @ts-ignore
+                    text: null
+                }
+            }
+        return value
+    }
+
+    public fromObject<T>(o: any): IPayload<T> {
+
+        if (isAxiosError(o))
+            return this.fromAxiosError<T>(o)
+
+        if (o instanceof Error)
+            return this.fromError<T>(o)
+
+        if (isAxiosResponse(o))
+            return this.fromAxiosResponse<T>(o)
+
+        // @ts-ignore
+        return null
+    }
+}
+
+function isAxiosResponse(o: any): o is AxiosResponse {
+    return o instanceof Object && 'data' in o && 'config' in o && 'status' in o && 'statusText' in o && 'headers' in o
+}
+
+function isAxiosError(o: any): o is AxiosError {
+    return o instanceof Object && o instanceof Error && 'config' in o
+}
+
+function isPayload<T>(o: any): o is IPayload<T> {
+    return o instanceof Object && 'data' in o && 'message' in o
+}

src/model/payload/payload-message.ts

@@ -0,0 +1,6 @@
+
+export interface IPayloadMessage {
+    text: string;
+    title?: string;
+    messageTypeId: string;
+}

src/model/payload/payload.ts

@@ -0,0 +1,8 @@
+import { IPayloadMessage } from './payload-message'
+
+export interface IPayload<T> {
+
+    data: T
+
+    message: IPayloadMessage
+}

src/model/user.ts

@@ -1,4 +1,4 @@
-import { IToken } from '@/types'
+import { IToken } from '@/model/other'
 
 export const DefaultUser = <IUserState>{
   email: '',

src/pages/Index.vue

@@ -1,129 +0,0 @@
-<template>
-    <q-page class="flex flex-center">
-        <img alt="Quasar logo" src="~assets/quasar-logo-full.svg">
-
-        <q-btn round color="blue" icon="add" id="shareimagebutton" @click="openCreatePostModal">
-            <q-spinner-facebook slot="loading"/>
-        </q-btn>
-
-        <q-field
-                icon="wifi"
-                :count="10"
-                helper="Some helper"
-        >
-            <br>Conta = {{ conta }}
-        </q-field>
-
-        <!--<q-btn
-                @click="showNotification"
-                color="primary"
-                label="Mostra notifica"
-        />-->
-
-        <q-card id="mycard" class="mycard" :style="mystilecard">
-            <q-card-title>
-                Card Title
-            </q-card-title>
-            <q-card-separator/>
-            <q-card-main>
-                Card Content
-            </q-card-main>
-        </q-card>
-
-    </q-page>
-</template>
-
-<style>
-    .mycard {
-        visibility: hidden;
-    }
-</style>
-
-<script lang="ts">
-  import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
-  import { GlobModule } from '../store/modules/glob'
-
-  @Component({})
-  export default class Login extends Vue {
-    text = ''
-    visibile = false
-    cardvisible = 'hidden'
-    displaycard = 'block'
-
-    constructor() {
-      super()
-      console.log('created...')
-      this.initprompt()
-    }
-
-    mystilecard() {
-      return {
-        visibility: this.cardvisible,
-        display: this.displaycard
-      }
-    }
-
-    get conta() {
-      return GlobModule.conta
-    }
-
-    set conta(valore) {
-      GlobModule.setConta(valore)
-      var my = this.$q.i18n.lang;
-      this.showNotification(String(my));
-    }
-
-    showNotification(msg:string) {
-      this.$q.notify(msg)
-    }
-
-    initprompt() {
-      window.addEventListener('beforeinstallprompt', function (event) {
-        console.log('********************************   beforeinstallprompt fired')
-        event.preventDefault()
-        console.log('§§§§§§§§§§§§§§§§§§§§  IMPOSTA DEFERRED PROMPT  !!!!!!!!!!!!!!!!!  ')
-        return false
-      })
-    }
-
-    test_fetch() {
-      fetch('https:/httpbin.org/post', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Accept': 'application/json'
-        },
-        //mode: 'no-cors',
-        mode: 'cors',
-        body: JSON.stringify({ message: 'Does this work?' })
-      }).then(function (response) {
-        console.log(response)
-        if (response)
-          return response.json()
-        else
-          return null
-      }).then(function (data) {
-        console.log(data)
-      }).catch(function (err) {
-        console.log(err)
-      })
-    }
-
-    openCreatePostModal() {
-      console.log('APERTO ! openCreatePostModal')
-
-      this.conta = this.conta + 1
-
-      this.visibile = !this.visibile
-
-      if (this.visibile) {
-        this.displaycard = 'block'
-        this.cardvisible = 'visible'
-      } else {
-        this.displaycard = 'block'
-        this.cardvisible = 'hidden'
-      }
-
-    }
-  }
-</script>

src/root/home/home.scss

@@ -0,0 +1,3 @@
+.mycard {
+  visibility: hidden;
+}

src/root/home/home.ts

@@ -0,0 +1,91 @@
+import Vue from 'vue'
+import { Component, Watch, Prop } from 'vue-property-decorator'
+import { GlobModule } from '@/store/modules/glob'
+
+require('./home.scss')
+
+@Component({
+
+})
+export default class Home extends Vue {
+  text: string = ''
+  visibile: boolean = false
+  cardvisible: string = 'hidden'
+  displaycard: string = 'block'
+
+  constructor() {
+    super()
+    console.log('created...')
+    this.initprompt()
+  }
+
+  mystilecard() {
+    return {
+      visibility: this.cardvisible,
+      display: this.displaycard
+    }
+  }
+
+  get conta() {
+    return GlobModule.conta
+  }
+
+  set conta(valore) {
+    GlobModule.setConta(valore)
+    var my = this.$q.i18n.lang
+    this.showNotification(String(my))
+  }
+
+  showNotification(msg: string) {
+    this.$q.notify(msg)
+  }
+
+  initprompt() {
+    window.addEventListener('beforeinstallprompt', function (event) {
+      console.log('********************************   beforeinstallprompt fired')
+      event.preventDefault()
+      console.log('§§§§§§§§§§§§§§§§§§§§  IMPOSTA DEFERRED PROMPT  !!!!!!!!!!!!!!!!!  ')
+      return false
+    })
+  }
+
+  test_fetch() {
+    fetch('https:/httpbin.org/post', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
+      },
+      // mode: 'no-cors',
+      mode: 'cors',
+      body: JSON.stringify({ message: 'Does this work?' })
+    }).then(function (response) {
+      console.log(response)
+      if (response)
+        return response.json()
+      else
+        return null
+    }).then(function (data) {
+      console.log(data)
+    }).catch(function (err) {
+      console.log(err)
+    })
+  }
+
+  openCreatePostModal() {
+    console.log('APERTO ! openCreatePostModal')
+
+    this.conta = this.conta + 1
+
+    this.visibile = !this.visibile
+
+    if (this.visibile) {
+      this.displaycard = 'block'
+      this.cardvisible = 'visible'
+    } else {
+      this.displaycard = 'block'
+      this.cardvisible = 'hidden'
+    }
+
+  }
+}

src/root/home/home.vue

@@ -0,0 +1,38 @@
+<template >
+    <q-page class="flex flex-center">
+        <img alt="Quasar logo" src="~assets/quasar-logo-full.svg">
+
+        <q-btn round color="blue" icon="add" id="shareimagebutton" @click="openCreatePostModal">
+            <q-spinner-facebook slot="loading"/>
+        </q-btn>
+
+        <q-field
+                icon="wifi"
+                :count="10"
+                helper="Some helper"
+        >
+            <br>Conta = {{ conta }}
+        </q-field>
+
+        <!--<q-btn
+                @click="showNotification"
+                color="primary"
+                label="Mostra notifica"
+        />-->
+
+        <q-card id="mycard" class="mycard" :style="mystilecard">
+            <q-card-title>
+                Card Title
+            </q-card-title>
+            <q-card-separator/>
+            <q-card-main>
+                Card Content
+            </q-card-main>
+        </q-card>
+
+    </q-page>
+
+
+</template>
+<script lang="ts" src="./home.ts">
+</script>

src/router/index.ts

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import VueRouter, { RouterMode } from 'vue-router'
 import { PositionResult } from 'vue-router/types/router'
 
-import routes from '@/router/routes'
+import { RouteConfig } from './route-config'
 
 Vue.use(VueRouter)
 /*
@@ -13,7 +13,7 @@ Vue.use(VueRouter)
 export default function (/* { store, ssrContext } */) {
   const Router = new VueRouter({
     scrollBehavior: () => ({ y: 0 } as PositionResult),
-    routes,
+    routes: RouteConfig,
 
     // Leave these as is and change from quasar.conf.js instead!
     // quasar.conf.js -> build -> vueRouterMode

src/router/route-config.ts

@@ -1,9 +1,17 @@
-import { RouteConfig } from 'vue-router'
+import { RouteConfig as VueRouteConfig } from 'vue-router'
 
-const routes: RouteConfig[] = [
-  { path: '/', component: () => import('@/pages/Index.vue'), meta: { name: 'Home' } },
-  { path: '/test', component: () => import('@/views/login/test.vue'), meta: { name: 'Test' } },
-  { path: '/signup', component: () => import('@/views/login/signup/signup.vue'), meta: { name: 'Registration' } },
+import { RouteNames } from './route-names'
+
+
+export const RouteConfig: VueRouteConfig[] = [
+  {
+    component: () => import('@/root/home/home.vue'),
+    name: RouteNames.home,
+    path: '/',
+    meta: { name: 'Home' }
+  },
+   { path: '/test', component: () => import('@/views/login/test.vue'), meta: { name: 'Test' } },
+  { path: '/signup', component: () => import('@/views/login/signup/signup.vue'), meta: { name: 'Registration' } }
   /*
   { path: '/signin', component: () => import('@/views/login/signin.vue'), meta: { name: 'Login' } },
   { path: '/vreg', component: () => import('@/views/login/vreg.vue'), meta: { name: 'Verify Reg' } },
@@ -29,4 +37,3 @@ const routes: RouteConfig[] = [
   }*/
 ]
 
-export default routes

src/router/route-names.ts

@@ -0,0 +1,4 @@
+export const RouteNames = {
+  home: 'home',
+  login: 'login'
+}

src/store/modules/user.ts

@@ -11,7 +11,7 @@ import * as types from '@/store/mutation-types'
 import { serv_constants } from '@/store/modules/serv_constants'
 
 import { IUserState } from '@/model'
-import { ILinkReg, IResult, IIdToken } from '@/types'
+import { ILinkReg, IResult, IIdToken } from '@/model/other'
 
 
 export const ErroriMongoDb = {

src/types/index.d.ts

@@ -1,18 +0,0 @@
-export interface IToken {
-  access: string
-  token: string
-}
-
-
-export interface ILinkReg {
-  idLink: string
-}
-
-export interface IIdToken {
-  idToken: string
-}
-
-export interface IResult {
-  status: number
-  statusText: string
-}

src/validation/duplicate.ts

@@ -1,23 +1,23 @@
-type t = string | number;
-type fn = () => t[];
+type t = string | number
+type fn = () => t[]
 
-export function duplicate(matches: t[] | fn, ignoreCase: boolean = false) {
-  if (Array.isArray(matches)) return factory(matches, ignoreCase);
+export function duplicate(matches: t[] | fn, ignoreCase: boolean = false): any {
+  if (Array.isArray(matches)) return factory(matches, ignoreCase)
 
-  return value => {
-    let cb = factory(matches(), ignoreCase);
-    return cb(value);
-  };
+  return (value: any) => {
+    let cb = factory(matches(), ignoreCase)
+    return cb(value)
+  }
 }
 
-function factory(values: t[], ignoreCase: boolean) {
-  return value => {
+function factory(values: t[], ignoreCase: boolean): any {
+  return (value: any) => {
     if (value === undefined || value === null || values.length === 0)
-      return true;
-    else{
-      let flags = ignoreCase ? "i" : "";
-      let exp = new RegExp(`^(${value})$`, flags);
-      return values.find(o => exp.test(o.toString())) === undefined;
+      return true
+    else {
+      let flags = ignoreCase ? 'i' : ''
+      let exp = new RegExp(`^(${value})$`, flags)
+      return values.find(o => exp.test(o.toString())) === undefined
     }
-  };
+  }
 }

src/validation/registered.ts

@@ -1,22 +1,22 @@
-import { default as Axios, AxiosResponse } from 'axios';
-import { IPayload } from '../model';
-import { GlobalConfig, PayloadMessageTypes } from '../common';
+import { default as Axios, AxiosResponse } from 'axios'
+import { IPayload } from '../model'
+import { GlobalConfig, PayloadMessageTypes } from '../common'
 
-const AUTH_URL = GlobalConfig.uri.auth;
-const VALIDATE_USER_URL = AUTH_URL + 'validateuser';
+const AUTH_URL = GlobalConfig.uri.auth
+const VALIDATE_USER_URL = AUTH_URL + 'validateuser'
 
 export function registered(userName: string) {
 
     let config = {
         params: { userName: userName }
-    };
+    }
 
     let onSuccess = (res: AxiosResponse) => {
-        let payload: IPayload<boolean> = res.data;
-        return payload.message.messageTypeId !== PayloadMessageTypes.failure;
+        let payload: IPayload<boolean> = res.data
+        return payload.message.messageTypeId !== PayloadMessageTypes.failure
     }
 
     return Axios.get(VALIDATE_USER_URL, config)
-        .then(onSuccess);
+        .then(onSuccess)
 
-};
+}

src/views/dashboard/one/dashboard.vue

@@ -58,7 +58,6 @@
   import { mapActions } from 'vuex'
   import * as types from '../../../store/mutation-types'
   export default {
-    name: 'Home',
     mounted () {
       // Axios.all not working
     },

src/views/login/signin.vue

@@ -62,10 +62,10 @@
   } from 'vuelidate/lib/validators'
 
   import {mapGetters, mapActions} from 'vuex'
-  import * as types from '../../../store/mutation-types'
+  import * as types from '../../store/mutation-types'
 
   //import {ErroriMongoDb} from '../../store/modules/user'
-  import {serv_constants} from "../../../store/modules/serv_constants";
+  import {serv_constants} from "../../store/modules/serv_constants";
   import axios from 'axios';
 
   import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'

src/views/login/signup/signup.html

@@ -1,100 +0,0 @@
-<div>
-    <q-page padding class="signup">
-        <div class="text-center">
-            <p>
-                <!--<img src="../../../assets/quasar-logo-full.svg">-->
-                <img :src="`../../../assets/`+`${env('LOGO_REG')}`">
-            </p>
-        </div>
-
-        PROVAA
-
-        <!--Prova URL :  {{env('PROVA_PAOLO')}}-->
-        <!--
-
-        <q-field
-                :error="v.user.email.error"
-                error-label="{{ errors.first('email') }}"
-        >
-            <q-input
-                    v-model="user.email"
-                    v-validate="'required|email|truthy'"
-                    :value="user.email"
-                    @change="val => { user.email = val }"
-                    :before="[{icon: 'mail', handler () {}}]"
-                    @blur="v.user.email.touch"
-                    :error="v.user.email.error"
-                    :float-label="$t('reg.email')"
-            />
-        </q-field>
-
-        <q-field
-                :error="v.user.username.$error"
-                :error-label="`${errorMsg('username', v.user.username)}`"
-        >
-            <q-input
-                    :value="user.username"
-                    @change="val => { user.username = val }"
-                    :before="[{icon: 'person', handler () {}}]"
-                    @blur="v.user.username.$touch"
-                    :error="v.user.username.$error"
-                    :float-label="$t('reg.username')"
-            />
-        </q-field>
-
-        <q-field
-                :error="v.user.password.$error"
-                :error-label="`${errorMsg('password', v.user.password)}`"
-        >
-            <q-input
-                    v-model="user.password"
-                    :before="[{icon: 'vpn_key', handler () {}}]"
-                    @blur="v.user.password.$touch"
-                    :error="v.user.password.$error"
-                    :float-label="$t('reg.password')"
-            />
-        </q-field>
-
-        <q-field
-                :error="v.user.repeatPassword.$error"
-                :error-label="`${errorMsg('repeatpassword', v.user.repeatPassword)}`"
-        >
-            <q-input
-                    v-model="user.repeatPassword"
-                    :before="[{icon: 'vpn_key', handler () {}}]"
-                    @blur="v.user.repeatPassword.$touch"
-                    :error="v.user.repeatPassword.$error"
-                    :float-label="$t('reg.repeatPassword')"
-            />
-        </q-field>
-
-        <q-field
-                :error="v.user.terms.$error"
-                :error-label="`${errorMsg('terms', v.user.terms)}`"
-        >
-
-            <q-checkbox
-                    v-model="user.terms"
-                    :before="[{icon: 'vpn_key', handler () {}}]"
-                    color="secondary"
-                    @blur="v.user.terms.$touch"
-                    :error="v.user.terms.$error"
-                    :float-label="$t('reg.terms')"
-                    :label="$t('reg.terms')"
-            />
-        </q-field>
-
-        -->
-
-        <br>
-
-        <!--
-        <div align="center">
-            <q-btn rounded size="lg" color="primary" @click="submit" :disable="">{{$t('reg.submit')}}
-            </q-btn>
-        </div>
-
-        -->
-
-    </q-page>
-</div>

src/views/login/signup/signup.ts

@@ -6,20 +6,18 @@ import { validationMixin } from 'vuelidate'
 import { required, minValue } from 'vuelidate/lib/validators'
 import { ISignupOptions, IUserState } from '@/model'
 import { validations, TSignup } from './signup-validate'
-// import './signup.scss'
+
+import './signup.scss'
 
 // import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
 
 @Component({
   mixins: [validationMixin],
   name: 'Signup',
-  // template: require('./signup.html'),
   validations: validations
 })
 
 export default class Signup extends Vue {
-  myProperty: string = ''
-
   duplicate_email: boolean = false
   duplicate_username: boolean = false
   user: ISignupOptions = {
@@ -31,6 +29,7 @@ export default class Signup extends Vue {
   terms = true
 
   $v: any
+  $t: any
 
   constructor() {
     super()
@@ -96,8 +95,7 @@ export default class Signup extends Vue {
     this.$q.notify(msg)
   }
 
-  /*
-  errorMsg(cosa: string, item: string) {
+  errorMsg(cosa: string, item: any) {
     try {
       if (!item.$error) return ''
       if (item.$params.email && !item.email) return this.$t('reg.err.email')
@@ -109,11 +107,11 @@ export default class Signup extends Vue {
       }
 
       if (cosa === 'email') {
-        //console.log("EMAIL " + item.isUnique);
-        //console.log(item);
+        // console.log("EMAIL " + item.isUnique);
+        // console.log(item);
         if (!item.isUnique) return this.$t('reg.err.duplicate_email')
       } else if (cosa === 'username') {
-        //console.log(item);
+        // console.log(item);
         if (!item.isUnique) return this.$t('reg.err.duplicate_username')
       }
 
@@ -122,12 +120,12 @@ export default class Signup extends Vue {
       if (!item.maxLength) return this.$t('reg.err.notmore') + ` ${item.$params.maxLength.max} ` + this.$t('reg.err.char')
       return ''
     } catch (error) {
-      //console.log("ERR : " + error);
+      // console.log("ERR : " + error);
     }
   }
 
-  checkErrors(riscode) {
-    //console.log("RIS = " + riscode);
+  checkErrors(riscode: number) {
+    // console.log("RIS = " + riscode);
     if (riscode === ErroriMongoDb.DUPLICATE_EMAIL_ID) {
       this.showNotif(this.$t('reg.err.duplicate_email'))
     } else if (riscode === ErroriMongoDb.DUPLICATE_USERNAME_ID) {
@@ -135,10 +133,11 @@ export default class Signup extends Vue {
     } else if (riscode === ErroriMongoDb.OK) {
       this.$router.push('/')
     } else {
-      this.showNotif("Errore num " + riscode)
+      this.showNotif('Errore num ' + riscode)
     }
 
   }
+  /*
 
 
   submit() {

src/views/login/signup/signup.vue

@@ -1,8 +1,103 @@
-<template src="./signup.html">
+<template >
+    <q-page padding class="signup">
+        <div class="text-center">
+            <p>
+                <!--<img src="../../../assets/quasar-logo-full.svg">-->
+                <img :src="`../../../assets/`+`${env('LOGO_REG')}`">
+            </p>
+        </div>
+
+        <!--Prova URL :  {{env('PROVA_PAOLO')}}-->
+
+        <q-field
+                :error="$v.user.email.$error"
+                error-label="`${errorMsg('username', $v.user.username)}`"
+        >
+            <q-input
+                    v-model="user.email"
+                    v-validate="'required|email|truthy'"
+                    :value="user.email"
+                    @change="val => { user.email = val }"
+                    :before="[{icon: 'mail', handler () {}}]"
+                    @blur="$v.user.email.touch"
+                    :error="$v.user.email.$error"
+                    :float-label="$t('reg.email')"
+            />
+        </q-field>
+
+        <!--
+
+        <q-field
+                :error="v.user.username.$error"
+                :error-label="`${errorMsg('username', v.user.username)}`"
+        >
+            <q-input
+                    :value="user.username"
+                    @change="val => { user.username = val }"
+                    :before="[{icon: 'person', handler () {}}]"
+                    @blur="v.user.username.$touch"
+                    :error="v.user.username.$error"
+                    :float-label="$t('reg.username')"
+            />
+        </q-field>
+
+        <q-field
+                :error="v.user.password.$error"
+                :error-label="`${errorMsg('password', v.user.password)}`"
+        >
+            <q-input
+                    v-model="user.password"
+                    :before="[{icon: 'vpn_key', handler () {}}]"
+                    @blur="v.user.password.$touch"
+                    :error="v.user.password.$error"
+                    :float-label="$t('reg.password')"
+            />
+        </q-field>
+
+        <q-field
+                :error="v.user.repeatPassword.$error"
+                :error-label="`${errorMsg('repeatpassword', v.user.repeatPassword)}`"
+        >
+            <q-input
+                    v-model="user.repeatPassword"
+                    :before="[{icon: 'vpn_key', handler () {}}]"
+                    @blur="v.user.repeatPassword.$touch"
+                    :error="v.user.repeatPassword.$error"
+                    :float-label="$t('reg.repeatPassword')"
+            />
+        </q-field>
+
+        <q-field
+                :error="v.user.terms.$error"
+                :error-label="`${errorMsg('terms', v.user.terms)}`"
+        >
+
+            <q-checkbox
+                    v-model="user.terms"
+                    :before="[{icon: 'vpn_key', handler () {}}]"
+                    color="secondary"
+                    @blur="v.user.terms.$touch"
+                    :error="v.user.terms.$error"
+                    :float-label="$t('reg.terms')"
+                    :label="$t('reg.terms')"
+            />
+        </q-field>
+
+        -->
+
+        <br>
+
+        <!--
+        <div align="center">
+            <q-btn rounded size="lg" color="primary" @click="submit" :disable="">{{$t('reg.submit')}}
+            </q-btn>
+        </div>
+
+        -->
+
+    </q-page>
+
 </template>
 
-<script lang='ts' src="signup.ts"  >
+<script lang="ts" src="./signup.ts">
 </script>
-
-<style src="signup.scss" lang="scss">
-</style>

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
     "listEmittedFiles": false,
-    "module": "es2015",
+    "module": "esnext",
     "moduleResolution": "Node",
     "target": "es2015",
     "strict": true,
@@ -26,6 +26,7 @@
   },
   "include": [
     "src/**/*.ts",
+    "src/**/*.html",
     "src/**/*.vue",
     "test/**/*.ts"
   ],
@@ -33,5 +34,8 @@
     ".quasar",
     "dist",
     "node_modules"
+  ],
+  "files": [
+    "./shims-vue.d.ts"
   ]
 }