bubblev
/
bubble-web
8
0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
Procházet zdrojové kódy

Split page for restore from login page

pull/8/head
Kristijan Mitrovic před 4 roky
rodič
fa2919e6d1
revize
f6bc7e628b
3 změnil soubory, kde provedl 121 přidání a 88 odebrání
Rozdělené zobrazení
Diff Options
Zobrazit statistiky Stáhněte soubor opravy Stáhněte rozdílový soubor
  1. +3
    -1
      src/_helpers/router.js
  2. +38
    -87
      src/auth/LoginPage.vue
  3. +80
    -0
      src/auth/RestorePage.vue

+ 3
- 1
src/_helpers/router.js Zobrazit soubor

@@ -15,6 +15,7 @@ import LogoutPage from '../auth/LogoutPage'
import ForgotPasswordPage from '../auth/ForgotPasswordPage'
import MultifactorAuthPage from '../auth/MultifactorAuthPage'
import AppLoginPage from '../auth/AppLoginPage'
import RestorePage from "../auth/RestorePage"
import DashboardPage from '../account/DashboardPage'
import ProfilePage from '../account/profile/ProfilePage'
import ActionPage from '../account/profile/ActionPage'
@@ -111,6 +112,7 @@ export const router = new Router({
{ path: '/logout', component: LogoutPage },
{ path: '/forgotPassword', component: ForgotPasswordPage },
{ path: '/appLogin', component: AppLoginPage },
{ path: '/restore', component: RestorePage },

{ path: '/admin/accounts', component: AccountsPage },
{ path: '/admin/new_account', component: ProfilePage },
@@ -128,7 +130,7 @@ export const router = new Router({
});

const publicPages = [
'/login', '/logout', '/register', '/appLogin',
'/login', '/logout', '/register', '/appLogin', '/restore',
'/forgotPassword', '/resetPassword',
'/action', '/auth',
'/activate', '/legal'


+ 38
- 87
src/auth/LoginPage.vue Zobrazit soubor

@@ -1,85 +1,43 @@
<!-- Copyright (c) 2020 Bubble, Inc. All rights reserved. For personal (non-commercial) use, see license: https://getbubblenow.com/bubble-license/ -->
<template>
<div>
<h2 v-if="configs && configs.isInRestoringStatus">{{ messages.form_title_restore }}</h2>
<h2 v-else>{{ messages.form_title_login }}</h2>

<h2>{{messages.form_title_login}}</h2>
<h4 v-if="resetPasswordMessageSent === true" class="alert-success">{{messages.message_resetPassword_sent}}</h4>
<h4 v-if="submitted && errors.has('approvalToken')" class="invalid-feedback d-block">{{ errors.first('approvalToken') }}</h4>

<form @submit.prevent="handleSubmit">
<span v-if="configs && configs.isInRestoringStatus">
<div class="form-group">
<label htmlFor="restoreShortKey">{{messages.field_label_restore_short_key}}</label>
<input type="text" v-model="restoreShortKey" name="restoreShortKey" class="form-control"
:class="{ 'is-invalid': submitted && !restoreShortKey }" />
<div v-show="submitted && !restoreShortKey" class="invalid-feedback">Required</div>
<div v-if="submitted && errors.has('restoreShortKey')" class="invalid-feedback d-block">
{{ errors.first('restoreShortKey') }}
</div>
</div>

<div class="form-group">
<label htmlFor="restoreLongNetworkKey">{{messages.field_label_restore_long_key}}</label>
<textarea v-model="restoreLongNetworkKey" name="restoreLongNetworkKey" class="form-control"
:class="{ 'is-invalid': submitted && !restoreLongNetworkKey }" />
<div v-show="submitted && !restoreLongNetworkKey" class="invalid-feedback">Required</div>
<div v-if="submitted && errors.has('restoreLongNetworkKey')" class="invalid-feedback d-block">
{{ errors.first('restoreLongNetworkKey') }}
</div>
</div>

<div class="form-group">
<label htmlFor="password">{{messages.field_label_password}}</label>
<input type="password" v-model="password" name="password" class="form-control"
:class="{ 'is-invalid': submitted && !password }" />
<div v-if="submitted && errors.has('password')" class="invalid-feedback d-block">
{{ errors.first('password') }}
</div>
</div>

<div class="form-group">
<button class="btn btn-primary" :disabled="status.restoring">
{{ messages.button_label_restore }}
</button>
<img v-show="status.restoring" :src="loadingImgSrc" />
</div>
</span>
<span v-else>
<div class="form-group">
<label for="name">{{messages.field_label_email}}</label>
<input type="text" v-model="name" name="name" class="form-control" :class="{ 'is-invalid': submitted && !name }" />
<div v-show="submitted && !name" class="invalid-feedback">Name is required</div>
<div v-if="submitted && errors.has('account')" class="invalid-feedback d-block">{{ errors.first('account') }}</div>
<div v-if="submitted && errors.has('name')" class="invalid-feedback d-block">{{ errors.first('name') }}</div>
</div>
<div class="form-group">
<label htmlFor="password">{{messages.field_label_password}}</label>
<input type="password" v-model="password" name="password" class="form-control" :class="{ 'is-invalid': submitted && !password }" />
<div v-if="submitted && errors.has('password')" class="invalid-feedback d-block">{{ errors.first('password') }}</div>
</div>
<div v-if="showTotp" class="form-group">
<p>{{messages.message_login_authenticator_auth}}</p>
<label htmlFor="totpToken">{{messages.field_label_totp_code}}</label>
<input v-validate="'required'" v-model="totpToken" name="totpToken" class="form-control"/>
<div v-if="submitted && errors.has('totpToken')" class="invalid-feedback d-block">{{ errors.first('totpToken') }}</div>
</div>
<div v-if="configs && configs.locked === true && (configs.launchLock === null || configs.launchLock)" class="form-group">
<label htmlFor="unlockKey">{{messages.field_label_unlock_key}}</label>
<input type="password" v-model="unlockKey" name="unlockKey" class="form-control" :class="{ 'is-invalid': submitted && !unlockKey }" />
<div v-show="submitted && !unlockKey" class="invalid-feedback">Unlock Key is required</div>
<div v-if="submitted && errors.has('unlockKey')" class="invalid-feedback d-block">{{ errors.first('unlockKey') }}</div>
</div>
<div class="form-group">
<div><small v-html="messages.message_login_agreeToTerms"></small><hr/></div>
<button class="btn btn-primary" :disabled="status.loggingIn">{{messages.button_label_login}}</button>
<img v-show="status.loggingIn" :src="loadingImgSrc" />
<router-link v-if="configs && configs.allowRegistration" to="/register" class="btn btn-link">{{messages.button_label_register}}</router-link>
</div>
<div class="form-group">
<router-link to="/forgotPassword" class="btn btn-link">{{messages.button_label_forgotPassword}}</router-link>
</div>
</span>
<div class="form-group">
<label for="name">{{messages.field_label_email}}</label>
<input type="text" v-model="name" name="name" class="form-control" :class="{ 'is-invalid': submitted && !name }" />
<div v-show="submitted && !name" class="invalid-feedback">Name is required</div>
<div v-if="submitted && errors.has('account')" class="invalid-feedback d-block">{{ errors.first('account') }}</div>
<div v-if="submitted && errors.has('name')" class="invalid-feedback d-block">{{ errors.first('name') }}</div>
</div>
<div class="form-group">
<label htmlFor="password">{{messages.field_label_password}}</label>
<input type="password" v-model="password" name="password" class="form-control" :class="{ 'is-invalid': submitted && !password }" />
<div v-if="submitted && errors.has('password')" class="invalid-feedback d-block">{{ errors.first('password') }}</div>
</div>
<div v-if="showTotp" class="form-group">
<p>{{messages.message_login_authenticator_auth}}</p>
<label htmlFor="totpToken">{{messages.field_label_totp_code}}</label>
<input v-validate="'required'" v-model="totpToken" name="totpToken" class="form-control"/>
<div v-if="submitted && errors.has('totpToken')" class="invalid-feedback d-block">{{ errors.first('totpToken') }}</div>
</div>
<div v-if="configs && configs.locked === true && (configs.launchLock === null || configs.launchLock)" class="form-group">
<label htmlFor="unlockKey">{{messages.field_label_unlock_key}}</label>
<input type="password" v-model="unlockKey" name="unlockKey" class="form-control" :class="{ 'is-invalid': submitted && !unlockKey }" />
<div v-show="submitted && !unlockKey" class="invalid-feedback">Unlock Key is required</div>
<div v-if="submitted && errors.has('unlockKey')" class="invalid-feedback d-block">{{ errors.first('unlockKey') }}</div>
</div>
<div class="form-group">
<div><small v-html="messages.message_login_agreeToTerms"></small><hr/></div>
<button class="btn btn-primary" :disabled="status.loggingIn">{{messages.button_label_login}}</button>
<img v-show="status.loggingIn" :src="loadingImgSrc" />
<router-link v-if="configs && configs.allowRegistration" to="/register" class="btn btn-link">{{messages.button_label_register}}</router-link>
</div>
<div class="form-group">
<router-link to="/forgotPassword" class="btn btn-link">{{messages.button_label_forgotPassword}}</router-link>
</div>
</form>
</div>
</template>
@@ -95,9 +53,6 @@ export default {
password: '',
totpToken: null,
unlockKey: (this.$route.query && this.$route.query.k) ? this.$route.query.k : null,
restoreShortKey: (this.$route.query && this.$route.query.k) ? this.$route.query.k : null,
restoreLongNetworkKey: null,
// reuse password for this restoreLongNetworkKey's password
showTotp: false,
submitted: false,
loadingImgSrc: loadingImgSrc
@@ -105,24 +60,20 @@ export default {
},
created () {
this.loadSystemConfigs();
if (this.configs && this.configs.isInRestoringStatus) this.$router.replace('/restore');
},
computed: {
...mapState('account', ['status', 'loginError', 'resetPasswordMessageSent']),
...mapState('system', ['configs', 'messages'])
},
methods: {
...mapActions('account', ['login', 'logout', 'restore']),
...mapActions('account', ['login', 'logout']),
...mapActions('system', ['loadSystemConfigs']),
handleSubmit (e) {
this.errors.clear();
this.submitted = true;
const { name, password, totpToken, unlockKey, restoreShortKey, restoreLongNetworkKey } = this;
if (this.configs && this.configs.isInRestoringStatus) {
this.restore({
shortKey: restoreShortKey, longKey: restoreLongNetworkKey, password: password,
systemConfigs: this.configs, messages: this.messages, errors: this.errors
});
} else if (name && password) {
const { name, password, totpToken, unlockKey } = this;
if (name && password) {
this.login({
user: {name, password, totpToken, unlockKey},
systemConfigs: this.configs,


+ 80
- 0
src/auth/RestorePage.vue Zobrazit soubor

@@ -0,0 +1,80 @@
<!-- Copyright (c) 2020 Bubble, Inc. All rights reserved. For personal (non-commercial) use, see license: https://getbubblenow.com/bubble-license/ -->
<template>
<div>
<h2>{{ messages.form_title_restore }}</h2>

<form @submit.prevent="handleSubmit">
<div class="form-group">
<label htmlFor="restoreShortKey">{{messages.field_label_restore_short_key}}</label>
<input type="text" v-model="restoreShortKey" name="restoreShortKey" class="form-control"
:class="{ 'is-invalid': submitted && !restoreShortKey }" />
<div v-show="submitted && !restoreShortKey" class="invalid-feedback">Required</div>
<div v-if="submitted && errors.has('restoreShortKey')" class="invalid-feedback d-block">
{{ errors.first('restoreShortKey') }}
</div>
</div>

<div class="form-group">
<label htmlFor="restoreLongNetworkKey">{{messages.field_label_restore_long_key}}</label>
<textarea v-model="restoreLongNetworkKey" name="restoreLongNetworkKey" class="form-control"
:class="{ 'is-invalid': submitted && !restoreLongNetworkKey }" />
<div v-show="submitted && !restoreLongNetworkKey" class="invalid-feedback">Required</div>
<div v-if="submitted && errors.has('restoreLongNetworkKey')" class="invalid-feedback d-block">
{{ errors.first('restoreLongNetworkKey') }}
</div>
</div>

<div class="form-group">
<label htmlFor="password">{{messages.field_label_password}}</label>
<input type="password" v-model="password" name="password" class="form-control"
:class="{ 'is-invalid': submitted && !password }" />
<div v-if="submitted && errors.has('password')" class="invalid-feedback d-block">
{{ errors.first('password') }}
</div>
</div>

<div class="form-group">
<button class="btn btn-primary" :disabled="status.restoring">
{{ messages.button_label_restore }}
</button>
<img v-show="status.restoring" :src="loadingImgSrc" />
</div>
</form>
</div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { loadingImgSrc } from '../_store';

export default {
data () {
return {
restoreShortKey: (this.$route.query && this.$route.query.k) ? this.$route.query.k : null,
restoreLongNetworkKey: null,
password: '',
submitted: false,
loadingImgSrc: loadingImgSrc
}
},
created () {
this.loadSystemConfigs();
},
computed: {
...mapState('system', [ 'configs', 'messages' ])
},
methods: {
...mapActions('account', [ 'restore' ]),
...mapActions('system', [ 'loadSystemConfigs' ]),
handleSubmit (e) {
this.errors.clear();
this.submitted = true;
const { restoreShortKey, restoreLongNetworkKey, password } = this;
this.restore({
shortKey: restoreShortKey, longKey: restoreLongNetworkKey, password: password,
systemConfigs: this.configs, messages: this.messages, errors: this.errors
});
}
}
};
</script>

Zapsat Náhled
Načítá se…
Zrušit
Uložit