@rpcbase/client 0.150.0 → 0.151.0

package/auth/SignIn/SignInEmailForm.js

@@ -2,7 +2,7 @@
 import assert from "assert"
 import debug from "debug"
 import {useState, useEffect} from "react"
-import {useSearchParam} from "react-use"
+import useSearchParam from "react-use/lib/useSearchParam"
 import isEmail from "validator/lib/isEmail"
 import page from "page"
 

package/auth/SignIn/index.js

@@ -55,7 +55,7 @@ const SignIn = ({
             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="Sign in" />
+            return <Comp key={`${provider.id}-${index}`} text="Sign in" className="w-100 justify-content-center" />
           })}
 
 

package/auth/SignOut/index.js

@@ -5,6 +5,8 @@ import {ActivityIndicator} from "react-native"
 import Alert from "react-bootstrap/Alert"
 import page from "page"
 
+import authConfig from "@rpcbase/dot-rb/auth"
+
 import {sign_out} from "../sign_out"
 
 import post from "../../helpers/post"
@@ -16,6 +18,7 @@ import "./sign-out.scss"
 
 // TODO: rts_disconnect
 // TODO: clear cache + db
+const hasMultiAccounts = authConfig.has_multi_accounts
 
 const SignOut = ({
   logo,
@@ -30,6 +33,8 @@ const SignOut = ({
 
 
   useEffect(() => {
+    if (!hasMultiAccounts) return
+
     const load = async() => {
       const res = await post("/api/v1/auth/get_accounts")
       assert(res.status === "ok")
@@ -41,6 +46,7 @@ const SignOut = ({
 
 
   const signOut = async() => {
+    // TODO: NYI handle sign out from multiple accounts here
     const res = await post("/api/v1/auth/sign_out")
     if (res.status === "ok") {
       sign_out()
@@ -57,6 +63,8 @@ const SignOut = ({
     signOut()
   }
 
+  const message = hasMultiAccounts ? "Select accounts to sign out of:" : "Click here to sign out of your account:"
+
   return (
     <div id="sign-out-wrapper">
 
@@ -66,63 +74,60 @@ const SignOut = ({
         </Alert>
       )}
 
-      {accounts ? (
-        <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">Sign Out</h1>
-
-          {Array.isArray(accounts) && accounts.length > 0 && (
-            <>
-              <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}`
-
-                  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="mt-4 mb-3 w-100 btn btn-lg btn-primary" type="submit" onClick={onSubmit}>Sign Out</button>
-            </>
-          )}
-
-          {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>) : <div className="h-100"/>}
+      <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">Sign Out</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} />
 

package/auth/SignUp/index.js

@@ -55,7 +55,7 @@ const SignUp = ({
             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="Sign up"/>
+            return <Comp key={`${provider.id}-${index}`} text="Sign up" className="w-100 justify-content-center" />
           })}
         </div>
       </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.150.0",
+  "version": "0.151.0",
   "scripts": {
     "test": "../../node_modules/.bin/wireit"
   },

package/src/ui/oauth/GitHub.js

@@ -1,11 +1,23 @@
 /* @flow */
+import {useEffect, useState} from "react"
+import useLocation from "react-use/lib/useLocation"
 
+import getGitHubSigninUrl from "./getGitHubSigninUrl"
 
-export const GitHub = ({text}) => {
+
+export const GitHub = ({text, className = ""}) => {
+  const location = useLocation()
+
+  const [url, setUrl] = useState(getGitHubSigninUrl())
+
+  useEffect(() => {
+    const newUrl = getGitHubSigninUrl()
+    setUrl(newUrl)
+  }, [location])
 
   return (
-    <a href="/signup"
-      className="sign-in-github-btn p-2 btn-lg w-100"
+    <a href={url}
+      className={cx("sign-in-github-btn p-2 btn-lg", className)}
       style={{}}>
       <div style={{}} className="me-2">
         <svg height="28px" width="28px" viewBox="0 0 16 16"  style={{fill: "currentColor"}}>

package/src/ui/oauth/getGitHubSigninUrl.js

@@ -0,0 +1,27 @@
+/* @flow */
+import {GITHUB_OAUTH_CLIENT_ID} from "env"
+
+// https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/scopes-for-oauth-apps#available-scopes
+const DEFAULT_SCOPES = []
+
+const getGitHubSigninUrl = () => {
+  const params = new URLSearchParams(window.location.search)
+  const scopes = params.get("scopes") || ""
+  const state = params.get("state")
+
+  let reqScopes = DEFAULT_SCOPES.join("")
+  if (reqScopes && scopes) {
+    reqScopes += `%20${scopes}`
+  } else if (scopes) {
+    reqScopes = scopes
+  }
+
+  let authUrl = "https://github.com/login/oauth/authorize?client_id=" + GITHUB_OAUTH_CLIENT_ID + `&scope=${reqScopes}`
+  if (state) {
+    authUrl += `&state=${state}`
+  }
+
+  return authUrl
+}
+
+export default getGitHubSigninUrl

package/src/ui/oauth/index.js

@@ -1,10 +1,8 @@
 /* @flow */
+import {GitHub} from "./GitHub"
 
 import "./oauth.scss"
 
-import {GitHub} from "./GitHub"
-
-// export * from "./GitHub"
 export const AUTH_BUTTONS = {
   github: GitHub,
 }