pug to html
This commit is contained in:
Matteo Pagliazzi
@@ -1,67 +1,96 @@
|
||||
<template lang="pug">
|
||||
.row.standard-page
|
||||
.col-6
|
||||
h2 {{ $t('API') }}
|
||||
p {{ $t('APIText') }}
|
||||
|
||||
.section
|
||||
h6 {{ $t('userId') }}
|
||||
pre.prettyprint {{user.id}}
|
||||
h6 {{ $t('APIToken') }}
|
||||
.d-flex.align-items-center.mb-3
|
||||
button.btn.btn-secondary(
|
||||
@click="showApiToken = !showApiToken"
|
||||
) {{ $t(`${showApiToken ? 'hide' : 'show'}APIToken`) }}
|
||||
pre.prettyprint.ml-4.mb-0(v-if="showApiToken") {{apiToken}}
|
||||
p(v-html='$t("APITokenWarning", { hrefTechAssistanceEmail })')
|
||||
|
||||
.section
|
||||
h3 {{ $t('thirdPartyApps') }}
|
||||
ul
|
||||
li
|
||||
a(target='_blank' href='https://www.beeminder.com/habitica') {{ $t('beeminder') }}
|
||||
br
|
||||
| {{ $t('beeminderDesc') }}
|
||||
li
|
||||
a(target='_blank' href='https://chrome.google.com/webstore/detail/habitrpg-chat-client/hidkdfgonpoaiannijofifhjidbnilbb') {{ $t('chromeChatExtension') }}
|
||||
br
|
||||
| {{ $t('chromeChatExtensionDesc') }}
|
||||
li
|
||||
a(target='_blank' :href='`https://oldgods.net/habitica/habitrpg_user_data_display.html?uuid=` + user._id') {{ $t('dataTool') }}
|
||||
br
|
||||
| {{ $t('dataToolDesc') }}
|
||||
li(v-html="$t('otherExtensions')")
|
||||
br
|
||||
| {{ $t('otherDesc') }}
|
||||
|
||||
hr
|
||||
|
||||
.col-6
|
||||
h2 {{ $t('webhooks') }}
|
||||
p(v-html="$t('webhooksInfo')")
|
||||
table.table.table-striped
|
||||
thead(v-if='user.webhooks.length')
|
||||
tr
|
||||
th {{ $t('enabled') }}
|
||||
th {{ $t('webhookURL') }}
|
||||
th
|
||||
tbody
|
||||
tr(v-for="(webhook, index) in user.webhooks")
|
||||
td
|
||||
input(type='checkbox', v-model='webhook.enabled', @change='saveWebhook(webhook, index)')
|
||||
td
|
||||
input.form-control(type='url', v-model='webhook.url')
|
||||
td
|
||||
a.btn.btn-warning.checklist-icons(@click='deleteWebhook(webhook, index)')
|
||||
span.glyphicon.glyphicon-trash(:tooltip="$t('delete')") Delete
|
||||
a.btn.btn-success.checklist-icons(@click='saveWebhook(webhook, index)') Update
|
||||
tr
|
||||
td(colspan=2)
|
||||
.form-horizontal
|
||||
.form-group.col-sm-10
|
||||
input.form-control(type='url', v-model='newWebhook.url', :placeholder="$t('webhookURL')")
|
||||
.col-sm-2
|
||||
button.btn.btn-sm.btn-primary(type='submit', @click='addWebhook(newWebhook.url)') {{ $t('add') }}
|
||||
<template>
|
||||
<div class="row standard-page">
|
||||
<div class="col-6">
|
||||
<h2>{{ $t('API') }}</h2><p>{{ $t('APIText') }}</p><div class="section">
|
||||
<h6>{{ $t('userId') }}</h6><pre class="prettyprint">{{ user.id }}</pre><h6>{{ $t('APIToken') }}</h6><div class="d-flex align-items-center mb-3">
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
@click="showApiToken = !showApiToken"
|
||||
>
|
||||
{{ $t(`${showApiToken ? 'hide' : 'show'}APIToken`) }}
|
||||
</button><pre
|
||||
v-if="showApiToken"
|
||||
class="prettyprint ml-4 mb-0"
|
||||
>{{ apiToken }}</pre>
|
||||
</div><p v-html="$t('APITokenWarning', { hrefTechAssistanceEmail })"></p>
|
||||
</div><div class="section">
|
||||
<h3>{{ $t('thirdPartyApps') }}</h3><ul>
|
||||
<li>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://www.beeminder.com/habitica"
|
||||
>{{ $t('beeminder') }}</a><br>{{ $t('beeminderDesc') }}
|
||||
</li><li>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://chrome.google.com/webstore/detail/habitrpg-chat-client/hidkdfgonpoaiannijofifhjidbnilbb"
|
||||
>{{ $t('chromeChatExtension') }}</a><br>{{ $t('chromeChatExtensionDesc') }}
|
||||
</li><li>
|
||||
<a
|
||||
target="_blank"
|
||||
:href="`https://oldgods.net/habitica/habitrpg_user_data_display.html?uuid=` + user._id"
|
||||
>{{ $t('dataTool') }}</a><br>{{ $t('dataToolDesc') }}
|
||||
</li><li v-html="$t('otherExtensions')">
|
||||
<br>{{ $t('otherDesc') }}
|
||||
</li>
|
||||
</ul><hr>
|
||||
</div>
|
||||
</div><div class="col-6">
|
||||
<h2>{{ $t('webhooks') }}</h2><p v-html="$t('webhooksInfo')"></p><table class="table table-striped">
|
||||
<thead v-if="user.webhooks.length">
|
||||
<tr><th>{{ $t('enabled') }}</th><th>{{ $t('webhookURL') }}</th><th></th></tr>
|
||||
</thead><tbody>
|
||||
<tr v-for="(webhook, index) in user.webhooks">
|
||||
<td>
|
||||
<input
|
||||
v-model="webhook.enabled"
|
||||
type="checkbox"
|
||||
@change="saveWebhook(webhook, index)"
|
||||
>
|
||||
</td><td>
|
||||
<input
|
||||
v-model="webhook.url"
|
||||
class="form-control"
|
||||
type="url"
|
||||
>
|
||||
</td><td>
|
||||
<a
|
||||
class="btn btn-warning checklist-icons"
|
||||
@click="deleteWebhook(webhook, index)"
|
||||
><span
|
||||
class="glyphicon glyphicon-trash"
|
||||
:tooltip="$t('delete')"
|
||||
>Delete</span></a><a
|
||||
class="btn btn-success checklist-icons"
|
||||
@click="saveWebhook(webhook, index)"
|
||||
>Update</a>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td colspan="2">
|
||||
<div class="form-horizontal">
|
||||
<div class="form-group col-sm-10">
|
||||
<input
|
||||
v-model="newWebhook.url"
|
||||
class="form-control"
|
||||
type="url"
|
||||
:placeholder="$t('webhookURL')"
|
||||
>
|
||||
</div><div class="col-sm-2">
|
||||
<button
|
||||
class="btn btn-sm btn-primary"
|
||||
type="submit"
|
||||
@click="addWebhook(newWebhook.url)"
|
||||
>
|
||||
{{ $t('add') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -1,13 +1,7 @@
|
||||
<template lang="pug">
|
||||
.row
|
||||
.col-md-6
|
||||
h2 {{ $t('dataExport') }}
|
||||
small {{ $t('saveData') }}
|
||||
h4 {{ $t('habitHistory') }}
|
||||
| {{ $t('exportHistory') }}
|
||||
a(href="/export/history.csv") {{ $t('csv') }}
|
||||
h4 {{ $t('userData') }}
|
||||
| {{ $t('exportUserData') }}
|
||||
a(href="/export/userdata.xml") {{ $t('xml') }}
|
||||
a(href="/export/userdata.json") {{ $t('json') }}
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h2>{{ $t('dataExport') }}</h2><small>{{ $t('saveData') }}</small><h4>{{ $t('habitHistory') }}</h4>{{ $t('exportHistory') }}<a href="/export/history.csv">{{ $t('csv') }}</a><h4>{{ $t('userData') }}</h4>{{ $t('exportUserData') }}<a href="/export/userdata.xml">{{ $t('xml') }}</a><a href="/export/userdata.json">{{ $t('json') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,19 +1,46 @@
|
||||
<template lang="pug">
|
||||
b-modal#delete(:title="$t('deleteAccount')", :hide-footer='true' size='md')
|
||||
.modal-body
|
||||
br
|
||||
strong(v-if='user.auth.local.email') {{ $t('deleteLocalAccountText') }}
|
||||
strong(v-if='!user.auth.local.email') {{ $t('deleteSocialAccountText', {magicWord: 'DELETE'}) }}
|
||||
.row.mt-3
|
||||
.col-6
|
||||
input.form-control(type='password', v-model='password')
|
||||
.row.mt-3
|
||||
#feedback.col-12.form-group
|
||||
label(for='feedbackTextArea') {{ $t('feedback') }}
|
||||
textarea#feedbackTextArea.form-control(v-model='feedback')
|
||||
.modal-footer
|
||||
button.btn.btn-primary(@click='close()') {{ $t('neverMind') }}
|
||||
button.btn.btn-danger(@click='deleteAccount()', :disabled='!password') {{ $t('deleteDo') }}
|
||||
<template>
|
||||
<b-modal
|
||||
id="delete"
|
||||
:title="$t('deleteAccount')"
|
||||
:hide-footer="true"
|
||||
size="md"
|
||||
>
|
||||
<div class="modal-body">
|
||||
<br><strong v-if="user.auth.local.email">{{ $t('deleteLocalAccountText') }}</strong><strong v-if="!user.auth.local.email">{{ $t('deleteSocialAccountText', {magicWord: 'DELETE'}) }}</strong><div class="row mt-3">
|
||||
<div class="col-6">
|
||||
<input
|
||||
v-model="password"
|
||||
class="form-control"
|
||||
type="password"
|
||||
>
|
||||
</div>
|
||||
</div><div class="row mt-3">
|
||||
<div
|
||||
id="feedback"
|
||||
class="col-12 form-group"
|
||||
>
|
||||
<label for="feedbackTextArea">{{ $t('feedback') }}</label><textarea
|
||||
id="feedbackTextArea"
|
||||
v-model="feedback"
|
||||
class="form-control"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="modal-footer">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="close()"
|
||||
>
|
||||
{{ $t('neverMind') }}
|
||||
</button><button
|
||||
class="btn btn-danger"
|
||||
:disabled="!password"
|
||||
@click="deleteAccount()"
|
||||
>
|
||||
{{ $t('deleteDo') }}
|
||||
</button>
|
||||
</div>
|
||||
</b-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,15 +1,48 @@
|
||||
<template lang="pug">
|
||||
.row
|
||||
secondary-menu.col-12
|
||||
router-link.nav-link(:to="{name: 'site'}", exact, :class="{'active': $route.name === 'site'}") {{ $t('site') }}
|
||||
router-link.nav-link(:to="{name: 'api'}", :class="{'active': $route.name === 'api'}") {{ $t('API') }}
|
||||
router-link.nav-link(:to="{name: 'dataExport'}", :class="{'active': $route.name === 'dataExport'}") {{ $t('dataExport') }}
|
||||
router-link.nav-link(:to="{name: 'promoCode'}", :class="{'active': $route.name === 'promoCode'}") {{ $t('promoCode') }}
|
||||
router-link.nav-link(:to="{name: 'subscription'}", :class="{'active': $route.name === 'subscription'}") {{ $t('subscription') }}
|
||||
router-link.nav-link(:to="{name: 'notifications'}", :class="{'active': $route.name === 'notifications'}") {{ $t('notifications') }}
|
||||
|
||||
.col-12
|
||||
router-view
|
||||
<template>
|
||||
<div class="row">
|
||||
<secondary-menu class="col-12">
|
||||
<router-link
|
||||
class="nav-link"
|
||||
:to="{name: 'site'}"
|
||||
exact="exact"
|
||||
:class="{'active': $route.name === 'site'}"
|
||||
>
|
||||
{{ $t('site') }}
|
||||
</router-link><router-link
|
||||
class="nav-link"
|
||||
:to="{name: 'api'}"
|
||||
:class="{'active': $route.name === 'api'}"
|
||||
>
|
||||
{{ $t('API') }}
|
||||
</router-link><router-link
|
||||
class="nav-link"
|
||||
:to="{name: 'dataExport'}"
|
||||
:class="{'active': $route.name === 'dataExport'}"
|
||||
>
|
||||
{{ $t('dataExport') }}
|
||||
</router-link><router-link
|
||||
class="nav-link"
|
||||
:to="{name: 'promoCode'}"
|
||||
:class="{'active': $route.name === 'promoCode'}"
|
||||
>
|
||||
{{ $t('promoCode') }}
|
||||
</router-link><router-link
|
||||
class="nav-link"
|
||||
:to="{name: 'subscription'}"
|
||||
:class="{'active': $route.name === 'subscription'}"
|
||||
>
|
||||
{{ $t('subscription') }}
|
||||
</router-link><router-link
|
||||
class="nav-link"
|
||||
:to="{name: 'notifications'}"
|
||||
:class="{'active': $route.name === 'notifications'}"
|
||||
>
|
||||
{{ $t('notifications') }}
|
||||
</router-link>
|
||||
</secondary-menu><div class="col-12">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,41 +1,39 @@
|
||||
<template lang="pug">
|
||||
.row.standard-page
|
||||
.col-12
|
||||
h1 {{ $t('notifications') }}
|
||||
.col-12
|
||||
.checkbox
|
||||
label
|
||||
input(type='checkbox', v-model='user.preferences.pushNotifications.unsubscribeFromAll',
|
||||
@change='set("pushNotifications", "unsubscribeFromAll")')
|
||||
span {{ $t('unsubscribeAllPush') }}
|
||||
|
||||
br
|
||||
|
||||
.checkbox
|
||||
label
|
||||
input(type='checkbox', v-model='user.preferences.emailNotifications.unsubscribeFromAll',
|
||||
@change='set("emailNotifications", "unsubscribeFromAll")')
|
||||
span {{ $t('unsubscribeAllEmails') }}
|
||||
small {{ $t('unsubscribeAllEmailsText') }}
|
||||
|
||||
.col-8
|
||||
table.table
|
||||
tr
|
||||
td
|
||||
th
|
||||
span {{ $t('email') }}
|
||||
th
|
||||
span {{ $t('push') }}
|
||||
tr(v-for='notification in notificationsIds')
|
||||
td
|
||||
span {{ $t(notification) }}
|
||||
td
|
||||
input(type='checkbox', v-model='user.preferences.emailNotifications[notification]',
|
||||
@change='set("emailNotifications", notification)')
|
||||
td(v-if="onlyEmailsIds.indexOf(notification) === -1")
|
||||
input(type='checkbox', v-model='user.preferences.pushNotifications[notification]',
|
||||
@change='set("pushNotifications", notification)')
|
||||
hr
|
||||
<template>
|
||||
<div class="row standard-page">
|
||||
<div class="col-12">
|
||||
<h1>{{ $t('notifications') }}</h1>
|
||||
</div><div class="col-12">
|
||||
<div class="checkbox">
|
||||
<label><input
|
||||
v-model="user.preferences.pushNotifications.unsubscribeFromAll"
|
||||
type="checkbox"
|
||||
@change="set('pushNotifications', 'unsubscribeFromAll')"
|
||||
><span>{{ $t('unsubscribeAllPush') }}</span></label>
|
||||
</div><br><div class="checkbox">
|
||||
<label><input
|
||||
v-model="user.preferences.emailNotifications.unsubscribeFromAll"
|
||||
type="checkbox"
|
||||
@change="set('emailNotifications', 'unsubscribeFromAll')"
|
||||
><span>{{ $t('unsubscribeAllEmails') }}</span></label>
|
||||
</div><small>{{ $t('unsubscribeAllEmailsText') }}</small>
|
||||
</div><div class="col-8">
|
||||
<table class="table"></table><tr><td></td><th><span>{{ $t('email') }}</span></th><th><span>{{ $t('push') }}</span></th></tr><tr v-for="notification in notificationsIds">
|
||||
<td><span>{{ $t(notification) }}</span></td><td>
|
||||
<input
|
||||
v-model="user.preferences.emailNotifications[notification]"
|
||||
type="checkbox"
|
||||
@change="set('emailNotifications', notification)"
|
||||
>
|
||||
</td><td v-if="onlyEmailsIds.indexOf(notification) === -1">
|
||||
<input
|
||||
v-model="user.preferences.pushNotifications[notification]"
|
||||
type="checkbox"
|
||||
@change="set('pushNotifications', notification)"
|
||||
><hr>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,23 +1,56 @@
|
||||
<template lang="pug">
|
||||
.row.standard-page
|
||||
.col-md-6
|
||||
h2 {{ $t('promoCode') }}
|
||||
.form-inline(role='form')
|
||||
input.form-control(type='text', v-model='couponCode', :placeholder="$t('promoPlaceholder')")
|
||||
button.btn.btn-primary(@click='enterCoupon()') {{ $t('submit') }}
|
||||
div
|
||||
small {{ $t('couponText') }}
|
||||
div(v-if='user.contributor.sudo')
|
||||
hr
|
||||
h4 {{ $t('generateCodes') }}
|
||||
.form(role='form')
|
||||
.form-group
|
||||
input.form-control(type='text', v-model='codes.event', placeholder="Event code (eg, 'wondercon')")
|
||||
.form-group
|
||||
input.form-control(type='number', v-model='codes.count', placeholder="Number of codes to generate (eg, 250)")
|
||||
.form-group
|
||||
button.btn.btn-primary(type='submit', @click='generateCodes(codes)') {{ $t('generate') }}
|
||||
a.btn.btn-secondary(:href='getCodesUrl') {{ $t('getCodes') }}
|
||||
<template>
|
||||
<div class="row standard-page">
|
||||
<div class="col-md-6">
|
||||
<h2>{{ $t('promoCode') }}</h2><div
|
||||
class="form-inline"
|
||||
role="form"
|
||||
>
|
||||
<input
|
||||
v-model="couponCode"
|
||||
class="form-control"
|
||||
type="text"
|
||||
:placeholder="$t('promoPlaceholder')"
|
||||
><button
|
||||
class="btn btn-primary"
|
||||
@click="enterCoupon()"
|
||||
>
|
||||
{{ $t('submit') }}
|
||||
</button>
|
||||
</div><div><small>{{ $t('couponText') }}</small></div><div v-if="user.contributor.sudo">
|
||||
<hr><h4>{{ $t('generateCodes') }}</h4><div
|
||||
class="form"
|
||||
role="form"
|
||||
>
|
||||
<div class="form-group">
|
||||
<input
|
||||
v-model="codes.event"
|
||||
class="form-control"
|
||||
type="text"
|
||||
placeholder="Event code (eg, 'wondercon')"
|
||||
>
|
||||
</div><div class="form-group">
|
||||
<input
|
||||
v-model="codes.count"
|
||||
class="form-control"
|
||||
type="number"
|
||||
placeholder="Number of codes to generate (eg, 250)"
|
||||
>
|
||||
</div><div class="form-group">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
type="submit"
|
||||
@click="generateCodes(codes)"
|
||||
>
|
||||
{{ $t('generate') }}
|
||||
</button><a
|
||||
class="btn btn-secondary"
|
||||
:href="getCodesUrl"
|
||||
>{{ $t('getCodes') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,10 +1,24 @@
|
||||
<template lang="pug">
|
||||
b-modal#reset(:title="$t('resetAccount')", :hide-footer='true' size='md')
|
||||
p {{ $t('resetText1') }}
|
||||
p {{ $t('resetText2') }}
|
||||
.modal-footer
|
||||
button.btn.btn-primary(@click='close()') {{ $t('neverMind') }}
|
||||
button.btn.btn-danger(@click='reset()') {{ $t('resetDo') }}
|
||||
<template>
|
||||
<b-modal
|
||||
id="reset"
|
||||
:title="$t('resetAccount')"
|
||||
:hide-footer="true"
|
||||
size="md"
|
||||
>
|
||||
<p>{{ $t('resetText1') }}</p><p>{{ $t('resetText2') }}</p><div class="modal-footer">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="close()"
|
||||
>
|
||||
{{ $t('neverMind') }}
|
||||
</button><button
|
||||
class="btn btn-danger"
|
||||
@click="reset()"
|
||||
>
|
||||
{{ $t('resetDo') }}
|
||||
</button>
|
||||
</div>
|
||||
</b-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,49 +1,96 @@
|
||||
<template lang="pug">
|
||||
b-modal#restore(:title="$t('fixValues')", :hide-footer='true' size='lg')
|
||||
p {{ $t('fixValuesText1') }}
|
||||
p {{ $t('fixValuesText2') }}
|
||||
.form-horizontal
|
||||
h3 {{ $t('stats') }}
|
||||
.form-group.row
|
||||
.col-sm-3
|
||||
label.control-label {{ $t('health') }}
|
||||
.col-sm-9
|
||||
input.form-control(type='number', step="any", data-for='stats.hp', v-model='restoreValues.stats.hp')
|
||||
.form-group.row
|
||||
.col-sm-3
|
||||
label.control-label {{ $t('experience') }}
|
||||
.col-sm-9
|
||||
input.form-control(type='number', step="any", data-for='stats.exp', v-model='restoreValues.stats.exp')
|
||||
.form-group.row
|
||||
.col-sm-3
|
||||
label.control-label {{ $t('gold') }}
|
||||
.col-sm-9
|
||||
input.form-control(type='number', step="any", data-for='stats.gp', v-model='restoreValues.stats.gp')
|
||||
//input.form-control(type='number', step="any", data-for='stats.gp', v-model='restoreValues.stats.gp',disabled)
|
||||
//-p.alert
|
||||
small {{ $t('disabledWinterEvent') }}
|
||||
.form-group.row
|
||||
.col-sm-3
|
||||
label.control-label {{ $t('mana') }}
|
||||
.col-sm-9
|
||||
input.form-control(type='number', step="any", data-for='stats.mp', v-model='restoreValues.stats.mp')
|
||||
.form-group.row
|
||||
.col-sm-3
|
||||
label.control-label {{ $t('level') }}
|
||||
.col-sm-9
|
||||
input.form-control(type='number', data-for='stats.lvl', v-model='restoreValues.stats.lvl')
|
||||
h3 {{ $t('achievements') }}
|
||||
.form-group.row
|
||||
.col-sm-3
|
||||
label.control-label {{ $t('fix21Streaks') }}
|
||||
.col-sm-9
|
||||
input.form-control(type='number', data-for='achievements.streak', v-model='restoreValues.achievements.streak')
|
||||
//- This is causing too many problems for users
|
||||
h3 {{ $t('other') }}
|
||||
a.btn.btn-sm.btn-warning(ng-controller='FooterCtrl', ng-click='addMissedDay(1)') {{ $t('triggerDay') }}
|
||||
.modal-footer
|
||||
button.btn.btn-danger(@click='close()') {{ $t('discardChanges') }}
|
||||
button.btn.btn-primary(@click='restore()') {{ $t('saveAndClose') }}
|
||||
<template>
|
||||
<b-modal
|
||||
id="restore"
|
||||
:title="$t('fixValues')"
|
||||
:hide-footer="true"
|
||||
size="lg"
|
||||
>
|
||||
<p>{{ $t('fixValuesText1') }}</p><p>{{ $t('fixValuesText2') }}</p><div class="form-horizontal">
|
||||
<h3>{{ $t('stats') }}</h3><div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<label class="control-label">{{ $t('health') }}</label>
|
||||
</div><div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.stats.hp"
|
||||
class="form-control"
|
||||
type="number"
|
||||
step="any"
|
||||
data-for="stats.hp"
|
||||
>
|
||||
</div>
|
||||
</div><div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<label class="control-label">{{ $t('experience') }}</label>
|
||||
</div><div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.stats.exp"
|
||||
class="form-control"
|
||||
type="number"
|
||||
step="any"
|
||||
data-for="stats.exp"
|
||||
>
|
||||
</div>
|
||||
</div><div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<label class="control-label">{{ $t('gold') }}</label>
|
||||
</div><div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.stats.gp"
|
||||
class="form-control"
|
||||
type="number"
|
||||
step="any"
|
||||
data-for="stats.gp"
|
||||
>
|
||||
</div><!--input.form-control(type='number', step="any", data-for='stats.gp', v-model='restoreValues.stats.gp',disabled)-->
|
||||
</div><div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<label class="control-label">{{ $t('mana') }}</label>
|
||||
</div><div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.stats.mp"
|
||||
class="form-control"
|
||||
type="number"
|
||||
step="any"
|
||||
data-for="stats.mp"
|
||||
>
|
||||
</div>
|
||||
</div><div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<label class="control-label">{{ $t('level') }}</label>
|
||||
</div><div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.stats.lvl"
|
||||
class="form-control"
|
||||
type="number"
|
||||
data-for="stats.lvl"
|
||||
>
|
||||
</div>
|
||||
</div><h3>{{ $t('achievements') }}</h3><div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<label class="control-label">{{ $t('fix21Streaks') }}</label>
|
||||
</div><div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.achievements.streak"
|
||||
class="form-control"
|
||||
type="number"
|
||||
data-for="achievements.streak"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="modal-footer">
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
@click="close()"
|
||||
>
|
||||
{{ $t('discardChanges') }}
|
||||
</button><button
|
||||
class="btn btn-primary"
|
||||
@click="restore()"
|
||||
>
|
||||
{{ $t('saveAndClose') }}
|
||||
</button>
|
||||
</div>
|
||||
</b-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,179 +1,418 @@
|
||||
<template lang="pug">
|
||||
.row.standard-page
|
||||
restore-modal
|
||||
reset-modal
|
||||
delete-modal
|
||||
h1.col-12 {{ $t('settings') }}
|
||||
.col-sm-6
|
||||
.form-horizontal
|
||||
h5 {{ $t('language') }}
|
||||
select.form-control(:value='user.preferences.language',
|
||||
@change='changeLanguage($event)')
|
||||
option(v-for='lang in availableLanguages', :value='lang.code') {{lang.name}}
|
||||
|
||||
small
|
||||
| {{ $t('americanEnglishGovern') }}
|
||||
br
|
||||
strong(v-html="$t('helpWithTranslation')")
|
||||
hr
|
||||
|
||||
.form-horizontal
|
||||
h5 {{ $t('dateFormat') }}
|
||||
select.form-control(v-model='user.preferences.dateFormat',
|
||||
@change='set("dateFormat")')
|
||||
option(v-for='dateFormat in availableFormats', :value='dateFormat') {{dateFormat}}
|
||||
hr
|
||||
|
||||
.form-horizontal
|
||||
.form-group
|
||||
h5 {{ $t('audioTheme') }}
|
||||
select.form-control(v-model='user.preferences.sound',
|
||||
@change='changeAudioTheme')
|
||||
option(v-for='sound in availableAudioThemes', :value='sound') {{ $t(`audioTheme_${sound}`) }}
|
||||
button.btn.btn-primary.btn-xs(@click='playAudio', v-once) {{ $t('demo') }}
|
||||
hr
|
||||
|
||||
.form-horizontal(v-if='hasClass')
|
||||
h5 {{ $t('characterBuild') }}
|
||||
h6(v-once) {{ $t('class') + ': ' }}
|
||||
// @TODO: what is classText
|
||||
// span(v-if='classText') {{ classText }}
|
||||
button.btn.btn-danger.btn-xs(@click='changeClassForUser(true)', v-once) {{ $t('changeClass') }}
|
||||
small.cost 3 {{ $t('gems') }}
|
||||
// @TODO add icon span.Pet_Currency_Gem1x.inline-gems
|
||||
hr
|
||||
|
||||
div
|
||||
.checkbox
|
||||
label
|
||||
input(type='checkbox', v-model='user.preferences.advancedCollapsed', @change='set("advancedCollapsed")')
|
||||
span.hint(popover-trigger='mouseenter', popover-placement='right', :popover="$t('startAdvCollapsedPop')") {{ $t('startAdvCollapsed') }}
|
||||
.checkbox
|
||||
label
|
||||
input(type='checkbox', v-model='user.preferences.dailyDueDefaultView', @change='set("dailyDueDefaultView")')
|
||||
span.hint(popover-trigger='mouseenter', popover-placement='right', :popover="$t('dailyDueDefaultViewPop')") {{ $t('dailyDueDefaultView') }}
|
||||
.checkbox(v-if='party.memberCount === 1')
|
||||
label
|
||||
input(type='checkbox', v-model='user.preferences.displayInviteToPartyWhenPartyIs1', @change='set("displayInviteToPartyWhenPartyIs1")')
|
||||
span.hint(popover-trigger='mouseenter', popover-placement='right', :popover="$t('displayInviteToPartyWhenPartyIs1')") {{ $t('displayInviteToPartyWhenPartyIs1') }}
|
||||
.checkbox
|
||||
input(type='checkbox', v-model='user.preferences.suppressModals.levelUp', @change='set("suppressModals", "levelUp")')
|
||||
label {{ $t('suppressLevelUpModal') }}
|
||||
.checkbox
|
||||
input(type='checkbox', v-model='user.preferences.suppressModals.hatchPet', @change='set("suppressModals", "hatchPet")')
|
||||
label {{ $t('suppressHatchPetModal') }}
|
||||
.checkbox
|
||||
input(type='checkbox', v-model='user.preferences.suppressModals.raisePet', @change='set("suppressModals", "raisePet")')
|
||||
label {{ $t('suppressRaisePetModal') }}
|
||||
.checkbox
|
||||
input(type='checkbox', v-model='user.preferences.suppressModals.streak', @change='set("suppressModals", "streak")')
|
||||
label {{ $t('suppressStreakModal') }}
|
||||
//- .checkbox
|
||||
//- label {{ $t('confirmScoreNotes') }}
|
||||
//- input(type='checkbox', v-model='user.preferences.tasks.confirmScoreNotes', @change='set({"preferences.tasks.confirmScoreNotes": user.preferences.tasks.confirmScoreNotes ? true: false})')
|
||||
|
||||
//- .checkbox
|
||||
//- label {{ $t('groupTasksByChallenge') }}
|
||||
//- input(type='checkbox', v-model='user.preferences.tasks.groupByChallenge', @change='set({"preferences.tasks.groupByChallenge": user.preferences.tasks.groupByChallenge ? true: false})')
|
||||
|
||||
hr
|
||||
|
||||
button.btn.btn-primary.mr-2.mb-2(@click='showBailey()', popover-trigger='mouseenter', popover-placement='right', :popover="$t('showBaileyPop')") {{ $t('showBailey') }}
|
||||
button.btn.btn-primary.mr-2.mb-2(@click='openRestoreModal()', popover-trigger='mouseenter', popover-placement='right', :popover="$t('fixValPop')") {{ $t('fixVal') }}
|
||||
button.btn.btn-primary.mb-2(v-if='user.preferences.disableClasses == true', @click='changeClassForUser(false)',
|
||||
popover-trigger='mouseenter', popover-placement='right', :popover="$t('enableClassPop')") {{ $t('enableClass') }}
|
||||
|
||||
hr
|
||||
|
||||
div
|
||||
h5 {{ $t('customDayStart') }}
|
||||
.alert.alert-warning {{ $t('customDayStartInfo1') }}
|
||||
.form-horizontal
|
||||
.form-group
|
||||
.col-7
|
||||
select.form-control(v-model='newDayStart')
|
||||
option(v-for='option in dayStartOptions' :value='option.value') {{option.name}}
|
||||
|
||||
.col-5
|
||||
button.btn.btn-block.btn-primary.mt-1(@click='openDayStartModal()',
|
||||
:disabled='newDayStart === user.preferences.dayStart')
|
||||
| {{ $t('saveCustomDayStart') }}
|
||||
hr
|
||||
|
||||
h5 {{ $t('timezone') }}
|
||||
.form-horizontal
|
||||
.form-group
|
||||
.col-12
|
||||
p(v-html="$t('timezoneUTC', {utc: timezoneOffsetToUtc})")
|
||||
p(v-html="$t('timezoneInfo')")
|
||||
|
||||
.col-sm-6
|
||||
h2 {{ $t('registration') }}
|
||||
.panel-body
|
||||
div
|
||||
ul.list-inline
|
||||
li(v-for='network in SOCIAL_AUTH_NETWORKS')
|
||||
button.btn.btn-primary.mb-2(v-if='!user.auth[network.key].id', @click='socialAuth(network.key, user)') {{ $t('registerWithSocial', {network: network.name}) }}
|
||||
button.btn.btn-primary.mb-2(disabled='disabled', v-if='!hasBackupAuthOption(network.key) && user.auth[network.key].id') {{ $t('registeredWithSocial', {network: network.name}) }}
|
||||
button.btn.btn-danger(@click='deleteSocialAuth(network)', v-if='hasBackupAuthOption(network.key) && user.auth[network.key].id') {{ $t('detachSocial', {network: network.name}) }}
|
||||
hr
|
||||
div(v-if='!user.auth.local.email')
|
||||
p {{ $t('addLocalAuth') }}
|
||||
.form(name='localAuth', novalidate)
|
||||
.form-group
|
||||
input.form-control(type='text', :placeholder="$t('email')", v-model='localAuth.email', required)
|
||||
.form-group
|
||||
input.form-control(type='password', :placeholder="$t('password')", v-model='localAuth.password', required)
|
||||
.form-group
|
||||
input.form-control(type='password', :placeholder="$t('confirmPass')", v-model='localAuth.confirmPassword', required)
|
||||
button.btn.btn-primary(type='submit', @click='addLocalAuth()') {{ $t('submit') }}
|
||||
|
||||
.usersettings
|
||||
h5 {{ $t('changeDisplayName') }}
|
||||
.form(name='changeDisplayName', novalidate)
|
||||
.form-group
|
||||
input#changeDisplayname.form-control(type='text', :placeholder="$t('newDisplayName')", v-model='temporaryDisplayName', :class='{"is-invalid input-invalid": displayNameInvalid}')
|
||||
.mb-3(v-if="displayNameIssues.length > 0")
|
||||
.input-error(v-for="issue in displayNameIssues") {{ issue }}
|
||||
button.btn.btn-primary(type='submit', @click='changeDisplayName(temporaryDisplayName)', :disabled='displayNameCannotSubmit') {{ $t('submit') }}
|
||||
|
||||
h5 {{ $t('changeUsername') }}
|
||||
.form(name='changeUsername', novalidate)
|
||||
.iconalert.iconalert-success(v-if='verifiedUsername') {{ $t('usernameVerifiedConfirmation', {'username': user.auth.local.username}) }}
|
||||
.iconalert.iconalert-warning(v-else)
|
||||
div.align-middle
|
||||
span {{ $t('usernameNotVerified') }}
|
||||
.form-group
|
||||
input#changeUsername.form-control(@blur='restoreEmptyUsername()',type='text', :placeholder="$t('newUsername')", v-model='usernameUpdates.username', :class='{"is-invalid input-invalid": usernameInvalid}')
|
||||
.input-error(v-for="issue in usernameIssues") {{ issue }}
|
||||
small.form-text.text-muted {{ $t('changeUsernameDisclaimer') }}
|
||||
button.btn.btn-primary(type='submit', @click='changeUser("username", usernameUpdates)', :disabled='usernameCannotSubmit') {{ $t('saveAndConfirm') }}
|
||||
h5(v-if='user.auth.local.email') {{ $t('changeEmail') }}
|
||||
.form(v-if='user.auth.local.email', name='changeEmail', novalidate)
|
||||
.form-group
|
||||
input#changeEmail.form-control(type='text', :placeholder="$t('newEmail')", v-model='emailUpdates.newEmail')
|
||||
.form-group
|
||||
input.form-control(type='password', :placeholder="$t('password')", v-model='emailUpdates.password')
|
||||
button.btn.btn-primary(type='submit', @click='changeUser("email", emailUpdates)') {{ $t('submit') }}
|
||||
|
||||
h5(v-if='user.auth.local.email') {{ $t('changePass') }}
|
||||
.form(v-if='user.auth.local.email', name='changePassword', novalidate)
|
||||
.form-group
|
||||
input#changePassword.form-control(type='password', :placeholder="$t('oldPass')", v-model='passwordUpdates.password')
|
||||
.form-group
|
||||
input.form-control(type='password', :placeholder="$t('newPass')", v-model='passwordUpdates.newPassword')
|
||||
.form-group
|
||||
input.form-control(type='password', :placeholder="$t('confirmPass')", v-model='passwordUpdates.confirmPassword')
|
||||
button.btn.btn-primary(type='submit', @click='changeUser("password", passwordUpdates)') {{ $t('submit') }}
|
||||
hr
|
||||
|
||||
div
|
||||
h5 {{ $t('dangerZone') }}
|
||||
div
|
||||
button.btn.btn-danger.mr-2.mb-2(@click='openResetModal()',
|
||||
popover-trigger='mouseenter', popover-placement='right', v-b-popover.hover.auto="$t('resetAccPop')") {{ $t('resetAccount') }}
|
||||
button.btn.btn-danger.mb-2(@click='openDeleteModal()',
|
||||
popover-trigger='mouseenter', v-b-popover.hover.auto="$t('deleteAccPop')") {{ $t('deleteAccount') }}
|
||||
<template>
|
||||
<div class="row standard-page">
|
||||
<restore-modal /><reset-modal /><delete-modal /><h1 class="col-12">
|
||||
{{ $t('settings') }}
|
||||
</h1><div class="col-sm-6">
|
||||
<div class="form-horizontal">
|
||||
<h5>{{ $t('language') }}</h5><select
|
||||
class="form-control"
|
||||
:value="user.preferences.language"
|
||||
@change="changeLanguage($event)"
|
||||
>
|
||||
<option
|
||||
v-for="lang in availableLanguages"
|
||||
:value="lang.code"
|
||||
>
|
||||
{{ lang.name }}
|
||||
</option>
|
||||
</select><small>{{ $t('americanEnglishGovern') }}<br><strong v-html="$t('helpWithTranslation')"></strong></small>
|
||||
</div><hr><div class="form-horizontal">
|
||||
<h5>{{ $t('dateFormat') }}</h5><select
|
||||
v-model="user.preferences.dateFormat"
|
||||
class="form-control"
|
||||
@change="set('dateFormat')"
|
||||
>
|
||||
<option
|
||||
v-for="dateFormat in availableFormats"
|
||||
:value="dateFormat"
|
||||
>
|
||||
{{ dateFormat }}
|
||||
</option>
|
||||
</select>
|
||||
</div><hr><div class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<h5>{{ $t('audioTheme') }}</h5><select
|
||||
v-model="user.preferences.sound"
|
||||
class="form-control"
|
||||
@change="changeAudioTheme"
|
||||
>
|
||||
<option
|
||||
v-for="sound in availableAudioThemes"
|
||||
:value="sound"
|
||||
>
|
||||
{{ $t(`audioTheme_${sound}`) }}
|
||||
</option>
|
||||
</select>
|
||||
</div><button
|
||||
v-once
|
||||
class="btn btn-primary btn-xs"
|
||||
@click="playAudio"
|
||||
>
|
||||
{{ $t('demo') }}
|
||||
</button>
|
||||
</div><hr><div
|
||||
v-if="hasClass"
|
||||
class="form-horizontal"
|
||||
>
|
||||
<h5>{{ $t('characterBuild') }}</h5><h6 v-once>
|
||||
{{ $t('class') + ': ' }}<!-- @TODO: what is classText--><!-- span(v-if='classText') {{ classText }} --><button
|
||||
v-once
|
||||
class="btn btn-danger btn-xs"
|
||||
@click="changeClassForUser(true)"
|
||||
>
|
||||
{{ $t('changeClass') }}
|
||||
</button><small class="cost"> 3 {{ $t('gems') }}<!-- @TODO add icon span.Pet_Currency_Gem1x.inline-gems--></small>
|
||||
</h6><hr>
|
||||
</div><div>
|
||||
<div class="checkbox">
|
||||
<label><input
|
||||
v-model="user.preferences.advancedCollapsed"
|
||||
type="checkbox"
|
||||
@change="set('advancedCollapsed')"
|
||||
><span
|
||||
class="hint"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
:popover="$t('startAdvCollapsedPop')"
|
||||
>{{ $t('startAdvCollapsed') }}</span></label>
|
||||
</div><div class="checkbox">
|
||||
<label><input
|
||||
v-model="user.preferences.dailyDueDefaultView"
|
||||
type="checkbox"
|
||||
@change="set('dailyDueDefaultView')"
|
||||
><span
|
||||
class="hint"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
:popover="$t('dailyDueDefaultViewPop')"
|
||||
>{{ $t('dailyDueDefaultView') }}</span></label>
|
||||
</div><div
|
||||
v-if="party.memberCount === 1"
|
||||
class="checkbox"
|
||||
>
|
||||
<label><input
|
||||
v-model="user.preferences.displayInviteToPartyWhenPartyIs1"
|
||||
type="checkbox"
|
||||
@change="set('displayInviteToPartyWhenPartyIs1')"
|
||||
><span
|
||||
class="hint"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
:popover="$t('displayInviteToPartyWhenPartyIs1')"
|
||||
>{{ $t('displayInviteToPartyWhenPartyIs1') }}</span></label>
|
||||
</div><div class="checkbox">
|
||||
<input
|
||||
v-model="user.preferences.suppressModals.levelUp"
|
||||
type="checkbox"
|
||||
@change="set('suppressModals', 'levelUp')"
|
||||
><label>{{ $t('suppressLevelUpModal') }}</label>
|
||||
</div><div class="checkbox">
|
||||
<input
|
||||
v-model="user.preferences.suppressModals.hatchPet"
|
||||
type="checkbox"
|
||||
@change="set('suppressModals', 'hatchPet')"
|
||||
><label>{{ $t('suppressHatchPetModal') }}</label>
|
||||
</div><div class="checkbox">
|
||||
<input
|
||||
v-model="user.preferences.suppressModals.raisePet"
|
||||
type="checkbox"
|
||||
@change="set('suppressModals', 'raisePet')"
|
||||
><label>{{ $t('suppressRaisePetModal') }}</label>
|
||||
</div><div class="checkbox">
|
||||
<input
|
||||
v-model="user.preferences.suppressModals.streak"
|
||||
type="checkbox"
|
||||
@change="set('suppressModals', 'streak')"
|
||||
><label>{{ $t('suppressStreakModal') }}</label>
|
||||
</div><hr><button
|
||||
class="btn btn-primary mr-2 mb-2"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
:popover="$t('showBaileyPop')"
|
||||
@click="showBailey()"
|
||||
>
|
||||
{{ $t('showBailey') }}
|
||||
</button><button
|
||||
class="btn btn-primary mr-2 mb-2"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
:popover="$t('fixValPop')"
|
||||
@click="openRestoreModal()"
|
||||
>
|
||||
{{ $t('fixVal') }}
|
||||
</button><button
|
||||
v-if="user.preferences.disableClasses == true"
|
||||
class="btn btn-primary mb-2"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
:popover="$t('enableClassPop')"
|
||||
@click="changeClassForUser(false)"
|
||||
>
|
||||
{{ $t('enableClass') }}
|
||||
</button><hr><div>
|
||||
<h5>{{ $t('customDayStart') }}</h5><div class="alert alert-warning">
|
||||
{{ $t('customDayStartInfo1') }}
|
||||
</div><div class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<div class="col-7">
|
||||
<select
|
||||
v-model="newDayStart"
|
||||
class="form-control"
|
||||
>
|
||||
<option
|
||||
v-for="option in dayStartOptions"
|
||||
:value="option.value"
|
||||
>
|
||||
{{ option.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div><div class="col-5">
|
||||
<button
|
||||
class="btn btn-block btn-primary mt-1"
|
||||
:disabled="newDayStart === user.preferences.dayStart"
|
||||
@click="openDayStartModal()"
|
||||
>
|
||||
{{ $t('saveCustomDayStart') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><hr>
|
||||
</div><h5>{{ $t('timezone') }}</h5><div class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<div class="col-12">
|
||||
<p v-html="$t('timezoneUTC', {utc: timezoneOffsetToUtc})"></p><p v-html="$t('timezoneInfo')"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="col-sm-6">
|
||||
<h2>{{ $t('registration') }}</h2><div class="panel-body">
|
||||
<div>
|
||||
<ul class="list-inline">
|
||||
<li v-for="network in SOCIAL_AUTH_NETWORKS">
|
||||
<button
|
||||
v-if="!user.auth[network.key].id"
|
||||
class="btn btn-primary mb-2"
|
||||
@click="socialAuth(network.key, user)"
|
||||
>
|
||||
{{ $t('registerWithSocial', {network: network.name}) }}
|
||||
</button><button
|
||||
v-if="!hasBackupAuthOption(network.key) && user.auth[network.key].id"
|
||||
class="btn btn-primary mb-2"
|
||||
disabled="disabled"
|
||||
>
|
||||
{{ $t('registeredWithSocial', {network: network.name}) }}
|
||||
</button><button
|
||||
v-if="hasBackupAuthOption(network.key) && user.auth[network.key].id"
|
||||
class="btn btn-danger"
|
||||
@click="deleteSocialAuth(network)"
|
||||
>
|
||||
{{ $t('detachSocial', {network: network.name}) }}
|
||||
</button>
|
||||
</li>
|
||||
</ul><hr><div v-if="!user.auth.local.email">
|
||||
<p>{{ $t('addLocalAuth') }}</p><div
|
||||
class="form"
|
||||
name="localAuth"
|
||||
novalidate="novalidate"
|
||||
>
|
||||
<div class="form-group">
|
||||
<input
|
||||
v-model="localAuth.email"
|
||||
class="form-control"
|
||||
type="text"
|
||||
:placeholder="$t('email')"
|
||||
required="required"
|
||||
>
|
||||
</div><div class="form-group">
|
||||
<input
|
||||
v-model="localAuth.password"
|
||||
class="form-control"
|
||||
type="password"
|
||||
:placeholder="$t('password')"
|
||||
required="required"
|
||||
>
|
||||
</div><div class="form-group">
|
||||
<input
|
||||
v-model="localAuth.confirmPassword"
|
||||
class="form-control"
|
||||
type="password"
|
||||
:placeholder="$t('confirmPass')"
|
||||
required="required"
|
||||
>
|
||||
</div><button
|
||||
class="btn btn-primary"
|
||||
type="submit"
|
||||
@click="addLocalAuth()"
|
||||
>
|
||||
{{ $t('submit') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="usersettings">
|
||||
<h5>{{ $t('changeDisplayName') }}</h5><div
|
||||
class="form"
|
||||
name="changeDisplayName"
|
||||
novalidate="novalidate"
|
||||
>
|
||||
<div class="form-group">
|
||||
<input
|
||||
id="changeDisplayname"
|
||||
v-model="temporaryDisplayName"
|
||||
class="form-control"
|
||||
type="text"
|
||||
:placeholder="$t('newDisplayName')"
|
||||
:class="{'is-invalid input-invalid': displayNameInvalid}"
|
||||
><div
|
||||
v-if="displayNameIssues.length > 0"
|
||||
class="mb-3"
|
||||
>
|
||||
<div
|
||||
v-for="issue in displayNameIssues"
|
||||
class="input-error"
|
||||
>
|
||||
{{ issue }}
|
||||
</div>
|
||||
</div>
|
||||
</div><button
|
||||
class="btn btn-primary"
|
||||
type="submit"
|
||||
:disabled="displayNameCannotSubmit"
|
||||
@click="changeDisplayName(temporaryDisplayName)"
|
||||
>
|
||||
{{ $t('submit') }}
|
||||
</button>
|
||||
</div><h5>{{ $t('changeUsername') }}</h5><div
|
||||
class="form"
|
||||
name="changeUsername"
|
||||
novalidate="novalidate"
|
||||
>
|
||||
<div
|
||||
v-if="verifiedUsername"
|
||||
class="iconalert iconalert-success"
|
||||
>
|
||||
{{ $t('usernameVerifiedConfirmation', {'username': user.auth.local.username}) }}
|
||||
</div><div
|
||||
v-else
|
||||
class="iconalert iconalert-warning"
|
||||
>
|
||||
<div class="align-middle">
|
||||
<span>{{ $t('usernameNotVerified') }}</span>
|
||||
</div>
|
||||
</div><div class="form-group">
|
||||
<input
|
||||
id="changeUsername"
|
||||
v-model="usernameUpdates.username"
|
||||
class="form-control"
|
||||
type="text"
|
||||
:placeholder="$t('newUsername')"
|
||||
:class="{'is-invalid input-invalid': usernameInvalid}"
|
||||
@blur="restoreEmptyUsername()"
|
||||
><div
|
||||
v-for="issue in usernameIssues"
|
||||
class="input-error"
|
||||
>
|
||||
{{ issue }}
|
||||
</div><small class="form-text text-muted">{{ $t('changeUsernameDisclaimer') }}</small>
|
||||
</div><button
|
||||
class="btn btn-primary"
|
||||
type="submit"
|
||||
:disabled="usernameCannotSubmit"
|
||||
@click="changeUser('username', usernameUpdates)"
|
||||
>
|
||||
{{ $t('saveAndConfirm') }}
|
||||
</button>
|
||||
</div><h5 v-if="user.auth.local.email">
|
||||
{{ $t('changeEmail') }}
|
||||
</h5><div
|
||||
v-if="user.auth.local.email"
|
||||
class="form"
|
||||
name="changeEmail"
|
||||
novalidate="novalidate"
|
||||
>
|
||||
<div class="form-group">
|
||||
<input
|
||||
id="changeEmail"
|
||||
v-model="emailUpdates.newEmail"
|
||||
class="form-control"
|
||||
type="text"
|
||||
:placeholder="$t('newEmail')"
|
||||
>
|
||||
</div><div class="form-group">
|
||||
<input
|
||||
v-model="emailUpdates.password"
|
||||
class="form-control"
|
||||
type="password"
|
||||
:placeholder="$t('password')"
|
||||
>
|
||||
</div><button
|
||||
class="btn btn-primary"
|
||||
type="submit"
|
||||
@click="changeUser('email', emailUpdates)"
|
||||
>
|
||||
{{ $t('submit') }}
|
||||
</button>
|
||||
</div><h5 v-if="user.auth.local.email">
|
||||
{{ $t('changePass') }}
|
||||
</h5><div
|
||||
v-if="user.auth.local.email"
|
||||
class="form"
|
||||
name="changePassword"
|
||||
novalidate="novalidate"
|
||||
>
|
||||
<div class="form-group">
|
||||
<input
|
||||
id="changePassword"
|
||||
v-model="passwordUpdates.password"
|
||||
class="form-control"
|
||||
type="password"
|
||||
:placeholder="$t('oldPass')"
|
||||
>
|
||||
</div><div class="form-group">
|
||||
<input
|
||||
v-model="passwordUpdates.newPassword"
|
||||
class="form-control"
|
||||
type="password"
|
||||
:placeholder="$t('newPass')"
|
||||
>
|
||||
</div><div class="form-group">
|
||||
<input
|
||||
v-model="passwordUpdates.confirmPassword"
|
||||
class="form-control"
|
||||
type="password"
|
||||
:placeholder="$t('confirmPass')"
|
||||
>
|
||||
</div><button
|
||||
class="btn btn-primary"
|
||||
type="submit"
|
||||
@click="changeUser('password', passwordUpdates)"
|
||||
>
|
||||
{{ $t('submit') }}
|
||||
</button>
|
||||
</div><hr>
|
||||
</div><div>
|
||||
<h5>{{ $t('dangerZone') }}</h5><div>
|
||||
<button
|
||||
v-b-popover.hover.auto="$t('resetAccPop')"
|
||||
class="btn btn-danger mr-2 mb-2"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
@click="openResetModal()"
|
||||
>
|
||||
{{ $t('resetAccount') }}
|
||||
</button><button
|
||||
v-b-popover.hover.auto="$t('deleteAccPop')"
|
||||
class="btn btn-danger mb-2"
|
||||
popover-trigger="mouseenter"
|
||||
@click="openDeleteModal()"
|
||||
>
|
||||
{{ $t('deleteAccount') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,95 +1,186 @@
|
||||
<template lang="pug">
|
||||
.standard-page
|
||||
h1 {{ $t('subscription') }}
|
||||
.row
|
||||
.col-6
|
||||
h2 {{ $t('benefits') }}
|
||||
ul
|
||||
li
|
||||
span.hint(:popover="$t('buyGemsGoldText', {gemCostTranslation})",
|
||||
popover-trigger='mouseenter',
|
||||
popover-placement='right') {{ $t('buyGemsGold') }}
|
||||
span.badge.badge-success(v-if='subscription.key !== "basic_earned"') {{ $t('buyGemsGoldCap', buyGemsGoldCap) }}
|
||||
li
|
||||
span.hint(:popover="$t('retainHistoryText')", popover-trigger='mouseenter', popover-placement='right') {{ $t('retainHistory') }}
|
||||
li
|
||||
span.hint(:popover="$t('doubleDropsText')", popover-trigger='mouseenter', popover-placement='right') {{ $t('doubleDrops') }}
|
||||
li
|
||||
span.hint(:popover="$t('mysteryItemText')", popover-trigger='mouseenter', popover-placement='right') {{ $t('mysteryItem') }}
|
||||
div(v-if='subscription.key !== "basic_earned"')
|
||||
.badge.badge-success {{ $t('mysticHourglass', mysticHourglass) }}
|
||||
.small.muted {{ $t('mysticHourglassText') }}
|
||||
li
|
||||
span.hint(:popover="$t('exclusiveJackalopePetText')", popover-trigger='mouseenter', popover-placement='right') {{ $t('exclusiveJackalopePet') }}
|
||||
li
|
||||
span.hint(:popover="$t('supportDevsText')", popover-trigger='mouseenter', popover-placement='right') {{ $t('supportDevs') }}
|
||||
|
||||
.col-6
|
||||
h2 Plan
|
||||
table.table.alert.alert-info(v-if='hasSubscription')
|
||||
tr(v-if='hasCanceledSubscription'): td.alert.alert-warning
|
||||
span.noninteractive-button.btn-danger {{ $t('canceledSubscription') }}
|
||||
i.glyphicon.glyphicon-time
|
||||
| {{ $t('subCanceled') }}
|
||||
strong {{dateTerminated}}
|
||||
tr(v-if='!hasCanceledSubscription'): td
|
||||
h4 {{ $t('subscribed') }}
|
||||
p(v-if='hasPlan && !hasGroupPlan') {{ $t('purchasedPlanId', purchasedPlanIdInfo) }}
|
||||
p(v-if='hasGroupPlan') {{ $t('youHaveGroupPlan') }}
|
||||
tr(v-if='user.purchased.plan.extraMonths'): td
|
||||
span.glyphicon.glyphicon-credit-card
|
||||
| {{ $t('purchasedPlanExtraMonths', purchasedPlanExtraMonthsDetails) }}
|
||||
tr(v-if='hasConsecutiveSubscription'): td
|
||||
span.glyphicon.glyphicon-forward
|
||||
| {{ $t('consecutiveSubscription') }}
|
||||
ul.list-unstyled
|
||||
li {{ $t('consecutiveMonths') }} {{user.purchased.plan.consecutive.count + user.purchased.plan.consecutive.offset}}
|
||||
li {{ $t('gemCapExtra') }} {{user.purchased.plan.consecutive.gemCapExtra}}
|
||||
li {{ $t('mysticHourglasses') }} {{user.purchased.plan.consecutive.trinkets}}
|
||||
|
||||
div(v-if='!hasSubscription || hasCanceledSubscription')
|
||||
h4(v-if='hasCanceledSubscription') {{ $t("resubscribe") }}
|
||||
.form-group.reduce-top-margin
|
||||
.radio(v-for='block in subscriptionBlocksOrdered', v-if="block.target !== 'group' && block.canSubscribe === true")
|
||||
label
|
||||
input(type="radio", name="subRadio", :value="block.key", v-model='subscription.key')
|
||||
span(v-if='block.original')
|
||||
span.label.label-success.line-through
|
||||
| ${{block.original }}
|
||||
| {{ $t('subscriptionRateText', {price: block.price, months: block.months}) }}
|
||||
span(v-if='!block.original')
|
||||
| {{ $t('subscriptionRateText', {price: block.price, months: block.months}) }}
|
||||
|
||||
.form-inline
|
||||
.form-group
|
||||
input.form-control(type='text', v-model='subscription.coupon', :placeholder="$t('couponPlaceholder')")
|
||||
.form-group
|
||||
button.btn.btn-primary(type='button', @click='applyCoupon(subscription.coupon)') {{ $t("apply") }}
|
||||
|
||||
div(v-if='hasSubscription')
|
||||
.btn.btn-primary(v-if='canEditCardDetails', @click='showStripeEdit()') {{ $t('subUpdateCard') }}
|
||||
.btn.btn-sm.btn-danger(v-if='canCancelSubscription && !loading', @click='cancelSubscriptionConfirm()') {{ $t('cancelSub') }}
|
||||
small(v-if='!canCancelSubscription && !hasCanceledSubscription', v-html='getCancelSubInfo()')
|
||||
|
||||
.subscribe-pay(v-if='!hasSubscription || hasCanceledSubscription')
|
||||
h3 {{ $t('subscribeUsing') }}
|
||||
.payments-column
|
||||
button.purchase.btn.btn-primary.payment-button.payment-item(@click='showStripe({subscription:subscription.key, coupon:subscription.coupon})', :disabled='!subscription.key')
|
||||
.svg-icon.credit-card-icon(v-html="icons.creditCardIcon")
|
||||
| {{ $t('card') }}
|
||||
button.btn.payment-item.paypal-checkout.payment-button(@click="openPaypal(paypalPurchaseLink, 'subscription')", :disabled='!subscription.key')
|
||||
|
|
||||
img(src='~@/assets/images/paypal-checkout.png', :alt="$t('paypal')")
|
||||
|
|
||||
amazon-button.payment-item(:amazon-data="{type: 'subscription', subscription: this.subscription.key, coupon: this.subscription.coupon}")
|
||||
.row
|
||||
.col-6
|
||||
h2(v-once) {{ $t('giftSubscription') }}
|
||||
ol
|
||||
li(v-once) {{ $t('giftSubscriptionText1') }}
|
||||
li(v-once) {{ $t('giftSubscriptionText2') }}
|
||||
li(v-once) {{ $t('giftSubscriptionText3') }}
|
||||
h4(v-once) {{ $t('giftSubscriptionText4') }}
|
||||
<template>
|
||||
<div class="standard-page">
|
||||
<h1>{{ $t('subscription') }}</h1><div class="row">
|
||||
<div class="col-6">
|
||||
<h2>{{ $t('benefits') }}</h2><ul>
|
||||
<li>
|
||||
<span
|
||||
class="hint"
|
||||
:popover="$t('buyGemsGoldText', {gemCostTranslation})"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
>{{ $t('buyGemsGold') }}</span><span
|
||||
v-if="subscription.key !== 'basic_earned'"
|
||||
class="badge badge-success"
|
||||
>{{ $t('buyGemsGoldCap', buyGemsGoldCap) }}</span>
|
||||
</li><li>
|
||||
<span
|
||||
class="hint"
|
||||
:popover="$t('retainHistoryText')"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
>{{ $t('retainHistory') }}</span>
|
||||
</li><li>
|
||||
<span
|
||||
class="hint"
|
||||
:popover="$t('doubleDropsText')"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
>{{ $t('doubleDrops') }}</span>
|
||||
</li><li>
|
||||
<span
|
||||
class="hint"
|
||||
:popover="$t('mysteryItemText')"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
>{{ $t('mysteryItem') }}</span><div v-if="subscription.key !== 'basic_earned'">
|
||||
<div class="badge badge-success">
|
||||
{{ $t('mysticHourglass', mysticHourglass) }}
|
||||
</div><div class="small muted">
|
||||
{{ $t('mysticHourglassText') }}
|
||||
</div>
|
||||
</div>
|
||||
</li><li>
|
||||
<span
|
||||
class="hint"
|
||||
:popover="$t('exclusiveJackalopePetText')"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
>{{ $t('exclusiveJackalopePet') }}</span>
|
||||
</li><li>
|
||||
<span
|
||||
class="hint"
|
||||
:popover="$t('supportDevsText')"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
>{{ $t('supportDevs') }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div><div class="col-6">
|
||||
<h2>Plan</h2><table
|
||||
v-if="hasSubscription"
|
||||
class="table alert alert-info"
|
||||
>
|
||||
<tr v-if="hasCanceledSubscription">
|
||||
<td class="alert alert-warning">
|
||||
<span class="noninteractive-button btn-danger">{{ $t('canceledSubscription') }}</span><i class="glyphicon glyphicon-time"></i> {{ $t('subCanceled') }} <strong>{{ dateTerminated }}</strong>
|
||||
</td>
|
||||
</tr><tr v-if="!hasCanceledSubscription">
|
||||
<td>
|
||||
<h4>{{ $t('subscribed') }}</h4><p v-if="hasPlan && !hasGroupPlan">
|
||||
{{ $t('purchasedPlanId', purchasedPlanIdInfo) }}
|
||||
</p><p v-if="hasGroupPlan">
|
||||
{{ $t('youHaveGroupPlan') }}
|
||||
</p>
|
||||
</td>
|
||||
</tr><tr v-if="user.purchased.plan.extraMonths">
|
||||
<td><span class="glyphicon glyphicon-credit-card"></span> {{ $t('purchasedPlanExtraMonths', purchasedPlanExtraMonthsDetails) }}</td>
|
||||
</tr><tr v-if="hasConsecutiveSubscription">
|
||||
<td>
|
||||
<span class="glyphicon glyphicon-forward"></span> {{ $t('consecutiveSubscription') }}<ul class="list-unstyled">
|
||||
<li>{{ $t('consecutiveMonths') }} {{ user.purchased.plan.consecutive.count + user.purchased.plan.consecutive.offset }}</li><li>{{ $t('gemCapExtra') }} {{ user.purchased.plan.consecutive.gemCapExtra }}</li><li>{{ $t('mysticHourglasses') }} {{ user.purchased.plan.consecutive.trinkets }}</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table><div v-if="!hasSubscription || hasCanceledSubscription">
|
||||
<h4 v-if="hasCanceledSubscription">
|
||||
{{ $t("resubscribe") }}
|
||||
</h4><div class="form-group reduce-top-margin">
|
||||
<div
|
||||
v-for="block in subscriptionBlocksOrdered"
|
||||
v-if="block.target !== 'group' && block.canSubscribe === true"
|
||||
class="radio"
|
||||
>
|
||||
<label><input
|
||||
v-model="subscription.key"
|
||||
type="radio"
|
||||
name="subRadio"
|
||||
:value="block.key"
|
||||
><span v-if="block.original"><span class="label label-success line-through">${{ block.original }}</span>{{ $t('subscriptionRateText', {price: block.price, months: block.months}) }}</span><span v-if="!block.original">{{ $t('subscriptionRateText', {price: block.price, months: block.months}) }}</span></label>
|
||||
</div>
|
||||
</div><div class="form-inline">
|
||||
<div class="form-group">
|
||||
<input
|
||||
v-model="subscription.coupon"
|
||||
class="form-control"
|
||||
type="text"
|
||||
:placeholder="$t('couponPlaceholder')"
|
||||
>
|
||||
</div><div class="form-group">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
type="button"
|
||||
@click="applyCoupon(subscription.coupon)"
|
||||
>
|
||||
{{ $t("apply") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><div v-if="hasSubscription">
|
||||
<div
|
||||
v-if="canEditCardDetails"
|
||||
class="btn btn-primary"
|
||||
@click="showStripeEdit()"
|
||||
>
|
||||
{{ $t('subUpdateCard') }}
|
||||
</div><div
|
||||
v-if="canCancelSubscription && !loading"
|
||||
class="btn btn-sm btn-danger"
|
||||
@click="cancelSubscriptionConfirm()"
|
||||
>
|
||||
{{ $t('cancelSub') }}
|
||||
</div><small
|
||||
v-if="!canCancelSubscription && !hasCanceledSubscription"
|
||||
v-html="getCancelSubInfo()"
|
||||
></small>
|
||||
</div><div
|
||||
v-if="!hasSubscription || hasCanceledSubscription"
|
||||
class="subscribe-pay"
|
||||
>
|
||||
<h3>{{ $t('subscribeUsing') }}</h3><div class="payments-column">
|
||||
<button
|
||||
class="purchase btn btn-primary payment-button payment-item"
|
||||
:disabled="!subscription.key"
|
||||
@click="showStripe({subscription:subscription.key, coupon:subscription.coupon})"
|
||||
>
|
||||
<div
|
||||
class="svg-icon credit-card-icon"
|
||||
v-html="icons.creditCardIcon"
|
||||
></div>{{ $t('card') }}
|
||||
</button><button
|
||||
class="btn payment-item paypal-checkout payment-button"
|
||||
:disabled="!subscription.key"
|
||||
@click="openPaypal(paypalPurchaseLink, 'subscription')"
|
||||
>
|
||||
<img
|
||||
src="~@/assets/images/paypal-checkout.png"
|
||||
:alt="$t('paypal')"
|
||||
>
|
||||
</button><amazon-button
|
||||
class="payment-item"
|
||||
:amazon-data="{type: 'subscription', subscription: this.subscription.key, coupon: this.subscription.coupon}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="row">
|
||||
<div class="col-6">
|
||||
<h2 v-once>
|
||||
{{ $t('giftSubscription') }}
|
||||
</h2><ol>
|
||||
<li v-once>
|
||||
{{ $t('giftSubscriptionText1') }}
|
||||
</li><li v-once>
|
||||
{{ $t('giftSubscriptionText2') }}
|
||||
</li><li v-once>
|
||||
{{ $t('giftSubscriptionText3') }}
|
||||
</li>
|
||||
</ol><h4 v-once>
|
||||
{{ $t('giftSubscriptionText4') }}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -1,33 +1,78 @@
|
||||
<template lang="pug">
|
||||
div
|
||||
.form-group
|
||||
.d-flex.align-items-center
|
||||
label.mr-3(for='displayName') {{ $t('displayName') }}
|
||||
.flex-grow-1
|
||||
input#displayName.form-control(
|
||||
type='text',
|
||||
:placeholder="$t('newDisplayName')",
|
||||
v-model='temporaryDisplayName',
|
||||
@blur='restoreEmptyDisplayName()',
|
||||
:class='{"is-invalid input-invalid": displayNameInvalid, "input-valid": displayNameValid, "text-darker": temporaryDisplayName.length > 0}')
|
||||
.mb-3(v-if="displayNameIssues.length > 0")
|
||||
.input-error.text-center(v-for="issue in displayNameIssues") {{ issue }}
|
||||
.form-group
|
||||
.d-flex.align-items-center
|
||||
label.mr-3(for='username') {{ $t('username') }}
|
||||
.flex-grow-1
|
||||
.input-group-prepend.input-group-text @
|
||||
input#username.form-control(
|
||||
type='text',
|
||||
:placeholder="$t('newUsername')",
|
||||
v-model='temporaryUsername',
|
||||
@blur='restoreEmptyUsername()',
|
||||
:class='{"is-invalid input-invalid": usernameInvalid, "input-valid": usernameValid, "text-darker": temporaryUsername.length > 0}')
|
||||
.mb-3(v-if="usernameIssues.length > 0")
|
||||
.input-error.text-center(v-for="issue in usernameIssues") {{ issue }}
|
||||
.small.text-center.mb-3(v-if='!avatarIntro') {{ $t('usernameLimitations') }}
|
||||
.row.justify-content-center
|
||||
button.btn.btn-primary(type='submit', @click='submitNames()', :class='{disabled: usernameCannotSubmit}', :disabled='usernameCannotSubmit') {{ $t(avatarIntro ? 'getStarted' : 'saveAndConfirm') }}
|
||||
<template>
|
||||
<div>
|
||||
<div class="form-group">
|
||||
<div class="d-flex align-items-center">
|
||||
<label
|
||||
class="mr-3"
|
||||
for="displayName"
|
||||
>{{ $t('displayName') }}</label><div class="flex-grow-1">
|
||||
<input
|
||||
id="displayName"
|
||||
v-model="temporaryDisplayName"
|
||||
class="form-control"
|
||||
type="text"
|
||||
:placeholder="$t('newDisplayName')"
|
||||
:class="{'is-invalid input-invalid': displayNameInvalid, 'input-valid': displayNameValid, 'text-darker': temporaryDisplayName.length > 0}"
|
||||
@blur="restoreEmptyDisplayName()"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div><div
|
||||
v-if="displayNameIssues.length > 0"
|
||||
class="mb-3"
|
||||
>
|
||||
<div
|
||||
v-for="issue in displayNameIssues"
|
||||
class="input-error text-center"
|
||||
>
|
||||
{{ issue }}
|
||||
</div>
|
||||
</div><div class="form-group">
|
||||
<div class="d-flex align-items-center">
|
||||
<label
|
||||
class="mr-3"
|
||||
for="username"
|
||||
>{{ $t('username') }}</label><div class="flex-grow-1">
|
||||
<div class="input-group-prepend input-group-text">
|
||||
@<input
|
||||
id="username"
|
||||
v-model="temporaryUsername"
|
||||
class="form-control"
|
||||
type="text"
|
||||
:placeholder="$t('newUsername')"
|
||||
:class="{'is-invalid input-invalid': usernameInvalid, 'input-valid': usernameValid, 'text-darker': temporaryUsername.length > 0}"
|
||||
@blur="restoreEmptyUsername()"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div
|
||||
v-if="usernameIssues.length > 0"
|
||||
class="mb-3"
|
||||
>
|
||||
<div
|
||||
v-for="issue in usernameIssues"
|
||||
class="input-error text-center"
|
||||
>
|
||||
{{ issue }}
|
||||
</div>
|
||||
</div><div
|
||||
v-if="!avatarIntro"
|
||||
class="small text-center mb-3"
|
||||
>
|
||||
{{ $t('usernameLimitations') }}
|
||||
</div><div class="row justify-content-center">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
type="submit"
|
||||
:class="{disabled: usernameCannotSubmit}"
|
||||
:disabled="usernameCannotSubmit"
|
||||
@click="submitNames()"
|
||||
>
|
||||
{{ $t(avatarIntro ? 'getStarted' : 'saveAndConfirm') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,19 +1,29 @@
|
||||
<template lang="pug">
|
||||
b-modal#verify-username(
|
||||
size="m",
|
||||
:no-close-on-backdrop="true",
|
||||
:no-close-on-esc="true",
|
||||
:hide-header="true",
|
||||
:hide-footer="true",
|
||||
@hide="$emit('hide')",
|
||||
).d-flex
|
||||
div.nametag-header(v-html='icons.helloNametag')
|
||||
h2.text-center {{ $t('usernameTime') }}
|
||||
p.text-center(v-html="$t('usernameInfo')")
|
||||
username-form
|
||||
.scene_veteran_pets.center-block
|
||||
.small.text-center.mb-3 {{ $t('verifyUsernameVeteranPet') }}
|
||||
.small.text-center.tos-footer(v-html="$t('usernameTOSRequirements')")
|
||||
<template>
|
||||
<b-modal
|
||||
id="verify-username"
|
||||
class="d-flex"
|
||||
size="m"
|
||||
:no-close-on-backdrop="true"
|
||||
:no-close-on-esc="true"
|
||||
:hide-header="true"
|
||||
:hide-footer="true"
|
||||
@hide="$emit('hide')"
|
||||
>
|
||||
<div
|
||||
class="nametag-header"
|
||||
v-html="icons.helloNametag"
|
||||
></div><h2 class="text-center">
|
||||
{{ $t('usernameTime') }}
|
||||
</h2><p
|
||||
class="text-center"
|
||||
v-html="$t('usernameInfo')"
|
||||
></p><username-form /><div class="scene_veteran_pets center-block"></div><div class="small text-center mb-3">
|
||||
{{ $t('verifyUsernameVeteranPet') }}
|
||||
</div><div
|
||||
class="small text-center tos-footer"
|
||||
v-html="$t('usernameTOSRequirements')"
|
||||
></div>
|
||||
</b-modal>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
Reference in New Issue
Block a user