RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 10:34:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
SrGooglo 2025-03-13 23:35:31 +00:00
parent 9c057d6017
commit b395a5f062
1 changed files with 340 additions and 287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
packages/app/src/components/UserRegister/index.jsx
View File

@ -12,19 +12,30 @@ const steps = [
key: "username",
title: "Step 1",
icon: "FiUser",
description: () => <div>
<p>Enter your username you gonna use for your account, its used to access to your account.</p>
<p>It must be unique, on lower case, and contain only accepted characters as letters, numbers, underscores.</p>
</div>,
description: () => (
<div>
<p>
Enter your username you gonna use for your account, its used
to access to your account.
</p>
<p>
It must be unique, on lower case, and contain only accepted
characters as letters, numbers, underscores.
</p>
</div>
),
required: true,
content: (props) => {
const [loading, setLoading] = React.useState(false)
const [username, setUsername] = React.useState("")
const [validCharacters, setValidCharacters] = React.useState(null)
const [usernameAvailable, setUsernameAvailable] = React.useState(null)
const [usernameAvailable, setUsernameAvailable] =
React.useState(null)
const isValid = () => {
return username.length > 0 && validCharacters && usernameAvailable
return (
username.length > 0 && validCharacters && usernameAvailable
)
}
const hasValidCharacters = (username) => {
@ -49,23 +60,29 @@ const steps = [
const renderIndicator = (value, label) => {
if (loading) {
return <>
return (
<>
<Icons.LoadingOutlined />
<p>{label}</p>
</>
)
}
if (value) {
return <>
return (
<>
<Icons.CheckCircleOutlined />
<p>{label}</p>
</>
)
}
return <>
return (
<>
<Icons.CloseCircleOutlined />
<p>{label}</p>
</>
)
}
React.useEffect(() => {
@ -89,8 +106,12 @@ const steps = [
return
}
const request = await AuthModel.availability({ username }).catch((error) => {
antd.message.error(`Cannot check username availability: ${error.message}`)
const request = await AuthModel.availability({
username,
}).catch((error) => {
antd.message.error(
`Cannot check username availability: ${error.message}`,
)
console.error(error)
return false
@ -112,7 +133,8 @@ const steps = [
return () => clearTimeout(timer)
}, [username])
return <div className="steps step content">
return (
<div className="steps step content">
<antd.Input
autoCorrect="off"
autoCapitalize="none"
@ -120,29 +142,41 @@ const steps = [
placeholder="newuser"
value={username}
onChange={handleUpdate}
status={username.length == 0 ? "default" : loading ? "default" : (isValid() ? "success" : "error")}
status={
username.length == 0
? "default"
: loading
? "default"
: isValid()
? "success"
: "error"
}
/>
<div className="usernameValidity">
<div className="check">
{
renderIndicator(usernameAvailable, "Username available")
}
{renderIndicator(
usernameAvailable,
"Username available",
)}
</div>
<div className="check">
{
renderIndicator(validCharacters, "Valid characters (letters, numbers, underscores)")
}
{renderIndicator(
validCharacters,
"Valid characters (letters, numbers, underscores)",
)}
</div>
</div>
</div>
)
},
},
{
key: "password",
title: "Step 2",
icon: "FiKey",
description: "Enter a password for the account. must comply with the password requirements policy.",
description:
"Enter a password for the account. must comply with the password requirements policy.",
required: true,
content: (props) => {
const confirmRef = React.useRef(null)
@ -153,7 +187,8 @@ const steps = [
const passwordMinimunStrength = 3
const passwordsMatch = password === confirmedPassword
const passwordError = !passwordsMatch && confirmedPassword.length > 0
const passwordError =
!passwordsMatch && confirmedPassword.length > 0
const submit = () => {
if (!passwordError) {
@ -206,12 +241,16 @@ const steps = [
props.handleUpdate(null)
}
if (calculatedStrength >= passwordMinimunStrength && password === confirmedPassword) {
if (
calculatedStrength >= passwordMinimunStrength &&
password === confirmedPassword
) {
props.handleUpdate(password)
}
}, [password, confirmedPassword])
return <div className="steps step content passwordsInput">
return (
<div className="steps step content passwordsInput">
<antd.Input.Password
className="password"
placeholder="Password"
@ -242,7 +281,11 @@ const steps = [
<antd.Progress
percent={passwordStrength * 20}
status={passwordStrength < passwordMinimunStrength ? "exception" : "success"}
status={
passwordStrength < passwordMinimunStrength
? "exception"
: "success"
}
showInfo={false}
/>
@ -251,6 +294,7 @@ const steps = [
<p>Password must contain at least one number.</p>
</div>
</div>
)
},
},
{
@ -302,8 +346,12 @@ const steps = [
const timer = setTimeout(async () => {
if (!validFormat) return
const request = await AuthModel.availability({ email }).catch((error) => {
antd.message.error(`Cannot check email availability: ${error.message}`)
const request = await AuthModel.availability({
email,
}).catch((error) => {
antd.message.error(
`Cannot check email availability: ${error.message}`,
)
return false
})
@ -325,14 +373,24 @@ const steps = [
return () => clearTimeout(timer)
}, [email])
return <div className="steps step content">
return (
<div className="steps step content">
<antd.Input
placeholder="Email"
onPressEnter={submit}
onChange={handleUpdate}
status={email.length == 0 ? "default" : loading ? "default" : (isValid() ? "success" : "error")}
status={
email.length == 0
? "default"
: loading
? "default"
: isValid()
? "success"
: "error"
}
/>
</div>
)
},
},
]
@ -356,14 +414,9 @@ export default (props) => {
}
if (app.isMobile) {
app.controls.openLoginForm({
defaultLocked: props.locked,
})
app.auth.login()
}
}
return <StepsForm
steps={steps}
onSubmit={onSubmit}
/>
return <StepsForm steps={steps} onSubmit={onSubmit} />
}