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;
-    content?: string;
-    site?: string;
-    services?: string;
+    auth?: string
+    content?: string
+    site?: 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, 'content', '/api/content/');
-addProp(uri, 'site', '');
-addProp(uri, 'services', '/api/');
+addProp(uri, 'auth', '/auth/')
+addProp(uri, 'content', '/api/content/')
+addProp(uri, 'site', '')
+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<{}>
     }
@@ -19,11 +20,11 @@ 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.
-     */
+    */
     readonly $invalid: boolean
     /**
      * A flag representing if the field under validation was touched by the user at least once. Usually it is used to decide if the message is supposed to be displayed to the end user. Flag is managed manually. You have to use $touch and $reset methods to manipulate it. The $dirty flag is considered true if given model was $touched or all of it's children are $dirty.
@@ -38,60 +39,62 @@ 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
   }
 
   /**
    * Builtin validators
-   */
+  */
   interface IDefaultValidators {
     /**
-     * Accepts only alphabet characters.
-     */
+    * Accepts only alphabet characters.
+    */
     alpha?: boolean
     /**
-     * Accepts only alphanumerics.
-     */
+    * Accepts only alphanumerics.
+    */
     alphaNum?: boolean
     /**
-     * Checks if a number is in specified bounds. Min and max are both inclusive.
-     */
+    * Checks if a number is in specified bounds. Min and max are both inclusive.
+    */
     between?: 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.
-     */
+    * 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.
+    */
     email?: boolean
     /**
-     * Requires the input to have a maximum specified length, inclusive. Works with arrays.
-     */
+    * Requires the input to have a maximum specified length, inclusive. Works with arrays.
+    */
     maxLength?: boolean
     /**
-     * Requires the input to have a minimum specified length, inclusive. Works with arrays.
-     */
+    * Requires the input to have a minimum specified length, inclusive. Works with arrays.
+    */
     minLength?: boolean
     /**
-     * Requires non-empty data. Checks for empty arrays and strings containing only whitespaces.
-     */
+    * Requires non-empty data. Checks for empty arrays and strings containing only whitespaces.
+    */
     required?: 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.
-     */
+    * 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.
+    */
     sameAs?: boolean
     /**
-     * Passes when at least one of provided validators passes.
-     */
+    * Passes when at least one of provided validators passes.
+    */
     or?: boolean
     /**
-     * Passes when all of provided validators passes.
-     */
+    * Passes when all of provided validators passes.
+    */
     and?: boolean
   }
 
@@ -101,23 +104,23 @@ 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>}
-    & {$trackBy: string | Function}
+    & { [key: number]: EachByKey<T> }
+    & { $trackBy: string | Function }
     & IValidator
 
   global {
     interface Array<T> {
       /**
        * 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.
-       */
+      */
       $each: Each<T> & Vuelidate<T>
     }
   }
 
   /**
-   * Represents an instance of validator class at runtime
+    * Represents an instance of validator class at runtime
    */
   type Validator<T> = IValidator & IDefaultValidators & Each<T>
 
@@ -137,14 +140,14 @@ declare module 'vuelidate' {
 
   /**
    * Represents mixin data exposed by Vuelidate instance
-   */
+  */
   export type Vuelidate<T> = {
     [K in keyof T]?: Vuelidate<T[K]> & Validator<T[K]>;
   }
 
   /**
    * Represents component options used by Vuelidate
-   */
+  */
   export type ValidationRuleset<T> = {
     [K in keyof T]?: ValidationPredicate | IValidationRule | IValidationRule[] | string[];
   }
@@ -167,28 +170,28 @@ declare module 'vuelidate' {
    *  }
    *  $v: Vuelidate<IBar>;
    * }
-   */
+  */
   export interface IVuelidate<T> {
     $v: Vuelidate<T>
   }
 
   /**
    * Mixin object for supplying directly to components
-   */
+  */
   export const validationMixin: {
     beforeCreate(): void;
   }
 
   /**
    * Vuelidate function that creates a validator directly, given a model, and a set of rules
-   */
+  */
   export const validateModel: {
     <T>(model: T, validations: ValidationRuleset<T>): IVuelidate<T>;
   }
 
   /**
    * Vue plugin object
-   */
+  */
   export function Validation(Vue: typeof _Vue): void
 
   export default Validation
@@ -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 minValue(min: number): (value: any) => boolean
-  function maxValue(min: number): (value: any) => boolean
-
+  */
+  function sameAs(locator: any): (value: any, vm?: 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, minValue } from 'vuelidate/lib/validators'
+import { required, email, numeric, maxLength, maxValue, minValue, sameAs, minLength } 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)
-    UserModule.signup(this.user)
+    console.log(this.signup)
+    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-label="`${errorMsg('username', $v.user.username)}`"
+                :error="$v.signup.email.$error"
+                :error-label="`${errorMsg('email', $v.signup.email)}`"
         >
             <q-input
-                    v-model="user.email"
-                    v-validate="'required|email|truthy'"
-                    :value="user.email"
-                    @change="val => { user.email = val }"
+                    v-model="signup.email"
+                    @change="val => { signup.email = val }"
                     :before="[{icon: 'mail', handler () {}}]"
-                    @blur="$v.user.email.touch"
-                    :error="$v.user.email.$error"
-                    :float-label="$t('reg.email')"
-            />
+                    @blur="$v.signup.email.$touch"
+                    :error="$v.signup.email.$error"
+                    :float-label="$t('reg.email')"></q-input>
         </q-field>
 
-        <!--
 
         <q-field
-                :error="v.user.username.$error"
-                :error-label="`${errorMsg('username', v.user.username)}`"
+                :error="$v.signup.username.$error"
+                :error-label="`${errorMsg('username', $v.signup.username)}`"
         >
             <q-input
-                    :value="user.username"
-                    @change="val => { user.username = val }"
+                    v-model="signup.username"
+                    @change="val => { signup.username = val }"
                     :before="[{icon: 'person', handler () {}}]"
-                    @blur="v.user.username.$touch"
-                    :error="v.user.username.$error"
-                    :float-label="$t('reg.username')"
-            />
+                    @blur="$v.signup.username.$touch"
+                    :error="$v.signup.username.$error"
+                    :float-label="$t('reg.username')"></q-input>
         </q-field>
 
+
         <q-field
-                :error="v.user.password.$error"
-                :error-label="`${errorMsg('password', v.user.password)}`"
+                :error="$v.signup.password.$error"
+                :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"
-                    :error="v.user.password.$error"
-                    :float-label="$t('reg.password')"
-            />
+                    @blur="$v.signup.password.$touch"
+                    :error="$v.signup.password.$error"
+                    :float-label="$t('reg.password')"></q-input>
         </q-field>
 
         <q-field
-                :error="v.user.repeatPassword.$error"
-                :error-label="`${errorMsg('repeatpassword', v.user.repeatPassword)}`"
+                :error="$v.signup.repeatPassword.$error"
+                :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"
-                    :error="v.user.repeatPassword.$error"
-                    :float-label="$t('reg.repeatPassword')"
-            />
+                    @blur="$v.signup.repeatPassword.$touch"
+                    :error="$v.signup.repeatPassword.$error"
+                    :float-label="$t('reg.repeatPassword')"></q-input>
         </q-field>
 
         <q-field
-                :error="v.user.terms.$error"
-                :error-label="`${errorMsg('terms', v.user.terms)}`"
+                :error="$v.signup.terms.$error"
+                :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"
-                    :error="v.user.terms.$error"
+                    @blur="$v.signup.terms.$touch"
+                    :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": "es2015",
-    "strict": true,
-    "esModuleInterop": true,
-    "sourceMap": true,
+    "target": "es2016",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "emitDecoratorMetadata": 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": [
-    "./shims-vue.d.ts"
-  ]
+  "compileOnSave": true
 }