Typescript Terminato! Funziona!

package.json

@@ -20,6 +20,7 @@
     "deploy:ssr": "now dist/ssr-mat"
   },
   "dependencies": {
+    "@types/vuelidate": "^0.7.0",
     "axios": "^0.18.0",
     "babel-runtime": "^6.0.0",
     "bcrypt": "^3.0.2",

quasar.conf.js

@@ -67,7 +67,8 @@ module.exports = function (ctx) {
         config.resolve
           .alias
           .set('~', __dirname)
-          .set('@', path.resolve(__dirname, 'src'));
+          .set('@', path.resolve(__dirname, 'src'))
+          .set('@classes', path.resolve(__dirname, 'src/classes/index.ts'));
         config.module
           .rule('template-engine')
           .test(/\.pug$/)

shims-vue.d.ts

@@ -1,9 +0,0 @@
-declare module '*.vue' {
-  import Vue from 'vue'
-  export default Vue
-}
-
-declare module '*.svg' {
-  import Vue from 'vue'
-  export default Vue
-}

src/@types/quasar/vue.d.ts

@@ -1,13 +0,0 @@
-import Vue from 'vue'
-
-declare module 'vue/types/vue' {
-  interface Vue {
-    $q?: any
-  }
-}
-
-declare module 'vue/types/options' {
-  interface ComponentOptions<V extends Vue> {
-    meta?: any
-  }
-}

src/classes/AlertsController.ts

@@ -0,0 +1,202 @@
+import { AlertsStore, LoginStore } from '@store';
+import {Forms} from './FormController';
+
+import Router from '@router';
+
+export namespace AlertsElement {
+
+  type AlertType = "success" | "confirm" | "warning" | "error" | "info" | "form";
+  type Diff<T extends string, U extends string> = ({[P in T]: P } & {[P in U]: never } & { [x: string]: never })[T];  
+  type Omit<T, K extends keyof T> = Pick<T, Diff<keyof T, K>>;
+  type formParam = {
+    form: Forms.Form,
+    validations?: {
+      [x:string]: any
+    },
+    submit: {
+      params?: {[x:string]: any},
+      trigger: Function
+    }
+  }
+
+  export class Alert{
+    public type: AlertType;
+    public title: string;
+    public message?: string;
+    public strict?: boolean;
+    public actions: ActionsElements.Action[];
+    public formElement?: formParam;
+    public onClose?: Function[]
+
+    constructor(fields?:{type: AlertType, title: string, message?: string, strict?: boolean, actions: ActionsElements.Action[], formElement?: formParam, onClose?: Function[]}) {
+      Object.assign(this, fields);
+      AlertsStore.actions.addAlert(this);
+    }
+
+    async waitResponse() {
+      return AlertsStore.actions.addAlert(this);
+    }
+  }
+
+  export class WarningAlert extends Alert {
+    constructor(fields?: {title: string, message?: string, strict?: boolean, actions?: ActionsElements.Action[], onClose?: Function[]}) {
+      const actions = fields.actions || [];
+      const confirmAction = (fields.actions && fields.actions.find(m => m.type == 'confirm')) ? undefined : new ActionsElements.ConfirmAction({})
+      console.log(fields.actions)
+      super({
+        title: fields.title,
+        type: 'warning',
+        strict: fields.strict,
+        message: fields.message,
+        onClose: fields.onClose,
+        actions: [
+          ...actions,
+          confirmAction
+        ]
+      });
+    }
+  }
+
+  export class SuccessAlert extends Alert {
+    constructor(fields?: {title: string, message?: string, strict?: boolean, actions?: ActionsElements.Action[], onClose?: Function[]}) {
+      const actions = fields.actions || [];
+      const confirmAction = (fields.actions && fields.actions.find(m => m.type == 'confirm')) ? undefined : new ActionsElements.ConfirmAction({})
+      console.log(fields.actions)
+      super({
+        title: fields.title || 'Opération réussie',
+        type: 'success',
+        strict: fields.strict,
+        message: fields.message,
+        onClose: fields.onClose,
+        actions: [
+          ...actions,
+          confirmAction
+        ]
+      });
+    }
+  }
+
+  export class ErrorAlert extends Alert {
+    constructor(fields?: {title: string, message?: string, strict?: boolean, actions?: ActionsElements.Action[], onClose?: Function[]}) {
+      const actions = fields.actions || [];
+      console.log(fields.actions)
+      const confirmAction = (fields.actions && fields.actions.find(m => m.type == 'confirm')) ? undefined : new ActionsElements.ConfirmAction({text: 'Fermer'})
+      super({
+        title: fields.title || `Erreur de l'opération`,
+        type: 'error',
+        strict: fields.strict,
+        message: fields.message,
+        onClose: fields.onClose,
+        actions: [
+          ...actions,
+          confirmAction
+        ]
+      });
+    }
+  }
+
+  export class FormAlert extends Alert {
+    constructor(fields?: {title: string, message?: string, strict?:boolean, formElement: formParam, onClose?: Function[]}) {
+      const confirmAction = new ActionsElements.ConfirmAction({
+        text: 'Valider',
+        triggers: [
+          () => fields.formElement.submit.trigger({form: fields.formElement.form.getData(), ...fields.formElement.submit.params})
+        ]
+      })
+
+      super({
+        title: fields.title || '',
+        type: 'form',
+        strict: fields.strict,
+        formElement: fields.formElement,
+        message: fields.message,
+        onClose: fields.onClose,
+        actions: [
+          confirmAction,
+          new ActionsElements.CancelAction()
+        ]
+      });
+    }
+  }
+}
+
+
+
+
+
+
+export namespace ActionsElements {
+
+  type ActionType = "confirm" | "action" | "cancel" | "link";
+
+  export class Action {
+    public type: ActionType;
+    public text: string;
+    public to?: {path: string} | {name: string, params?: {[x: string]: any}};
+    public trigger?: Function;
+    public triggers?: Function[];
+
+    constructor({type, text, trigger, triggers, to}: Action) {
+      this.text = text;
+      this.type = type;
+      this.trigger = trigger;
+      this.triggers = triggers;
+      this.to = to;
+    }
+  }
+
+  export class ConfirmAction extends Action {
+    constructor({text, triggers}: {text?: string, triggers?: Function[]}) {
+      super({
+        text: text ||  "Ça marche!",
+        type: "confirm",
+      });
+      if (triggers) {
+        this.triggers = [
+          ...triggers,
+          AlertsStore.mutations.confirmAlert,
+        ];
+      } else {
+        this.trigger = this.trigger = AlertsStore.mutations.confirmAlert;
+      }
+    }
+  }
+
+  export class LinkAction extends Action {
+    constructor({text, to}: {text: string, to: {path: string} | {name: string, params?: {[x: string]: any}}}) {
+      super({
+        text: text,
+        to: to,
+        type: "link",
+      });
+    }
+  }
+
+  export class LoginAction extends Action {
+    constructor() {
+      super({
+        text: "Se connecter",
+        type: "action",
+        triggers: [
+          LoginStore.mutations.showLogin,
+          AlertsStore.actions.hideAlert
+        ]
+      });
+    }
+  }
+  export class CancelAction extends Action {
+    constructor() {
+      super({
+        text: "Annuler",
+        type: "cancel",
+        trigger: AlertsStore.mutations.cancelAlert
+      });
+    }
+  }
+
+  export const triggers = {
+    close() {
+      return AlertsStore.mutations.hideAlert()
+    }
+  }
+}

src/classes/DateController.ts

@@ -0,0 +1,26 @@
+import moment from 'moment';
+import 'moment/locale/fr';
+moment.locale('fr')
+
+const monthsStrings = ['Janvier','Fevrier','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'];
+
+
+export class DateMoving {
+  public date: moment.Moment;
+  public hour: string;
+  public number: number;
+  public month: string;
+  public year: number;
+
+  constructor(time: number) {
+    this.date = moment(time * 1000);
+    this.hour = `${this.date.format('HH:mm')}`;
+    this.number = this.date.date();
+    this.year = this.date.year();
+    this.month = monthsStrings[this.date.month()];
+  }
+
+  fullString() {
+    return this.date.format('Do MMMM YYYY, HH:mm');
+  }
+}

src/classes/FormController.ts

@@ -0,0 +1,205 @@
+const css = require('@css')
+
+
+
+export namespace Forms {
+
+  function extractValues(_this, _fieldsData, fields) {
+    for (let prop in fields) {
+      if (fields[prop] instanceof DefaultFormElement) {
+        _this[prop] = fields[prop].value
+        const {value, ...rest} = fields[prop]
+        _fieldsData[prop] = rest
+      } else {
+        _this[prop] = {}
+        _fieldsData[prop] = {}
+        extractValues(_this[prop], _fieldsData[prop], fields[prop])
+      }
+    }
+  }
+
+
+
+  export class Form {
+    public initialState: any
+    public fieldsData = {}
+
+    constructor(fields: Object) {
+      extractValues(this, this.fieldsData, fields)
+      this.initialState = fields
+    }
+
+
+    reset() {
+      const form = new Form(this.initialState)
+      Object.keys(form).forEach(key => {
+        this[key] = form[key]
+      })
+    }
+
+    getData(): {[x: string]: any} {
+      const _this = Object.assign({}, this)
+      delete _this.fieldsData
+      delete _this.initialState
+      return _this
+    }
+
+    validations() {
+      return Object.keys(this.fieldsData).map(m => this.fieldsData[m].validations)
+    }
+  }
+
+  type FormType = 'text' | 'number' | 'password' | 'checkbox' | 'radio' | 'email' | 'tel' | 'date' | 'time' | 'datetime-local'
+  type IOptions = {value: any, text: string}
+  type IComponentType = 'FormText' | 'FormField' | 'StarRating' | 'FormSelect' | 'CheckBox' | 'Radio' | 'FormCalendar' | 'FormPlaceSearch' | 'FormUpload'
+
+  interface FormPayload {
+    value?: any
+    tempValue?: any
+    icon?: any
+    type?: FormType
+    placeholder?: string
+    error?: boolean
+    disabled?: boolean
+    required?: boolean
+    inlineIcon?: boolean
+    debounce?: number
+    options?: IOptions[]
+    component?: IComponentType
+    editMode?: boolean
+    noEdit?: boolean
+    validations?: {
+      [x: string]: any
+    }
+
+  }
+  class DefaultFormElement {
+    value: any
+    tempValue?: any
+    icon?: any
+    type?: FormType
+    placeholder?: string
+    required?: boolean
+    error?: boolean
+    disabled?: boolean
+    inlineIcon?: boolean
+    debounce?: number
+    options?: IOptions[]
+    component: IComponentType
+    editMode?: boolean
+    noEdit?: boolean
+    validations?: {
+      [x: string]: any
+    }
+
+    constructor({error = true, required = true, noEdit = false, editMode = false, ...fields}: FormPayload) {
+      this.value = fields.value !== undefined ? fields.value : ''
+      this.icon = fields.icon || null
+      this.type = fields.type || 'text'
+      this.placeholder = fields.placeholder || `${this.type} input`
+      this.error = error
+      this.disabled = fields.disabled || false
+      this.inlineIcon = fields.inlineIcon || false
+      this.debounce = fields.debounce || null
+      this.required = required
+      this.options = fields.options
+      this.component = fields.component || null
+      this.validations = fields.validations
+      this.tempValue = fields.tempValue
+      this.noEdit = noEdit
+      this.editMode = editMode
+    }
+
+    reset() {
+      this.value = null
+    }
+  }
+
+  export class TextForm extends DefaultFormElement {
+    constructor(fields: FormPayload) {
+      super({...fields, component: 'FormText'})
+    }
+  }
+
+  export class FieldForm extends DefaultFormElement {
+    constructor(fields: FormPayload) {
+      super({...fields, component: 'FormField'})
+    }
+  }
+  export class UploadForm extends DefaultFormElement {
+    constructor(fields: FormPayload) {
+      super({...fields, component: 'FormUpload'})
+    }
+  }
+
+
+  export class PlaceSearchForm extends DefaultFormElement {
+    constructor(fields: FormPayload) {
+      super({...fields, component: 'FormPlaceSearch'})
+    }
+  }
+
+  export class CalendarForm extends DefaultFormElement {
+    constructor(fields: FormPayload) {
+      super({...fields, component: 'FormCalendar'})
+    }
+  }
+
+  export class Radio extends DefaultFormElement {
+    constructor(fields: FormPayload) {
+      super({...fields, type: 'radio', component: 'Radio'})
+    }
+  }
+
+  export class Select extends DefaultFormElement {
+    constructor(fields: FormPayload) {
+      super({...fields, component: 'FormSelect'})
+    }
+  }
+
+  export class CheckBox extends DefaultFormElement {
+    constructor(fields: FormPayload) {
+      super({...fields, type: 'checkbox', component: 'CheckBox'})
+    }
+  }
+
+  interface StarPayload extends FormPayload {
+    starCount?: number,
+    baseColor?: string,
+    selectedColor?: string,
+    hoverColor?: string,
+    editable?: boolean,
+    init?: number,
+    size?: number,
+    displayNote?: boolean,
+    center?: boolean
+  }
+
+  export class StarRating extends DefaultFormElement {
+    starCount?: number
+    baseColor?: string
+    selectedColor?: string
+    hoverColor?: string
+    editable?: boolean
+    init?: number
+    size?: number
+    displayNote?: boolean
+    center?: boolean
+
+    constructor(fields: StarPayload) {
+      fields.component = 'StarRating'
+      super(fields)
+      this.starCount = fields.starCount || 5
+      this.baseColor = fields.baseColor || css.mainStyle
+      this.selectedColor = fields.selectedColor || css.mainStyle
+      this.hoverColor = fields.hoverColor || css.yellow1
+      this.editable = fields.editable != null ? fields.editable : true
+      this.init = fields.init || 0
+      this.size = fields.size || 25
+      this.displayNote = fields.displayNote != null ? fields.displayNote : false
+      this.center = fields.center != null ? fields.center : true
+    }
+  }
+}
+
+

src/classes/index.ts

@@ -0,0 +1,3 @@
+export * from './AlertsController'
+export * from './FormController'
+export * from './DateController'

src/config.ts

@@ -1,26 +1,26 @@
 
 interface IUriConfig {
-    auth?: string;
+    auth?: string
-    content?: string;
+    content?: string
-    site?: string;
+    site?: string
-    services?: string;
+    services?: string
 }
 
-const uri: IUriConfig = {};
+const uri: IUriConfig = {}
 
 const addProp = (obj: {}, propName: string, value: string) => {
     Object.defineProperty(obj, propName, {
         enumerable: false,
         get: () => {
-            return '//' + window.location.host + value;
+            return '//' + window.location.host + value
         }
-    });
+    })
-};
+}
 
-addProp(uri, 'auth', '/auth/');
+addProp(uri, 'auth', '/auth/')
-addProp(uri, 'content', '/api/content/');
+addProp(uri, 'content', '/api/content/')
-addProp(uri, 'site', '');
+addProp(uri, 'site', '')
-addProp(uri, 'services', '/api/');
+addProp(uri, 'services', '/api/')
 
 const config = {
     uri: uri,
@@ -34,6 +34,6 @@ const config = {
         cookieName: 'XSRF-TOKEN',
         headerName: 'X-XSRF-TOKEN'
     }
-};
+}
 
-export default config;
+export default config

src/model/index.ts

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

src/model/signup-option.ts

@@ -5,4 +5,5 @@ export interface ISignupOptions {
   password?: string
   lang?: string
   repeatPassword?: string
+  terms?: boolean
 }

src/root/home/home.ts

@@ -13,6 +13,8 @@ export default class Home extends Vue {
   cardvisible: string = 'hidden'
   displaycard: string = 'block'
 
+  public $q
+
   constructor() {
     super()
     console.log('created...')

src/typings/index.ts

@@ -0,0 +1,23 @@
+//export * from './LoginState';
+
+
+export interface IResponse<T> {
+  success?: boolean,
+  message?: string,
+  type: 'error'|'warning'
+  data: T,
+}
+
+export interface ITab {
+  title: string,
+  icon?: any,
+  condition?: boolean,
+  childs?: boolean,
+  badge?: number,
+  to: {
+    name: string,
+    params?: {
+      [x: string]: any
+    }
+  }
+}

src/typings/libs/vue.typescript.d.ts

@@ -1,5 +1,5 @@
+
 declare module '*.vue' {
   import Vue from 'vue'
   export default Vue
 }
-

src/typings/libs/vuelidate.d.ts

@@ -1,11 +1,12 @@
 declare module 'vuelidate' {
 
-  import { default as _Vue } from 'vue'
+  import _Vue = require('vue')
 
   /**
    * @module augmentation to ComponentOptions defined by Vue.js
   */
   module 'vue/types/options' {
+
     interface ComponentOptions<V extends _Vue> {
       validations?: ValidationRuleset<{}>
     }
@@ -20,7 +21,7 @@ declare module 'vuelidate' {
   /**
    * Represents an instance of validator class at runtime
   */
-  interface IValidator {
+  export interface IValidator {
     /**
      * Indicates the state of validation for given model. becomes true when any of it's child validators specified in options returns a falsy value. In case of validation groups, all grouped validators are considered.
     */
@@ -38,15 +39,17 @@ declare module 'vuelidate' {
      */
     $pending: boolean
 
+    $params: any
+
     /**
      * Sets the $dirty flag of the model and all its children to true recursively.
      */
     $touch(): void
-
     /**
      * Sets the $dirty flag of the model and all its children to false recursively.
      */
     $reset(): void
+    $flattenParams(): void
   }
 
   /**
@@ -103,8 +106,8 @@ declare module 'vuelidate' {
    * Holds all validation models of collection validator. Always preserves the keys of original model, so it can be safely referenced in the v-for loop iterating over your data using the same index.
   */
   type Each<T> =
-    & {[key: number]: EachByKey<T>}
+    & { [key: number]: EachByKey<T> }
-    & {$trackBy: string | Function}
+    & { $trackBy: string | Function }
     & IValidator
 
   global {
@@ -203,53 +206,45 @@ declare module 'vuelidate/lib/validators' {
    * Accepts only alphabet characters.
    */
   function alpha(value: any): boolean
-
   /**
    * Accepts only alphanumerics.
    */
   function alphaNum(value: any): boolean
-
   /**
    * Checks if a number is in specified bounds. Min and max are both inclusive.
    */
   function between(min: number, max: number): (value: any) => boolean
-
   /**
    * Accepts valid email addresses. Keep in mind you still have to carefully verify it on your server, as it is impossible to tell if the address is real without sending verification email.
   */
   function email(value: any): boolean
-
   /**
    * Requires the input to have a maximum specified length, inclusive. Works with arrays.
   */
   function maxLength(max: number): (value: any) => boolean
-
   /**
    * Requires the input to have a minimum specified length, inclusive. Works with arrays.
    */
   function minLength(min: number): (value: any) => boolean
-
   /**
    * Requires non-empty data. Checks for empty arrays and strings containing only whitespaces.
   */
   function required(value: any): boolean
-
   /**
    * Checks for equality with a given property. Locator might be either a sibling property name or a function, that will get your component as this and nested model which sibling properties under second parameter.
   */
-  function sameAs(locator: string): (value: any, vm?: any) => boolean
+  function sameAs(locator: any): (value: any, vm?: any) => boolean
-
-
-  function minValue(min: number): (value: any) => boolean
-  function maxValue(min: number): (value: any) => boolean
-
   /**
    * Passes when at least one of provided validators passes.
    */
   function or(...validators: ValidationPredicate[]): () => boolean
-
   /**
    * Passes when all of provided validators passes.
    */
   function and(...validators: ValidationPredicate[]): () => boolean
+
+  function numeric()
+  function minValue(value: number)
+  function maxValue(value: number)
+
 }

src/utils/validators.ts

@@ -0,0 +1,9 @@
+export namespace Validators {
+  const Regs = {
+    link: /(https?|ftp):\/\/(-\.)?([^\s/?\.#-]+\.?)+(\/[^\s]*)?$@iS/
+  }
+
+  export const LinkValidator = (value, component) => {
+    return Regs.link.test(value)
+  }
+}

src/views/login/signup/signup-validate.ts

@@ -5,24 +5,26 @@ import { complexity, registered } from '@/validation'
 
 export type TSignup = { signup: ISignupOptions, validationGroup: string[] }
 
-export const validations: ValidationRuleset<TSignup> = {
+export const validations = {
     signup: {
-        confirmPassword: {
+       repeatPassword: {
             required,
             sameAsPassword: sameAs('password')
         },
-        displayName: {
-            required,
-            minLength: minLength(2)
-        },
         password: {
             required,
             complexity
         },
-        userName: {
+        username: {
             required,
-            email,
             registered
+        },
+        email: {
+          required,
+          email
+        },
+        terms: {
+         required
         }
     }
 }

src/views/login/signup/signup.ts

@@ -1,42 +1,43 @@
-import { Component, Vue, Prop } from 'vue-property-decorator'
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
 import { UserModule } from '@/store/modules/user'
 import { ErroriMongoDb } from '@/store/modules/user'
 
-import { validationMixin } from 'vuelidate'
+import { required, email, numeric, maxLength, maxValue, minValue, sameAs, minLength } from 'vuelidate/lib/validators'
-import { required, minValue } from 'vuelidate/lib/validators'
 import { ISignupOptions, IUserState } from '@/model'
 import { validations, TSignup } from './signup-validate'
 
+import { validationMixin } from 'vuelidate'
+
 import './signup.scss'
+import { complexity, registered } from '@/validation'
 
 // import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
 
 @Component({
   mixins: [validationMixin],
-  name: 'Signup',
   validations: validations
 })
 
 export default class Signup extends Vue {
+  public $v
+  public $q
+  $t: any
+
   duplicate_email: boolean = false
   duplicate_username: boolean = false
-  user: ISignupOptions = {
+
+  public signup: ISignupOptions = {
     email: process.env.TEST_EMAIL,
     username: process.env.TEST_USERNAME || '',
     password: process.env.TEST_PASSWORD,
-    repeatPassword: process.env.TEST_PASSWORD
+    repeatPassword: process.env.TEST_PASSWORD,
+    terms: true
   }
-  terms = true
 
-  $v: any
-  $t: any
-
-  constructor() {
-    super()
-  }
 
   created() {
-
+    this.$v.$reset()
   }
 
   mounted() {
@@ -47,7 +48,7 @@ export default class Signup extends Vue {
 
   get allowSubmit() {
 
-    let error = this.$v.signup.$error || this.$v.signup.$invalid
+    let error = this.$v.$error || this.$v.$invalid
     return !error
   }
 
@@ -95,7 +96,7 @@ export default class Signup extends Vue {
     this.$q.notify(msg)
   }
 
-  errorMsg(cosa: string, item: any) {
+  public errorMsg(cosa: string, item: any) {
     try {
       if (!item.$error) return ''
       if (item.$params.email && !item.email) return this.$t('reg.err.email')
@@ -137,40 +138,38 @@ export default class Signup extends Vue {
     }
 
   }
-  /*
-
 
   submit() {
-    this.$v.user.$touch()
+    this.$v.signup.$touch()
 
     this.duplicate_email = false
     this.duplicate_username = false
 
-    if (!this.user.terms) {
+    if (!this.signup.terms) {
       this.showNotif(this.$t('reg.err.terms'))
       return
     }
 
-    if (this.v.user.$error) {
+    if (this.$v.signup.$error) {
       this.showNotif(this.$t('reg.err.errore_generico'))
       return
     }
 
     this.$q.loading.show({ message: this.$t('reg.incorso') })
 
-    console.log(this.user)
+    console.log(this.signup)
-    UserModule.signup(this.user)
+    UserModule.signup(this.signup)
       .then((riscode) => {
         this.checkErrors(riscode)
         this.$q.loading.hide()
       }).catch(error => {
-      console.log("ERROR = " + error)
+      console.log('ERROR = ' + error)
       this.$q.loading.hide()
     })
 
 
     // ...
   }
-  */
+
 }
 

src/views/login/signup/signup.vue

@@ -10,80 +10,73 @@
         <!--Prova URL :  {{env('PROVA_PAOLO')}}-->
 
         <q-field
-                :error="$v.user.email.$error"
+                :error="$v.signup.email.$error"
-                error-label="`${errorMsg('username', $v.user.username)}`"
+                :error-label="`${errorMsg('email', $v.signup.email)}`"
         >
             <q-input
-                    v-model="user.email"
+                    v-model="signup.email"
-                    v-validate="'required|email|truthy'"
+                    @change="val => { signup.email = val }"
-                    :value="user.email"
-                    @change="val => { user.email = val }"
                     :before="[{icon: 'mail', handler () {}}]"
-                    @blur="$v.user.email.touch"
+                    @blur="$v.signup.email.$touch"
-                    :error="$v.user.email.$error"
+                    :error="$v.signup.email.$error"
-                    :float-label="$t('reg.email')"
+                    :float-label="$t('reg.email')"></q-input>
-            />
         </q-field>
 
-        <!--
 
         <q-field
-                :error="v.user.username.$error"
+                :error="$v.signup.username.$error"
-                :error-label="`${errorMsg('username', v.user.username)}`"
+                :error-label="`${errorMsg('username', $v.signup.username)}`"
         >
             <q-input
-                    :value="user.username"
+                    v-model="signup.username"
-                    @change="val => { user.username = val }"
+                    @change="val => { signup.username = val }"
                     :before="[{icon: 'person', handler () {}}]"
-                    @blur="v.user.username.$touch"
+                    @blur="$v.signup.username.$touch"
-                    :error="v.user.username.$error"
+                    :error="$v.signup.username.$error"
-                    :float-label="$t('reg.username')"
+                    :float-label="$t('reg.username')"></q-input>
-            />
         </q-field>
 
+
         <q-field
-                :error="v.user.password.$error"
+                :error="$v.signup.password.$error"
-                :error-label="`${errorMsg('password', v.user.password)}`"
+                :error-label="`${errorMsg('password', $v.signup.password)}`"
         >
             <q-input
-                    v-model="user.password"
+                    v-model="signup.password"
                     :before="[{icon: 'vpn_key', handler () {}}]"
-                    @blur="v.user.password.$touch"
+                    @blur="$v.signup.password.$touch"
-                    :error="v.user.password.$error"
+                    :error="$v.signup.password.$error"
-                    :float-label="$t('reg.password')"
+                    :float-label="$t('reg.password')"></q-input>
-            />
         </q-field>
 
         <q-field
-                :error="v.user.repeatPassword.$error"
+                :error="$v.signup.repeatPassword.$error"
-                :error-label="`${errorMsg('repeatpassword', v.user.repeatPassword)}`"
+                :error-label="`${errorMsg('repeatpassword', $v.signup.repeatPassword)}`"
         >
             <q-input
-                    v-model="user.repeatPassword"
+                    v-model="signup.repeatPassword"
                     :before="[{icon: 'vpn_key', handler () {}}]"
-                    @blur="v.user.repeatPassword.$touch"
+                    @blur="$v.signup.repeatPassword.$touch"
-                    :error="v.user.repeatPassword.$error"
+                    :error="$v.signup.repeatPassword.$error"
-                    :float-label="$t('reg.repeatPassword')"
+                    :float-label="$t('reg.repeatPassword')"></q-input>
-            />
         </q-field>
 
         <q-field
-                :error="v.user.terms.$error"
+                :error="$v.signup.terms.$error"
-                :error-label="`${errorMsg('terms', v.user.terms)}`"
+                :error-label="`${errorMsg('terms', $v.signup.terms)}`"
         >
 
             <q-checkbox
-                    v-model="user.terms"
+                    v-model="signup.terms"
                     :before="[{icon: 'vpn_key', handler () {}}]"
                     color="secondary"
-                    @blur="v.user.terms.$touch"
+                    @blur="$v.signup.terms.$touch"
-                    :error="v.user.terms.$error"
+                    :error="$v.signup.terms.$error"
                     :float-label="$t('reg.terms')"
-                    :label="$t('reg.terms')"
+                    :label="$t('reg.terms')"></q-checkbox>
-            />
         </q-field>
 
-        -->
+
 
         <br>
 

tsconfig.json

@@ -1,24 +1,38 @@
 {
   "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
-    "listEmittedFiles": false,
     "module": "esnext",
-    "moduleResolution": "Node",
+    "target": "es2016",
-    "target": "es2015",
+    "moduleResolution": "node",
-    "strict": true,
+    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
+    "emitDecoratorMetadata": true,
-    "sourceMap": true,
     "experimentalDecorators": true,
-    "noImplicitAny": true,
+    "removeComments": true,
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    // "noUnusedParameters": true,
+    "pretty": true,
+    "noImplicitThis": true,
     "lib": [
       "dom",
-      "es6"
+      "es5",
+      "es2015",
+      "es2015.promise",
+      "es2017",
+      "es2017.object",
+      "es7"
     ],
     "baseUrl": ".",
     "paths": {
       "~/*": ["./*"],
-      "@/*": ["src/*"]
+      "@/*": ["src/*"],
+      "@classes": ["./classes/index.ts"],
+      "@types": ["./typings/index.ts"],
+      "@utils/*": ["./utils/*"],
+      "@validators": ["./utils/validators.ts"]
     },
+    "sourceMap": true,
+    "allowJs": true,
+    "skipLibCheck": true,
     "types": [
       "node",
       "jest"
@@ -35,7 +49,5 @@
     "dist",
     "node_modules"
   ],
-  "files": [
+  "compileOnSave": true
-    "./shims-vue.d.ts"
-  ]
 }