format

packages/app/src/components/UserRegister/index.jsx

@@ -12,19 +12,30 @@ const steps = [
 		key: "username",
 		title: "Step 1",
 		icon: "FiUser",
-        description: () => <div>
+		description: () => (
-            <p>Enter your username you gonna use for your account, its used to access to your account.</p>
+			<div>
-            <p>It must be unique, on lower case, and contain only accepted characters as letters, numbers, underscores.</p>
+				<p>
-        </div>,
+					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) => {
+					const request = await AuthModel.availability({
-                        antd.message.error(`Cannot check username availability: ${error.message}`)
+						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(
-                            renderIndicator(usernameAvailable, "Username available")
+								usernameAvailable,
-                        }
+								"Username available",
+							)}
 						</div>
 						<div className="check">
-                        {
+							{renderIndicator(
-                            renderIndicator(validCharacters, "Valid characters (letters, numbers, underscores)")
+								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) => {
+					const request = await AuthModel.availability({
-                        antd.message.error(`Cannot check email availability: ${error.message}`)
+						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({
+			app.auth.login()
-                defaultLocked: props.locked,
-            })
 		}
 	}
 
-    return <StepsForm
+	return <StepsForm steps={steps} onSubmit={onSubmit} />
-        steps={steps}
-        onSubmit={onSubmit}
-    />
 }