feat: implement UI for forgot-password Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout feat: implement new login page feat: implement input shared component Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout feat: implement auth header Merge branch 'feat/ui-layout' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout capitalize filename fix: webpack config to add output default url Merge branch 'master' into feat/ui-layout Merge branch 'master' into feat/ui-layout feat: integrate lazy loading and new page structure feat: use different layout for new Pages Co-authored-by: Tyler <everdev0923@gmail.com> Co-authored-by: Jonathan Cobb <jonathan@kyuss.org> Co-authored-by: jonathan <jonathan@noreply.git.bubblev.org> Reviewed-on: https://git.bubblev.org/bubblev/bubble-web/pulls/19pull/32/head
@@ -0,0 +1,86 @@ | |||||
<template> | |||||
<div class="wrapper"> | |||||
<h1 class="text-center white-text form-title"> | |||||
{{ messages.form_title_forgotPassword }} | |||||
</h1> | |||||
<h4 class="text-center white-text form-sub-title"> | |||||
{{ messages.forgot_password_blurb }} | |||||
</h4> | |||||
<form class="login-form"> | |||||
<div class="form-group"> | |||||
<Input | |||||
class="form-control" | |||||
v-model="email" | |||||
:placeholder="messages.field_email_hint" | |||||
/> | |||||
</div> | |||||
<Button color="default" class="login-btn"> | |||||
{{ messages.button_label_forgot_password }} | |||||
</Button> | |||||
<p class="text-center mt-3"> | |||||
<router-link to="/sign-in"> | |||||
{{ messages.forgot_password_login_link }} | |||||
</router-link> | |||||
</p> | |||||
</form> | |||||
</div> | |||||
</template> | |||||
<style lang="scss" scoped> | |||||
@import '../../_scss/components/form'; | |||||
.title { | |||||
margin-top: 80px; | |||||
} | |||||
.sub-title { | |||||
margin-top: 16px; | |||||
} | |||||
.login-form { | |||||
background-color: white; | |||||
box-shadow: $form-box-shadow; | |||||
width: 450px; | |||||
max-width: 90%; | |||||
margin: 80px auto 0; | |||||
padding: 40px 36px; | |||||
border-radius: $form-border-radius; | |||||
} | |||||
.login-btn { | |||||
margin-top: 55px; | |||||
} | |||||
.privacy-description { | |||||
width: 280px; | |||||
font-size: 14px; | |||||
margin: 32px auto 8px; | |||||
} | |||||
</style> | |||||
<script> | |||||
import { mapState } from 'vuex'; | |||||
import { Button, Input } from '~/_components/shared'; | |||||
export default { | |||||
components: { | |||||
Button, | |||||
Input, | |||||
}, | |||||
data() { | |||||
return { | |||||
email: '', | |||||
password: '', | |||||
}; | |||||
}, | |||||
computed: { | |||||
...mapState('system', ['messages']), | |||||
}, | |||||
}; | |||||
</script> |
@@ -1,9 +1,9 @@ | |||||
<template> | <template> | ||||
<div class="wrapper"> | <div class="wrapper"> | ||||
<h1 class="text-center white-text title"> | |||||
<h1 class="text-center white-text form-title"> | |||||
{{ messages.login_title }} | {{ messages.login_title }} | ||||
</h1> | </h1> | ||||
<h4 class="text-center white-text sub-title"> | |||||
<h4 class="text-center white-text form-sub-title"> | |||||
{{ messages.login_blurb }} | {{ messages.login_blurb }} | ||||
</h4> | </h4> | ||||
@@ -12,7 +12,7 @@ | |||||
<Input | <Input | ||||
class="form-control" | class="form-control" | ||||
v-model="email" | v-model="email" | ||||
:placeholder="messages.field_label_email" | |||||
:placeholder="messages.field_email_hint" | |||||
/> | /> | ||||
</div> | </div> | ||||
<div class="form-group"> | <div class="form-group"> | ||||
@@ -45,13 +45,6 @@ | |||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
@import '../../_scss/components/form'; | @import '../../_scss/components/form'; | ||||
.title { | |||||
margin-top: 80px; | |||||
} | |||||
.sub-title { | |||||
margin-top: 16px; | |||||
} | |||||
.login-form { | .login-form { | ||||
background-color: white; | background-color: white; | ||||
@@ -79,6 +79,10 @@ export const router = new Router({ | |||||
path: 'login', | path: 'login', | ||||
component: () => import('~/_pages/auth/Login'), | component: () => import('~/_pages/auth/Login'), | ||||
}, | }, | ||||
{ | |||||
path: 'forgot-password', | |||||
component: () => import('~/_pages/auth/ForgotPassword'), | |||||
}, | |||||
], | ], | ||||
}, | }, | ||||
{ | { | ||||
@@ -1,2 +1,10 @@ | |||||
$form-box-shadow: 0px 5px 15px -10px #777; | $form-box-shadow: 0px 5px 15px -10px #777; | ||||
$form-border-radius: 2px; | $form-border-radius: 2px; | ||||
.form-title { | |||||
margin-top: 80px; | |||||
} | |||||
.form-sub-title { | |||||
margin-top: 16px; | |||||
} |