diff --git a/package.json b/package.json index 11b6e0d..70669e8 100644 --- a/package.json +++ b/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", diff --git a/quasar.conf.js b/quasar.conf.js index 8dc9d20..0b51dd9 100644 --- a/quasar.conf.js +++ b/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$/) diff --git a/shims-vue.d.ts b/shims-vue.d.ts deleted file mode 100644 index 823415b..0000000 --- a/shims-vue.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -declare module '*.vue' { - import Vue from 'vue' - export default Vue -} - -declare module '*.svg' { - import Vue from 'vue' - export default Vue -} diff --git a/src/@types/quasar/vue.d.ts b/src/@types/quasar/vue.d.ts deleted file mode 100644 index cb7d1c0..0000000 --- a/src/@types/quasar/vue.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -import Vue from 'vue' - -declare module 'vue/types/vue' { - interface Vue { - $q?: any - } -} - -declare module 'vue/types/options' { - interface ComponentOptions { - meta?: any - } -} diff --git a/src/classes/AlertsController.ts b/src/classes/AlertsController.ts new file mode 100644 index 0000000..eb666f9 --- /dev/null +++ b/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 = ({[P in T]: P } & {[P in U]: never } & { [x: string]: never })[T]; + type Omit = Pick>; + 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() + } + } +} diff --git a/src/classes/DateController.ts b/src/classes/DateController.ts new file mode 100644 index 0000000..d1bfbe8 --- /dev/null +++ b/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'); + } +} \ No newline at end of file diff --git a/src/classes/FormController.ts b/src/classes/FormController.ts new file mode 100644 index 0000000..37a132b --- /dev/null +++ b/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 + } + } +} + + diff --git a/src/classes/index.ts b/src/classes/index.ts new file mode 100644 index 0000000..bab9ed3 --- /dev/null +++ b/src/classes/index.ts @@ -0,0 +1,3 @@ +export * from './AlertsController' +export * from './FormController' +export * from './DateController' diff --git a/src/config.ts b/src/config.ts index 763cae4..a07c2a6 100644 --- a/src/config.ts +++ b/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 diff --git a/src/model/index.ts b/src/model/index.ts index 38fd172..4be06db 100644 --- a/src/model/index.ts +++ b/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' diff --git a/src/model/signup-option.ts b/src/model/signup-option.ts index 61ac773..a6501d5 100644 --- a/src/model/signup-option.ts +++ b/src/model/signup-option.ts @@ -5,4 +5,5 @@ export interface ISignupOptions { password?: string lang?: string repeatPassword?: string + terms?: boolean } diff --git a/src/root/home/home.ts b/src/root/home/home.ts index be49148..435417a 100644 --- a/src/root/home/home.ts +++ b/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...') diff --git a/src/types/index.d.ts b/src/types/index.d.ts deleted file mode 100644 index e69de29..0000000 diff --git a/src/typings/index.ts b/src/typings/index.ts new file mode 100644 index 0000000..0efd65a --- /dev/null +++ b/src/typings/index.ts @@ -0,0 +1,23 @@ +//export * from './LoginState'; + + +export interface IResponse { + 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 + } + } +} diff --git a/src/@types/vue/index.d.ts b/src/typings/libs/vue.typescript.d.ts similarity index 100% rename from src/@types/vue/index.d.ts rename to src/typings/libs/vue.typescript.d.ts index c146dd4..f664d36 100644 --- a/src/@types/vue/index.d.ts +++ b/src/typings/libs/vue.typescript.d.ts @@ -1,5 +1,5 @@ + declare module '*.vue' { import Vue from 'vue' export default Vue } - diff --git a/src/vuelidate.d.ts b/src/typings/libs/vuelidate.d.ts similarity index 79% rename from src/vuelidate.d.ts rename to src/typings/libs/vuelidate.d.ts index c89c421..35899a3 100644 --- a/src/vuelidate.d.ts +++ b/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 { 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 = - & {[key: number]: EachByKey} - & {$trackBy: string | Function} + & { [key: number]: EachByKey } + & { $trackBy: string | Function } & IValidator global { interface Array { /** * 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 & Vuelidate } } /** - * Represents an instance of validator class at runtime + * Represents an instance of validator class at runtime */ type Validator = IValidator & IDefaultValidators & Each @@ -137,14 +140,14 @@ declare module 'vuelidate' { /** * Represents mixin data exposed by Vuelidate instance - */ + */ export type Vuelidate = { [K in keyof T]?: Vuelidate & Validator; } /** * Represents component options used by Vuelidate - */ + */ export type ValidationRuleset = { [K in keyof T]?: ValidationPredicate | IValidationRule | IValidationRule[] | string[]; } @@ -152,7 +155,7 @@ declare module 'vuelidate' { /** * Represents Vuelidate mixin data extending a Vue component instance. Have your Vue component options implement this * @param {Type} T - The interface or type being used to store model data requiring validation - * + * * @example * export class Foo implements IVuelidate { * data() { @@ -167,28 +170,28 @@ declare module 'vuelidate' { * } * $v: Vuelidate; * } - */ + */ export interface IVuelidate { $v: Vuelidate } /** * 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: { (model: T, validations: ValidationRuleset): IVuelidate; } /** * 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) + +} \ No newline at end of file diff --git a/src/@types/quasar/index.d.ts b/src/typings/quasar/index.d.ts similarity index 100% rename from src/@types/quasar/index.d.ts rename to src/typings/quasar/index.d.ts diff --git a/src/utils/validators.ts b/src/utils/validators.ts new file mode 100644 index 0000000..1bb7fe7 --- /dev/null +++ b/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) + } +} diff --git a/src/views/login/signup/signup-validate.ts b/src/views/login/signup/signup-validate.ts index 528ef3f..232f25a 100644 --- a/src/views/login/signup/signup-validate.ts +++ b/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 = { +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 } } } diff --git a/src/views/login/signup/signup.ts b/src/views/login/signup/signup.ts index d03f46e..0c79139 100644 --- a/src/views/login/signup/signup.ts +++ b/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() }) // ... } - */ + } diff --git a/src/views/login/signup/signup.vue b/src/views/login/signup/signup.vue index ffe7666..c5b6e0f 100644 --- a/src/views/login/signup/signup.vue +++ b/src/views/login/signup/signup.vue @@ -10,80 +10,73 @@ + @blur="$v.signup.email.$touch" + :error="$v.signup.email.$error" + :float-label="$t('reg.email')"> - +
diff --git a/tsconfig.json b/tsconfig.json index 47cd052..ca3e159 100644 --- a/tsconfig.json +++ b/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 }