Merge branch 'bug/fix-ui' into 'master'
Bug/fix ui See merge request framasoft/mobilizon!237
This commit is contained in:
Thomas Citharel
commit
a20f2612bc
@ -46,8 +46,9 @@ A simple card for an event
|
||||
</div>
|
||||
<span class="organizer-place-wrapper">
|
||||
<span v-if="actorDisplayName && actorDisplayName !== '@'">{{ $t('By {name}', { name: actorDisplayName }) }}</span>
|
||||
<span v-if="actorDisplayName && actorDisplayName !== '@'">-</span>
|
||||
<span v-if="event.physicalAddress && (event.physicalAddress.locality || event.physicalAddress.description)">
|
||||
- {{ event.physicalAddress.locality || event.physicalAddress.description }}
|
||||
{{ event.physicalAddress.locality || event.physicalAddress.description }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
@ -201,6 +202,11 @@ export default class EventCard extends Vue {
|
||||
}
|
||||
span.organizer-place-wrapper {
|
||||
display: flex;
|
||||
padding: 0 0.5rem 0.3rem;
|
||||
|
||||
span {
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
flex: 1;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<b-input icon="magnify" type="search" rounded :placeholder="defaultPlaceHolder" v-model="searchText" @keyup.native.enter="enter" />
|
||||
<b-input custom-class="searchField" icon="magnify" type="search" rounded :placeholder="defaultPlaceHolder" v-model="searchText" @keyup.native.enter="enter" />
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
@ -20,3 +20,10 @@ export default class SearchField extends Vue {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
input.searchField {
|
||||
box-shadow: none;
|
||||
border-color: #b5b5b5;
|
||||
}
|
||||
</style>
|
||||
@ -5,11 +5,21 @@ $primary-invert: findColorInvert($primary);
|
||||
$secondary: #FAB12D;
|
||||
$secondary-invert: findColorInvert($secondary);
|
||||
|
||||
$success: #78cc8a;
|
||||
$success-invert: findColorInvert($success);
|
||||
$info: #36bcd4;
|
||||
$info-invert: findColorInvert($info);
|
||||
$danger: #ff7061;
|
||||
$danger-invert: findColorInvert($danger);
|
||||
|
||||
$colors: map-merge(
|
||||
$colors,
|
||||
(
|
||||
"primary": ($primary, $primary-invert),
|
||||
"secondary": ($secondary, $secondary-invert)
|
||||
"secondary": ($secondary, $secondary-invert),
|
||||
"success": ($success, $success-invert),
|
||||
"info": ($info, $info-invert),
|
||||
"danger": ($danger, $danger-invert),
|
||||
)
|
||||
);
|
||||
|
||||
|
||||
@ -1,70 +1,60 @@
|
||||
<template>
|
||||
<div>
|
||||
<section class="hero">
|
||||
<div class="hero-body">
|
||||
<section class="container">
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-half-desktop">
|
||||
<h1 class="title">
|
||||
{{ $t('Register an account on Mobilizon!') }}
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="columns is-mobile">
|
||||
<div class="column">
|
||||
<form v-if="!validationSent">
|
||||
<b-field
|
||||
:label="$t('Username')"
|
||||
:type="errors.preferred_username ? 'is-danger' : null"
|
||||
:message="errors.preferred_username"
|
||||
>
|
||||
<b-field>
|
||||
<b-input
|
||||
aria-required="true"
|
||||
required
|
||||
expanded
|
||||
v-model="person.preferredUsername"
|
||||
/>
|
||||
<p class="control">
|
||||
<span class="button is-static">@{{ host }}</span>
|
||||
</p>
|
||||
</b-field>
|
||||
</b-field>
|
||||
<form v-if="!validationSent">
|
||||
<b-field
|
||||
:label="$t('Username')"
|
||||
:type="errors.preferred_username ? 'is-danger' : null"
|
||||
:message="errors.preferred_username"
|
||||
>
|
||||
<b-field>
|
||||
<b-input
|
||||
aria-required="true"
|
||||
required
|
||||
expanded
|
||||
v-model="person.preferredUsername"
|
||||
/>
|
||||
<p class="control">
|
||||
<span class="button is-static">@{{ host }}</span>
|
||||
</p>
|
||||
</b-field>
|
||||
</b-field>
|
||||
|
||||
<b-field :label="$t('Displayed name')">
|
||||
<b-input v-model="person.name"/>
|
||||
</b-field>
|
||||
<b-field :label="$t('Displayed name')">
|
||||
<b-input v-model="person.name"/>
|
||||
</b-field>
|
||||
|
||||
<b-field :label="$t('Description')">
|
||||
<b-input type="textarea" v-model="person.summary"/>
|
||||
</b-field>
|
||||
<b-field :label="$t('Description')">
|
||||
<b-input type="textarea" v-model="person.summary"/>
|
||||
</b-field>
|
||||
|
||||
<b-field grouped>
|
||||
<div class="control">
|
||||
<button type="button" class="button is-primary" @click="submit()">
|
||||
{{ $t('Create my profile') }}
|
||||
</button>
|
||||
</div>
|
||||
</b-field>
|
||||
</form>
|
||||
<p class="control has-text-centered">
|
||||
<b-button type="is-primary" size="is-large" @click="submit()">
|
||||
{{ $t('Create my profile') }}
|
||||
</b-button>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<div v-if="validationSent && !userAlreadyActivated">
|
||||
<b-message title="Success" type="is-success">
|
||||
<h2 class="title">
|
||||
{{ $t('Your account is nearly ready, {username}', { username: person.preferredUsername }) }}
|
||||
</h2>
|
||||
<p>
|
||||
{{ $t('A validation email was sent to {email}', { email }) }}
|
||||
</p>
|
||||
<p>
|
||||
{{ $t('Before you can login, you need to click on the link inside it to validate your account') }}
|
||||
</p>
|
||||
</b-message>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="validationSent && !userAlreadyActivated">
|
||||
<b-message title="Success" type="is-success" closable="false">
|
||||
<h2 class="title">
|
||||
{{ $t('Your account is nearly ready, {username}', { username: person.preferredUsername }) }}
|
||||
</h2>
|
||||
<p>
|
||||
{{ $t('A validation email was sent to {email}', { email }) }}
|
||||
</p>
|
||||
<p>
|
||||
{{ $t('Before you can login, you need to click on the link inside it to validate your account') }}
|
||||
</p>
|
||||
</b-message>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@ -88,7 +78,7 @@ export default class Register extends Vue {
|
||||
validationSent: boolean = false;
|
||||
sendingValidation: boolean = false;
|
||||
|
||||
async mounted() {
|
||||
async created() {
|
||||
// Make sure no one goes to this page if we don't want to
|
||||
if (!this.email) {
|
||||
await this.$router.replace({ name: RouteName.PAGE_NOT_FOUND });
|
||||
@ -134,7 +124,7 @@ export default class Register extends Vue {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.avatar-enter-active {
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
@ -147,4 +137,8 @@ export default class Register extends Vue {
|
||||
.avatar-leave {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container .columns {
|
||||
margin: 1rem auto 3rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -58,6 +58,10 @@ export default class Explore extends Vue {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
h1.title {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
h3.title {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<div class="container">
|
||||
<h1 class="title">{{ $t('Gather ⋅ Organize ⋅ Mobilize') }}</h1>
|
||||
<p class="subtitle">{{ $t('Join {instance}, a Mobilizon instance', { instance: config.name }) }}
|
||||
<p>{{ config.description }}</p>
|
||||
<p class="instance-description">{{ config.description }}</p>
|
||||
<!-- We don't invite to find other instances yet -->
|
||||
<!-- <p v-if="!config.registrationsOpen">
|
||||
{{ $t("This instance isn't opened to registrations, but you can register on other instances.") }}
|
||||
@ -325,5 +325,9 @@ export default class Home extends Vue {
|
||||
.column figure.image img {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.instance-description {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,18 +1,15 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<section class="hero">
|
||||
<h1 class="title">
|
||||
{{ $t('Welcome back!') }}
|
||||
</h1>
|
||||
</section>
|
||||
|
||||
<b-message v-if="errorCode === LoginErrorCode.NEED_TO_LOGIN" title="Info" type="is-info">
|
||||
{{ $t('You need to login.') }}
|
||||
</b-message>
|
||||
|
||||
<section v-if="!currentUser.isLoggedIn">
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-half">
|
||||
<div class="column is-half-desktop">
|
||||
<h1 class="title">
|
||||
{{ $t('Welcome back!') }}
|
||||
</h1>
|
||||
<b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
|
||||
<form @submit="loginAction">
|
||||
<b-field :label="$t('Email')">
|
||||
@ -29,27 +26,27 @@
|
||||
/>
|
||||
</b-field>
|
||||
|
||||
<div class="control has-text-centered">
|
||||
<p class="control has-text-centered">
|
||||
<button class="button is-primary is-large">
|
||||
{{ $t('Login') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
</p>
|
||||
<p class="control">
|
||||
<router-link
|
||||
class="button is-text"
|
||||
:to="{ name: RouteName.SEND_PASSWORD_RESET, params: { email: credentials.email }}"
|
||||
>
|
||||
{{ $t('Forgot your password ?') }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="control" v-if="config && config.registrationsOpen">
|
||||
</p>
|
||||
<p class="control" v-if="config && config.registrationsOpen">
|
||||
<router-link
|
||||
class="button is-text"
|
||||
:to="{ name: RouteName.REGISTER, params: { default_email: credentials.email, default_password: credentials.password }}"
|
||||
>
|
||||
{{ $t('Register') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -166,3 +163,9 @@ export default class Login extends Vue {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container .columns {
|
||||
margin: 1rem auto 3rem;
|
||||
}
|
||||
</style>
|
||||
@ -11,18 +11,18 @@
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<h3 class="title">{{ $t('Features') }}</h3>
|
||||
<h2 class="title">{{ $t('Features') }}</h2>
|
||||
<ul>
|
||||
<li>{{ $t('Create your communities and your events') }}</li>
|
||||
<li>{{ $t('Other stuff…') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<i18n path="Learn more on" tag="p">
|
||||
<a target="_blank" href="https://joinmobilizon.org">joinmobilizon.org</a>
|
||||
</i18n>
|
||||
<router-link :to="{ name: RouteName.ABOUT }">
|
||||
{{ $t('Learn more') }}
|
||||
</router-link>
|
||||
<hr>
|
||||
<div class="content">
|
||||
<h3 class="title">{{ $t('About this instance') }}</h3>
|
||||
<h2 class="title">{{ $t('About this instance') }}</h2>
|
||||
<p>
|
||||
{{ $t("Your local administrator resumed it's policy:") }}
|
||||
</p>
|
||||
@ -67,30 +67,28 @@
|
||||
/>
|
||||
</b-field>
|
||||
|
||||
<b-field grouped>
|
||||
<div class="control">
|
||||
<button class="button is-primary">
|
||||
{{ $t('Register') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<router-link
|
||||
class="button is-text"
|
||||
:to="{ name: RouteName.RESEND_CONFIRMATION, params: { email: credentials.email }}"
|
||||
>
|
||||
{{ $t("Didn't receive the instructions ?") }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="control">
|
||||
<router-link
|
||||
class="button is-text"
|
||||
:to="{ name: RouteName.LOGIN, params: { email: credentials.email, password: credentials.password }}"
|
||||
:disabled="sendingValidation"
|
||||
>
|
||||
{{ $t('Login') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</b-field>
|
||||
<p class="control has-text-centered">
|
||||
<button class="button is-primary is-large">
|
||||
{{ $t('Register') }}
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<router-link
|
||||
class="button is-text"
|
||||
:to="{ name: RouteName.RESEND_CONFIRMATION, params: { email: credentials.email }}"
|
||||
>
|
||||
{{ $t("Didn't receive the instructions ?") }}
|
||||
</router-link>
|
||||
</p>
|
||||
<p class="control">
|
||||
<router-link
|
||||
class="button is-text"
|
||||
:to="{ name: RouteName.LOGIN, params: { email: credentials.email, password: credentials.password }}"
|
||||
:disabled="sendingValidation"
|
||||
>
|
||||
{{ $t('Login') }}
|
||||
</router-link>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<div v-if="errors.length > 0">
|
||||
@ -167,7 +165,11 @@ export default class Register extends Vue {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h3.title {
|
||||
.container .columns {
|
||||
margin: 1rem auto 3rem;
|
||||
}
|
||||
|
||||
h2.title {
|
||||
background: $secondary;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@ -1,24 +1,28 @@
|
||||
<template>
|
||||
<section class="container">
|
||||
<div class="column">
|
||||
<h1 class="title">
|
||||
{{ $t('Resend confirmation email') }}
|
||||
</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">
|
||||
{{ $t('Send confirmation email again') }}
|
||||
</button>
|
||||
</form>
|
||||
<div v-else>
|
||||
<b-message type="is-success" :closable="false" title="Success">
|
||||
{{ $t('If an account with this email exists, we just sent another confirmation email to {email}', {email: credentials.email}) }}
|
||||
</b-message>
|
||||
<b-message type="is-info">
|
||||
{{ $t("Please check your spam folder if you didn't receive the email.") }}
|
||||
</b-message>
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-half-desktop">
|
||||
<h1 class="title">
|
||||
{{ $t('Resend confirmation email') }}
|
||||
</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>
|
||||
<p class="control has-text-centered">
|
||||
<b-button type="is-primary">
|
||||
{{ $t('Send me the confirmation email once again') }}
|
||||
</b-button>
|
||||
</p>
|
||||
</form>
|
||||
<div v-else>
|
||||
<b-message type="is-success" :closable="false" title="Success">
|
||||
{{ $t('If an account with this email exists, we just sent another confirmation email to {email}', {email: credentials.email}) }}
|
||||
</b-message>
|
||||
<b-message type="is-info">
|
||||
{{ $t("Please check your spam folder if you didn't receive the email.") }}
|
||||
</b-message>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -73,3 +77,9 @@ export default class ResendConfirmation extends Vue {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container .columns {
|
||||
margin: 1rem auto 3rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,25 +1,29 @@
|
||||
<template>
|
||||
<section class="container">
|
||||
<div class="column">
|
||||
<h1 class="title">
|
||||
{{ $t('Password reset') }}
|
||||
</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">
|
||||
{{ $t('Send email to reset my password') }}
|
||||
</button>
|
||||
</form>
|
||||
<div v-else>
|
||||
<b-message type="is-success" :closable="false" title="Success">
|
||||
{{ $t('We just sent an email to {email}', {email: credentials.email}) }}
|
||||
</b-message>
|
||||
<b-message type="is-info">
|
||||
{{ $t("Please check your spam folder if you didn't receive the email.") }}
|
||||
</b-message>
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-half-desktop">
|
||||
<h1 class="title">
|
||||
{{ $t('Password reset') }}
|
||||
</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>
|
||||
<p class="control has-text-centered">
|
||||
<b-button type="is-primary">
|
||||
{{ $t('Send me an email to reset my password') }}
|
||||
</b-button>
|
||||
</p>
|
||||
</form>
|
||||
<div v-else>
|
||||
<b-message type="is-success" :closable="false" title="Success">
|
||||
{{ $t('We just sent an email to {email}', {email: credentials.email}) }}
|
||||
</b-message>
|
||||
<b-message type="is-info">
|
||||
{{ $t("Please check your spam folder if you didn't receive the email.") }}
|
||||
</b-message>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -85,3 +89,9 @@ export default class SendPasswordReset extends Vue {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container .columns {
|
||||
margin: 1rem auto 3rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user