MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

move ResetForm to page component

This commit is contained in:
Keviin Åberg Kultalahti 2021-05-21 12:09:38 +02:00
parent 7a00153848
commit 50091b9bb1
2 changed files with 65 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
packages/builder/src/components/login/ResetForm.svelte
View File

@ -1,59 +0,0 @@
<script>
import { notifications, Button, Layout, Body, Heading } from "@budibase/bbui"
import { organisation, auth } from "stores/portal"
import PasswordRepeatInput from "components/common/users/PasswordRepeatInput.svelte"
import { params, goto } from "@roxi/routify"
const resetCode = $params["?code"]
let password, error
async function reset() {
try {
await auth.resetPassword(password, resetCode)
notifications.success("Password reset successfully")
// send them to login if reset successful
$goto("./login")
} catch (err) {
notifications.error("Unable to reset password")
}
}
</script>
<div class="login">
<div class="main">
<Layout>
<Layout noPadding justifyItems="center">
<img src={$organisation.logoUrl || "https://i.imgur.com/ZKyklgF.png"} />
</Layout>
<Layout gap="XS" noPadding>
<Heading textAlign="center">Reset your password</Heading>
<Body size="S" textAlign="center">
Please enter the new password you'd like to use.
</Body>
<PasswordRepeatInput bind:password bind:error />
</Layout>
<Button cta on:click={reset} disabled={error || !resetCode}>
Reset your password
</Button>
</Layout>
</div>
</div>
<style>
.login {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main {
width: 260px;
}
img {
width: 48px;
}
</style>

67
packages/builder/src/pages/builder/auth/reset.svelte
View File

@ -1,5 +1,68 @@
<script> <script>
import ResetForm from "components/login/ResetForm.svelte" import { Body, Button, Heading, Layout, notifications } from "@budibase/bbui"
import { goto, params } from "@roxi/routify"
import PasswordRepeatInput from "components/common/users/PasswordRepeatInput.svelte"
import { auth, organisation } from "stores/portal"
const resetCode = $params["?code"]
let password, error
$: forceResetPassword = $auth?.user?.forceResetPassword
async function reset() {
try {
if (forceResetPassword) {
console.log("Updating self!")
await auth.updateSelf({ ...$auth.user, password })
$goto("../portal/")
} else {
await auth.resetPassword(password, resetCode)
notifications.success("Password reset successfully")
// send them to login if reset successful
$goto("./login")
}
} catch (err) {
notifications.error("Unable to reset password")
}
}
</script> </script>
<ResetForm /> <div class="login">
<div class="main">
<Layout>
<Layout noPadding justifyItems="center">
<img
src={$organisation.logoUrl || "https://i.imgur.com/ZKyklgF.png"}
alt="Organisation logo"
/>
</Layout>
<Layout gap="XS" noPadding>
<Heading textAlign="center">Reset your password</Heading>
<Body size="S" textAlign="center">
Please enter the new password you'd like to use.
</Body>
<PasswordRepeatInput bind:password bind:error />
</Layout>
<Button cta on:click={reset} disabled={error}>Reset your password</Button>
</Layout>
</div>
</div>
<style>
.login {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main {
width: 260px;
}
img {
width: 48px;
}
</style>