@rpcbase/client 0.212.0 → 0.213.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/i18n/en/rb.nav.json +11 -0
- package/package.json +1 -1
- package/ui/UserAvatar/default_colors.json +82 -0
- package/ui/UserAvatar/index.js +55 -0
- package/ui/helpers/helpers.scss +61 -0
- package/ui/icons/AddAccount.tsx +5 -0
- package/ui/icons/Billing.tsx +6 -0
- package/ui/icons/Organization.tsx +5 -0
- package/ui/icons/Signout.tsx +5 -0
- package/ui/icons/index.tsx +5 -0
- package/ui/nav/AccountsDropdown/SwitchAccounts.tsx +28 -0
- package/ui/nav/AccountsDropdown/accounts-dropdown.scss +51 -0
- package/ui/nav/AccountsDropdown/index.tsx +90 -0
- package/ui/nav/AccountsToggle/index.tsx +24 -0
- package/ui/nav/index.ts +2 -0
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
{
|
|
2
|
+
"search_anything": {
|
|
3
|
+
"placeholder": "Search Anything..."
|
|
4
|
+
},
|
|
5
|
+
"account_settings": "Account Settings",
|
|
6
|
+
"organization": "Oranization",
|
|
7
|
+
"billing": "Billing",
|
|
8
|
+
"switch_accounts": "Switch Accounts",
|
|
9
|
+
"add_account": "Add Account",
|
|
10
|
+
"sign_out": "Sign Out"
|
|
11
|
+
}
|
package/package.json
CHANGED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"color": "#9E4DB6",
|
|
4
|
+
"is_light": true
|
|
5
|
+
},
|
|
6
|
+
{
|
|
7
|
+
"color": "#70269C",
|
|
8
|
+
"is_light": true
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
"color": "#7D8F9B",
|
|
12
|
+
"is_light": true
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"color": "#4A5964",
|
|
16
|
+
"is_light": true
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"color": "#DA4F7A",
|
|
20
|
+
"is_light": true
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"color": "#B32D5B",
|
|
24
|
+
"is_light": true
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"color": "#5F6BBA",
|
|
28
|
+
"is_light": true
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"color": "#3B86CB",
|
|
32
|
+
"is_light": true
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"color": "#235697",
|
|
36
|
+
"is_light": true
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"color": "#4396A4",
|
|
40
|
+
"is_light": true
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"color": "#3B867A",
|
|
44
|
+
"is_light": true
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"color": "#1F4B3F",
|
|
48
|
+
"is_light": true
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"color": "#749E48",
|
|
52
|
+
"is_light": true
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"color": "#416829",
|
|
56
|
+
"is_light": true
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"color": "#856F65",
|
|
60
|
+
"is_light": true
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"color": "#5A4139",
|
|
64
|
+
"is_light": true
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"color": "#7959BC",
|
|
68
|
+
"is_light": true
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"color": "#4C2FA1",
|
|
72
|
+
"is_light": true
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"color": "#DF742C",
|
|
76
|
+
"is_light": true
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"color": "#E35D33",
|
|
80
|
+
"is_light": true
|
|
81
|
+
}
|
|
82
|
+
]
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import {memo, useState, useEffect} from "react"
|
|
2
|
+
|
|
3
|
+
import {useQuery} from "../../rts"
|
|
4
|
+
import getInitials from "../../helpers/getInitials"
|
|
5
|
+
import Avatar from "../Avatar"
|
|
6
|
+
import {hashStrToInt} from "@rpcbase/std/crypto"
|
|
7
|
+
|
|
8
|
+
import COLORS from "./default_colors.json"
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
export const UserAvatar = memo(({userId, size = "small"}) => {
|
|
12
|
+
const [text, setText] = useState("")
|
|
13
|
+
const [color, setColor] = useState("#adb5bd")
|
|
14
|
+
|
|
15
|
+
const userQuery = useQuery(
|
|
16
|
+
"User",
|
|
17
|
+
{_owners: {$in: [userId]}},
|
|
18
|
+
{
|
|
19
|
+
// TODO: why is there a userId here??
|
|
20
|
+
userId,
|
|
21
|
+
key: `user-${userId}`,
|
|
22
|
+
useStorage: true,
|
|
23
|
+
},
|
|
24
|
+
)
|
|
25
|
+
// const userQuery = {}
|
|
26
|
+
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
const data = userQuery.data?.[0]
|
|
29
|
+
|
|
30
|
+
if (data) {
|
|
31
|
+
const fullName = `${data.first_name || ""} ${data.last_name || ""}`
|
|
32
|
+
// const
|
|
33
|
+
if (data.initials) {
|
|
34
|
+
setText(data.initials)
|
|
35
|
+
} else {
|
|
36
|
+
if (fullName.trim() !== "") {
|
|
37
|
+
const initials = getInitials(fullName)
|
|
38
|
+
setText(initials)
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
if (data.avatar_color) {
|
|
43
|
+
setColor(data.avatar_color)
|
|
44
|
+
}
|
|
45
|
+
// TODO: it would be better to update the color with a server hook
|
|
46
|
+
// that sets it when the user full name is set
|
|
47
|
+
// otherwise the color can change if the user changes their name
|
|
48
|
+
else {
|
|
49
|
+
setColor(COLORS[hashStrToInt(fullName, COLORS.length)])
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}, [userQuery.data])
|
|
53
|
+
|
|
54
|
+
return <Avatar size={size} text={text} color={color} />
|
|
55
|
+
})
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
// padding
|
|
2
|
+
@mixin pt($size) {
|
|
3
|
+
padding-top: $size * 0.25rem;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
@mixin pe($size) {
|
|
7
|
+
padding-right: $size * 0.25rem;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@mixin pb($size) {
|
|
11
|
+
padding-bottom: $size * 0.25rem;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@mixin ps($size) {
|
|
15
|
+
padding-left: $size * 0.25rem;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@mixin px($size) {
|
|
19
|
+
padding-left: $size * 0.25rem;
|
|
20
|
+
padding-right: $size * 0.25rem;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@mixin py($size) {
|
|
24
|
+
padding-top: $size * 0.25rem;
|
|
25
|
+
padding-bottom: $size * 0.25rem;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@mixin p($size) {
|
|
29
|
+
padding: $size * 0.25rem;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
// margins
|
|
33
|
+
@mixin mt($size) {
|
|
34
|
+
margin-top: $size * 0.25rem;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@mixin me($size) {
|
|
38
|
+
margin-right: $size * 0.25rem;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@mixin mb($size) {
|
|
42
|
+
margin-bottom: $size * 0.25rem;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@mixin ms($size) {
|
|
46
|
+
margin-left: $size * 0.25rem;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@mixin mx($size) {
|
|
50
|
+
margin-left: $size * 0.25rem;
|
|
51
|
+
margin-right: $size * 0.25rem;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@mixin my($size) {
|
|
55
|
+
margin-top: $size * 0.25rem;
|
|
56
|
+
margin-bottom: $size * 0.25rem;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
@mixin m($size) {
|
|
60
|
+
margin: $size * 0.25rem;
|
|
61
|
+
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export const AddAccountIcon = (props) => (
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px" {...props}>
|
|
3
|
+
<path d="M 15 2.0019531 C 10.758 2.0019531 9 4.7229531 9 8.0019531 C 9 9.1059531 9.5273437 10.214844 9.5273438 10.214844 C 9.3153438 10.336844 8.9666875 10.724109 9.0546875 11.412109 C 9.2186875 12.695109 9.7749062 13.021828 10.128906 13.048828 C 10.263906 14.245828 11.55 15.777 12 16 L 12 18 C 11 21 3 19 3 26 L 14.523438 26 C 14.190437 25.06 14 24.054 14 23 C 14 19.461 16.047578 16.4085 19.017578 14.9375 C 19.426578 14.3675 19.801094 13.665828 19.871094 13.048828 C 20.225094 13.021828 20.781312 12.695109 20.945312 11.412109 C 21.033313 10.723109 20.684656 10.336844 20.472656 10.214844 C 20.472656 10.214844 21 9.2129531 21 8.0019531 C 21 5.5739531 20.047 3.5019531 18 3.5019531 C 18 3.5019531 17.289 2.0019531 15 2.0019531 z M 23 16 C 19.134 16 16 19.134 16 23 C 16 26.866 19.134 30 23 30 C 26.866 30 30 26.866 30 23 C 30 19.134 26.866 16 23 16 z M 23 19 C 23.552 19 24 19.447 24 20 L 24 22 L 26 22 C 26.552 22 27 22.447 27 23 C 27 23.553 26.552 24 26 24 L 24 24 L 24 26 C 24 26.553 23.552 27 23 27 C 22.448 27 22 26.553 22 26 L 22 24 L 20 24 C 19.448 24 19 23.553 19 23 C 19 22.447 19.448 22 20 22 L 22 22 L 22 20 C 22 19.447 22.448 19 23 19 z" />
|
|
4
|
+
</svg>
|
|
5
|
+
)
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
|
|
2
|
+
export const BillingIcon = (props) => (
|
|
3
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px" {...props}>
|
|
4
|
+
<path d="M 8 3 C 6.895 3 6 3.895 6 5 L 6 25 C 6 26.105 6.895 27 8 27 L 14.947266 27 C 14.487266 26.078 14.176594 25.069 14.058594 24 L 10.5 24 C 9.672 24 9 23.328 9 22.5 C 9 21.672 9.672 21 10.5 21 L 14.230469 21 C 14.397469 20.263 14.656187 19.56225 14.992188 18.90625 C 14.415188 18.69725 14 18.149 14 17.5 C 14 16.672 14.672 16 15.5 16 C 15.985 16 16.410547 16.234797 16.685547 16.591797 C 18.309547 14.990797 20.539 14 23 14 C 23.688 14 24.356 14.083469 25 14.230469 L 25 5 C 25 3.895 24.105 3 23 3 L 8 3 z M 9 6 L 22 6 L 22 9 L 9 9 L 9 6 z M 10.5 11 C 11.328 11 12 11.672 12 12.5 C 12 13.328 11.328 14 10.5 14 C 9.672 14 9 13.328 9 12.5 C 9 11.672 9.672 11 10.5 11 z M 15.5 11 C 16.328 11 17 11.672 17 12.5 C 17 13.328 16.328 14 15.5 14 C 14.672 14 14 13.328 14 12.5 C 14 11.672 14.672 11 15.5 11 z M 20.5 11 C 21.328 11 22 11.672 22 12.5 C 22 13.328 21.328 14 20.5 14 C 19.672 14 19 13.328 19 12.5 C 19 11.672 19.672 11 20.5 11 z M 10.5 16 C 11.328 16 12 16.672 12 17.5 C 12 18.328 11.328 19 10.5 19 C 9.672 19 9 18.328 9 17.5 C 9 16.672 9.672 16 10.5 16 z M 23 16 C 19.134 16 16 19.134 16 23 C 16 26.866 19.134 30 23 30 C 26.866 30 30 26.866 30 23 C 30 19.134 26.866 16 23 16 z M 22 18 L 24 18 L 24 19.419922 C 25.088 19.708922 25.791453 20.468375 25.814453 21.484375 L 24.160156 21.484375 C 24.121156 20.986375 23.647578 20.638672 23.017578 20.638672 C 22.387578 20.638672 21.972656 20.93725 21.972656 21.40625 C 21.972656 21.79225 22.284344 22.015109 23.027344 22.162109 L 23.935547 22.339844 C 25.327547 22.608844 25.951172 23.236469 25.951172 24.355469 C 25.951172 25.527469 25.227 26.321656 24 26.597656 L 24 28 L 22 28 L 22 26.605469 C 20.802 26.346469 20.072828 25.601578 20.048828 24.517578 L 21.757812 24.517578 C 21.801813 25.030578 22.314641 25.357422 23.056641 25.357422 C 23.725641 25.357422 24.183594 25.034312 24.183594 24.570312 C 24.183594 24.179312 23.875312 23.969594 23.070312 23.808594 L 22.142578 23.623047 C 20.853578 23.379047 20.189453 22.675406 20.189453 21.566406 C 20.189453 20.482406 20.88 19.700109 22 19.412109 L 22 18 z" />
|
|
5
|
+
</svg>
|
|
6
|
+
)
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export const OrganizationIcon = (props) => (
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px" {...props}>
|
|
3
|
+
<path d="M 12 4 C 10.895 4 10 4.895 10 6 L 10 8 C 10 9.105 10.895 10 12 10 L 14 10 L 14 14 L 6 14 A 1.0001 1.0001 0 0 0 5 15 L 5 20 C 3.895 20 3 20.895 3 22 L 3 24 C 3 25.105 3.895 26 5 26 L 7 26 C 8.105 26 9 25.105 9 24 L 9 22 C 9 20.895 8.105 20 7 20 L 7 16 L 14 16 L 14 20 C 12.895 20 12 20.895 12 22 L 12 24 C 12 25.105 12.895 26 14 26 L 16 26 C 17.105 26 18 25.105 18 24 L 18 22 C 18 20.895 17.105 20 16 20 L 16 16 L 23 16 L 23 20 C 21.895 20 21 20.895 21 22 L 21 24 C 21 25.105 21.895 26 23 26 L 25 26 C 26.105 26 27 25.105 27 24 L 27 22 C 27 20.895 26.105 20 25 20 L 25 15 A 1.0001 1.0001 0 0 0 24 14 L 16 14 L 16 10 L 18 10 C 19.105 10 20 9.105 20 8 L 20 6 C 20 4.895 19.105 4 18 4 L 12 4 z" />
|
|
4
|
+
</svg>
|
|
5
|
+
)
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export const SignoutIcon = (props) => (
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px" {...props}>
|
|
3
|
+
<path d="M 5 3 C 3.897 3 3 3.897 3 5 L 3 25 C 3 26.103 3.897 27 5 27 L 19 27 C 20.103 27 21 26.103 21 25 L 21 16 L 13 16 C 12.448 16 12 15.552 12 15 C 12 14.448 12.448 14 13 14 L 21 14 L 21 5 C 21 3.897 20.103 3 19 3 L 5 3 z M 21 14 L 21 16 L 26.585938 16 L 24.292969 18.292969 A 1.0001 1.0001 0 1 0 25.707031 19.707031 L 29.707031 15.707031 A 1.0001 1.0001 0 0 0 29.707031 14.292969 L 25.707031 10.292969 A 1.0001 1.0001 0 0 0 24.990234 9.9902344 A 1.0001 1.0001 0 0 0 24.292969 11.707031 L 26.585938 14 L 21 14 z" />
|
|
4
|
+
</svg>
|
|
5
|
+
)
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import assert from "assert"
|
|
2
|
+
import {useTranslation} from "react-i18next"
|
|
3
|
+
|
|
4
|
+
import page from "../../../page"
|
|
5
|
+
import {AccountListItem} from "../../../auth/components/AccountsList/AccountListItem"
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
export const SwitchAccounts = ({accounts}) => {
|
|
9
|
+
const {t} = useTranslation("rb.nav")
|
|
10
|
+
|
|
11
|
+
const onClickAccount = (account) => () => {
|
|
12
|
+
const user_id = account.user._id
|
|
13
|
+
assert(user_id, "invalid user_id")
|
|
14
|
+
page.stop()
|
|
15
|
+
// IMPORTANT to not use the page router so that the js memory is cleared when switching accounts
|
|
16
|
+
window.location.href = `/?auth_id=${user_id}`
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
return (
|
|
20
|
+
<>
|
|
21
|
+
<small className="ms-2 mt-2 menu-header">{t("switch_accounts")}</small>
|
|
22
|
+
|
|
23
|
+
{accounts.map((acc, i) => (
|
|
24
|
+
<AccountListItem key={`acc-${acc.user._id}-${i}`} account={acc} onClick={onClickAccount} />
|
|
25
|
+
))}
|
|
26
|
+
</>
|
|
27
|
+
)
|
|
28
|
+
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
@import "../../helpers/helpers";
|
|
2
|
+
@import "helpers";
|
|
3
|
+
|
|
4
|
+
// #nav-account-dropdown {
|
|
5
|
+
// .accounts-glyph > svg {
|
|
6
|
+
// fill: $gray-200;
|
|
7
|
+
//
|
|
8
|
+
// &:hover {
|
|
9
|
+
// fill: $white;
|
|
10
|
+
// }
|
|
11
|
+
// }
|
|
12
|
+
// }
|
|
13
|
+
|
|
14
|
+
#accounts-dropdown-menu {
|
|
15
|
+
color: $gray-100;
|
|
16
|
+
|
|
17
|
+
.menu-header {
|
|
18
|
+
color: $gray-500;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.account-list-item {
|
|
22
|
+
@include px(2);
|
|
23
|
+
@include py(2);
|
|
24
|
+
|
|
25
|
+
cursor: pointer;
|
|
26
|
+
color: $gray-400;
|
|
27
|
+
|
|
28
|
+
&:hover {
|
|
29
|
+
background: $gray-800;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&:active {
|
|
33
|
+
background: $black;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.account-dropdown-icon {
|
|
39
|
+
width: 18px;
|
|
40
|
+
height: 18px;
|
|
41
|
+
|
|
42
|
+
& path {
|
|
43
|
+
fill: $gray-400;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.account-dropdown-item:hover {
|
|
48
|
+
.account-dropdown-icon path {
|
|
49
|
+
fill: $white;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import {useTranslation} from "react-i18next"
|
|
2
|
+
import Dropdown from "react-bootstrap/Dropdown"
|
|
3
|
+
|
|
4
|
+
import {getUid} from "../../../auth/getUid"
|
|
5
|
+
import {useHashState} from "../../../hashState"
|
|
6
|
+
|
|
7
|
+
import {UserAvatar} from "../../UserAvatar"
|
|
8
|
+
|
|
9
|
+
import * as MorphingDropdown from "../MorphingDropdown"
|
|
10
|
+
|
|
11
|
+
import {AddAccountIcon, BillingIcon, OrganizationIcon, SignoutIcon} from "../../icons"
|
|
12
|
+
|
|
13
|
+
import {SwitchAccounts} from "./SwitchAccounts"
|
|
14
|
+
|
|
15
|
+
import "./accounts-dropdown.scss"
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
export const AccountsDropdown = ({id, accounts}) => {
|
|
19
|
+
const {t} = useTranslation("rb.nav")
|
|
20
|
+
|
|
21
|
+
const uid = getUid()
|
|
22
|
+
|
|
23
|
+
const {serializeHashState} = useHashState()
|
|
24
|
+
|
|
25
|
+
const showAccountSettings = () => {
|
|
26
|
+
serializeHashState({
|
|
27
|
+
showAccountSettingsModal: true,
|
|
28
|
+
})
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
return (
|
|
32
|
+
<MorphingDropdown.Menu id={id}>
|
|
33
|
+
<div
|
|
34
|
+
id="accounts-dropdown-menu"
|
|
35
|
+
className="list-group"
|
|
36
|
+
data-bs-theme="dark"
|
|
37
|
+
style={{width: 200}}
|
|
38
|
+
>
|
|
39
|
+
<div>{t("account_settings")}</div>
|
|
40
|
+
<div
|
|
41
|
+
id="btn-dd-account-settings"
|
|
42
|
+
role="button"
|
|
43
|
+
className="list-group-item account-dropdown-item ps-1 d-flex align-items-center justify-content-start cursor-pointer"
|
|
44
|
+
onClick={showAccountSettings}
|
|
45
|
+
>
|
|
46
|
+
<div className="me-1">
|
|
47
|
+
<UserAvatar userId={uid} />
|
|
48
|
+
</div>
|
|
49
|
+
{t("account_settings")}
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<div className="list-group-item account-dropdown-item" role="button">
|
|
53
|
+
<OrganizationIcon
|
|
54
|
+
className="account-dropdown-icon me-2"
|
|
55
|
+
style={{marginLeft: -10, marginTop: -2}}
|
|
56
|
+
/>
|
|
57
|
+
{t("organization")}
|
|
58
|
+
</div>
|
|
59
|
+
<div className="list-group-item account-dropdown-item" role="button">
|
|
60
|
+
<BillingIcon
|
|
61
|
+
className="account-dropdown-icon me-2"
|
|
62
|
+
style={{marginLeft: -10, marginTop: -2}}
|
|
63
|
+
/>
|
|
64
|
+
Billing
|
|
65
|
+
</div>
|
|
66
|
+
<Dropdown.Divider />
|
|
67
|
+
|
|
68
|
+
<SwitchAccounts accounts={accounts} />
|
|
69
|
+
|
|
70
|
+
<Dropdown.Divider />
|
|
71
|
+
|
|
72
|
+
<a href="/signin" className="list-group-item account-dropdown-item">
|
|
73
|
+
<AddAccountIcon
|
|
74
|
+
className="account-dropdown-icon me-2"
|
|
75
|
+
style={{marginLeft: -10, marginTop: -2}}
|
|
76
|
+
/>
|
|
77
|
+
Add Account
|
|
78
|
+
</a>
|
|
79
|
+
<Dropdown.Divider />
|
|
80
|
+
<a href="/signout" className="list-group-item account-dropdown-item">
|
|
81
|
+
<SignoutIcon
|
|
82
|
+
className="account-dropdown-icon me-2"
|
|
83
|
+
style={{marginLeft: -10, marginTop: -2}}
|
|
84
|
+
/>
|
|
85
|
+
Sign Out
|
|
86
|
+
</a>
|
|
87
|
+
</div>
|
|
88
|
+
</MorphingDropdown.Menu>
|
|
89
|
+
)
|
|
90
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import {useEffect} from "react"
|
|
2
|
+
import {getUid} from "../../../auth/getUid"
|
|
3
|
+
|
|
4
|
+
import {UserAvatar} from "../../UserAvatar"
|
|
5
|
+
|
|
6
|
+
import * as MorphingDropdown from "../MorphingDropdown"
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
export const AccountsToggle = () => {
|
|
10
|
+
const uid = getUid()
|
|
11
|
+
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
console.log("WOWOWO", uid)
|
|
14
|
+
})
|
|
15
|
+
|
|
16
|
+
return (
|
|
17
|
+
<MorphingDropdown.Toggle
|
|
18
|
+
id="accounts"
|
|
19
|
+
className="ps-1 pe-2 h-100 d-flex justify-content-center align-items-center"
|
|
20
|
+
>
|
|
21
|
+
<UserAvatar userId={uid} size={"medium"} />
|
|
22
|
+
</MorphingDropdown.Toggle>
|
|
23
|
+
)
|
|
24
|
+
}
|