@rpcbase/client 0.12.0 → 0.13.0

package/auth/ForgotPassword/forgot-password.scss

@@ -0,0 +1,37 @@
+@import "helpers";
+
+#forgot-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-forgot {
+    width: 100%;
+    max-width: 380px;
+    margin: auto;
+    background-color: $light;
+    border-radius: 22px;
+    border: 1px solid $gray-600;
+  }
+
+  .form-forgot .form-floating:focus-within {
+    z-index: 2;
+  }
+}

package/auth/ForgotPassword/index.js

@@ -0,0 +1,117 @@
+/* @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 {set_is_signed_in} from "../index"
+import Footer from "../Footer"
+
+import "./forgot-password.scss"
+
+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
+        history.pushState(
+          "",
+          document.title,
+          window.location.pathname + window.location.search
+        )
+      }
+    }
+  }, [hash])
+
+  const onSubmit = async(e) => {
+    e.preventDefault()
+    setIsLoading(true)
+    const res = await post("/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}
+            <span className="ms-1 fs-4">{name}</span>
+          </div>
+
+          <hr />
+
+          <h1 className="h4 mt-3 mb-3 fw-normal">Reset your password</h1>
+
+          {isSuccess && (
+            <p className="text-success">
+              Success. If there is an account associated with this email, you will receive a password reset link in your inbox.
+            </p>
+          )}
+
+          <form onSubmit={onSubmit}>
+
+            {errors?.form && (
+              <p className="text-danger">{errors.form}</p>
+            )}
+
+            <div className="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>
+  )
+}
+
+export default ForgotPassword

package/auth/SetNewPassword/index.js

@@ -0,0 +1,138 @@
+/* @flow */
+import {useState, useEffect} from "react"
+import {useSearchParam} from "react-use"
+import {ActivityIndicator} from "react-native"
+import isEmail from "validator/lib/isEmail"
+
+import post from "../../helpers/post"
+
+import {set_is_signed_in} from "../index"
+import Footer from "../Footer"
+
+import "./set-new-password.scss"
+
+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("id")
+  const token = useSearchParam("token")
+
+  useEffect(() => {
+    console.log("TOKEN", user_id, token)
+  }, [user_id, 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("/api/v1/auth/set_new_password", {
+      user_id,
+      token,
+      password,
+    })
+    console.log("GOT RESSSS", res)
+    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}
+            <span className="ms-1 fs-4">{name}</span>
+          </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">
+              <input type="password"
+                className="form-control"
+                id="input-password1"
+                placeholder="Password"
+                disabled={isLoading || isSuccess}
+                value={password1}
+                onChange={onChangePassword1} />
+              <label htmlFor="input-password1">Password</label>
+            </div>
+
+            <div className="form-floating">
+              <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>
+  )
+}
+
+export default SetNewPassword

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

@@ -0,0 +1,47 @@
+@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/SignIn/index.js

@@ -1,24 +1,34 @@
 /* @flow */
 import {useState, useEffect} from "react"
 import {useSearchParam} from "react-use"
+import isEmail from "validator/lib/isEmail"
 
 import post from "../../helpers/post"
 
 import {set_is_signed_in} from "../index"
 import Footer from "../Footer"
-// import sign_in from "rpc!server/auth/sign_in"
 
 import "./sign-in.scss"
 
 const SignIn = ({name, logo}) => {
-  const [email, setEmail] = useState("")
-  const [password, setPassword] = useState("")
-
   const [isLoading, setIsLoading] = useState(false)
   const [errors, setErrors] = useState()
 
+  const [email, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+  const [forgotUrlParam, setForgotUrlParam] = useState(null)
+
   const redirect = useSearchParam("redirect")
 
+  useEffect(() => {
+    console.log("email changed", email)
+    if (isEmail(email)) {
+      setForgotUrlParam(btoa(email))
+    } else {
+      setForgotUrlParam("")
+    }
+  }, [email])
+
   const onSubmit = async(e) => {
     e.preventDefault()
     setIsLoading(true)
@@ -99,6 +109,10 @@ const SignIn = ({name, logo}) => {
             </div>
 
             <button className="w-100 btn btn-lg btn-primary" type="submit" onClick={onSubmit}>Sign In</button>
+
+            <div className="mt-3 text-start w-100">
+              <a href={`/forgot-password${forgotUrlParam && "#" + forgotUrlParam}`}>Forgot your password?</a>
+            </div>
           </form>
 
           <hr />

package/auth/index.js

@@ -4,10 +4,18 @@ import page from "page"
 import SignIn from "./SignIn"
 import SignUp from "./SignUp"
 import SignOut from "./SignOut"
+import ForgotPassword from "./ForgotPassword"
+import SetNewPassword from "./SetNewPassword"
 
 import post from "../helpers/post"
 
-export {SignIn, SignUp, SignOut}
+export {
+  SignIn,
+  SignUp,
+  SignOut,
+  ForgotPassword,
+  SetNewPassword,
+}
 
 const UID_STORAGE_KEY = "rb::session-user_id"
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 0"
   },