Fix bug 68260 - Accounts. Add a display of the user's role and a description of the role to his profile card.
This commit is contained in:
parent
26dfc2f9bf
commit
a42292cbc4
@ -35,6 +35,7 @@ import { Link } from "@docspace/shared/components/link";
|
||||
import Badges from "../../Badges";
|
||||
import { tablet, mobile } from "@docspace/shared/utils/device";
|
||||
import { PRODUCT_NAME } from "@docspace/shared/constants";
|
||||
import { getUserTypeName } from "@docspace/shared/utils/common";
|
||||
|
||||
const StyledRowContent = styled(RowContent)`
|
||||
@media ${tablet} {
|
||||
@ -89,6 +90,9 @@ const UserContent = ({
|
||||
isCollaborator,
|
||||
isSSO,
|
||||
isLDAP,
|
||||
isOwner,
|
||||
isAdmin,
|
||||
isRoomAdmin,
|
||||
} = item;
|
||||
|
||||
const nameColor =
|
||||
@ -100,16 +104,13 @@ const UserContent = ({
|
||||
? theme.peopleTableRow.pendingSideInfoColor
|
||||
: theme.peopleTableRow.sideInfoColor;
|
||||
|
||||
const roleLabel =
|
||||
role === "owner"
|
||||
? t("Common:Owner")
|
||||
: role === "admin"
|
||||
? t("Common:PortalAdmin", { productName: PRODUCT_NAME })
|
||||
: isCollaborator
|
||||
? t("Common:PowerUser")
|
||||
: isVisitor
|
||||
? t("Common:User")
|
||||
: t("Common:RoomAdmin");
|
||||
const roleLabel = getUserTypeName(
|
||||
isOwner,
|
||||
isAdmin,
|
||||
isRoomAdmin,
|
||||
isCollaborator,
|
||||
t,
|
||||
);
|
||||
|
||||
const isPaidUser = !standalone && !isVisitor;
|
||||
|
||||
|
||||
@ -43,7 +43,12 @@ import { Badge } from "@docspace/shared/components/badge";
|
||||
import { isMobileOnly } from "react-device-detect";
|
||||
import { toastr } from "@docspace/shared/components/toast";
|
||||
import { showEmailActivationToast } from "SRC_DIR/helpers/people-helpers";
|
||||
import { getUserRole, convertLanguage } from "@docspace/shared/utils/common";
|
||||
import {
|
||||
getUserRole,
|
||||
convertLanguage,
|
||||
getUserTypeName,
|
||||
getUserTypeDescription,
|
||||
} from "@docspace/shared/utils/common";
|
||||
import BetaBadge from "../../../../../../components/BetaBadgeWrapper";
|
||||
|
||||
import { Trans } from "react-i18next";
|
||||
@ -91,6 +96,8 @@ const MainProfile = (props) => {
|
||||
const { interfaceDirection } = useTheme();
|
||||
const dirTooltip = interfaceDirection === "rtl" ? "left" : "right";
|
||||
|
||||
const { isOwner, isAdmin, isRoomAdmin, isCollaborator } = profile;
|
||||
|
||||
useEffect(() => {
|
||||
checkWidth();
|
||||
window.addEventListener("resize", checkWidth);
|
||||
@ -226,171 +233,192 @@ const MainProfile = (props) => {
|
||||
currentColorScheme={currentColorScheme}
|
||||
>
|
||||
<div className="rows-container">
|
||||
<div className="profile-block">
|
||||
<StyledLabel as="div">{t("Common:Name")}</StyledLabel>
|
||||
<StyledLabel as="div">{t("Common:Name")}</StyledLabel>
|
||||
<div className="profile-block-field">
|
||||
<Text fontWeight={600} truncate title={profile.displayName}>
|
||||
{profile.displayName}
|
||||
</Text>
|
||||
{profile.isSSO && (
|
||||
<>
|
||||
<Badge
|
||||
id="sso-badge-profile"
|
||||
className="sso-badge"
|
||||
label={t("Common:SSO")}
|
||||
color={"#FFFFFF"}
|
||||
backgroundColor="#22C386"
|
||||
fontSize={"9px"}
|
||||
fontWeight={800}
|
||||
noHover
|
||||
lineHeight={"13px"}
|
||||
/>
|
||||
<Tooltip anchorSelect={`div[id='sso-badge-profile'] div`}>
|
||||
{t("PeopleTranslations:SSOAccountTooltip")}
|
||||
</Tooltip>
|
||||
</>
|
||||
)}
|
||||
|
||||
<StyledLabel as="div" marginTopProp="16px">
|
||||
{t("Common:Email")}
|
||||
</StyledLabel>
|
||||
{profile.isLDAP && (
|
||||
<>
|
||||
<Badge
|
||||
id="ldap-badge-profile"
|
||||
className="ldap-badge"
|
||||
label={t("Common:LDAP")}
|
||||
color={"#FFFFFF"}
|
||||
backgroundColor="#8570BD"
|
||||
fontSize={"9px"}
|
||||
fontWeight={800}
|
||||
noHover
|
||||
lineHeight={"13px"}
|
||||
/>
|
||||
<Tooltip anchorSelect={`div[id='ldap-badge-profile'] div`}>
|
||||
{t("PeopleTranslations:LDAPAccountTooltip")}
|
||||
</Tooltip>
|
||||
</>
|
||||
)}
|
||||
|
||||
<StyledLabel
|
||||
as="div"
|
||||
marginTopProp={withActivationBar ? "34px" : "16px"}
|
||||
>
|
||||
{t("Common:Password")}
|
||||
</StyledLabel>
|
||||
{!profile.isSSO && !profile.isLDAP && (
|
||||
<IconButton
|
||||
className="edit-button"
|
||||
iconName={PencilOutlineReactSvgUrl}
|
||||
size="12"
|
||||
onClick={() => setChangeNameVisible(true)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<StyledLabel
|
||||
as="div"
|
||||
className="profile-language"
|
||||
marginTopProp="15px"
|
||||
>
|
||||
{t("Common:Language")}
|
||||
<StyledLabel as="div">{t("Common:Email")}</StyledLabel>
|
||||
<div className="email-container">
|
||||
<div className="email-edit-container">
|
||||
<Text
|
||||
data-tooltip-id="emailTooltip"
|
||||
data-tooltip-content={t("EmailNotVerified")}
|
||||
as="div"
|
||||
className="email-text-container"
|
||||
fontWeight={600}
|
||||
truncate
|
||||
>
|
||||
{profile.email}
|
||||
</Text>
|
||||
{withActivationBar && (
|
||||
<Tooltip
|
||||
float
|
||||
id="emailTooltip"
|
||||
getContent={({ content }) => (
|
||||
<Text fontSize="12px">{content}</Text>
|
||||
)}
|
||||
place="bottom"
|
||||
/>
|
||||
)}
|
||||
{!profile.isSSO && !profile.isLDAP && (
|
||||
<IconButton
|
||||
className="edit-button email-edit-button"
|
||||
iconName={PencilOutlineReactSvgUrl}
|
||||
size="12"
|
||||
onClick={onChangeEmailClick}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{withActivationBar && (
|
||||
<div
|
||||
className="send-again-container"
|
||||
onClick={sendActivationLinkAction}
|
||||
>
|
||||
<ReactSVG
|
||||
className="send-again-icon"
|
||||
src={SendClockReactSvgUrl}
|
||||
/>
|
||||
<Text className="send-again-text" fontWeight={600} noSelect>
|
||||
{t("SendAgain")}
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<StyledLabel
|
||||
as="div"
|
||||
//marginTopProp={withActivationBar ? "34px" : "16px"}
|
||||
>
|
||||
{t("Common:Password")}
|
||||
</StyledLabel>
|
||||
<div className="profile-block-field profile-block-password">
|
||||
<Text fontWeight={600}>********</Text>
|
||||
{!profile.isSSO && !profile.isLDAP && (
|
||||
<IconButton
|
||||
className="edit-button password-edit-button"
|
||||
iconName={PencilOutlineReactSvgUrl}
|
||||
size="12"
|
||||
onClick={onChangePasswordClick}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<StyledLabel
|
||||
as="div"
|
||||
className="profile-language"
|
||||
//marginTopProp="15px"
|
||||
>
|
||||
{t("Common:Language")}
|
||||
<HelpButton
|
||||
size={12}
|
||||
offsetRight={0}
|
||||
place={dirTooltip}
|
||||
tooltipContent={tooltipLanguage}
|
||||
/>
|
||||
</StyledLabel>
|
||||
<div className="language-combo-box-wrapper">
|
||||
<ComboBox
|
||||
className="language-combo-box"
|
||||
directionY={isMobileHorizontalOrientation ? "bottom" : "both"}
|
||||
options={cultureNames}
|
||||
selectedOption={selectedLanguage}
|
||||
onSelect={onLanguageSelect}
|
||||
isDisabled={false}
|
||||
scaled={isMobile()}
|
||||
scaledOptions={false}
|
||||
size="content"
|
||||
showDisabledItems={true}
|
||||
dropDownMaxHeight={dimension < 620 ? 200 : 364}
|
||||
manualWidth="280px"
|
||||
isDefaultMode={
|
||||
isMobileHorizontalOrientation
|
||||
? isMobileHorizontalOrientation
|
||||
: !isMobile()
|
||||
}
|
||||
withBlur={isMobileHorizontalOrientation ? false : isMobile()}
|
||||
fillIcon={false}
|
||||
modernView={!isMobile()}
|
||||
/>
|
||||
{isBetaLanguage && <BetaBadge place="bottom-end" />}
|
||||
</div>
|
||||
|
||||
<StyledLabel as="div">{t("Common:Type")}</StyledLabel>
|
||||
<div className="user-type-container">
|
||||
<Text fontWeight={600} truncate title={profile.displayName}>
|
||||
{getUserTypeName(
|
||||
isOwner,
|
||||
isAdmin,
|
||||
isRoomAdmin,
|
||||
isCollaborator,
|
||||
t,
|
||||
)}
|
||||
</Text>
|
||||
|
||||
{!isOwner && (
|
||||
<HelpButton
|
||||
size={12}
|
||||
offsetRight={0}
|
||||
place={dirTooltip}
|
||||
tooltipContent={tooltipLanguage}
|
||||
/>
|
||||
</StyledLabel>
|
||||
</div>
|
||||
|
||||
<div className="profile-block">
|
||||
<div className="profile-block-field">
|
||||
<Text fontWeight={600} truncate title={profile.displayName}>
|
||||
{profile.displayName}
|
||||
</Text>
|
||||
{profile.isSSO && (
|
||||
<>
|
||||
<Badge
|
||||
id="sso-badge-profile"
|
||||
className="sso-badge"
|
||||
label={t("Common:SSO")}
|
||||
color={"#FFFFFF"}
|
||||
backgroundColor="#22C386"
|
||||
fontSize={"9px"}
|
||||
fontWeight={800}
|
||||
noHover
|
||||
lineHeight={"13px"}
|
||||
/>
|
||||
<Tooltip anchorSelect={`div[id='sso-badge-profile'] div`}>
|
||||
{t("PeopleTranslations:SSOAccountTooltip")}
|
||||
</Tooltip>
|
||||
</>
|
||||
)}
|
||||
|
||||
{profile.isLDAP && (
|
||||
<>
|
||||
<Badge
|
||||
id="ldap-badge-profile"
|
||||
className="ldap-badge"
|
||||
label={t("Common:LDAP")}
|
||||
color={"#FFFFFF"}
|
||||
backgroundColor="#8570BD"
|
||||
fontSize={"9px"}
|
||||
fontWeight={800}
|
||||
noHover
|
||||
lineHeight={"13px"}
|
||||
/>
|
||||
<Tooltip anchorSelect={`div[id='ldap-badge-profile'] div`}>
|
||||
{t("PeopleTranslations:LDAPAccountTooltip")}
|
||||
</Tooltip>
|
||||
</>
|
||||
)}
|
||||
|
||||
{!profile.isSSO && !profile.isLDAP && (
|
||||
<IconButton
|
||||
className="edit-button"
|
||||
iconName={PencilOutlineReactSvgUrl}
|
||||
size="12"
|
||||
onClick={() => setChangeNameVisible(true)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="email-container">
|
||||
<div className="email-edit-container">
|
||||
<Text
|
||||
data-tooltip-id="emailTooltip"
|
||||
data-tooltip-content={t("EmailNotVerified")}
|
||||
as="div"
|
||||
className="email-text-container"
|
||||
fontWeight={600}
|
||||
truncate
|
||||
>
|
||||
{profile.email}
|
||||
</Text>
|
||||
{withActivationBar && (
|
||||
<Tooltip
|
||||
float
|
||||
id="emailTooltip"
|
||||
getContent={({ content }) => (
|
||||
<Text fontSize="12px">{content}</Text>
|
||||
)}
|
||||
place="bottom"
|
||||
/>
|
||||
tooltipContent={getUserTypeDescription(
|
||||
isAdmin,
|
||||
isRoomAdmin,
|
||||
isCollaborator,
|
||||
t,
|
||||
)}
|
||||
{!profile.isSSO && !profile.isLDAP && (
|
||||
<IconButton
|
||||
className="edit-button email-edit-button"
|
||||
iconName={PencilOutlineReactSvgUrl}
|
||||
size="12"
|
||||
onClick={onChangeEmailClick}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{withActivationBar && (
|
||||
<div
|
||||
className="send-again-container"
|
||||
onClick={sendActivationLinkAction}
|
||||
>
|
||||
<ReactSVG
|
||||
className="send-again-icon"
|
||||
src={SendClockReactSvgUrl}
|
||||
/>
|
||||
<Text className="send-again-text" fontWeight={600} noSelect>
|
||||
{t("SendAgain")}
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="profile-block-field profile-block-password">
|
||||
<Text fontWeight={600}>********</Text>
|
||||
{!profile.isSSO && !profile.isLDAP && (
|
||||
<IconButton
|
||||
className="edit-button password-edit-button"
|
||||
iconName={PencilOutlineReactSvgUrl}
|
||||
size="12"
|
||||
onClick={onChangePasswordClick}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="language-combo-box-wrapper">
|
||||
<ComboBox
|
||||
className="language-combo-box"
|
||||
directionY={isMobileHorizontalOrientation ? "bottom" : "both"}
|
||||
options={cultureNames}
|
||||
selectedOption={selectedLanguage}
|
||||
onSelect={onLanguageSelect}
|
||||
isDisabled={false}
|
||||
scaled={isMobile()}
|
||||
scaledOptions={false}
|
||||
size="content"
|
||||
showDisabledItems={true}
|
||||
dropDownMaxHeight={dimension < 620 ? 200 : 364}
|
||||
manualWidth="280px"
|
||||
isDefaultMode={
|
||||
isMobileHorizontalOrientation
|
||||
? isMobileHorizontalOrientation
|
||||
: !isMobile()
|
||||
}
|
||||
withBlur={isMobileHorizontalOrientation ? false : isMobile()}
|
||||
fillIcon={false}
|
||||
modernView={!isMobile()}
|
||||
/>
|
||||
{isBetaLanguage && <BetaBadge place="bottom-end" />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mobile-profile-block">
|
||||
<div className="mobile-profile-row">
|
||||
<div className="mobile-profile-field">
|
||||
@ -479,6 +507,37 @@ const MainProfile = (props) => {
|
||||
onClick={onChangePasswordClick}
|
||||
/>
|
||||
</div>
|
||||
<div className="mobile-profile-row">
|
||||
<div className="mobile-profile-field">
|
||||
<Text as="div" className="mobile-profile-label">
|
||||
{t("Common:Type")}
|
||||
</Text>
|
||||
<Text fontWeight={600} truncate title={profile.displayName}>
|
||||
{getUserTypeName(
|
||||
isOwner,
|
||||
isAdmin,
|
||||
isRoomAdmin,
|
||||
isCollaborator,
|
||||
t,
|
||||
)}
|
||||
</Text>
|
||||
</div>
|
||||
{!isOwner && (
|
||||
<div className="edit-button">
|
||||
<HelpButton
|
||||
size={12}
|
||||
offsetRight={0}
|
||||
place={dirTooltip}
|
||||
tooltipContent={getUserTypeDescription(
|
||||
isAdmin,
|
||||
isRoomAdmin,
|
||||
isCollaborator,
|
||||
t,
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mobile-language">
|
||||
<Text as="div" fontWeight={600} className="mobile-profile-label">
|
||||
@ -517,7 +576,6 @@ const MainProfile = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <TimezoneCombo title={t("Common:ComingSoon")} /> */}
|
||||
</StyledInfo>
|
||||
|
||||
{changeAvatarVisible && (
|
||||
|
||||
@ -104,76 +104,66 @@ export const StyledInfo = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: minmax(75px, auto) minmax(0, 1fr);
|
||||
gap: 24px;
|
||||
row-gap: 16px;
|
||||
max-width: 100%;
|
||||
|
||||
.profile-block {
|
||||
.profile-block-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
height: 20px;
|
||||
align-items: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.profile-block-field {
|
||||
.sso-badge,
|
||||
.ldap-badge {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 4px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 4px;
|
||||
`}
|
||||
}
|
||||
|
||||
.email-container {
|
||||
.send-again-desktop {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
height: 20px;
|
||||
align-items: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
.user-type-container {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.sso-badge,
|
||||
.ldap-badge {
|
||||
.language-combo-box-wrapper {
|
||||
display: flex;
|
||||
height: 28px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: -8px;
|
||||
`
|
||||
: css`
|
||||
margin-left: -8px;
|
||||
`}
|
||||
|
||||
.language-combo-box .combo-button {
|
||||
padding-inline-end: 0px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 4px;
|
||||
padding-right: 8px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 4px;
|
||||
padding-left: 8px;
|
||||
`}
|
||||
}
|
||||
|
||||
.profile-block-password {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.email-container {
|
||||
margin-top: 16px;
|
||||
|
||||
.send-again-desktop {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.language-combo-box-wrapper {
|
||||
display: flex;
|
||||
height: 28px;
|
||||
align-items: center;
|
||||
margin-top: 11px;
|
||||
gap: 8px;
|
||||
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: -8px;
|
||||
`
|
||||
: css`
|
||||
margin-left: -8px;
|
||||
`}
|
||||
|
||||
.language-combo-box .combo-button {
|
||||
padding-inline-end: 0px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding-right: 8px;
|
||||
`
|
||||
: css`
|
||||
padding-left: 8px;
|
||||
`}
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
height: 36px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1100,6 +1100,42 @@ export function getLogoUrl(
|
||||
return `/logo.ashx?logotype=${logoType}&dark=${dark}&default=${def}`;
|
||||
}
|
||||
|
||||
export const getUserTypeName = (
|
||||
isOwner: boolean,
|
||||
isPortalAdmin: boolean,
|
||||
isRoomAdmin: boolean,
|
||||
isCollaborator: boolean,
|
||||
t: TTranslation,
|
||||
) => {
|
||||
if (isOwner) return t("Common:Owner");
|
||||
|
||||
if (isPortalAdmin)
|
||||
return t("Common:PortalAdmin", { productName: PRODUCT_NAME });
|
||||
|
||||
if (isRoomAdmin) return t("Common:RoomAdmin");
|
||||
|
||||
if (isCollaborator) return t("Common:PowerUser");
|
||||
|
||||
return t("Common:User");
|
||||
};
|
||||
|
||||
export const getUserTypeDescription = (
|
||||
isPortalAdmin: boolean,
|
||||
isRoomAdmin: boolean,
|
||||
isCollaborator: boolean,
|
||||
t: TTranslation,
|
||||
) => {
|
||||
if (isPortalAdmin)
|
||||
return t("Translations:RolePortalAdminDescription", {
|
||||
productName: PRODUCT_NAME,
|
||||
});
|
||||
|
||||
if (isRoomAdmin) return t("Translations:RoleRoomAdminDescription");
|
||||
|
||||
if (isCollaborator) return t("Translations:RolePowerUserDescription");
|
||||
|
||||
return t("Translations:RoleViewerDescription");
|
||||
};
|
||||
export function setLanguageForUnauthorized(culture: string) {
|
||||
setCookie(LANGUAGE, culture, {
|
||||
"max-age": COOKIE_EXPIRATION_YEAR,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user