We dont need these
This commit is contained in:
parent
04cb6dcce5
commit
44e54187c6
|
@ -1,178 +0,0 @@
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import '../../styles/colors.scss';
|
|
||||||
|
|
||||||
a.is-themed {
|
|
||||||
background: $basePink;
|
|
||||||
color: #fafafa;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.is-themed:hover {
|
|
||||||
background: $basePinkHover;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.kpop a.is-themed { background: $baseBlue; }
|
|
||||||
body.kpop a.is-themed:hover { background: $baseBlueHover; }
|
|
||||||
|
|
||||||
a.is-text {
|
|
||||||
display: inline-flex;
|
|
||||||
padding-top: 4px;
|
|
||||||
color: #fafafa;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.is-text:hover { color: $basePink; }
|
|
||||||
body.kpop a.is-text:hover { color: $baseBlue; }
|
|
||||||
|
|
||||||
a.text { color: white }
|
|
||||||
a.text:hover { color: #FF015B; }
|
|
||||||
|
|
||||||
input, p.control a.button {
|
|
||||||
border-left: 0px;
|
|
||||||
border-top: 0px;
|
|
||||||
border-right: 0px;
|
|
||||||
border-radius: 0px;
|
|
||||||
box-shadow: 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p.control a.button { margin-left: 10px; }
|
|
||||||
p.control a.button:hover { border-bottom: 1px solid #FF015B; }
|
|
||||||
p.control a#loginBtn { border-right: 0px; }
|
|
||||||
p.control a#registerBtn { border-left: 0px; }
|
|
||||||
|
|
||||||
span.errorMessage {
|
|
||||||
display: block;
|
|
||||||
padding-top: 50px;
|
|
||||||
color: #FF015B;
|
|
||||||
}
|
|
||||||
|
|
||||||
section.hero {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
section.hero, section.hero > * {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
section.hero div.background {
|
|
||||||
content: '';
|
|
||||||
position: fixed;
|
|
||||||
top: -50px;
|
|
||||||
left: -50px;
|
|
||||||
background: no-repeat scroll 50% 50%;
|
|
||||||
background-size: cover;
|
|
||||||
background-image: url(../../../public/images/home-background.jpg);
|
|
||||||
filter: blur(25px);
|
|
||||||
-webkit-filter: blur(25px);
|
|
||||||
z-index: 0;
|
|
||||||
height: calc(100vh + 100px);
|
|
||||||
width: calc(100% + 100px);
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
color: #c7c7c7;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<section class="hero is-fullheight has-text-centered">
|
|
||||||
<div class="background"/>
|
|
||||||
|
|
||||||
<div class="hero-body">
|
|
||||||
<div class="container">
|
|
||||||
<router-link to="/">
|
|
||||||
<div class="logo">
|
|
||||||
<Logo/>
|
|
||||||
</div>
|
|
||||||
</router-link>
|
|
||||||
|
|
||||||
<h3>Please choose a new password for your account.</h3>
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column is-4 is-offset-4">
|
|
||||||
<b-field>
|
|
||||||
<b-input v-model="password"
|
|
||||||
type="password"
|
|
||||||
placeholder="Password"
|
|
||||||
password-reveal/>
|
|
||||||
</b-field>
|
|
||||||
<b-field>
|
|
||||||
<b-input v-model="rePassword"
|
|
||||||
type="password"
|
|
||||||
placeholder="Re-type Password"
|
|
||||||
password-reveal
|
|
||||||
@keyup.enter.native="change"/>
|
|
||||||
</b-field>
|
|
||||||
|
|
||||||
<p class="control has-addons is-pulled-right">
|
|
||||||
<a :class="{ 'is-loading': isLoading }"
|
|
||||||
class="button is-themed"
|
|
||||||
@click="change">Request Password Change</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Logo from '../../components/logo/Logo.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: { Logo },
|
|
||||||
props: {
|
|
||||||
key: {
|
|
||||||
type: String,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
email: {
|
|
||||||
type: String,
|
|
||||||
default: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
password: null,
|
|
||||||
rePassword: null,
|
|
||||||
isLoading: false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$ga.page({
|
|
||||||
page: '/login/change',
|
|
||||||
title: 'Change Password',
|
|
||||||
location: window.location.href
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!this.key || !this.email) {
|
|
||||||
this.$showToast('Data is missing.', true);
|
|
||||||
this.$router.push('/');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async change() {
|
|
||||||
if (this.isLoading) return;
|
|
||||||
if (this.password !== this.rePassword) {
|
|
||||||
this.$showToast('Passwords don\'t match', true);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.isLoading = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await this.axios.post(`${this.$config.baseURL}/password/verify`, {
|
|
||||||
password: this.password,
|
|
||||||
verificationKey: this.key,
|
|
||||||
email: this.email
|
|
||||||
});
|
|
||||||
this.$showToast(response.data.message);
|
|
||||||
this.isLoading = false;
|
|
||||||
this.$router.push('/login');
|
|
||||||
} catch (error) {
|
|
||||||
this.isLoading = false;
|
|
||||||
this.$onPromiseError(error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
|
@ -1,152 +0,0 @@
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import '../../styles/colors.scss';
|
|
||||||
|
|
||||||
a.is-themed {
|
|
||||||
background: $basePink;
|
|
||||||
color: #fafafa;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.is-themed:hover {
|
|
||||||
background: $basePinkHover;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.kpop a.is-themed { background: $baseBlue; }
|
|
||||||
body.kpop a.is-themed:hover { background: $baseBlueHover; }
|
|
||||||
|
|
||||||
a.is-text {
|
|
||||||
display: inline-flex;
|
|
||||||
padding-top: 4px;
|
|
||||||
color: #fafafa;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.is-text:hover { color: $basePink; }
|
|
||||||
body.kpop a.is-text:hover { color: $baseBlue; }
|
|
||||||
|
|
||||||
a.text { color: white }
|
|
||||||
a.text:hover { color: #FF015B; }
|
|
||||||
|
|
||||||
input, p.control a.button {
|
|
||||||
border-left: 0px;
|
|
||||||
border-top: 0px;
|
|
||||||
border-right: 0px;
|
|
||||||
border-radius: 0px;
|
|
||||||
box-shadow: 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p.control a.button { margin-left: 10px; }
|
|
||||||
p.control a.button:hover { border-bottom: 1px solid #FF015B; }
|
|
||||||
p.control a#loginBtn { border-right: 0px; }
|
|
||||||
p.control a#registerBtn { border-left: 0px; }
|
|
||||||
|
|
||||||
span.errorMessage {
|
|
||||||
display: block;
|
|
||||||
padding-top: 50px;
|
|
||||||
color: #FF015B;
|
|
||||||
}
|
|
||||||
|
|
||||||
section.hero {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
section.hero, section.hero > * {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
section.hero div.background {
|
|
||||||
content: '';
|
|
||||||
position: fixed;
|
|
||||||
top: -50px;
|
|
||||||
left: -50px;
|
|
||||||
background: no-repeat scroll 50% 50%;
|
|
||||||
background-size: cover;
|
|
||||||
background-image: url(../../../public/images/home-background.jpg);
|
|
||||||
filter: blur(25px);
|
|
||||||
-webkit-filter: blur(25px);
|
|
||||||
z-index: 0;
|
|
||||||
height: calc(100vh + 100px);
|
|
||||||
width: calc(100% + 100px);
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
color: #c7c7c7;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<section class="hero is-fullheight has-text-centered">
|
|
||||||
<div class="background"/>
|
|
||||||
|
|
||||||
<div class="hero-body">
|
|
||||||
<div class="container">
|
|
||||||
<router-link to="/">
|
|
||||||
<div class="logo">
|
|
||||||
<Logo/>
|
|
||||||
</div>
|
|
||||||
</router-link>
|
|
||||||
|
|
||||||
<h3>To request a new password please enter your account email in the box below. <br>We will send you an email with further instructions.</h3>
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column is-4 is-offset-4">
|
|
||||||
<b-field>
|
|
||||||
<b-input v-model="email"
|
|
||||||
type="text"
|
|
||||||
placeholder="Email"/>
|
|
||||||
</b-field>
|
|
||||||
|
|
||||||
<p class="control has-addons is-pulled-right">
|
|
||||||
<a :class="{ 'is-loading': isLoading }"
|
|
||||||
class="button is-themed"
|
|
||||||
@click="request">Request Password Change</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Logo from '../../components/logo/Logo.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'ForgotPassword',
|
|
||||||
components: { Logo },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
email: null,
|
|
||||||
isLoading: false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
metaInfo() {
|
|
||||||
return { title: 'Forgot password' };
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$ga.page({
|
|
||||||
page: '/login/forgot',
|
|
||||||
title: 'Forgot Password',
|
|
||||||
location: window.location.href
|
|
||||||
});
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
request() {
|
|
||||||
if (this.isLoading) return;
|
|
||||||
if (!this.email || this.email === '') {
|
|
||||||
this.$showToast('Email can\'t be empty', true);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.isLoading = true;
|
|
||||||
this.axios.post(`${this.$config.baseURL}/password/forgot`, { email: this.email }).then(response => {
|
|
||||||
this.$showToast(response.data.message);
|
|
||||||
this.isLoading = false;
|
|
||||||
return this.$router.push('/login');
|
|
||||||
}).catch(err => {
|
|
||||||
this.isLoading = false;
|
|
||||||
this.$onPromiseError(err);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
Loading…
Reference in New Issue