Signed-off-by: Thomas Citharel <tcit@tcit.fr>
master
Thomas Citharel 4 years ago
parent 394057d45e
commit 93a97b0865
  1. 3
      .gitignore
  2. 5
      config/config.exs
  3. 3
      config/dev.exs
  4. 13
      config/prod.exs
  5. 7795
      js/package-lock.json
  6. 27
      js/package.json
  7. 64
      js/src/App.vue
  8. 65
      js/src/assets/profile.svg
  9. 3
      js/src/auth/index.js
  10. 25
      js/src/components/Account/Account.vue
  11. 141
      js/src/components/Account/Login.vue
  12. 128
      js/src/components/Account/PasswordReset.vue
  13. 198
      js/src/components/Account/Register.vue
  14. 9
      js/src/components/Account/RegisterAvatar.vue
  15. 84
      js/src/components/Account/ResendConfirmation.vue
  16. 93
      js/src/components/Account/SendPasswordReset.vue
  17. 51
      js/src/components/Account/Validate.vue
  18. 312
      js/src/components/Event/Create.vue
  19. 4
      js/src/components/Event/Event.vue
  20. 64
      js/src/components/Home.vue
  21. 85
      js/src/components/Login.vue
  22. 33
      js/src/components/NavBar.vue
  23. 87
      js/src/components/Register.vue
  24. 41
      js/src/router/index.js
  25. 2
      js/vue.config.js
  26. 11
      lib/eventos/actors/actors.ex
  27. 29
      lib/eventos/actors/service/activation.ex
  28. 57
      lib/eventos/actors/service/reset_password.ex
  29. 50
      lib/eventos/actors/user.ex
  30. 1
      lib/eventos/addresses/address.ex
  31. 46
      lib/eventos/email/user.ex
  32. 61
      lib/eventos/events/event.ex
  33. 24
      lib/eventos/events/events.ex
  34. 3
      lib/eventos/mailer.ex
  35. 31
      lib/eventos_web/controllers/event_controller.ex
  36. 77
      lib/eventos_web/controllers/user_controller.ex
  37. 26
      lib/eventos_web/controllers/user_session_controller.ex
  38. 11
      lib/eventos_web/router.ex
  39. 10
      lib/eventos_web/templates/email/email.html.eex
  40. 3
      lib/eventos_web/templates/email/email.text.eex
  41. 5
      lib/eventos_web/templates/email/password_reset.html.eex
  42. 11
      lib/eventos_web/templates/email/password_reset.text.eex
  43. 4
      lib/eventos_web/templates/email/registration_confirmation.html.eex
  44. 9
      lib/eventos_web/templates/email/registration_confirmation.text.eex
  45. 3
      lib/eventos_web/views/email_view.ex
  46. 6
      lib/eventos_web/views/event_view.ex
  47. 12
      lib/eventos_web/views/user_view.ex
  48. 3
      lib/mix/tasks/create_bot.ex
  49. 6
      mix.exs
  50. 5
      mix.lock
  51. 4
      priv/repo/migrations/20180515142835_alter_event_timestamps_to_date_time_with_time_zone.exs
  52. 20
      priv/repo/migrations/20180628091920_add-user-confirm-email-fields.exs
  53. 18
      priv/repo/migrations/20180628130746_add-user-password-reset-fields.exs
  54. 17
      priv/repo/migrations/20180628142835_revert_alter_event_timestamps.exs
  55. 31
      priv/repo/migrations/20180702150922_add_address_type.exs
  56. 15
      priv/repo/migrations/20180702154630_remove_slug_for_event.exs

3
.gitignore vendored

@ -15,4 +15,5 @@ erl_crash.dump
# variables.
/config/*.secret.exs
/doc
.elixir_ls
/doc

@ -25,7 +25,10 @@ config :eventos, EventosWeb.Endpoint,
secret_key_base: "1yOazsoE0Wqu4kXk3uC5gu3jDbShOimTCzyFL3OjCdBmOXMyHX87Qmf3+Tu9s0iM",
render_errors: [view: EventosWeb.ErrorView, accepts: ~w(html json)],
pubsub: [name: Eventos.PubSub,
adapter: Phoenix.PubSub.PG2]
adapter: Phoenix.PubSub.PG2],
instance: "localhost",
email_from: "noreply@localhost",
email_to: "noreply@localhost"
# Configures Elixir's Logger
config :logger, :console,

@ -47,6 +47,9 @@ config :logger, :console, format: "[$level] $message\n", level: :debug
# in production as building large stacktraces may be expensive.
config :phoenix, :stacktrace_depth, 20
config :eventos, Eventos.Mailer,
adapter: Bamboo.LocalAdapter
# Configure your database
config :eventos, Eventos.Repo,
adapter: Ecto.Adapters.Postgres,

@ -18,6 +18,19 @@ config :eventos, EventosWeb.Endpoint,
url: [host: "example.com", port: 80],
cache_static_manifest: "priv/static/cache_manifest.json"
config :eventos, Eventos.Mailer,
adapter: Bamboo.SMTPAdapter,
server: "localhost",
hostname: "localhost",
port: 25,
username: nil, # or {:system, "SMTP_USERNAME"}
password: nil, # or {:system, "SMTP_PASSWORD"}
tls: :if_available, # can be `:always` or `:never`
allowed_tls_versions: [:"tlsv1", :"tlsv1.1", :"tlsv1.2"], # or {":system", ALLOWED_TLS_VERSIONS"} w/ comma seprated values (e.g. "tlsv1.1,tlsv1.2")
ssl: false, # can be `true`
retries: 1,
no_mx_lookups: false # can be `true`
# Do not print debug messages in production
config :logger, level: :info

7795
js/package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -11,28 +11,29 @@
},
"dependencies": {
"material-design-icons": "^3.0.1",
"moment": "^2.22.1",
"moment": "^2.22.2",
"ngeohash": "^0.6.0",
"register-service-worker": "^1.0.0",
"register-service-worker": "^1.4.1",
"vue": "^2.5.16",
"vue-gravatar": "^1.2.1",
"vue-markdown": "^2.2.4",
"vue-router": "^3.0.1",
"vuetify": "^1.0.18",
"vuetify-google-autocomplete": "^2.0.0-Alpha.9",
"vuetify": "^1.1.1",
"vuetify-google-autocomplete": "^2.0.0-beta.4",
"vuex": "^3.0.1",
"vuex-i18n": "^1.10.5"
},
"devDependencies": {
"dotenv-webpack": "^1.5.5",
"@vue/cli-plugin-babel": "^3.0.0-beta.10",
"@vue/cli-plugin-e2e-nightwatch": "^3.0.0-beta.10",
"@vue/cli-plugin-eslint": "^3.0.0-beta.10",
"@vue/cli-plugin-pwa": "^3.0.0-beta.10",
"@vue/cli-plugin-unit-mocha": "^3.0.0-beta.10",
"@vue/cli-service": "^3.0.0-beta.10",
"@vue/eslint-config-airbnb": "^3.0.0-beta.10",
"@vue/test-utils": "^1.0.0-beta.10",
"@vue/cli-plugin-babel": "^3.0.0-rc.3",
"@vue/cli-plugin-e2e-nightwatch": "^3.0.0-rc.3",
"@vue/cli-plugin-eslint": "^3.0.0-rc.3",
"@vue/cli-plugin-pwa": "^3.0.0-rc.3",
"@vue/cli-plugin-unit-mocha": "^3.0.0-rc.3",
"@vue/cli-service": "^3.0.0-rc.3",
"@vue/eslint-config-airbnb": "^3.0.0-rc.3",
"@vue/test-utils": "^1.0.0-beta.20",
"chai": "^4.1.2",
"dotenv-webpack": "^1.5.7",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"vue-template-compiler": "^2.5.13"

@ -38,28 +38,54 @@
</template>
</v-list>
</v-navigation-drawer>
<NavBar></NavBar>
<NavBar v-bind="{toggleDrawer}"></NavBar>
<v-content>
<v-container fluid fill-height>
<v-layout xs-12>
<transition>
<transition name="router">
<router-view></router-view>
</transition>
</v-layout>
</v-container>
</v-content>
<v-btn
fixed
dark
fab
<v-speed-dial
v-model="fab"
bottom
fixed
right
color="pink"
@click="$router.push({name: 'CreateEvent'})"
direction="top"
transition="scale-transition"
v-if="getUser()"
>
<v-icon>add</v-icon>
</v-btn>
<v-btn
slot="activator"
v-model="fab"
color="blue darken-2"
dark
fab
>
<v-icon>add</v-icon>
<v-icon>close</v-icon>
</v-btn>
<v-btn
fab
dark
small
color="pink"
@click="$router.push({name: 'CreateEvent'})"
>
<v-icon>event</v-icon>
</v-btn>
<v-btn
fab
dark
small
color="purple"
@click="$router.push({name: 'CreateGroup'})"
>
<v-icon>group</v-icon>
</v-btn>
</v-speed-dial>
<v-footer class="indigo" app>
<span class="white--text">© Thomas Citharel {{ new Date().getFullYear() }} - Made with Elixir, Phoenix & <a href="https://vuejs.org/">VueJS</a> & <a href="https://www.vuetifyjs.com/">Vuetify</a> with some love and some weeks</span>
</v-footer>
@ -85,7 +111,8 @@ export default {
},
data() {
return {
drawer: true,
drawer: false,
fab: false,
user: false,
items: [
{ icon: 'poll', text: 'Events', route: 'EventList', role: null },
@ -110,10 +137,25 @@ export default {
},
getUser() {
return this.$store.state.user === undefined ? false : this.$store.state.user;
},
toggleDrawer() {
this.drawer = !this.drawer;
}
},
};
</script>
<style>
.router-enter-active, .router-leave-active {
transition-property: opacity;
transition-duration: .25s;
}
.router-enter-active {
transition-delay: .25s;
}
.router-enter, .router-leave-active {
opacity: 0
}
</style>

@ -0,0 +1,65 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
data-name="Layer 1"
viewBox="0 0 100 125"
x="0px"
y="0px"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="profile.svg">
<metadata
id="metadata24">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs22" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="640"
inkscape:window-height="480"
id="namedview20"
showgrid="false"
inkscape:zoom="1.888"
inkscape:cx="50"
inkscape:cy="62.5"
inkscape:window-x="0"
inkscape:window-y="36"
inkscape:window-maximized="0"
inkscape:current-layer="svg2" />
<title
id="title4">47 all</title>
<g
id="g6">&quot;&gt;<g
id="g8">&quot;&gt;<path
d="M77.74,83.19H22.26V76.47a24,24,0,0,1,24-24h7.48a24,24,0,0,1,24,24Zm-51.48-4H73.74V76.47a20,20,0,0,0-20-20H46.26a20,20,0,0,0-20,20Z"
id="path10" />
</g>
<g
id="g12">&quot;&gt;<path
d="M50,50.5A16.85,16.85,0,1,1,66.85,33.66,16.87,16.87,0,0,1,50,50.5Zm0-29.7A12.85,12.85,0,1,0,62.85,33.66,12.86,12.86,0,0,0,50,20.81Z"
id="path14" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

@ -61,10 +61,11 @@ export default {
},
// To log out, we just need to remove the token
logout() {
logout(store) {
localStorage.removeItem('refresh_token');
localStorage.removeItem('token');
this.authenticated = false;
store.commit('LOGOUT_USER');
},
jwt_decode(token) {

@ -14,20 +14,30 @@
<v-btn icon class="mr-3" v-if="$store.state.user && $store.state.user.actor.id === actor.id">
<v-icon>edit</v-icon>
</v-btn>
<v-btn icon>
<v-icon>more_vert</v-icon>
</v-btn>
<v-menu bottom left>
<v-btn icon slot="activator">
<v-icon>more_vert</v-icon>
</v-btn>
<v-list>
<v-list-tile @click="logoutUser()" v-if="$store.state.user && $store.state.user.actor.id === actor.id">
<v-list-tile-title>User logout</v-list-tile-title>
</v-list-tile>
<v-list-tile @click="deleteAccount()" v-if="$store.state.user && $store.state.user.actor.id === actor.id">
<v-list-tile-title>Delete</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-card-title>
<v-spacer></v-spacer>
<div class="text-xs-center">
<v-avatar size="125px">
<img v-if="!account.avatar_url"
<img v-if="!actor.avatar_url"
class="img-circle elevation-7 mb-1"
src="https://picsum.photos/125/125/"
>
<img v-else
class="img-circle elevation-7 mb-1"
:src="account.avatar_url"
:src="actor.avatar_url"
>
</v-avatar>
</div>
@ -166,6 +176,7 @@
<script>
import eventFetch from '@/api/eventFetch';
import auth from '@/auth';
export default {
name: 'Account',
@ -197,6 +208,10 @@ export default {
this.loading = false;
console.log(this.actor);
})
},
logoutUser() {
auth.logout(this.$store);
this.$router.push({ name: 'Home' });
}
}
}

@ -0,0 +1,141 @@
<template>
<v-container fluid fill-height>
<v-layout align-center justify-center>
<v-flex xs12 sm8 md4>
<v-card class="elevation-12">
<v-toolbar dark color="primary">
<v-toolbar-title>Login</v-toolbar-title>
<v-spacer></v-spacer>
<v-tooltip bottom>
<v-btn
slot="activator"
:to="{ name: 'Register', params: { email: this.credentials.email, password: this.credentials.password } }"
>
<!-- <v-icon large>login</v-icon> -->
<span>Register</span>
</v-btn>
<span>Register</span>
</v-tooltip>
</v-toolbar>
<v-card-text>
<div class="text-xs-center">
<v-avatar size="80px">
<transition name="avatar">
<component :is="validEmail()" v-bind="{email: credentials.email}"></component>
<!-- <v-gravatar :email="credentials.email" default-img="mp" v-if="validEmail()"/>
<avatar v-else></avatar> -->
</transition>
</v-avatar>
</div>
<v-form @submit="loginAction" v-if="!validationSent">
<v-text-field
label="Email"
required
type="text"
v-model="credentials.email"
:rules="[rules.required, rules.email]"
>
</v-text-field>
<v-text-field
label="password"
required
type="password"
v-model="credentials.password"
:rules="[rules.required]"
>
</v-text-field>
<v-btn @click="loginAction" color="blue">Login</v-btn>
<router-link :to="{ name: 'SendPasswordReset', params: { email: credentials.email } }">Password forgotten ?</router-link>
</v-form>
<div v-else>
<h2>{{ $t('registration.form.validation_sent', { email: credentials.email }) }}</h2>
<b-alert show variant="info">{{ $t('registration.form.validation_sent_info') }}</b-alert>
</div>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import auth from '@/auth/index';
import Gravatar from 'vue-gravatar';
import RegisterAvatar from './RegisterAvatar';
export default {
props: {
email: {
type: String,
required: false,
default: '',
},
password: {
type: String,
required: false,
default: '',
},
},
beforeCreate() {
if (this.$store.state.user) {
this.$router.push('/');
}
},
components: {
'v-gravatar': Gravatar,
'avatar': RegisterAvatar
},
mounted() {
this.credentials.email = this.email;
this.credentials.password = this.password;
},
data() {
return {
credentials: {
email: '',
password: '',
},
validationSent: false,
error: {
show: false,
text: '',
timeout: 3000,
field: {
email: false,
password: false,
},
},
rules: {
required: value => !!value || 'Required.',
email: (value) => {
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return pattern.test(value) || 'Invalid e-mail.';
},
},
};
},
methods: {
loginAction(e) {
e.preventDefault();
auth.login(JSON.stringify(this.credentials), (data) => {
this.$store.commit('LOGIN_USER', data.user);
this.$router.push({ name: 'Home' });
}, (error) => {
Promise.resolve(error).then((errorMsg) => {
console.log(errorMsg);
this.error.show = true;
this.error.text = this.$t(errorMsg.display_error);
}).catch((e) => {
console.log(e);
this.error.show = true;
this.error.text = e.message;
});
});
},
validEmail() {
return this.rules.email(this.credentials.email) === true ? 'v-gravatar' : 'avatar';
},
},
};
</script>

@ -0,0 +1,128 @@
<template>
<v-container fluid fill-height>
<v-layout align-center justify-center>
<v-flex xs12 sm8 md4>
<v-card class="elevation-12">
<v-toolbar dark color="primary">
<v-toolbar-title>Password Reset</v-toolbar-title>
</v-toolbar>
<v-card-text>
<v-alert type="error" :value="state.token.status === false">{{ state.token.msg }}</v-alert>
<v-form @submit="resetAction">
<v-text-field
label="Password"
type="password"
v-model="credentials.password"
required
:error="state.password.status"
:rules="[rules.required, rules.password_length]"
>
</v-text-field>
<v-text-field
label="Password (confirmation)"
type="password"
v-model="credentials.password_confirmation"
required
:rules="[rules.required, rules.password_length, rules.password_equal]"
:error="state.password_confirmation.status"
>
</v-text-field>
<v-btn type="submit" :disabled="!samePasswords" color="blue">Reset my password</v-btn>
</v-form>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import fetchStory from '@/api/eventFetch';
export default {
name: 'PasswordReset',
props: {
token: {
type: String,
required: true,
},
},
computed: {
samePasswords() {
return this.rules.password_length(this.credentials.password) === true &&
this.credentials.password === this.credentials.password_confirmation;
},
},
data() {
return {
credentials: {
password: '',
password_confirmation: '',
},
error: {
show: false,
},
state: {
token: {
status: null,
msg: '',
},
password: {
status: null,
msg: '',
},
password_confirmation: {
status: null,
msg: '',
},
},
rules: {
password_length: value => value.length > 6 || 'Password must be at least 6 caracters long',
required: value => !!value || 'Required.',
password_equal: value => value === this.credentials.password || 'Passwords must be the same',
}
};
},
methods: {
resetAction(e) {
this.resetState();
e.preventDefault();
console.log(this.token);
fetchStory('/users/password-reset/post', this.$store, { method: 'POST', body: JSON.stringify({ password: this.credentials.password, token: this.token }) }).then((data) => {
localStorage.setItem('token', data.token);
localStorage.setItem('refresh_token', data.refresh_token);
this.$store.commit('LOGIN_USER', data.account);
this.$snotify.success(this.$t('registration.success.login', { username: data.account.username }));
this.$router.push({ name: 'Home' });
}, (error) => {
Promise.resolve(error).then((errormsg) => {
console.log('errormsg', errormsg);
this.error.show = true;
Object.entries(JSON.parse(errormsg).errors).forEach(([key, val]) => {
console.log('key', key);
console.log('val', val[0]);
this.state[key] = { status: false, msg: val[0] };
console.log('state', this.state);
});
});
});
},
resetState() {
this.state = {
token: {
status: null,
msg: '',
},
password_confirmation: {
status: null,
msg: '',
},
password: {
status: null,
msg: '',
},
};
},
},
};
</script>

@ -0,0 +1,198 @@
<template>
<v-container fluid fill-height>
<v-layout align-center justify-center>
<v-flex xs12 sm8 md4>
<v-card class="elevation-12">
<v-toolbar dark color="primary">
<v-toolbar-title>Register</v-toolbar-title>
<v-spacer></v-spacer>
<v-tooltip bottom>
<v-btn
slot="activator"
:to="{ name: 'Login', params: { email: this.credentials.email, password: this.credentials.password } }"
>
<!-- <v-icon large>login</v-icon> -->
<span>Login</span>
</v-btn>
<span>Login</span>
</v-tooltip>
</v-toolbar>
<v-card-text>
<div class="text-xs-center">
<v-avatar size="80px">
<transition name="avatar">
<component :is="validEmail()" v-bind="{email: credentials.email}"></component>
<!-- <v-gravatar :email="credentials.email" default-img="mp" v-if="validEmail()"/>
<avatar v-else></avatar> -->
</transition>
</v-avatar>
</div>
<v-form @submit="registerAction" v-if="!validationSent">
<v-text-field
label="Username"
required
type="text"
v-model="credentials.username"
:rules="[rules.required]"
:error="this.state.username.status"
:error-messages="this.state.username.msg"
:suffix="this.host()"
hint="You will be able to create more identities once registered"
persistent-hint
>
</v-text-field>
<v-text-field
label="Email"
required
type="email"
ref="email"
v-model="credentials.email"
:rules="[rules.required, rules.email]"
:error="this.state.email.status"
:error-messages="this.state.email.msg"
>
</v-text-field>
<v-text-field
label="Password"
required
:type="showPassword ? 'text' : 'password'"
v-model="credentials.password"
:rules="[rules.required, rules.password_length]"
:error="this.state.password.status"
:error-messages="this.state.password.msg"
:append-icon="showPassword ? 'visibility_off' : 'visibility'"
@click:append="showPassword = !showPassword"
>
</v-text-field>
<v-btn @click="registerAction" color="primary">Register</v-btn>
<router-link :to="{ name: 'ResendConfirmation', params: { email: credentials.email }}">Didn't receive the instructions ?</router-link>
</v-form>
<div v-else>
<h2>{{ $t('registration.form.validation_sent', { email: credentials.email }) }}</h2>
<b-alert show variant="info">{{ $t('registration.form.validation_sent_info') }}</b-alert>
</div>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import auth from '@/auth/index';
import Gravatar from 'vue-gravatar';
import RegisterAvatar from './RegisterAvatar';
export default {
props: {
email: {
type: String,
required: false,
default: '',
},
password: {
type: String,
required: false,
default: '',
},
},
components: {
'v-gravatar': Gravatar,
'avatar': RegisterAvatar
},
mounted() {
this.credentials.email = this.email;
this.credentials.password = this.password;
},
data() {
return {
credentials: {
username: '',
email: '',
password: '',
},
error: {
show: false,
},
showPassword: false,
validationSent: false,
state: {
email: {
status: false,
msg: [],
},
username: {
status: false,
msg: [],
},
password: {
status: false,
msg: [],
},
},
rules: {
password_length: value => value.length > 6 || 'Password must be at least 6 caracters long',
required: value => !!value || 'Required.',
email: (value) => {
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return pattern.test(value) || 'Invalid e-mail.';
},
},
};
},
methods: {
registerAction(e) {
this.resetState();
e.preventDefault();
auth.signup(JSON.stringify(this.credentials), (data) => {
console.log(data);
this.validationSent = true;
}, (error) => {
Promise.resolve(error).then((errormsg) => {
console.log(errormsg);
this.error.show = true;
Object.entries(errormsg.errors.user).forEach(([key, val]) => {
console.log(key);
console.log(val);
this.state[key] = { status: true, msg: val };
});
});
});
},
resetState() {
this.state = {
email: {
status: false,
msg: '',
},
username: {
status: false,
msg: '',
},
password: {
status: false,
msg: '',
},
};
},
host() {
return `@${window.location.host}`;
},
validEmail() {
return this.rules.email(this.credentials.email) === true ? 'v-gravatar' : 'avatar';
}
},
};
</script>
<style lang="scss">
.avatar-enter-active {
transition: opacity 1s ease;
}
.avatar-enter, .avatar-leave-to {
opacity: 0;
}
.avatar-leave {
display: none;
}
</style>

@ -0,0 +1,9 @@
<template>
<img class="img-circle elevation-7 mb-1" src="@/assets/profile.svg">
</template>
<script>
export default {
name: 'RegisterAvatar'
}
</script>

@ -0,0 +1,84 @@
<template>
<v-container fluid fill-height>
<v-layout align-center justify-center>
<v-flex xs12 sm8 md4>
<v-card class="elevation-12">
<v-toolbar dark color="primary">
<v-toolbar-title>Resend Instructions</v-toolbar-title>
</v-toolbar>
<v-card-text>
<v-form @submit="resendConfirmationAction" v-if="!validationSent">
<v-text-field
label="Email"
type="email"
v-model="credentials.email"
required
:state="state.email.status"
:rules="[rules.required, rules.email]"
>
</v-text-field>
<v-btn type="submit" color="blue">Send instructions again</v-btn>
</v-form>
<div v-else>
<h2>Validation email sent to {{ credentials.email }}</h2>
<v-alert :value="true" type="info">Please check you spam folder if you didn't receive the email.</v-alert>
</div>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import fetchStory from '@/api/eventFetch';
export default {
name: 'ResendConfirmation',
props: {
email: {
type: String,
required: false,
default: '',
},
},
data() {
return {
credentials: {
email: '',
},
validationSent: false,
error: false,
state: {
email: {
status: null,
msg: '',
},
},
rules: {
required: value => !!value || 'Required.',
email: (value) => {
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return pattern.test(value) || 'Invalid e-mail.';
},
},
};
},
mounted() {
this.credentials.email = this.email;
},
methods: {
resendConfirmationAction(e) {
e.preventDefault();
fetchStory('/users/resend', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
this.validationSent = true;
}).catch((err) => {
Promise.resolve(err).then(() => {
this.error = true;
this.validationSent = true;
});
});
},
},
};
</script>

@ -0,0 +1,93 @@
<template>
<v-container fluid fill-height>
<v-layout align-center justify-center>
<v-flex xs12 sm8 md4>
<v-card class="elevation-12">
<v-toolbar dark color="primary">
<v-toolbar-title>Password Reset</v-toolbar-title>
</v-toolbar>
<v-card-text>
<v-form @submit="resendConfirmationAction" v-if="!validationSent">
<v-text-field
label="Email"
type="email"
v-model="credentials.email"
required
:state="state.email.status"
:rules="[rules.required, rules.email]"
>
</v-text-field>
<v-btn type="submit" color="blue">Reset my password</v-btn>
</v-form>
<div v-else>
<h2>Validation email sent to {{ credentials.email }}</h2>
<v-alert :value="true" type="info">Please check you spam folder if you didn't receive the email.</v-alert>
</div>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import fetchStory from '@/api/eventFetch';
export default {
name: 'SendPasswordReset',
props: {
email: {
type: String,
required: false,
default: '',
},
},
mounted() {
this.credentials.email = this.email;
},
data() {
return {
credentials: {
email: '',
},
validationSent: false,
error: false,
state: {
email: {
status: null,
msg: '',
},
},
rules: {
required: value => !!value || 'Required.',
email: (value) => {
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return pattern.test(value) || 'Invalid e-mail.';
},
},
};
},
methods: {
resendConfirmationAction(e) {
e.preventDefault();
fetchStory('/users/password-reset/send', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
this.error = false;
this.validationSent = true;
}).catch((err) => {
Promise.resolve(err).then((data) => {
this.error = true;
this.state.email = { status: false, msg: data.errors };
});
});
},
resetState() {
this.state = {
email: {
status: null,
msg: '',
},
};
},
},
};
</script>

@ -0,0 +1,51 @@
<template>
<b-container>
<h1 v-if="loading">{{ $t('registration.validation.process') }}</h1>
<div v-else>
<div v-if="failed">
<b-alert show variant="danger">{{ $t('registration.success.validation_failure') }}</b-alert>
</div>
<h1 v-else>{{ $t('registration.validation.finished') }}</h1>
</div>
</b-container>
</template>
<script>
import fetchStory from '@/api/eventFetch';
export default {
name: 'Validate',
data() {
return {
loading: true,
failed: false,
};
},
props: {
token: {
type: String,
required: true,
},
},
created() {
this.validateAction();
},
methods: {
validateAction() {
fetchStory(`/users/validate/${this.token}`, this.$store).then((data) => {
this.loading = false;
localStorage.setItem('token', data.token);
localStorage.setItem('refresh_token', data.refresh_token);
this.$store.commit('LOGIN_USER', data.account);
this.$snotify.success(this.$t('registration.success.login', { username: data.account.username }));
this.$router.push({ name: 'Home' });
}).catch((err) => {
Promise.resolve(err).then(() => {
this.failed = true;
this.loading = false;
});
});
},
},
};
</script>

@ -1,204 +1,65 @@
<template>
<v-container fluid grid-list-sm>
<h3>Create a new event</h3>
<v-form>
<v-stepper v-model="e1">
<v-stepper-header>
<v-stepper-step step="1" :complete="e1 > 1" editable>Basic Informations
<small>Title and description</small>
</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="2" :complete="e1 > 2" editable>Date and place</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="3" :complete="e1 > 3">Extra informations</v-stepper-step>
</v-stepper-header>
<v-stepper-items>
<v-stepper-content step="1">
<v-layout row wrap>
<v-flex xs12>
<v-text-field
label="Title"
v-model="event.title"
:counter="100"
required
></v-text-field>
</v-flex>
<v-flex md6>
<v-container fluid fill-height>
<v-layout align-center justify-center>
<v-flex xs12 sm8 md4>
<v-card class="elevation-12">
<v-toolbar dark color="primary">
<v-toolbar-title>Create a new event</v-toolbar-title>
</v-toolbar>
<v-card-text>
<v-form>
<v-text-field
label="Description"
v-model="event.description"
multiLine
label="Title"
v-model="event.title"
:counter="100"
required
></v-text-field>
</v-flex>
<v-flex md6>
<vue-markdown class="markdown-render"
:watches="['show','html','breaks','linkify','emoji','typographer','toc']"
:source="event.description"
:show="true" :html="false" :breaks="true" :linkify="true"
:emoji="true" :typographer="true" :toc="false"
></vue-markdown>
</v-flex>
<v-flex md12>
<v-select
v-bind:items="categories"
v-model="event.category"
item-text="title"
item-value="@id"
label="Categories"
single-line
bottom
></v-select>
</v-flex>
<v-flex md12>
<!--<v-text-field
v-model="tagsToSend"
label="Tags"
></v-text-field>-->
<v-select
v-model="tagsToSend"
label="Tags"
chips
tags
:items="tagsFetched"
></v-select>
</v-flex>
</v-layout>
<v-btn color="primary" @click.native="e1 = 2">Next</v-btn>
</v-stepper-content>
<v-stepper-content step="2">
Event starts at:
<v-text-field type="datetime-local" v-model="event.begins_on"></v-text-field>
<!--<v-layout row wrap>
<v-flex md6>
<v-dialog
persistent
v-model="modals.beginning.date"
lazy
full-width
>
<v-text-field
slot="activator"
label="Beginning of the event date"
v-model="event.startDate.date"
prepend-icon="event"
readonly
></v-text-field>
<v-date-picker v-model="event.startDate.date" scrollable dateFormat="val => new Date(val).">
<template scope="{ save, cancel }">
<v-card-actions>
<v-btn flat primary @click.native="cancel()">Cancel</v-btn>
<v-btn flat primary @click.native="save()">Save</v-btn>
</v-card-actions>
</template>
</v-date-picker>
</v-dialog>
</v-flex>
<v-flex md6>
<v-dialog
persistent
v-model="modals.beginning.time"
lazy
>
<v-text-field
slot="activator"
label="Beginning of the event time"
v-model="event.startDate.time"
prepend-icon="access_time"
readonly
></v-text-field>
<v-time-picker v-model="event.startDate.time" actions format="24h">
<template scope="{ save, cancel }">
<v-card-actions>
<v-btn flat primary @click.native="cancel()">Cancel</v-btn>
<v-btn flat primary @click.native="save()">Save</v-btn>
</v-card-actions>
</template>
</v-time-picker>
</v-dialog>
</v-flex>
</v-layout>-->
Event ends at:
<v-text-field type="datetime-local" v-model="event.ends_on"></v-text-field>
<!--<v-layout row wrap>
<v-flex md6>
<v-dialog
persistent
v-model="modals.end.date"
lazy
full-width
>
<v-text-field
slot="activator"
label="End of the event date"
v-model="event.endDate.date"
prepend-icon="event"
readonly
></v-text-field>
<v-date-picker v-model="event.endDate.date" scrollable >
<template scope="{ save, cancel }">
<v-card-actions>
<v-btn flat primary @click.native="cancel()">Cancel</v-btn>
<v-btn flat primary @click.native="save()">Save</v-btn>
</v-card-actions>
</template>
</v-date-picker>
</v-dialog>
</v-flex>
<v-flex md6>
<v-dialog
persistent
v-model="modals.end.time"
lazy
>
<v-text-field
slot="activator"
label="End of the event time"
v-model="event.endDate.time"
prepend-icon="access_time"
readonly
></v-text-field>
<v-time-picker v-model="event.endDate.time" format="24h" actions >
<template scope="{ save, cancel }">
<v-card-actions>
<v-btn flat primary @click.native="cancel()">Cancel</v-btn>
<v-btn flat primary @click.native="save()">Save</v-btn>
</v-card-actions>
</template>
</v-time-picker>
</v-dialog>
</v-flex>
</v-layout>-->
<vuetify-google-autocomplete
id="map"
append-icon="search"
classname="form-control"
placeholder="Start typing"
label="Location"
enable-geolocation
types="geocode"
v-on:placechanged="getAddressData"
>
</vuetify-google-autocomplete>
<v-btn color="primary" @click.native="e1 = 3">Next</v-btn>
</v-stepper-content>
<v-stepper-content step="3">
<v-text-field
label="Number of seats"
v-model="event.seats"
></v-text-field>
<v-text-field
label="Price"
prefix="$"
type="float"
v-model="event.price"
></v-text-field>
</v-stepper-content>
</v-stepper-items>
</v-step