IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Client: Confirm: CreateUser: add greeting mode

Browse Source
This commit is contained in:
Viktor Fomin 2023-03-10 20:31:04 +03:00
parent 50a0620598
commit 00e3e50876
2 changed files with 197 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js
View File

@ -144,7 +144,7 @@ export const RegisterContainer = styled.div`
.line:after { .line:after {
content: ""; content: "";
flex-grow: 1; flex-grow: 1;
background: ${(props) => props.theme.invitePage.borderColor};; background: ${(props) => props.theme.invitePage.borderColor};
height: 1px; height: 1px;
font-size: 0px; font-size: 0px;
line-height: 0px; line-height: 0px;

347
packages/client/src/pages/Confirm/sub-components/createUser.js
View File

@ -5,6 +5,8 @@ import { withTranslation } from "react-i18next";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { createUser, signupOAuth } from "@docspace/common/api/people"; import { createUser, signupOAuth } from "@docspace/common/api/people";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import { isMobile } from "react-device-detect";
import { isDesktop as isDesktopUtil } from "@docspace/components/utils/device";
import Avatar from "@docspace/components/avatar"; import Avatar from "@docspace/components/avatar";
import Button from "@docspace/components/button"; import Button from "@docspace/components/button";
import TextInput from "@docspace/components/text-input"; import TextInput from "@docspace/components/text-input";
@ -67,12 +69,30 @@ const CreateUserForm = (props) => {
const [isEmailErrorShow, setIsEmailErrorShow] = useState(false); const [isEmailErrorShow, setIsEmailErrorShow] = useState(false);
const [isPasswordErrorShow, setIsPasswordErrorShow] = useState(false); const [isPasswordErrorShow, setIsPasswordErrorShow] = useState(false);
const [showForm, setShowForm] = useState(true);
const [showGreeting, setShowGreeting] = useState(true);
const focusInput = () => { const focusInput = () => {
if (inputRef) { if (inputRef) {
inputRef.current.focus(); inputRef.current.focus();
} }
}; };
const onCheckGreeting = () => {
const isGreetingMode = oauthDataExists() && isMobile; /*!isDesktopUtil()*/
setShowForm(!isGreetingMode);
};
const onGreetingJoin = () => {
setShowForm(true);
setShowGreeting(false);
};
/*useEffect(() => {
window.addEventListener("resize", onCheckGreeting);
return () => window.removeEventListener("resize", onCheckGreeting);
}, []);*/
useEffect(() => { useEffect(() => {
const { isAuthenticated, logout, linkData, capabilities } = props; const { isAuthenticated, logout, linkData, capabilities } = props;
@ -91,6 +111,7 @@ const CreateUserForm = (props) => {
setSsoLabel(capabilities?.ssoLabel); setSsoLabel(capabilities?.ssoLabel);
setSsoUrl(capabilities?.ssoUrl); setSsoUrl(capabilities?.ssoUrl);
onCheckGreeting();
focusInput(); focusInput();
}; };
@ -378,21 +399,25 @@ const CreateUserForm = (props) => {
{greetingTitle} {greetingTitle}
</Text> </Text>
<div className="greeting-block"> {showGreeting && (
<Avatar className="avatar" role="user" source={userAvatar} /> <>
<div className="user-info"> <div className="greeting-block">
<Text fontSize="15px" fontWeight={600}> <Avatar className="avatar" role="user" source={userAvatar} />
{user.firstName} {user.lastName} <div className="user-info">
</Text> <Text fontSize="15px" fontWeight={600}>
<Text fontSize="12px" fontWeight={600} color="#A3A9AE"> {user.firstName} {user.lastName}
{user.department} </Text>
</Text> <Text fontSize="12px" fontWeight={600} color="#A3A9AE">
</div> {user.department}
</div> </Text>
</div>
</div>
<div className="tooltip"> <div className="tooltip">
<span className="tooltiptext">{t("WelcomeUser")}</span> <span className="tooltiptext">{t("WelcomeUser")}</span>
</div> </div>
</>
)}
</GreetingContainer> </GreetingContainer>
<FormWrapper> <FormWrapper>
@ -426,155 +451,175 @@ const CreateUserForm = (props) => {
</div> </div>
)} )}
<form className="auth-form-container"> {showForm && (
<div className="auth-form-fields"> <form className="auth-form-container">
<FieldContainer <div className="auth-form-fields">
className="form-field" <FieldContainer
isVertical={true} className="form-field"
labelVisible={false} isVertical={true}
hasError={isEmailErrorShow && !emailValid} labelVisible={false}
errorMessage={
emailErrorText
? t(`Common:${emailErrorText}`)
: t("Common:RequiredField")
}
>
<EmailInput
id="login"
name="login"
type="email"
hasError={isEmailErrorShow && !emailValid} hasError={isEmailErrorShow && !emailValid}
value={email} errorMessage={
placeholder={t("Common:Email")} emailErrorText
size="large" ? t(`Common:${emailErrorText}`)
scale={true} : t("Common:RequiredField")
isAutoFocussed={true} }
tabIndex={1} >
isDisabled={isLoading || !!emailFromLink} <EmailInput
autoComplete="username" id="login"
onChange={onChangeEmail} name="login"
onBlur={onBlurEmail} type="email"
onValidateInput={onValidateEmail} hasError={isEmailErrorShow && !emailValid}
forwardedRef={inputRef} value={email}
onKeyDown={onKeyPress} placeholder={t("Common:Email")}
/> size="large"
</FieldContainer> scale={true}
isAutoFocussed={true}
tabIndex={1}
isDisabled={isLoading || !!emailFromLink}
autoComplete="username"
onChange={onChangeEmail}
onBlur={onBlurEmail}
onValidateInput={onValidateEmail}
forwardedRef={inputRef}
onKeyDown={onKeyPress}
/>
</FieldContainer>
<FieldContainer <FieldContainer
className="form-field" className="form-field"
isVertical={true} isVertical={true}
labelVisible={false} labelVisible={false}
hasError={!fnameValid}
errorMessage={
errorText ? errorText : t("Common:RequiredField")
}
>
<TextInput
id="first-name"
name="first-name"
type="text"
hasError={!fnameValid} hasError={!fnameValid}
value={fname} errorMessage={
placeholder={t("Common:FirstName")} errorText ? errorText : t("Common:RequiredField")
size="large" }
scale={true} >
tabIndex={1} <TextInput
isDisabled={isLoading} id="first-name"
onChange={onChangeFname} name="first-name"
onKeyDown={onKeyPress} type="text"
/> hasError={!fnameValid}
</FieldContainer> value={fname}
placeholder={t("Common:FirstName")}
size="large"
scale={true}
tabIndex={1}
isDisabled={isLoading}
onChange={onChangeFname}
onKeyDown={onKeyPress}
/>
</FieldContainer>
<FieldContainer <FieldContainer
className="form-field" className="form-field"
isVertical={true} isVertical={true}
labelVisible={false} labelVisible={false}
hasError={!snameValid}
errorMessage={
errorText ? errorText : t("Common:RequiredField")
}
>
<TextInput
id="last-name"
name="last-name"
type="text"
hasError={!snameValid} hasError={!snameValid}
value={sname} errorMessage={
placeholder={t("Common:LastName")} errorText ? errorText : t("Common:RequiredField")
size="large" }
scale={true} >
tabIndex={1} <TextInput
isDisabled={isLoading} id="last-name"
onChange={onChangeSname} name="last-name"
onKeyDown={onKeyPress} type="text"
/> hasError={!snameValid}
</FieldContainer> value={sname}
placeholder={t("Common:LastName")}
size="large"
scale={true}
tabIndex={1}
isDisabled={isLoading}
onChange={onChangeSname}
onKeyDown={onKeyPress}
/>
</FieldContainer>
<FieldContainer <FieldContainer
className="form-field password-field" className="form-field password-field"
isVertical={true} isVertical={true}
labelVisible={false} labelVisible={false}
hasError={isPasswordErrorShow && !passwordValid}
errorMessage={`${t(
"Common:PasswordLimitMessage"
)}: ${getPasswordErrorMessage(t, settings)}`}
>
<PasswordInput
simpleView={false}
hideNewPasswordButton
showCopyLink={false}
passwordSettings={settings}
id="password"
inputName="password"
placeholder={t("Common:Password")}
type="password"
hasError={isPasswordErrorShow && !passwordValid} hasError={isPasswordErrorShow && !passwordValid}
inputValue={password} errorMessage={`${t(
size="large" "Common:PasswordLimitMessage"
)}: ${getPasswordErrorMessage(t, settings)}`}
>
<PasswordInput
simpleView={false}
hideNewPasswordButton
showCopyLink={false}
passwordSettings={settings}
id="password"
inputName="password"
placeholder={t("Common:Password")}
type="password"
hasError={isPasswordErrorShow && !passwordValid}
inputValue={password}
size="large"
scale={true}
tabIndex={1}
isDisabled={isLoading}
autoComplete="current-password"
onChange={onChangePassword}
onBlur={onBlurPassword}
onKeyDown={onKeyPress}
onValidateInput={onValidatePassword}
tooltipPasswordTitle={`${t(
"Common:PasswordLimitMessage"
)}:`}
tooltipPasswordLength={`${t(
"Common:PasswordMinimumLength"
)}: ${settings ? settings.minLength : 8}`}
tooltipPasswordDigits={`${t(
"Common:PasswordLimitDigits"
)}`}
tooltipPasswordCapital={`${t(
"Common:PasswordLimitUpperCase"
)}`}
tooltipPasswordSpecial={`${t(
"Common:PasswordLimitSpecialSymbols"
)}`}
generatePasswordTitle={t("Wizard:GeneratePassword")}
/>
</FieldContainer>
<Button
className="login-button"
primary
size="medium"
scale={true} scale={true}
label={
isLoading
? t("Common:LoadingProcessing")
: t("LoginRegistryButton")
}
tabIndex={1} tabIndex={1}
isDisabled={isLoading} isDisabled={isLoading}
autoComplete="current-password" isLoading={isLoading}
onChange={onChangePassword} onClick={onSubmit}
onBlur={onBlurPassword}
onKeyDown={onKeyPress}
onValidateInput={onValidatePassword}
tooltipPasswordTitle={`${t(
"Common:PasswordLimitMessage"
)}:`}
tooltipPasswordLength={`${t(
"Common:PasswordMinimumLength"
)}: ${settings ? settings.minLength : 8}`}
tooltipPasswordDigits={`${t(
"Common:PasswordLimitDigits"
)}`}
tooltipPasswordCapital={`${t(
"Common:PasswordLimitUpperCase"
)}`}
tooltipPasswordSpecial={`${t(
"Common:PasswordLimitSpecialSymbols"
)}`}
generatePasswordTitle={t("Wizard:GeneratePassword")}
/> />
</FieldContainer> </div>
</form>
)}
<Button {!showForm && (
className="login-button" <Button
primary className="login-button"
size="medium" primary
scale={true} size="medium"
label={ scale={true}
isLoading label={
? t("Common:LoadingProcessing") isLoading
: t("LoginRegistryButton") ? t("Common:LoadingProcessing")
} : t("LoginRegistryButton")
tabIndex={1} }
isDisabled={isLoading} tabIndex={1}
isLoading={isLoading} isDisabled={isLoading}
onClick={onSubmit} isLoading={isLoading}
/> onClick={onGreetingJoin}
</div> />
</form> )}
<MoreLoginModal <MoreLoginModal
t={t} t={t}