CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-03 05:20:32 +12:00
Code Issues Projects Releases Wiki Activity

Adding repeat password entry component.

Browse source
This commit is contained in:
mike12345567 2021-05-18 15:08:57 +01:00
parent 608c798cb9
commit 3332e56842
2 changed files with 46 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
packages/builder/src/components/common/users/PasswordRepeatInput.svelte Normal file
View file

@ -0,0 +1,39 @@
<script>
import {
Layout,
Input,
} from "@budibase/bbui"
import {createValidationStore, requiredValidator} from "../../../helpers/validation"
export let password
export let error
const [firstPassword, passwordError, firstTouched] = createValidationStore(
"",
requiredValidator
)
const [repeatPassword, _, repeatTouched] = createValidationStore(
"",
requiredValidator
)
$: password = $firstPassword
$: error = !$firstPassword || !$firstTouched || !$repeatTouched || $firstPassword !== $repeatPassword
</script>
<Layout gap="XS" noPadding>
<Input
label="Password"
type="password"
error={$firstTouched && $passwordError}
bind:value={$firstPassword}
/>
<Input
label="Repeat Password"
type="password"
error={$repeatTouched &&
$firstPassword !== $repeatPassword &&
"Passwords must match"}
bind:value={$repeatPassword}
/>
</Layout>

42
packages/builder/src/pages/builder/invite/index.svelte
View file

@ -3,27 +3,19 @@
Layout,
Heading,
Body,
Input,
Button,
notifications,
} from "@budibase/bbui"
import { goto, params } from "@roxi/routify"
import { createValidationStore, requiredValidator } from "helpers/validation"
import PasswordRepeatInput from "components/common/users/PasswordRepeatInput.svelte"
import { users } from "stores/portal"
const [password, passwordError, passwordTouched] = createValidationStore(
"",
requiredValidator
)
const [repeat, _, repeatTouched] = createValidationStore(
"",
requiredValidator
)
const inviteCode = $params["?code"]
let password, error
async function acceptInvite() {
try {
const res = await users.acceptInvite(inviteCode, $password)
const res = await users.acceptInvite(inviteCode, password)
if (!res) {
throw new Error(res.message)
}
@ -40,31 +32,14 @@
<Layout gap="XS">
<img src="https://i.imgur.com/ZKyklgF.png" />
</Layout>
<div class="center">
<Layout gap="XS">
<Heading size="M">Accept Invitation</Heading>
<Body size="M">Please enter a password to setup your user.</Body>
</Layout>
</div>
<Layout gap="XS">
<Input
label="Password"
type="password"
error={$passwordTouched && $passwordError}
bind:value={$password}
/>
<Input
label="Repeat Password"
type="password"
error={$repeatTouched &&
$password !== $repeat &&
"Passwords must match"}
bind:value={$repeat}
/>
<Heading textAlign="center" size="M">Accept Invitation</Heading>
<Body textAlign="center" size="S">Please enter a password to setup your user.</Body>
<PasswordRepeatInput bind:error bind:password />
</Layout>
<Layout gap="S">
<Button
disabled={!$passwordTouched || !$repeatTouched || $password !== $repeat}
disabled={error}
cta
on:click={acceptInvite}>Accept invite</Button
>
@ -87,9 +62,6 @@
justify-content: flex-start;
align-items: stretch;
}
.center {
text-align: center;
}
img {
width: 40px;
margin: 0 auto;