html format other components
This commit is contained in:
Matteo Pagliazzi
@@ -1,45 +1,73 @@
|
||||
<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">
|
||||
<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
|
||||
</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>
|
||||
</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>
|
||||
>{{ $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>
|
||||
>{{ $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') }}
|
||||
>{{ $t('dataTool') }}</a>
|
||||
<br>
|
||||
{{ $t('dataToolDesc') }}
|
||||
</li>
|
||||
</ul><hr>
|
||||
<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">
|
||||
</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>
|
||||
<th>{{ $t('enabled') }}</th>
|
||||
<th>{{ $t('webhookURL') }}</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(webhook, index) in user.webhooks">
|
||||
<td>
|
||||
<input
|
||||
@@ -47,25 +75,31 @@
|
||||
type="checkbox"
|
||||
@change="saveWebhook(webhook, index)"
|
||||
>
|
||||
</td><td>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
v-model="webhook.url"
|
||||
class="form-control"
|
||||
type="url"
|
||||
>
|
||||
</td><td>
|
||||
</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
|
||||
>
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="form-horizontal">
|
||||
<div class="form-group col-sm-10">
|
||||
@@ -75,7 +109,8 @@
|
||||
type="url"
|
||||
:placeholder="$t('webhookURL')"
|
||||
>
|
||||
</div><div class="col-sm-2">
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<button
|
||||
class="btn btn-sm btn-primary"
|
||||
type="submit"
|
||||
|
||||
@@ -1,7 +1,15 @@
|
||||
<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>
|
||||
<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>
|
||||
|
||||
@@ -6,7 +6,12 @@
|
||||
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">
|
||||
<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"
|
||||
@@ -14,25 +19,29 @@
|
||||
type="password"
|
||||
>
|
||||
</div>
|
||||
</div><div class="row mt-3">
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div
|
||||
id="feedback"
|
||||
class="col-12 form-group"
|
||||
>
|
||||
<label for="feedbackTextArea">{{ $t('feedback') }}</label><textarea
|
||||
<label for="feedbackTextArea">{{ $t('feedback') }}</label>
|
||||
<textarea
|
||||
id="feedbackTextArea"
|
||||
v-model="feedback"
|
||||
class="form-control"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="modal-footer">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="close()"
|
||||
>
|
||||
{{ $t('neverMind') }}
|
||||
</button><button
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
:disabled="!password"
|
||||
@click="deleteAccount()"
|
||||
|
||||
@@ -8,38 +8,44 @@
|
||||
:class="{'active': $route.name === 'site'}"
|
||||
>
|
||||
{{ $t('site') }}
|
||||
</router-link><router-link
|
||||
</router-link>
|
||||
<router-link
|
||||
class="nav-link"
|
||||
:to="{name: 'api'}"
|
||||
:class="{'active': $route.name === 'api'}"
|
||||
>
|
||||
{{ $t('API') }}
|
||||
</router-link><router-link
|
||||
</router-link>
|
||||
<router-link
|
||||
class="nav-link"
|
||||
:to="{name: 'dataExport'}"
|
||||
:class="{'active': $route.name === 'dataExport'}"
|
||||
>
|
||||
{{ $t('dataExport') }}
|
||||
</router-link><router-link
|
||||
</router-link>
|
||||
<router-link
|
||||
class="nav-link"
|
||||
:to="{name: 'promoCode'}"
|
||||
:class="{'active': $route.name === 'promoCode'}"
|
||||
>
|
||||
{{ $t('promoCode') }}
|
||||
</router-link><router-link
|
||||
</router-link>
|
||||
<router-link
|
||||
class="nav-link"
|
||||
:to="{name: 'subscription'}"
|
||||
:class="{'active': $route.name === 'subscription'}"
|
||||
>
|
||||
{{ $t('subscription') }}
|
||||
</router-link><router-link
|
||||
</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">
|
||||
</secondary-menu>
|
||||
<div class="col-12">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,34 +2,60 @@
|
||||
<div class="row standard-page">
|
||||
<div class="col-12">
|
||||
<h1>{{ $t('notifications') }}</h1>
|
||||
</div><div class="col-12">
|
||||
</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>
|
||||
<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">
|
||||
</td>
|
||||
<td v-if="onlyEmailsIds.indexOf(notification) === -1">
|
||||
<input
|
||||
v-model="user.preferences.pushNotifications[notification]"
|
||||
type="checkbox"
|
||||
@change="set('pushNotifications', notification)"
|
||||
><hr>
|
||||
>
|
||||
<hr>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<div class="row standard-page">
|
||||
<div class="col-md-6">
|
||||
<h2>{{ $t('promoCode') }}</h2><div
|
||||
<h2>{{ $t('promoCode') }}</h2>
|
||||
<div
|
||||
class="form-inline"
|
||||
role="form"
|
||||
>
|
||||
@@ -10,14 +11,21 @@
|
||||
class="form-control"
|
||||
type="text"
|
||||
:placeholder="$t('promoPlaceholder')"
|
||||
><button
|
||||
>
|
||||
<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
|
||||
</div>
|
||||
<div>
|
||||
<small>{{ $t('couponText') }}</small>
|
||||
</div>
|
||||
<div v-if="user.contributor.sudo">
|
||||
<hr>
|
||||
<h4>{{ $t('generateCodes') }}</h4>
|
||||
<div
|
||||
class="form"
|
||||
role="form"
|
||||
>
|
||||
@@ -28,21 +36,24 @@
|
||||
type="text"
|
||||
placeholder="Event code (eg, 'wondercon')"
|
||||
>
|
||||
</div><div class="form-group">
|
||||
</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">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
type="submit"
|
||||
@click="generateCodes(codes)"
|
||||
>
|
||||
{{ $t('generate') }}
|
||||
</button><a
|
||||
</button>
|
||||
<a
|
||||
class="btn btn-secondary"
|
||||
:href="getCodesUrl"
|
||||
>{{ $t('getCodes') }}</a>
|
||||
|
||||
@@ -5,13 +5,16 @@
|
||||
:hide-footer="true"
|
||||
size="md"
|
||||
>
|
||||
<p>{{ $t('resetText1') }}</p><p>{{ $t('resetText2') }}</p><div class="modal-footer">
|
||||
<p>{{ $t('resetText1') }}</p>
|
||||
<p>{{ $t('resetText2') }}</p>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="close()"
|
||||
>
|
||||
{{ $t('neverMind') }}
|
||||
</button><button
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
@click="reset()"
|
||||
>
|
||||
|
||||
@@ -5,11 +5,15 @@
|
||||
: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">
|
||||
<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">
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.stats.hp"
|
||||
class="form-control"
|
||||
@@ -18,10 +22,12 @@
|
||||
data-for="stats.hp"
|
||||
>
|
||||
</div>
|
||||
</div><div class="form-group row">
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<label class="control-label">{{ $t('experience') }}</label>
|
||||
</div><div class="col-sm-9">
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.stats.exp"
|
||||
class="form-control"
|
||||
@@ -30,10 +36,12 @@
|
||||
data-for="stats.exp"
|
||||
>
|
||||
</div>
|
||||
</div><div class="form-group row">
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<label class="control-label">{{ $t('gold') }}</label>
|
||||
</div><div class="col-sm-9">
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.stats.gp"
|
||||
class="form-control"
|
||||
@@ -41,11 +49,14 @@
|
||||
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>
|
||||
<!--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">
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.stats.mp"
|
||||
class="form-control"
|
||||
@@ -54,10 +65,12 @@
|
||||
data-for="stats.mp"
|
||||
>
|
||||
</div>
|
||||
</div><div class="form-group row">
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<label class="control-label">{{ $t('level') }}</label>
|
||||
</div><div class="col-sm-9">
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.stats.lvl"
|
||||
class="form-control"
|
||||
@@ -65,10 +78,13 @@
|
||||
data-for="stats.lvl"
|
||||
>
|
||||
</div>
|
||||
</div><h3>{{ $t('achievements') }}</h3><div class="form-group row">
|
||||
</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">
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.achievements.streak"
|
||||
class="form-control"
|
||||
@@ -77,13 +93,15 @@
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="modal-footer">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
@click="close()"
|
||||
>
|
||||
{{ $t('discardChanges') }}
|
||||
</button><button
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="restore()"
|
||||
>
|
||||
|
||||
@@ -1,10 +1,15 @@
|
||||
<template>
|
||||
<div class="row standard-page">
|
||||
<restore-modal /><reset-modal /><delete-modal /><h1 class="col-12">
|
||||
<restore-modal />
|
||||
<reset-modal />
|
||||
<delete-modal />
|
||||
<h1 class="col-12">
|
||||
{{ $t('settings') }}
|
||||
</h1><div class="col-sm-6">
|
||||
</h1>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-horizontal">
|
||||
<h5>{{ $t('language') }}</h5><select
|
||||
<h5>{{ $t('language') }}</h5>
|
||||
<select
|
||||
class="form-control"
|
||||
:value="user.preferences.language"
|
||||
@change="changeLanguage($event)"
|
||||
@@ -15,9 +20,17 @@
|
||||
>
|
||||
{{ 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
|
||||
</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')"
|
||||
@@ -29,9 +42,12 @@
|
||||
{{ dateFormat }}
|
||||
</option>
|
||||
</select>
|
||||
</div><hr><div class="form-horizontal">
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<h5>{{ $t('audioTheme') }}</h5><select
|
||||
<h5>{{ $t('audioTheme') }}</h5>
|
||||
<select
|
||||
v-model="user.preferences.sound"
|
||||
class="form-control"
|
||||
@change="changeAudioTheme"
|
||||
@@ -43,88 +59,122 @@
|
||||
{{ $t(`audioTheme_${sound}`) }}
|
||||
</option>
|
||||
</select>
|
||||
</div><button
|
||||
</div>
|
||||
<button
|
||||
v-once
|
||||
class="btn btn-primary btn-xs"
|
||||
@click="playAudio"
|
||||
>
|
||||
{{ $t('demo') }}
|
||||
</button>
|
||||
</div><hr><div
|
||||
</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
|
||||
<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>
|
||||
</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
|
||||
<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">
|
||||
<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">
|
||||
>
|
||||
<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">
|
||||
>
|
||||
<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">
|
||||
>
|
||||
<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
|
||||
>
|
||||
<label>{{ $t('suppressStreakModal') }}</label>
|
||||
</div>
|
||||
<hr>
|
||||
<button
|
||||
class="btn btn-primary mr-2 mb-2"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
@@ -132,7 +182,8 @@
|
||||
@click="showBailey()"
|
||||
>
|
||||
{{ $t('showBailey') }}
|
||||
</button><button
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary mr-2 mb-2"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
@@ -140,7 +191,8 @@
|
||||
@click="openRestoreModal()"
|
||||
>
|
||||
{{ $t('fixVal') }}
|
||||
</button><button
|
||||
</button>
|
||||
<button
|
||||
v-if="user.preferences.disableClasses == true"
|
||||
class="btn btn-primary mb-2"
|
||||
popover-trigger="mouseenter"
|
||||
@@ -149,10 +201,14 @@
|
||||
@click="changeClassForUser(false)"
|
||||
>
|
||||
{{ $t('enableClass') }}
|
||||
</button><hr><div>
|
||||
<h5>{{ $t('customDayStart') }}</h5><div class="alert alert-warning">
|
||||
</button>
|
||||
<hr>
|
||||
<div>
|
||||
<h5>{{ $t('customDayStart') }}</h5>
|
||||
<div class="alert alert-warning">
|
||||
{{ $t('customDayStartInfo1') }}
|
||||
</div><div class="form-horizontal">
|
||||
</div>
|
||||
<div class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<div class="col-7">
|
||||
<select
|
||||
@@ -166,7 +222,8 @@
|
||||
{{ option.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div><div class="col-5">
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<button
|
||||
class="btn btn-block btn-primary mt-1"
|
||||
:disabled="newDayStart === user.preferences.dayStart"
|
||||
@@ -176,17 +233,23 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><hr>
|
||||
</div><h5>{{ $t('timezone') }}</h5><div class="form-horizontal">
|
||||
</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>
|
||||
<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>
|
||||
<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">
|
||||
@@ -196,13 +259,15 @@
|
||||
@click="socialAuth(network.key, user)"
|
||||
>
|
||||
{{ $t('registerWithSocial', {network: network.name}) }}
|
||||
</button><button
|
||||
</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
|
||||
</button>
|
||||
<button
|
||||
v-if="hasBackupAuthOption(network.key) && user.auth[network.key].id"
|
||||
class="btn btn-danger"
|
||||
@click="deleteSocialAuth(network)"
|
||||
@@ -210,8 +275,11 @@
|
||||
{{ $t('detachSocial', {network: network.name}) }}
|
||||
</button>
|
||||
</li>
|
||||
</ul><hr><div v-if="!user.auth.local.email">
|
||||
<p>{{ $t('addLocalAuth') }}</p><div
|
||||
</ul>
|
||||
<hr>
|
||||
<div v-if="!user.auth.local.email">
|
||||
<p>{{ $t('addLocalAuth') }}</p>
|
||||
<div
|
||||
class="form"
|
||||
name="localAuth"
|
||||
novalidate="novalidate"
|
||||
@@ -224,7 +292,8 @@
|
||||
:placeholder="$t('email')"
|
||||
required="required"
|
||||
>
|
||||
</div><div class="form-group">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input
|
||||
v-model="localAuth.password"
|
||||
class="form-control"
|
||||
@@ -232,7 +301,8 @@
|
||||
:placeholder="$t('password')"
|
||||
required="required"
|
||||
>
|
||||
</div><div class="form-group">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input
|
||||
v-model="localAuth.confirmPassword"
|
||||
class="form-control"
|
||||
@@ -240,7 +310,8 @@
|
||||
:placeholder="$t('confirmPass')"
|
||||
required="required"
|
||||
>
|
||||
</div><button
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
type="submit"
|
||||
@click="addLocalAuth()"
|
||||
@@ -249,8 +320,10 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="usersettings">
|
||||
<h5>{{ $t('changeDisplayName') }}</h5><div
|
||||
</div>
|
||||
<div class="usersettings">
|
||||
<h5>{{ $t('changeDisplayName') }}</h5>
|
||||
<div
|
||||
class="form"
|
||||
name="changeDisplayName"
|
||||
novalidate="novalidate"
|
||||
@@ -263,7 +336,8 @@
|
||||
type="text"
|
||||
:placeholder="$t('newDisplayName')"
|
||||
:class="{'is-invalid input-invalid': displayNameInvalid}"
|
||||
><div
|
||||
>
|
||||
<div
|
||||
v-if="displayNameIssues.length > 0"
|
||||
class="mb-3"
|
||||
>
|
||||
@@ -274,7 +348,8 @@
|
||||
{{ issue }}
|
||||
</div>
|
||||
</div>
|
||||
</div><button
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
type="submit"
|
||||
:disabled="displayNameCannotSubmit"
|
||||
@@ -282,7 +357,9 @@
|
||||
>
|
||||
{{ $t('submit') }}
|
||||
</button>
|
||||
</div><h5>{{ $t('changeUsername') }}</h5><div
|
||||
</div>
|
||||
<h5>{{ $t('changeUsername') }}</h5>
|
||||
<div
|
||||
class="form"
|
||||
name="changeUsername"
|
||||
novalidate="novalidate"
|
||||
@@ -292,14 +369,16 @@
|
||||
class="iconalert iconalert-success"
|
||||
>
|
||||
{{ $t('usernameVerifiedConfirmation', {'username': user.auth.local.username}) }}
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="iconalert iconalert-warning"
|
||||
>
|
||||
<div class="align-middle">
|
||||
<span>{{ $t('usernameNotVerified') }}</span>
|
||||
</div>
|
||||
</div><div class="form-group">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input
|
||||
id="changeUsername"
|
||||
v-model="usernameUpdates.username"
|
||||
@@ -308,13 +387,16 @@
|
||||
:placeholder="$t('newUsername')"
|
||||
:class="{'is-invalid input-invalid': usernameInvalid}"
|
||||
@blur="restoreEmptyUsername()"
|
||||
><div
|
||||
>
|
||||
<div
|
||||
v-for="issue in usernameIssues"
|
||||
class="input-error"
|
||||
>
|
||||
{{ issue }}
|
||||
</div><small class="form-text text-muted">{{ $t('changeUsernameDisclaimer') }}</small>
|
||||
</div><button
|
||||
</div>
|
||||
<small class="form-text text-muted">{{ $t('changeUsernameDisclaimer') }}</small>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
type="submit"
|
||||
:disabled="usernameCannotSubmit"
|
||||
@@ -322,9 +404,11 @@
|
||||
>
|
||||
{{ $t('saveAndConfirm') }}
|
||||
</button>
|
||||
</div><h5 v-if="user.auth.local.email">
|
||||
</div>
|
||||
<h5 v-if="user.auth.local.email">
|
||||
{{ $t('changeEmail') }}
|
||||
</h5><div
|
||||
</h5>
|
||||
<div
|
||||
v-if="user.auth.local.email"
|
||||
class="form"
|
||||
name="changeEmail"
|
||||
@@ -338,23 +422,27 @@
|
||||
type="text"
|
||||
:placeholder="$t('newEmail')"
|
||||
>
|
||||
</div><div class="form-group">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input
|
||||
v-model="emailUpdates.password"
|
||||
class="form-control"
|
||||
type="password"
|
||||
:placeholder="$t('password')"
|
||||
>
|
||||
</div><button
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
type="submit"
|
||||
@click="changeUser('email', emailUpdates)"
|
||||
>
|
||||
{{ $t('submit') }}
|
||||
</button>
|
||||
</div><h5 v-if="user.auth.local.email">
|
||||
</div>
|
||||
<h5 v-if="user.auth.local.email">
|
||||
{{ $t('changePass') }}
|
||||
</h5><div
|
||||
</h5>
|
||||
<div
|
||||
v-if="user.auth.local.email"
|
||||
class="form"
|
||||
name="changePassword"
|
||||
@@ -368,30 +456,36 @@
|
||||
type="password"
|
||||
:placeholder="$t('oldPass')"
|
||||
>
|
||||
</div><div class="form-group">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input
|
||||
v-model="passwordUpdates.newPassword"
|
||||
class="form-control"
|
||||
type="password"
|
||||
:placeholder="$t('newPass')"
|
||||
>
|
||||
</div><div class="form-group">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input
|
||||
v-model="passwordUpdates.confirmPassword"
|
||||
class="form-control"
|
||||
type="password"
|
||||
:placeholder="$t('confirmPass')"
|
||||
>
|
||||
</div><button
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
type="submit"
|
||||
@click="changeUser('password', passwordUpdates)"
|
||||
>
|
||||
{{ $t('submit') }}
|
||||
</button>
|
||||
</div><hr>
|
||||
</div><div>
|
||||
<h5>{{ $t('dangerZone') }}</h5><div>
|
||||
</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"
|
||||
@@ -400,7 +494,8 @@
|
||||
@click="openResetModal()"
|
||||
>
|
||||
{{ $t('resetAccount') }}
|
||||
</button><button
|
||||
</button>
|
||||
<button
|
||||
v-b-popover.hover.auto="$t('deleteAccPop')"
|
||||
class="btn btn-danger mb-2"
|
||||
popover-trigger="mouseenter"
|
||||
|
||||
@@ -1,53 +1,63 @@
|
||||
<template>
|
||||
<div class="standard-page">
|
||||
<h1>{{ $t('subscription') }}</h1><div class="row">
|
||||
<h1>{{ $t('subscription') }}</h1>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<h2>{{ $t('benefits') }}</h2><ul>
|
||||
<h2>{{ $t('benefits') }}</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<span
|
||||
class="hint"
|
||||
:popover="$t('buyGemsGoldText', {gemCostTranslation})"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
>{{ $t('buyGemsGold') }}</span><span
|
||||
>{{ $t('buyGemsGold') }}</span>
|
||||
<span
|
||||
v-if="subscription.key !== 'basic_earned'"
|
||||
class="badge badge-success"
|
||||
>{{ $t('buyGemsGoldCap', buyGemsGoldCap) }}</span>
|
||||
</li><li>
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
class="hint"
|
||||
:popover="$t('retainHistoryText')"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
>{{ $t('retainHistory') }}</span>
|
||||
</li><li>
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
class="hint"
|
||||
:popover="$t('doubleDropsText')"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
>{{ $t('doubleDrops') }}</span>
|
||||
</li><li>
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
class="hint"
|
||||
:popover="$t('mysteryItemText')"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
>{{ $t('mysteryItem') }}</span><div v-if="subscription.key !== 'basic_earned'">
|
||||
>{{ $t('mysteryItem') }}</span>
|
||||
<div v-if="subscription.key !== 'basic_earned'">
|
||||
<div class="badge badge-success">
|
||||
{{ $t('mysticHourglass', mysticHourglass) }}
|
||||
</div><div class="small muted">
|
||||
</div>
|
||||
<div class="small muted">
|
||||
{{ $t('mysticHourglassText') }}
|
||||
</div>
|
||||
</div>
|
||||
</li><li>
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
class="hint"
|
||||
:popover="$t('exclusiveJackalopePetText')"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
>{{ $t('exclusiveJackalopePet') }}</span>
|
||||
</li><li>
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
class="hint"
|
||||
:popover="$t('supportDevsText')"
|
||||
@@ -56,49 +66,78 @@
|
||||
>{{ $t('supportDevs') }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div><div class="col-6">
|
||||
<h2>Plan</h2><table
|
||||
</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>
|
||||
<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">
|
||||
</tr>
|
||||
<tr v-if="!hasCanceledSubscription">
|
||||
<td>
|
||||
<h4>{{ $t('subscribed') }}</h4><p v-if="hasPlan && !hasGroupPlan">
|
||||
<h4>{{ $t('subscribed') }}</h4>
|
||||
<p v-if="hasPlan && !hasGroupPlan">
|
||||
{{ $t('purchasedPlanId', purchasedPlanIdInfo) }}
|
||||
</p><p v-if="hasGroupPlan">
|
||||
</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">
|
||||
</tr>
|
||||
<tr v-if="user.purchased.plan.extraMonths">
|
||||
<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>
|
||||
<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">
|
||||
</table>
|
||||
<div v-if="!hasSubscription || hasCanceledSubscription">
|
||||
<h4 v-if="hasCanceledSubscription">
|
||||
{{ $t("resubscribe") }}
|
||||
</h4><div class="form-group reduce-top-margin">
|
||||
</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>
|
||||
<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>
|
||||
<div class="form-inline">
|
||||
<div class="form-group">
|
||||
<input
|
||||
v-model="subscription.coupon"
|
||||
@@ -106,7 +145,8 @@
|
||||
type="text"
|
||||
:placeholder="$t('couponPlaceholder')"
|
||||
>
|
||||
</div><div class="form-group">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
type="button"
|
||||
@@ -116,28 +156,33 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><div v-if="hasSubscription">
|
||||
</div>
|
||||
<div v-if="hasSubscription">
|
||||
<div
|
||||
v-if="canEditCardDetails"
|
||||
class="btn btn-primary"
|
||||
@click="showStripeEdit()"
|
||||
>
|
||||
{{ $t('subUpdateCard') }}
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="canCancelSubscription && !loading"
|
||||
class="btn btn-sm btn-danger"
|
||||
@click="cancelSubscriptionConfirm()"
|
||||
>
|
||||
{{ $t('cancelSub') }}
|
||||
</div><small
|
||||
</div>
|
||||
<small
|
||||
v-if="!canCancelSubscription && !hasCanceledSubscription"
|
||||
v-html="getCancelSubInfo()"
|
||||
></small>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="!hasSubscription || hasCanceledSubscription"
|
||||
class="subscribe-pay"
|
||||
>
|
||||
<h3>{{ $t('subscribeUsing') }}</h3><div class="payments-column">
|
||||
<h3>{{ $t('subscribeUsing') }}</h3>
|
||||
<div class="payments-column">
|
||||
<button
|
||||
class="purchase btn btn-primary payment-button payment-item"
|
||||
:disabled="!subscription.key"
|
||||
@@ -146,36 +191,45 @@
|
||||
<div
|
||||
class="svg-icon credit-card-icon"
|
||||
v-html="icons.creditCardIcon"
|
||||
></div>{{ $t('card') }}
|
||||
</button><button
|
||||
></div>
|
||||
{{ $t('card') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn payment-item paypal-checkout payment-button"
|
||||
:disabled="!subscription.key"
|
||||
@click="openPaypal(paypalPurchaseLink, 'subscription')"
|
||||
>
|
||||
<img
|
||||
|
||||
<img
|
||||
src="~@/assets/images/paypal-checkout.png"
|
||||
:alt="$t('paypal')"
|
||||
>
|
||||
</button><amazon-button
|
||||
</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>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<h2 v-once>
|
||||
{{ $t('giftSubscription') }}
|
||||
</h2><ol>
|
||||
</h2>
|
||||
<ol>
|
||||
<li v-once>
|
||||
{{ $t('giftSubscriptionText1') }}
|
||||
</li><li v-once>
|
||||
</li>
|
||||
<li v-once>
|
||||
{{ $t('giftSubscriptionText2') }}
|
||||
</li><li v-once>
|
||||
</li>
|
||||
<li v-once>
|
||||
{{ $t('giftSubscriptionText3') }}
|
||||
</li>
|
||||
</ol><h4 v-once>
|
||||
</ol>
|
||||
<h4 v-once>
|
||||
{{ $t('giftSubscriptionText4') }}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,8 @@
|
||||
<label
|
||||
class="mr-3"
|
||||
for="displayName"
|
||||
>{{ $t('displayName') }}</label><div class="flex-grow-1">
|
||||
>{{ $t('displayName') }}</label>
|
||||
<div class="flex-grow-1">
|
||||
<input
|
||||
id="displayName"
|
||||
v-model="temporaryDisplayName"
|
||||
@@ -17,7 +18,8 @@
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="displayNameIssues.length > 0"
|
||||
class="mb-3"
|
||||
>
|
||||
@@ -27,14 +29,17 @@
|
||||
>
|
||||
{{ issue }}
|
||||
</div>
|
||||
</div><div class="form-group">
|
||||
</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">
|
||||
>{{ $t('username') }}</label>
|
||||
<div class="flex-grow-1">
|
||||
<div class="input-group-prepend input-group-text">
|
||||
@<input
|
||||
@
|
||||
<input
|
||||
id="username"
|
||||
v-model="temporaryUsername"
|
||||
class="form-control"
|
||||
@@ -46,7 +51,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="usernameIssues.length > 0"
|
||||
class="mb-3"
|
||||
>
|
||||
@@ -56,12 +62,14 @@
|
||||
>
|
||||
{{ issue }}
|
||||
</div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="!avatarIntro"
|
||||
class="small text-center mb-3"
|
||||
>
|
||||
{{ $t('usernameLimitations') }}
|
||||
</div><div class="row justify-content-center">
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
type="submit"
|
||||
|
||||
@@ -12,14 +12,20 @@
|
||||
<div
|
||||
class="nametag-header"
|
||||
v-html="icons.helloNametag"
|
||||
></div><h2 class="text-center">
|
||||
></div>
|
||||
<h2 class="text-center">
|
||||
{{ $t('usernameTime') }}
|
||||
</h2><p
|
||||
</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">
|
||||
></p>
|
||||
<username-form />
|
||||
<div class="scene_veteran_pets center-block"></div>
|
||||
<div class="small text-center mb-3">
|
||||
{{ $t('verifyUsernameVeteranPet') }}
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
class="small text-center tos-footer"
|
||||
v-html="$t('usernameTOSRequirements')"
|
||||
></div>
|
||||
|
||||
Reference in New Issue
Block a user