@rpcbase/client 0.56.0 → 0.58.0

package/auth/AccountsList/AccountListItem.js

@@ -0,0 +1,67 @@
+/* @flow */
+import assert from "assert"
+import {useTranslation} from "react-i18next"
+import page from "page"
+
+import Avatar from "ui/avatars/Avatar"
+import getInitials from "ui/avatars/Avatar/getInitials"
+
+import "./account-list-item.scss"
+
+const getAvatarText = (user) => {
+  if (user.initials) return user.initials
+
+  const fullName = `${user.first_name || ""} ${user.last_name || ""}`
+  let initials = getInitials(fullName)
+
+  if (!initials) initials = "?"
+
+  return initials
+}
+
+
+const getTenantName = (tenant) => {
+  if (tenant.short_name) return tenant.short_name
+  else if (tenant.name) return tenant.name
+  else return tenant.slug
+}
+
+const getUserName = (user) => {
+  let name = ""
+
+  if (user.first_name) {
+    name += user.first_name
+  }
+
+  if (user.last_name) {
+    name += ` ${user.last_name}`
+  }
+
+  if (!name && user.initials) {
+    name += user.initials
+  }
+
+  if (!name) {
+    name = user.email
+  }
+
+  return name
+}
+
+const AccountListItem = ({account, onClick, avatarProps}) => {
+
+  return (
+    <div
+      key={`acc-${account.user._id}`}
+      className="account-list-item d-flex flex-row"
+      onClick={() => onClick(account)}
+    >
+      <div>
+        <Avatar className="me-2" size="small" text={getAvatarText(account.user)} color={account.user.avatar_color} {...avatarProps} />
+      </div>
+      <div style={{wordBreak: "break-all"}}>{getTenantName(account.tenant)} / {getUserName(account.user)}</div>
+    </div>
+  )
+}
+
+export default AccountListItem

package/auth/AccountsList/account-list-item.scss

@@ -0,0 +1,5 @@
+@import "helpers";
+
+.account-list-item {
+  cursor: pointer;
+}

package/auth/AccountsList/index.js

@@ -0,0 +1,19 @@
+/* @flow */
+import AccountListItem from "./AccountListItem"
+
+
+const AccountsList = ({accounts}) => {
+
+  return (
+    <>
+      {accounts.map((acc) => (
+        <AccountListItem
+          key={`acc-${acc.user._id}`}
+          account={acc}
+        />
+      ))}
+    </>
+  )
+}
+
+export default AccountsList

package/auth/SignOut/index.js

@@ -1,4 +1,5 @@
 /* @flow */
+import assert from "assert"
 import {useState, useEffect} from "react"
 import {ActivityIndicator} from "react-native"
 import page from "page"
@@ -6,49 +7,95 @@ import page from "page"
 import post from "../../helpers/post"
 
 import {set_is_signed_in, set_uid} from "../index"
+import AccountListItem from "../AccountsList/AccountListItem"
+import Footer from "../Footer"
+
+import "./sign-out.scss"
 
 // TODO: rts_disconnect
 // TODO: clear cache + db
 
 const SignOut = ({
+  name,
   onSuccess = () => null
 }) => {
 
   const [isSignedOut, setIsSignedOut] = useState(false)
 
+  const [accounts, setAccounts] = useState([])
+
   useEffect(() => {
-    setTimeout(async() => {
-      const res = await post("/api/v1/auth/sign_out")
-      if (res.status === "ok") {
-        set_uid(null)
-        set_is_signed_in(false)
-        localStorage.clear()
-
-        // TODO: clear DB
-
-        setIsSignedOut(true)
-        onSuccess()
-      } else {
-        throw new Error("unable to sign out")
-      }
-    }, 60)
+    const load = async() => {
+      const res = await post("/api/v1/auth/get_accounts")
+      assert(res.status === "ok")
+      setAccounts(res.accounts)
+      console.log("ACCOUNTS", res.accounts)
+    }
 
+    load()
   }, [])
 
+
+  const signOut = async() => {
+    const res = await post("/api/v1/auth/sign_out")
+    if (res.status === "ok") {
+      set_uid(null)
+      set_is_signed_in(false)
+      localStorage.clear()
+
+      // TODO: clear DB
+
+      setIsSignedOut(true)
+      onSuccess()
+    } else {
+      throw new Error("unable to sign out")
+    }
+  }
+
+
+  const onClickAccount = () => {
+    console.log("clicked account")
+  }
+
+
+  const onSubmit = () => {
+    signOut()
+  }
+
   return (
     <div id="sign-out-wrapper">
-      {!isSignedOut && (
-        <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>
-      )}
-      {isSignedOut && (
-        <div className="mt-3 d-flex flex-column flex-1 justify-content-center align-items-center">
-          <div className="">Signed out</div>
-          <a href="/">Home</a>
+      {isSignedOut && <div>signed out successfully</div>}
+      {accounts?.length > 0 && (<><div className="form-signout text-center px-4 py-4 shadow-lg">
+        <div>
+          <h1 className="h4 mt-3 mb-3 fw-normal">Sign Out</h1>
+          <p className="text-start text-muted">
+            Select accounts to sign out of:
+          </p>
+
+          <ul className="list-group text-start">
+            {accounts.map((acc, index) => {
+              const id = `acc-${acc.user_id}-${index}`
+              return (
+                <li key={id} className="list-group-item">
+                  <input className="form-check-input me-3" type="checkbox" value="" id={id} />
+                  <label className="form-check-label stretched-link" for={id}>
+                    <AccountListItem
+                      account={acc}
+                      onClick={onClickAccount}
+                    />
+                  </label>
+                </li>
+              )
+            })}
+          </ul>
+
+          <button className="mt-4 mb-3 w-100 btn btn-lg btn-primary" type="submit" onClick={onSubmit}>Sign Out</button>
+
         </div>
-      )}
+      </div>
+
+      <Footer name={name} />
+      </>)}
     </div>
   )
 }

package/auth/SignOut/sign-out.scss

@@ -0,0 +1,34 @@
+@import "helpers";
+
+#sign-out-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;
+
+  footer {
+    color: $light !important;
+    border-top: none !important;
+    padding-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+
+  .form-signout {
+    width: 100%;
+    max-width: 380px;
+    margin: auto;
+    background-color: $light;
+    border-radius: 22px;
+    // border: 1px solid $gray-600;
+  }
+
+  .form-signout .checkbox {
+    font-weight: 400;
+  }
+
+}

package/auth/index.js

@@ -1,6 +1,7 @@
 /* @flow */
 import page from "page"
 import debug from "debug"
+import isHexadecimal from "validator/lib/isHexadecimal"
 
 import {disconnect as rts_disconnect} from "../rts"
 import post from "../helpers/post"
@@ -18,8 +19,25 @@ let __tenant_id = typeof localStorage !== "undefined" && localStorage.getItem(LA
 let __user_id = typeof localStorage !== "undefined" && __tenant_id && localStorage.getItem(uid_storage_key(__tenant_id))
 
 
+const get_querystring_auth_id = () => {
+  const url = new URL(window.location.href)
+  const val = url.searchParams.get("auth_id")
+  if (!val) return null
+
+  if (isHexadecimal(val) && val.length === 24) return val
+
+  return null
+}
+
+
 const run_session_check = async() => {
-  const res = await post("/api/v1/auth/check_session")
+  const auth_user_id = get_querystring_auth_id()
+
+  if (auth_user_id) {
+    log("check_session with auth user_id", auth_user_id)
+  }
+
+  const res = await post("/api/v1/auth/check_session", {auth_user_id})
 
   log("check_session response", res)
 

package/hashState.js

@@ -5,8 +5,8 @@ import _isNil from "lodash/isNil"
 import _omitBy from "lodash/omitBy"
 import isEqual from "fast-deep-equal"
 
-import {PAGE_NAVIGATION} from "config/events"
 
+const PAGE_NAVIGATION_EVENT = "RB_PAGE_NAVIGATION"
 
 const EMPTY_STATE_TOKEN = "N4XyA" // lz-string encoded empty state ''
 
@@ -91,9 +91,9 @@ export const HashStateProvider = ({children}) => {
         setHashState(newState)
       }
     }
-    document.body.addEventListener(PAGE_NAVIGATION, onChange)
+    document.body.addEventListener(PAGE_NAVIGATION_EVENT, onChange)
 
-    return () => document.body.removeEventListener(PAGE_NAVIGATION, onChange)
+    return () => document.body.removeEventListener(PAGE_NAVIGATION_EVENT, onChange)
   }, [hashState, setHashState])
 
   useEffect(() => {
@@ -139,3 +139,10 @@ export const HashStateProvider = ({children}) => {
     </HashContext.Provider>
   )
 }
+
+
+export const hashStateMiddleware = (context, next) => {
+  next()
+  const ev = new CustomEvent(PAGE_NAVIGATION_EVENT, {detail: {context}})
+  document.body.dispatchEvent(ev)
+}

package/package.json

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