Replace Vuetify with Bulma
Signed-off-by: Thomas Citharel <tcit@tcit.fr> Remove vuetify and add Bulma Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
137
js/src/views/User/Login.vue
Normal file
137
js/src/views/User/Login.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div>
|
||||
<section class="hero">
|
||||
<h1 class="title">
|
||||
<translate>Welcome back!</translate>
|
||||
</h1>
|
||||
</section>
|
||||
<section>
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-half card">
|
||||
<b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
|
||||
<form @submit="loginAction">
|
||||
<b-field label="Email">
|
||||
<b-input aria-required="true" required type="email" v-model="credentials.email"/>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Password">
|
||||
<b-input
|
||||
aria-required="true"
|
||||
required
|
||||
type="password"
|
||||
password-reveal
|
||||
v-model="credentials.password"
|
||||
/>
|
||||
</b-field>
|
||||
|
||||
<div class="control has-text-centered">
|
||||
<button class="button is-primary is-large">
|
||||
<translate>Login</translate>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<router-link
|
||||
class="button is-text"
|
||||
:to="{ name: 'SendPasswordReset', params: { email: credentials.email }}"
|
||||
>
|
||||
<translate>Forgot your password ?</translate>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="control">
|
||||
<router-link
|
||||
class="button is-text"
|
||||
:to="{ name: 'Register', params: { default_email: credentials.email, default_password: credentials.password }}"
|
||||
>
|
||||
<translate>Register</translate>
|
||||
</router-link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Gravatar from "vue-gravatar";
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import { LOGIN } from "@/graphql/auth";
|
||||
import { validateEmailField, validateRequiredField } from "@/utils/validators";
|
||||
import { saveUserData } from "@/utils/auth";
|
||||
import { ILogin } from "@/types/login.model";
|
||||
import { UPDATE_CURRENT_USER_CLIENT } from "@/graphql/user";
|
||||
import { onLogin } from "@/vue-apollo";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
"v-gravatar": Gravatar
|
||||
}
|
||||
})
|
||||
export default class Login extends Vue {
|
||||
@Prop({ type: String, required: false, default: "" }) email!: string;
|
||||
@Prop({ type: String, required: false, default: "" }) password!: string;
|
||||
|
||||
credentials = {
|
||||
email: "",
|
||||
password: ""
|
||||
};
|
||||
validationSent = false;
|
||||
errors: string[] = [];
|
||||
rules = {
|
||||
required: validateRequiredField,
|
||||
email: validateEmailField
|
||||
};
|
||||
user: any;
|
||||
|
||||
beforeCreate() {
|
||||
if (this.user) {
|
||||
this.$router.push("/");
|
||||
}
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.credentials.email = this.email;
|
||||
this.credentials.password = this.password;
|
||||
}
|
||||
|
||||
async loginAction(e: Event) {
|
||||
e.preventDefault();
|
||||
this.errors.splice(0);
|
||||
|
||||
try {
|
||||
const result = await this.$apollo.mutate<{ login: ILogin }>({
|
||||
mutation: LOGIN,
|
||||
variables: {
|
||||
email: this.credentials.email,
|
||||
password: this.credentials.password
|
||||
}
|
||||
});
|
||||
|
||||
saveUserData(result.data.login);
|
||||
|
||||
await this.$apollo.mutate({
|
||||
mutation: UPDATE_CURRENT_USER_CLIENT,
|
||||
variables: {
|
||||
id: result.data.login.user.id,
|
||||
email: this.credentials.email
|
||||
}
|
||||
});
|
||||
|
||||
onLogin(this.$apollo);
|
||||
|
||||
this.$router.push({ name: "Home" });
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
err.graphQLErrors.forEach(({ message }) => {
|
||||
this.errors.push(message);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
validEmail() {
|
||||
return this.rules.email(this.credentials.email) === true
|
||||
? "v-gravatar"
|
||||
: "avatar";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
91
js/src/views/User/PasswordReset.vue
Normal file
91
js/src/views/User/PasswordReset.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<section class="columns is-mobile is-centered">
|
||||
<div class="card column is-half-desktop">
|
||||
<h1>
|
||||
<translate>Password reset</translate>
|
||||
</h1>
|
||||
<b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
|
||||
<form @submit="resetAction">
|
||||
<b-field label="Password">
|
||||
<b-input
|
||||
aria-required="true"
|
||||
required
|
||||
type="password"
|
||||
password-reveal
|
||||
minlength="6"
|
||||
v-model="credentials.password"
|
||||
/>
|
||||
</b-field>
|
||||
<b-field label="Password (confirmation)">
|
||||
<b-input
|
||||
aria-required="true"
|
||||
required
|
||||
type="password"
|
||||
password-reveal
|
||||
minlength="6"
|
||||
v-model="credentials.password_confirmation"
|
||||
/>
|
||||
</b-field>
|
||||
<button class="button is-primary">
|
||||
<translate>Reset my password</translate>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import { validateRequiredField } from "@/utils/validators";
|
||||
import { RESET_PASSWORD } from "@/graphql/auth";
|
||||
import { saveUserData } from "@/utils/auth";
|
||||
import { ILogin } from "@/types/login.model";
|
||||
|
||||
@Component
|
||||
export default class PasswordReset extends Vue {
|
||||
@Prop({ type: String, required: true }) token!: string;
|
||||
|
||||
credentials = {
|
||||
password: "",
|
||||
password_confirmation: ""
|
||||
} as { password: string; password_confirmation: string };
|
||||
errors: string[] = [];
|
||||
rules = {
|
||||
password_length: value =>
|
||||
value.length > 6 || "Password must be at least 6 characters long",
|
||||
required: validateRequiredField,
|
||||
password_equal: value =>
|
||||
value === this.credentials.password || "Passwords must be the same"
|
||||
};
|
||||
|
||||
get samePasswords() {
|
||||
return (
|
||||
this.rules.password_length(this.credentials.password) === true &&
|
||||
this.credentials.password === this.credentials.password_confirmation
|
||||
);
|
||||
}
|
||||
|
||||
async resetAction(e) {
|
||||
e.preventDefault();
|
||||
this.errors.splice(0);
|
||||
|
||||
try {
|
||||
const result = await this.$apollo.mutate<{ resetPassword: ILogin }>({
|
||||
mutation: RESET_PASSWORD,
|
||||
variables: {
|
||||
password: this.credentials.password,
|
||||
token: this.token
|
||||
}
|
||||
});
|
||||
|
||||
saveUserData(result.data.resetPassword);
|
||||
this.$router.push({ name: "Home" });
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
err.graphQLErrors.forEach(({ message }) => {
|
||||
this.errors.push(message);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
77
js/src/views/User/ResendConfirmation.vue
Normal file
77
js/src/views/User/ResendConfirmation.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<section class="columns">
|
||||
<div class="column card">
|
||||
<h1 class="title">
|
||||
<translate>Resend confirmation email</translate>
|
||||
</h1>
|
||||
<form v-if="!validationSent" @submit="resendConfirmationAction">
|
||||
<b-field label="Email">
|
||||
<b-input aria-required="true" required type="email" v-model="credentials.email"/>
|
||||
</b-field>
|
||||
<button class="button is-primary">
|
||||
<translate>Send confirmation email again</translate>
|
||||
</button>
|
||||
</form>
|
||||
<div v-else>
|
||||
<b-message type="is-success" :closable="false" title="Success">
|
||||
<translate
|
||||
:translate-params="{email: credentials.email}"
|
||||
>If an account with this email exists, we just sent another confirmation email to %{email}</translate>
|
||||
</b-message>
|
||||
<b-message type="is-info">
|
||||
<translate>Please check you spam folder if you didn't receive the email.</translate>
|
||||
</b-message>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import { validateEmailField, validateRequiredField } from "@/utils/validators";
|
||||
import { RESEND_CONFIRMATION_EMAIL } from "@/graphql/auth";
|
||||
|
||||
@Component
|
||||
export default class ResendConfirmation extends Vue {
|
||||
@Prop({ type: String, required: false, default: "" }) email!: string;
|
||||
|
||||
credentials = {
|
||||
email: ""
|
||||
};
|
||||
validationSent = false;
|
||||
error = false;
|
||||
state = {
|
||||
email: {
|
||||
status: null,
|
||||
msg: ""
|
||||
}
|
||||
};
|
||||
rules = {
|
||||
required: validateRequiredField,
|
||||
email: validateEmailField
|
||||
};
|
||||
|
||||
mounted() {
|
||||
this.credentials.email = this.email;
|
||||
}
|
||||
|
||||
async resendConfirmationAction(e) {
|
||||
e.preventDefault();
|
||||
this.error = false;
|
||||
|
||||
try {
|
||||
await this.$apollo.mutate({
|
||||
mutation: RESEND_CONFIRMATION_EMAIL,
|
||||
variables: {
|
||||
email: this.credentials.email
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
this.error = true;
|
||||
} finally {
|
||||
this.validationSent = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
89
js/src/views/User/SendPasswordReset.vue
Normal file
89
js/src/views/User/SendPasswordReset.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<section class="columns">
|
||||
<div class="card column">
|
||||
<h1 class="title">
|
||||
<translate>Password reset</translate>
|
||||
</h1>
|
||||
<b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
|
||||
<form @submit="sendResetPasswordTokenAction" v-if="!validationSent">
|
||||
<b-field label="Email">
|
||||
<b-input aria-required="true" required type="email" v-model="credentials.email"/>
|
||||
</b-field>
|
||||
<button class="button is-primary">
|
||||
<translate>Send email to reset my password</translate>
|
||||
</button>
|
||||
</form>
|
||||
<div v-else>
|
||||
<b-message type="is-success" :closable="false" title="Success">
|
||||
<translate
|
||||
:translate-params="{email: credentials.email}"
|
||||
>We just sent an email to %{email}</translate>
|
||||
</b-message>
|
||||
<b-message type="is-info">
|
||||
<translate>Please check you spam folder if you didn't receive the email.</translate>
|
||||
</b-message>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import { validateEmailField, validateRequiredField } from "@/utils/validators";
|
||||
import { SEND_RESET_PASSWORD } from "@/graphql/auth";
|
||||
|
||||
@Component
|
||||
export default class SendPasswordReset extends Vue {
|
||||
@Prop({ type: String, required: false, default: "" }) email!: string;
|
||||
|
||||
credentials = {
|
||||
email: ""
|
||||
} as { email: string };
|
||||
validationSent: boolean = false;
|
||||
errors: string[] = [];
|
||||
state = {
|
||||
email: {
|
||||
status: null,
|
||||
msg: ""
|
||||
} as { status: boolean | null; msg: string }
|
||||
};
|
||||
|
||||
rules = {
|
||||
required: validateRequiredField,
|
||||
email: validateEmailField
|
||||
};
|
||||
|
||||
mounted() {
|
||||
this.credentials.email = this.email;
|
||||
}
|
||||
|
||||
async sendResetPasswordTokenAction(e) {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
await this.$apollo.mutate({
|
||||
mutation: SEND_RESET_PASSWORD,
|
||||
variables: {
|
||||
email: this.credentials.email
|
||||
}
|
||||
});
|
||||
|
||||
this.validationSent = true;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
err.graphQLErrors.forEach(({ message }) => {
|
||||
this.errors.push(message);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
resetState() {
|
||||
this.state = {
|
||||
email: {
|
||||
status: null,
|
||||
msg: ""
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
59
js/src/views/User/Validate.vue
Normal file
59
js/src/views/User/Validate.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<section>
|
||||
<h1 class="title" v-if="loading">
|
||||
<translate>Your account is being validated</translate>
|
||||
</h1>
|
||||
<div v-else>
|
||||
<div v-if="failed">
|
||||
<b-message title="Error" type="is-danger">
|
||||
<translate>Error while validating account</translate>
|
||||
</b-message>
|
||||
</div>
|
||||
<h1 class="title" v-else>
|
||||
<translate>Your account has been validated</translate>
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { VALIDATE_USER } from "@/graphql/user";
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import { AUTH_TOKEN, AUTH_USER_ID } from "@/constants";
|
||||
|
||||
@Component
|
||||
export default class Validate extends Vue {
|
||||
@Prop({ type: String, required: true }) token!: string;
|
||||
|
||||
loading = true;
|
||||
failed = false;
|
||||
|
||||
created() {
|
||||
this.validateAction();
|
||||
}
|
||||
|
||||
async validateAction() {
|
||||
try {
|
||||
const data = await this.$apollo.mutate({
|
||||
mutation: VALIDATE_USER,
|
||||
variables: {
|
||||
token: this.token
|
||||
}
|
||||
});
|
||||
|
||||
this.saveUserData(data.data);
|
||||
this.$router.push({ name: "Home" });
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
this.failed = true;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
saveUserData({ validateUser: login }) {
|
||||
localStorage.setItem(AUTH_USER_ID, login.user.id);
|
||||
localStorage.setItem(AUTH_TOKEN, login.token);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user