@rpcbase/client 0.227.0 → 0.231.0

package/auth/components/ForgotPassword/index.js

@@ -1,114 +0,0 @@
-/* @flow */
-import {useState, useEffect} from "react"
-import {useHash} from "react-use"
-import {ActivityIndicator} from "react-native"
-import isEmail from "validator/lib/isEmail"
-
-import post from "../../../helpers/post"
-
-import {Footer} from "../Footer"
-
-import "./forgot-password.scss"
-
-export const ForgotPassword = ({name, logo}) => {
-  const [hash, setHash] = useHash()
-
-  const [isLoading, setIsLoading] = useState(false)
-  const [isSuccess, setIsSuccess] = useState(false)
-  const [errors, setErrors] = useState()
-
-  const [email, setEmail] = useState("")
-
-  useEffect(() => {
-    if (hash?.length > 1) {
-      const val = hash.slice(1)
-
-      const decoded = atob(val)
-      if (isEmail(decoded)) {
-        setEmail(decoded)
-        // remove the hash
-        // isn't there a better way
-        // fixes go back twice on change password
-        history.replaceState(
-          "",
-          document.title,
-          window.location.pathname + window.location.search
-        )
-      }
-    }
-  }, [hash])
-
-  const onSubmit = async(e) => {
-    e.preventDefault()
-    setIsLoading(true)
-    const res = await post("/rb-api/v1/auth/reset_password", {email})
-    setIsLoading(false)
-
-    if (res.status === "ok") {
-      setErrors(null)
-      setIsSuccess(true)
-    } else {
-      setErrors(res.errors)
-    }
-  }
-
-  const onChangeEmail = (e) => setEmail(e.target.value)
-
-  return (
-    <div id="forgot-password-wrapper">
-      <div className="form-forgot text-center px-4 py-4 shadow-lg">
-        <div>
-          <div className="d-flex align-items-center justify-content-center">
-            {logo}
-          </div>
-
-          <hr />
-
-          <h1 className="h4 mt-3 mb-3 fw-normal">Reset your password</h1>
-
-          {isSuccess && (
-            <p className="text-success text-start">
-              If there is an account linked to this email, instructions to reset the password will be sent shortly
-            </p>
-          )}
-
-          <form onSubmit={onSubmit}>
-
-            {errors?.form && (
-              <p className="text-danger">{errors.form}</p>
-            )}
-
-            <div className="text-start form-floating mb-4">
-              <input type="email"
-                disabled={isSuccess}
-                className="form-control"
-                id="input-email"
-                placeholder="name@example.com"
-                value={email}
-                onChange={onChangeEmail} />
-              <label htmlFor="input-email">Email Address</label>
-            </div>
-
-
-            <button id={"btn-submit"}
-              type="submit"
-              disabled={isLoading || isSuccess}
-              className="w-100 btn btn-lg btn-primary"
-              onClick={onSubmit}>
-                <div className="d-flex flex-row align-items-center justify-content-center">
-                  {isLoading && (
-                    <div className="me-2"><ActivityIndicator color="#FFFFFF" /></div>
-                  )}
-                  Reset my Password
-                </div>
-            </button>
-
-          </form>
-
-        </div>
-      </div>
-
-      <Footer name={name} />
-    </div>
-  )
-}

package/auth/components/SetNewPassword/index.js

@@ -1,130 +0,0 @@
-/* @flow */
-import {useState, useEffect} from "react"
-import {useSearchParam} from "react-use"
-import {ActivityIndicator} from "react-native"
-
-import post from "../../../helpers/post"
-
-import {Footer} from "../Footer"
-
-import "./set-new-password.scss"
-
-export const SetNewPassword = ({name, logo}) => {
-  const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState()
-  const [isSuccess, setIsSuccess] = useState(false)
-
-  const [password1, setPassword1] = useState("")
-  const [password2, setPassword2] = useState("")
-
-  const user_id = useSearchParam("uid")
-  const token = useSearchParam("token")
-
-  const onSubmit = async(e) => {
-    e.preventDefault()
-
-    if (password1.length < 12) {
-      setError("Your password is too short")
-      return
-    }
-
-    if (password1 !== password2) {
-      setError("Passwords do not match")
-      return
-    }
-
-    setIsLoading(true)
-    setError(null)
-
-    const password = password1
-    const res = await post("/rb-api/v1/auth/set_new_password", {
-      user_id,
-      token,
-      password,
-    })
-
-    setIsLoading(false)
-
-    if (res.status === "ok") {
-      setIsSuccess(true)
-    } else {
-      setError(res.message)
-    }
-  }
-
-  const onChangePassword1 = (e) => setPassword1(e.target.value)
-  const onChangePassword2 = (e) => setPassword2(e.target.value)
-
-  return (
-    <div id="set-new-password-wrapper">
-      <div className="form-set-new-password text-center px-4 py-4 shadow-lg">
-        <div>
-          <div className="d-flex align-items-center justify-content-center">
-            {logo}
-          </div>
-
-          <hr />
-
-          <h1 className="h4 mt-3 mb-3 fw-normal">New Password</h1>
-          <p className="text-start text-muted">
-            Passwords must use at least 12 characters
-          </p>
-
-          {error && (
-            <p className="text-start text-danger">{error}</p>
-          )}
-
-          {isSuccess && (
-            <p className="text-start text-success">
-              Your new password has successfully been set, you may now <a href="/signin">sign in</a> to your account
-            </p>
-          )}
-
-
-          <form onSubmit={onSubmit}>
-
-            <div className="form-floating text-start">
-              <input type="password"
-                className="form-control"
-                id="input-password1"
-                autoFocus
-                placeholder="Password"
-                disabled={isLoading || isSuccess}
-                value={password1}
-                onChange={onChangePassword1} />
-              <label htmlFor="input-password1">Password</label>
-            </div>
-
-            <div className="form-floating text-start">
-              <input type="password"
-                className="form-control"
-                id="input-password2"
-                placeholder="Confirm Password"
-                disabled={isLoading || isSuccess}
-                value={password2}
-                onChange={onChangePassword2} />
-              <label htmlFor="input-password2">Confirm Password</label>
-            </div>
-
-            <button id={"btn-submit"}
-              type="submit"
-              disabled={isLoading || isSuccess}
-              className="w-100 btn btn-lg btn-primary mt-4"
-              onClick={onSubmit}>
-                <div className="d-flex flex-row align-items-center justify-content-center">
-                  {isLoading && (
-                    <div className="me-2"><ActivityIndicator color="#FFFFFF" /></div>
-                  )}
-                  Set new Password
-                </div>
-            </button>
-
-          </form>
-
-        </div>
-      </div>
-
-      <Footer name={name} />
-    </div>
-  )
-}

package/auth/components/SetNewPassword/set-new-password.scss

@@ -1,47 +0,0 @@
-@import "helpers";
-
-#set-new-password-wrapper {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 40px;
-  padding-bottom: 40px;
-  // background-color: var(--bs-secondary);
-  background-color: $gray-500;
-
-  hr {
-    background-color: $gray-500;
-  }
-
-  footer {
-    color: $light !important;
-    border-top: none !important;
-    padding-top: 0 !important;
-    margin-bottom: 0 !important;
-  }
-
-  .form-set-new-password {
-    width: 100%;
-    max-width: 380px;
-    margin: auto;
-    background-color: $light;
-    border-radius: 22px;
-    // border: 1px solid $gray-600;
-  }
-
-  .form-set-new-password .form-floating:focus-within {
-    z-index: 2;
-  }
-
-  .form-set-new-password #input-password1 {
-    margin-bottom: -1px;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  .form-set-new-password #input-password2 {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-}

package/auth/components/SignIn/SignInEmailForm.tsx

@@ -1,115 +0,0 @@
-import assert from "assert"
-import debug from "debug"
-import {useState, useEffect} from "react"
-import {useTranslation} from "react-i18next"
-import useSearchParam from "react-use/lib/useSearchParam"
-import isEmail from "validator/lib/isEmail"
-
-import page from "../../../page"
-import post from "../../../helpers/post"
-import {reconnect as rts_reconnect} from "../../../rts/rts"
-import {setIsSignedIn, setUid, setTenantId} from "../../index"
-
-
-const log = debug("rb:auth:signin")
-
-export const SignInEmailForm = ({onSuccess, onSuccessRedirect}) => {
-  const {t} = useTranslation("rb.sign_in", {useSuspense: false})
-
-  const redirect = useSearchParam("redirect")
-
-  const [isLoading, setIsLoading] = useState(false)
-
-  const [email, setEmail] = useState("")
-  const [password, setPassword] = useState("")
-  const [forgotUrlParam, setForgotUrlParam] = useState(null)
-
-  const [errors, setErrors] = useState()
-
-  useEffect(() => {
-    if (isEmail(email)) {
-      setForgotUrlParam(btoa(email))
-    } else {
-      setForgotUrlParam("")
-    }
-  }, [email])
-
-  const onSubmit = async(e) => {
-    e.preventDefault()
-    setIsLoading(true)
-    const res = await post("/rb-api/v1/auth/sign_in", {email, password})
-    setIsLoading(false)
-
-    // success
-    if (res.status === "ok") {
-      log("signed in res: ok", res)
-      log("redirect to:", redirect || onSuccessRedirect)
-      const {user_id} = res
-      assert(res.user_id, "missing user_id")
-
-      setUid(user_id)
-      const tenantId = user_id.slice(8, 16)
-      setTenantId(tenantId)
-      setIsSignedIn(true)
-
-      // we must now reconnect on the websocket as we now have a new cookie
-      rts_reconnect(tenantId, user_id)
-      onSuccess()
-      if (redirect) {
-        page(redirect)
-      } else {
-        page(onSuccessRedirect)
-      }
-    // errors
-    } else {
-      log("sign in error", res)
-
-      setErrors(res.errors)
-    }
-  }
-
-  const onChangeEmail = (e) => {
-    setEmail(e.target.value)
-  }
-
-  const onChangePassword = (e) => {
-    setPassword(e.target.value)
-  }
-
-
-  return (
-    <form onSubmit={onSubmit}>
-
-      {errors?.form && (
-        <p className="text-danger">{errors.form}</p>
-      )}
-
-      <div className="form-floating text-start">
-        <input type="email"
-          className="form-control"
-          id="input-email"
-          placeholder={t("email_placeholder")}
-          value={email}
-          onChange={onChangeEmail} />
-        <label htmlFor="input-email">{t("email_address")}</label>
-      </div>
-
-      <div className="form-floating text-start">
-        <input type="password"
-          className="form-control"
-          id="input-password"
-          placeholder={t("password")}
-          value={password}
-          onChange={onChangePassword} />
-        <label htmlFor="input-password">{t("password")}</label>
-      </div>
-
-      <div className="mt-2 text-start w-100">
-        <a href={`/forgot-password${forgotUrlParam && `#${forgotUrlParam}`}`}>{t("forgot_password")}</a>
-      </div>
-
-      <button className="mt-4 mb-3 w-100 btn btn-lg btn-primary" type="submit" onClick={onSubmit}>{t("submit_btn")}</button>
-      {isLoading && "loading..."}
-    </form>
-  )
-}

package/auth/components/SignIn/index.js

@@ -1,69 +0,0 @@
-/* @flow */
-import assert from "assert"
-import {useTranslation} from "react-i18next"
-import authConfig from "@rpcbase/dot-rb/auth"
-
-import {AUTH_BUTTONS} from "../../../ui/oauth"
-import {Footer} from "../Footer"
-
-import {SignInEmailForm} from "./SignInEmailForm"
-
-import "./sign-in.scss"
-
-
-const hasOAuth = authConfig.oauth_providers?.length > 0
-const hasEmail = authConfig.has_email_signup
-
-export const SignIn = ({
-  name,
-  logo,
-  onSuccessRedirect = "/",
-  onSuccess = () => null,
-}) => {
-  const {t} = useTranslation("rb.sign_in", {useSuspense: false})
-
-  return (
-    <div id="sign-in-wrapper">
-      <div className="form-signin text-center px-4 py-4 shadow-lg">
-        <div>
-          <div className="d-flex align-items-center justify-content-center">
-            {logo}
-          </div>
-
-          <hr />
-
-          <h1 className="h4 mt-3 mb-3 fw-normal">{t("title")}</h1>
-          <p className="text-start text-muted">
-            {t("dont_have_account")}
-            <a href="/signup" className="ms-1">{t("sign_up_here")}</a>
-          </p>
-
-          {hasEmail && (
-            <SignInEmailForm
-              onSuccess={onSuccess}
-              onSuccessRedirect={onSuccessRedirect}
-            />
-          )}
-
-          {hasEmail && hasOAuth && (
-            <>
-              <hr />
-              <p className="text-muted">{t("or")}</p>
-            </>
-          )}
-
-          {hasOAuth && authConfig.oauth_providers.map((provider, index) => {
-            const Comp = AUTH_BUTTONS[provider.id]
-            assert(Comp, `unable to find oauth button for provider: ${JSON.stringify(provider)}`)
-
-            return <Comp key={`${provider.id}-${index}`} text={t("submit_btn")} className="w-100 justify-content-center" />
-          })}
-
-
-        </div>
-      </div>
-
-      <Footer name={name} />
-    </div>
-  )
-}

package/auth/components/SignIn/sign-in.scss

@@ -1,56 +0,0 @@
-@import "helpers";
-
-#sign-in-wrapper {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 40px;
-  padding-bottom: 40px;
-  background-color: $gray-500;
-
-  hr {
-    background-color: $gray-500;
-  }
-
-  footer {
-    color: $light !important;
-    border-top: none !important;
-    padding-top: 0 !important;
-    margin-bottom: 0 !important;
-  }
-
-
-  .form-signin {
-    width: 100%;
-    max-width: 380px;
-    margin: auto;
-    background-color: $light;
-    border-radius: 22px;
-    // border: 1px solid $gray-600;
-  }
-
-  .form-signin .checkbox {
-    font-weight: 400;
-  }
-
-  .form-signin .form-floating:focus-within {
-    z-index: 2;
-  }
-
-  .form-signin input[type="email"] {
-    margin-bottom: -1px;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  input:-webkit-autofill::first-line {
-    // color: red;
-  }
-
-  .form-signin #input-password {
-    margin-bottom: 10px;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-}

package/auth/components/SignOut/index.js

@@ -1,144 +0,0 @@
-/* @flow */
-import assert from "assert"
-import {useState, useEffect} from "react"
-import Alert from "react-bootstrap/Alert"
-import {useTranslation} from "react-i18next"
-
-import authConfig from "@rpcbase/dot-rb/auth"
-
-import {signOut} from "../../signOut"
-
-import post from "../../../helpers/post"
-
-import {AccountListItem} from "../AccountsList/AccountListItem"
-import {Footer} from "../Footer"
-
-import "./sign-out.scss"
-import { useNotifications } from "../../../notifications"
-
-// TODO: rts_disconnect
-// TODO: clear cache + db
-const hasMultiAccounts = authConfig.has_multi_accounts
-
-export const SignOut = ({
-  logo,
-  name,
-  onSignOutSuccess = () => null
-}) => {
-  const {t} = useTranslation("rb.sign_out", {useSuspense: false})
-
-  const {addNotification} = useNotifications()
-
-  const [isSignedOut, setIsSignedOut] = useState(false)
-
-  const [accounts, setAccounts] = useState()
-  const [selectedAccounts, setSelectedAccounts] = useState([])
-
-
-  useEffect(() => {
-    if (!hasMultiAccounts) return
-
-    const load = async() => {
-      const res = await post("/rb-api/v1/auth/get_accounts")
-      assert(res.status === "ok")
-      setAccounts(res.accounts)
-    }
-
-    load()
-  }, [])
-
-  const onSignOut = async() => {
-    // TODO: NYI handle sign out from multiple accounts here
-    const res = await post("/rb-api/v1/auth/sign_out")
-    if (res.status === "ok") {
-      signOut()
-      setIsSignedOut(true)
-
-      const toast = addNotification({
-        // id: `create-template-${Date.now()}`,
-        loading: false,
-        title: "Signed out",
-        message: "You have been signed out click here to sign back in",
-      })
-
-      onSignOutSuccess()
-    } else {
-      throw new Error("unable to sign out")
-    }
-  }
-
-  const onSubmit = () => {
-    onSignOut()
-  }
-
-  const message = hasMultiAccounts ? "Select accounts to sign out of:" : t("click_here_signout")
-
-  return (
-    <div id="sign-out-wrapper">
-
-      {isSignedOut && (
-        <Alert variant="light" transition data-bs-theme="dark" style={{maxWidth: 260, position: "absolute"}} onClose={() => setIsSignedOut(false)} dismissible>
-          Signed out successfully
-        </Alert>
-      )}
-
-      <div className="form-signout text-center px-4 py-4 shadow-lg">
-
-        <div className="d-flex align-items-center justify-content-center">
-          {logo}
-        </div>
-
-        <hr />
-
-        <h1 className="h4 mt-3 mb-3 fw-normal">{t("title")}</h1>
-
-        <p className="text-start text-muted">
-          {message}
-        </p>
-
-        {hasMultiAccounts && Array.isArray(accounts) && accounts.length > 0 && (
-          <ul className="list-group text-start">
-            {accounts.map((acc, index) => {
-              const id = `acc-${acc.user_id}-${index}`
-
-              const onChange = (e) => {
-                if (e.target.checked) {
-                  setSelectedAccounts((prev) => [...prev, acc.user_id])
-                } else {
-                  setSelectedAccounts((prev) => [...prev.filter((v) => v !== acc.user_id)])
-                }
-              }
-
-              const checked = selectedAccounts.includes(acc.user_id)
-
-              return (
-                <li key={id} className="list-group-item">
-                  <input className="form-check-input me-3" type="checkbox" value="" checked={checked} onChange={onChange} id={id} />
-                  <label className="form-check-label stretched-link" for={id}>
-                    <AccountListItem
-                      account={acc}
-                      // onClick={onClickAccount}
-                    />
-                  </label>
-                </li>
-              )
-            })}
-          </ul>
-        )}
-
-        <button className={cx("mb-3 w-100 btn btn-lg btn-primary", hasMultiAccounts ? "mt-4" : "mt-1")} type="submit" onClick={onSubmit}>Sign Out</button>
-
-        {hasMultiAccounts && Array.isArray(accounts) && accounts.length === 0 && (
-          <p className="text-start text-muted">
-            You aren't signed in to any accounts<br />
-            Go to: <a href="/signin">/signin</a>
-          </p>
-        )}
-
-      </div>
-
-      <Footer name={name} />
-
-    </div>
-  )
-}