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
92
js/src/views/Account/Identities.vue
Normal file
92
js/src/views/Account/Identities.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<section>
|
||||
<b-loading :active.sync="$apollo.loading"></b-loading>
|
||||
<h1 class="title">
|
||||
<translate>Identities</translate>
|
||||
</h1>
|
||||
<a class="button is-primary" @click="showCreateProfileForm = true">
|
||||
<translate>Add a new profile</translate>
|
||||
</a>
|
||||
<div class="columns" v-if="showCreateProfileForm">
|
||||
<form @submit="createProfile" class="column is-half">
|
||||
<b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
|
||||
<b-field label="Username">
|
||||
<b-input aria-required="true" required v-model="newPerson.preferredUsername"/>
|
||||
</b-field>
|
||||
<button class="button is-primary">
|
||||
<translate>Register</translate>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="identity in identities" :key="identity.id">
|
||||
<hr>
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-48x48">
|
||||
<img :src="identity.avatarUrl">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
{{ identity.name }}
|
||||
<span
|
||||
v-if="identity.preferredUsername === loggedPerson.preferredUsername"
|
||||
class="tag is-primary"
|
||||
>
|
||||
<translate>Current</translate>
|
||||
</span>
|
||||
</p>
|
||||
<p class="subtitle is-6">@{{ identity.preferredUsername }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
import { IDENTITIES, LOGGED_PERSON, CREATE_PERSON } from "../../graphql/actor";
|
||||
import { IPerson } from "@/types/actor.model";
|
||||
|
||||
@Component({
|
||||
apollo: {
|
||||
identities: {
|
||||
query: IDENTITIES
|
||||
},
|
||||
loggedPerson: {
|
||||
query: LOGGED_PERSON
|
||||
}
|
||||
}
|
||||
})
|
||||
export default class Identities extends Vue {
|
||||
identities: IPerson[] = [];
|
||||
loggedPerson!: IPerson;
|
||||
newPerson!: IPerson;
|
||||
showCreateProfileForm: boolean = false;
|
||||
errors: string[] = [];
|
||||
|
||||
async createProfile(e) {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
await this.$apollo.mutate({
|
||||
mutation: CREATE_PERSON,
|
||||
variables: this.newPerson
|
||||
});
|
||||
this.showCreateProfileForm = false;
|
||||
this.$apollo.queries.identities.refresh();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
err.graphQLErrors.forEach(({ message }) => {
|
||||
this.errors.push(message);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
host() {
|
||||
return `@${window.location.host}`;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
111
js/src/views/Account/Profile.vue
Normal file
111
js/src/views/Account/Profile.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<section>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="card" v-if="person">
|
||||
<div class="card-image" v-if="person.bannerUrl">
|
||||
<figure class="image">
|
||||
<img :src="person.bannerUrl">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-48x48">
|
||||
<img :src="person.avatarUrl">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title">{{ person.name }}</p>
|
||||
<p class="subtitle">@{{ person.preferredUsername }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p v-html="person.summary"></p>
|
||||
</div>
|
||||
</div>
|
||||
<section v-if="person.organizedEvents.length > 0">
|
||||
<h2 class="subtitle">
|
||||
<translate>Organized</translate>
|
||||
</h2>
|
||||
<div class="columns">
|
||||
<EventCard
|
||||
v-for="event in person.organizedEvents"
|
||||
:event="event"
|
||||
:hideDetails="true"
|
||||
:key="event.uuid"
|
||||
class="column is-one-third"
|
||||
/>
|
||||
</div>
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a
|
||||
class="button"
|
||||
@click="logoutUser()"
|
||||
v-if="loggedPerson && loggedPerson.id === person.id"
|
||||
>
|
||||
<translate>User logout</translate>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a
|
||||
class="button"
|
||||
@click="deleteProfile()"
|
||||
v-if="loggedPerson && loggedPerson.id === person.id"
|
||||
>
|
||||
<translate>Delete</translate>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { FETCH_PERSON, LOGGED_PERSON } from "@/graphql/actor";
|
||||
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
|
||||
import EventCard from "@/components/Event/EventCard.vue";
|
||||
|
||||
@Component({
|
||||
apollo: {
|
||||
person: {
|
||||
query: FETCH_PERSON,
|
||||
variables() {
|
||||
return {
|
||||
name: this.$route.params.name
|
||||
};
|
||||
}
|
||||
},
|
||||
loggedPerson: {
|
||||
query: LOGGED_PERSON
|
||||
}
|
||||
},
|
||||
components: {
|
||||
EventCard
|
||||
}
|
||||
})
|
||||
export default class Profile extends Vue {
|
||||
@Prop({ type: String, required: true }) name!: string;
|
||||
|
||||
person = null;
|
||||
|
||||
// call again the method if the route changes
|
||||
@Watch("$route")
|
||||
onRouteChange() {
|
||||
// this.fetchData()
|
||||
}
|
||||
|
||||
logoutUser() {
|
||||
// TODO : implement logout
|
||||
this.$router.push({ name: "Home" });
|
||||
}
|
||||
|
||||
nl2br(text) {
|
||||
return text.replace(/(?:\r\n|\r|\n)/g, "<br>");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
182
js/src/views/Account/Register.vue
Normal file
182
js/src/views/Account/Register.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div>
|
||||
<section class="hero">
|
||||
<div class="hero-body">
|
||||
<h1 class="title">
|
||||
<translate>Register an account on Mobilizon!</translate>
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="columns is-mobile">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<h2 class="subtitle" v-translate>Features</h2>
|
||||
<ul>
|
||||
<li v-translate>Create your communities and your events</li>
|
||||
<li v-translate>Other stuff…</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p v-translate>
|
||||
Learn more on
|
||||
<a target="_blank" href="https://joinmobilizon.org">joinmobilizon.org</a>
|
||||
</p>
|
||||
<hr>
|
||||
<div class="content">
|
||||
<h2 class="subtitle" v-translate>About this instance</h2>
|
||||
<p>
|
||||
<translate>Your local administrator resumed it's policy:</translate>
|
||||
</p>
|
||||
<ul>
|
||||
<li v-translate>Please be nice to each other</li>
|
||||
<li v-translate>meditate a bit</li>
|
||||
</ul>
|
||||
<p>
|
||||
<translate>Please read the full rules</translate>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<form v-if="!validationSent">
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-narrow">
|
||||
<figure class="image is-64x64">
|
||||
<transition name="avatar">
|
||||
<v-gravatar v-bind="{email: credentials.email}" default-img="mp"></v-gravatar>
|
||||
</transition>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b-field label="Email">
|
||||
<b-input
|
||||
aria-required="true"
|
||||
required
|
||||
type="email"
|
||||
v-model="credentials.email"
|
||||
@blur="showGravatar = true"
|
||||
@focus="showGravatar = false"
|
||||
/>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Username">
|
||||
<b-input aria-required="true" required v-model="credentials.username"/>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Password">
|
||||
<b-input
|
||||
aria-required="true"
|
||||
required
|
||||
type="password"
|
||||
password-reveal
|
||||
minlength="6"
|
||||
v-model="credentials.password"
|
||||
/>
|
||||
</b-field>
|
||||
|
||||
<b-field grouped>
|
||||
<div class="control">
|
||||
<button type="button" class="button is-primary" @click="submit()">
|
||||
<translate>Register</translate>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<router-link
|
||||
class="button is-text"
|
||||
:to="{ name: 'ResendConfirmation', params: { email: credentials.email }}"
|
||||
>
|
||||
<translate>Didn't receive the instructions ?</translate>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="control">
|
||||
<router-link
|
||||
class="button is-text"
|
||||
:to="{ name: 'Login', params: { email: credentials.email, password: credentials.password }}"
|
||||
:disabled="validationSent"
|
||||
>
|
||||
<translate>Login</translate>
|
||||
</router-link>
|
||||
</div>
|
||||
</b-field>
|
||||
</form>
|
||||
|
||||
<div v-if="validationSent">
|
||||
<b-message title="Success" type="is-success">
|
||||
<h2>
|
||||
<translate>A validation email was sent to %{email}</translate>
|
||||
</h2>
|
||||
<p>
|
||||
<translate>Before you can login, you need to click on the link inside it to validate your account</translate>
|
||||
</p>
|
||||
</b-message>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Gravatar from "vue-gravatar";
|
||||
import { CREATE_USER } from "@/graphql/user";
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import { MOBILIZON_INSTANCE_HOST } from "@/api/_entrypoint";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
"v-gravatar": Gravatar
|
||||
}
|
||||
})
|
||||
export default class Register extends Vue {
|
||||
@Prop({ type: String, required: false, default: "" }) email!: string;
|
||||
@Prop({ type: String, required: false, default: "" }) password!: string;
|
||||
|
||||
credentials = {
|
||||
username: "",
|
||||
email: this.email,
|
||||
password: this.password
|
||||
} as { username: string; email: string; password: string };
|
||||
errors: string[] = [];
|
||||
validationSent: boolean = false;
|
||||
showGravatar: boolean = false;
|
||||
|
||||
host() {
|
||||
return MOBILIZON_INSTANCE_HOST;
|
||||
}
|
||||
|
||||
validEmail() {
|
||||
return this.credentials.email.includes("@") === true
|
||||
? "v-gravatar"
|
||||
: "avatar";
|
||||
}
|
||||
|
||||
async submit() {
|
||||
try {
|
||||
this.validationSent = true;
|
||||
await this.$apollo.mutate({
|
||||
mutation: CREATE_USER,
|
||||
variables: this.credentials
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.avatar-enter-active {
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
|
||||
.avatar-enter,
|
||||
.avatar-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.avatar-leave {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user