@rpcbase/client 0.10.0 → 0.13.0

package/auth/Footer.js

@@ -0,0 +1,14 @@
+/* @flow */
+
+const year = (new Date).getFullYear()
+
+const Footer = ({name}) => {
+
+  return (
+    <footer className="pt-5 my-5 text-muted border-top">
+      &copy; {year} <span className="ms-1">{name}</span>
+    </footer>
+  )
+}
+
+export default Footer

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

@@ -0,0 +1,148 @@
+/* @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.scss"
+
+const SignIn = ({name, logo}) => {
+  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)
+    const res = await post("/api/v1/auth/sign_in", {email, password})
+    setIsLoading(false)
+
+    if (res.status === "ok") {
+      set_is_signed_in(true)
+      if (redirect) {
+        window.location = redirect
+        return
+      }
+      window.location = "/workspaces"
+
+    } else {
+      setErrors(res.errors)
+    }
+  }
+
+  const onChangeEmail = (e) => {
+    setEmail(e.target.value)
+  }
+
+  const onChangePassword = (e) => {
+    setPassword(e.target.value)
+  }
+
+  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}
+            <span className="ms-1 fs-4">{name}</span>
+          </div>
+
+          <hr />
+
+          <h1 className="h4 mt-3 mb-3 fw-normal">Sign In</h1>
+          <p className="text-start text-muted">
+            Use your email and password to sign in. Don't have an account ?
+            <a href="/signup" className="ms-1">Sign up here</a>
+          </p>
+
+          <form onSubmit={onSubmit}>
+
+            {errors?.form && (
+              <p className="text-danger">{errors.form}</p>
+            )}
+
+            <div className="form-floating">
+              <input type="email"
+                className="form-control"
+                id="input-email"
+                placeholder="name@example.com"
+                value={email}
+                onChange={onChangeEmail} />
+              <label htmlFor="input-email">Email Address</label>
+            </div>
+
+            <div className="form-floating">
+              <input type="password"
+                className="form-control"
+                id="input-password"
+                placeholder="Password"
+                value={password}
+                onChange={onChangePassword} />
+              <label htmlFor="input-password">Password</label>
+            </div>
+
+            <div className="checkbox mt-3 mb-3 text-start">
+              <label style={{cursor: "pointer", userSelect: "none"}}>
+                <input
+                  type="checkbox"
+                  value="remember-me"
+                  defaultChecked /> Remember me
+              </label>
+            </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 />
+          <p className="text-muted">OR</p>
+
+          <a href="/signup"
+            className="sign-in-github-btn p-2 btn-lg w-100"
+            style={{}}>
+            <div style={{}} className="me-2">
+              <svg height="28px" width="28px" viewBox="0 0 16 16"  style={{fill: "currentColor"}}>
+                <path fillRule={"evenodd"} d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
+                0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01
+                1.08.58 1.23.82.72 1.21 1.87.87
+                2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12
+                0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08
+                2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0
+                .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+              </svg>
+            </div>
+            <div className="">
+              Sign in with GitHub
+            </div>
+          </a>
+
+        </div>
+      </div>
+
+      <Footer name={name} />
+    </div>
+  )
+}
+
+export default SignIn

package/auth/SignIn/sign-in.scss

@@ -0,0 +1,66 @@
+@import "helpers";
+
+#sign-in-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-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;
+  }
+
+  .form-signin #input-password {
+    margin-bottom: 10px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .sign-in-github-btn {
+    display: inline-flex;
+    align-items: center;
+    background-color: #24292E;
+    font-size: 1.25rem;
+    color: $gray-200;
+    text-decoration: none;
+
+    &:hover {
+      color: $white;
+    }
+  }
+}

package/auth/SignOut/index.js

@@ -0,0 +1,35 @@
+/* @flow */
+import {useState, useEffect} from "react"
+import {ActivityIndicator} from "react-native"
+import page from "page"
+
+import post from "../../helpers/post"
+import {set_is_signed_in} from "../index"
+
+const SignOut = () => {
+
+  useEffect(() => {
+    setTimeout(async() => {
+      const res = await post("/api/v1/auth/sign_out")
+      if (res.status === "ok") {
+        set_is_signed_in(false)
+        localStorage.clear()
+        page.redirect("/")
+      } else {
+        throw new Error("unable to sign out")
+      }
+    }, 60)
+
+  }, [])
+
+  return (
+    <div id="sign-out-wrapper">
+      <div className="mt-3 d-flex justify-content-center align-items-center">
+        <div className="me-2"><ActivityIndicator /></div>
+        <div className="">Signing out, you will be redirected shortly</div>
+      </div>
+    </div>
+  )
+}
+
+export default SignOut

package/auth/SignUp/index.js

@@ -0,0 +1,107 @@
+/* @flow */
+import {useState} from "react"
+
+import post from "../../helpers/post"
+import Footer from "../Footer"
+
+import "./sign-up.scss"
+
+const SignUp = ({logo, name}) => {
+  const [email, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+  const [passwordConfirm, setPasswordConfirm] = useState("")
+  const [error, setError] = useState(null)
+
+  const onSubmit = async() => {
+    setError(null)
+    if (!password || password !== passwordConfirm) {
+      setError("Passwords do not match")
+      return
+    }
+    const res = await post("/api/v1/auth/sign_up", {email, password})
+    if (res.status === "ok") {
+      window.location = "/workspaces"
+    } else if (res.status === "error") {
+      setError(res.message)
+    }
+  }
+
+  const onChangeEmail = (e) => {
+    setEmail(e.target.value)
+  }
+
+  const onChangePassword = (e) => {
+    setPassword(e.target.value)
+  }
+
+  const onChangePasswordConfirm = (e) => {
+    setPasswordConfirm(e.target.value)
+  }
+
+
+  return (
+    <div id="sign-up-wrapper">
+      <div className="form-signup 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">Sign Up</h1>
+          <p className="text-muted">
+            Already have an account ? <a href="/signin" className="ms-1">Sign in here</a>
+          </p>
+
+          {error && (
+            <div className="invalid-feedback d-flex text-start">
+              {error}
+            </div>
+          )}
+
+          <div className="form-floating">
+            <input type="email"
+              className="form-control"
+              id="input-email"
+              placeholder="name@example.com"
+              value={email}
+              onChange={onChangeEmail} />
+            <label htmlFor="input-email">Email Address</label>
+          </div>
+          <div className="form-floating">
+            <input type="password"
+              className="form-control"
+              id="input-password"
+              placeholder="Password"
+              value={password}
+              onChange={onChangePassword} />
+            <label htmlFor="input-password">Password</label>
+          </div>
+          <div className="form-floating">
+            <input type="password"
+              className="form-control"
+              id="input-password-confirm"
+              placeholder="Confirm Password"
+              value={passwordConfirm}
+              onChange={onChangePasswordConfirm} />
+            <label htmlFor="input-password-confirm">Confirm Password</label>
+          </div>
+
+          <div className="checkbox mt-3 mb-3 text-start">
+            <label style={{cursor: "pointer", userSelect: "none"}}>
+              <input type="checkbox" value="terms-accepted" /> I agree to the terms and privacy policy.
+            </label>
+          </div>
+          <button className="w-100 btn btn-lg btn-primary" type="submit" onClick={onSubmit}>Sign Up</button>
+
+        </div>
+      </div>
+
+      <Footer name={name} />
+    </div>
+  )
+}
+
+export default SignUp

package/auth/SignUp/sign-up.scss

@@ -0,0 +1,56 @@
+@import "helpers";
+
+#sign-up-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-signup {
+    width: 100%;
+    max-width: 380px;
+    margin: auto;
+    background-color: $light;
+    border-radius: 22px;
+    border: 1px solid $gray-600;
+  }
+
+  .form-signup .checkbox {
+    font-weight: 400;
+  }
+
+  .form-signup .form-floating:focus-within {
+    z-index: 2;
+  }
+
+  .form-signup input[type="email"] {
+    margin-bottom: -1px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .form-signup #input-password {
+    border-radius: 0;
+  }
+
+  .form-signup #input-password-confirm {
+    margin-bottom: 10px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-top: none;
+  }
+}

package/auth/index.js

@@ -0,0 +1,72 @@
+/* @flow */
+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,
+  ForgotPassword,
+  SetNewPassword,
+}
+
+const UID_STORAGE_KEY = "rb::session-user_id"
+
+let __is_authenticated = null
+let __user_id = localStorage.getItem(UID_STORAGE_KEY)
+
+const run_session_check = async() => {
+  const res = await post("/api/v1/auth/check_session")
+  const {is_signed_in, user_id} = res
+  __is_authenticated = is_signed_in
+  __user_id = user_id
+  // cache user_id in localStorage
+  if (user_id) {
+    localStorage.setItem(UID_STORAGE_KEY, user_id)
+  }
+}
+
+// manually run first check
+// TODO: this should come from localStorage
+const redirect_sign_in = (ctx) => {
+  const redirect_path = ctx.canonicalPath
+  page.redirect(`/signin?redirect=${encodeURIComponent(redirect_path)}`)
+}
+
+
+export const session_restrict = (ctx, next) => {
+  if (typeof __is_authenticated !== "boolean") {
+    run_session_check()
+      .then(() => {
+        if (__is_authenticated) {
+          next()
+        } else {
+          redirect_sign_in(ctx)
+        }
+      })
+      .catch((err) => {
+        console.log("warning error in check session request", err)
+        throw err
+      })
+  } else if (__is_authenticated) {
+    next()
+  } else {
+    console.log("AUTH", JSON.stringify(__is_authenticated))
+    console.log("NOT AUTHENTICATED, REDIRECT HERE")
+    next()
+  }
+}
+
+
+export const get_uid = () => __user_id
+
+export const set_is_signed_in = (val) => __is_authenticated = val
+
+export const is_signed_in = () => __is_authenticated

package/helpers/post.js

@@ -0,0 +1,20 @@
+/* @flow */
+import axios from "axios"
+
+import config from "config"
+
+const {BASE_URL} = config
+
+const client = axios.create({
+  withCredentials: true,
+  headers: {
+    "Content-Type": "application/json"
+  },
+})
+
+const post = async(url, payload) => {
+  const res = await client.post(`${BASE_URL}${url}`, payload)
+  return res.data
+}
+
+export default post

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.10.0",
+  "version": "0.13.0",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 0"
   },
   "dependencies": {
-    "axios": "0.26.1"
+    "axios": "0.27.2"
   }
 }