move ResetForm to page component

5 years ago · 50091b9bb1
2 changed files with 65 additions and 61 deletions
--- a/packages/builder/src/components/login/ResetForm.svelte
+++ b/packages/builder/src/components/login/ResetForm.svelte
@ -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>
--- a/packages/builder/src/pages/builder/auth/reset.svelte
+++ b/packages/builder/src/pages/builder/auth/reset.svelte
@ -1,5 +1,68 @@
 <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>

-<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>