From 78a585f1375966b3b934c858d327be5e24337dbb Mon Sep 17 00:00:00 2001
From: Liyang Zhu <1184997399@qq.com>
Date: Sun, 5 Jun 2022 20:50:10 +0800
Subject: [PATCH] feat: update onboarding ui

---
 src/routes/onboarding/index.js                | 82 ++++---------------
 .../steps/{first.js => 1-welcome.js}          |  4 +-
 src/routes/onboarding/steps/2-spaceName.js    | 55 +++++++++++++
 ...inCredentials.js => 3-adminCredentials.js} | 29 ++++++-
 .../steps/{inviteRule.js => 4-inviteRule.js}  | 17 ++--
 .../steps/{inviteLink.js => 5-inviteLink.js}  |  5 +-
 .../steps/{last.js => 6-completed.js}         |  6 +-
 src/routes/onboarding/steps/spaceName.js      | 34 --------
 src/routes/onboarding/styled.js               | 30 ++++---
 9 files changed, 132 insertions(+), 130 deletions(-)
 rename src/routes/onboarding/steps/{first.js => 1-welcome.js} (82%)
 create mode 100644 src/routes/onboarding/steps/2-spaceName.js
 rename src/routes/onboarding/steps/{adminCredentials.js => 3-adminCredentials.js} (61%)
 rename src/routes/onboarding/steps/{inviteRule.js => 4-inviteRule.js} (62%)
 rename src/routes/onboarding/steps/{inviteLink.js => 5-inviteLink.js} (90%)
 rename src/routes/onboarding/steps/{last.js => 6-completed.js} (86%)
 delete mode 100644 src/routes/onboarding/steps/spaceName.js

diff --git a/src/routes/onboarding/index.js b/src/routes/onboarding/index.js
index 7223f3e9..042e5346 100644
--- a/src/routes/onboarding/index.js
+++ b/src/routes/onboarding/index.js
@@ -1,12 +1,11 @@
 import { useState } from "react";
-import toast from "react-hot-toast";
-import StyledButton from "../../common/component/styled/Button";
-import FirstStep from "./steps/first";
-import SpaceNameStep from "./steps/spaceName";
-import AdminCredentialsStep from "./steps/adminCredentials";
-import InviteRuleStep from "./steps/inviteRule";
-import InviteLinkStep from "./steps/inviteLink";
-import LastStep from "./steps/last";
+import { Navigate } from "react-router-dom";
+import WelcomeStep from "./steps/1-welcome";
+import SpaceNameStep from "./steps/2-spaceName";
+import AdminCredentialsStep from "./steps/3-adminCredentials";
+import InviteRuleStep from "./steps/4-inviteRule";
+import InviteLinkStep from "./steps/5-inviteLink";
+import CompletedStep from "./steps/6-completed";
 import StyledOnboardingPage from "./styled";
 
 export default function OnboardingPage() {
@@ -18,70 +17,19 @@ export default function OnboardingPage() {
   adminPassword2: "",
   inviteRule: null
  });
+ const props = { step, setStep, data, setData };
 
  return (
   <StyledOnboardingPage>
    <div className="horizontalBox">
     <div className="verticalBox">
-     {step > 0 && step < 5 && (
-      <>
-       <StyledButton className="buttonBack ghost border_less" onClick={() => setStep(step - 1)}>
-        Back
-       </StyledButton>
-       <StyledButton
-        className="buttonNext"
-        onClick={() => {
-         if (step === 1) {
-          // Verification for space name
-          if (data.spaceName === "") {
-           toast.error("Please enter space name!");
-           return;
-          }
-          setStep(step + 1);
-         } else if (step === 2) {
-          // Verification for admin credentials
-          if (data.adminEmail === "") {
-           toast.error("Please enter admin email!");
-           return;
-          } else if (data.adminPassword === "") {
-           toast.error("Please enter admin password!");
-           return;
-          } else if (data.adminPassword !== data.adminPassword2) {
-           toast.error("Two passwords do not match!");
-           return;
-          }
-          setStep(step + 1);
-         } else if (step === 3) {
-          // Verification for invitation rule
-          if (data.inviteRule === null) {
-           toast.error("Please choose one option!");
-           return;
-          }
-          setStep(step + 1);
-         } else if (step === 4) {
-          // Verification for invitation link
-          setStep(step + 1);
-         }
-        }}
-       >
-        Next
-       </StyledButton>
-      </>
-     )}
-     {step === 0 && <FirstStep onButtonClick={() => setStep(step + 1)} />}
-     {step === 1 && <SpaceNameStep data={data} setData={setData} />}
-     {step === 2 && <AdminCredentialsStep data={data} setData={setData} />}
-     {step === 3 && <InviteRuleStep data={data} setData={setData} />}
-     {step === 4 && <InviteLinkStep />}
-     {step === 5 && (
-      <LastStep
-       data={data}
-       onButtonClick={() => {
-        // TODO: finish it
-        console.log("onboarding steps completed:", data);
-       }}
-      />
-     )}
+     {step === 0 && <WelcomeStep {...props} />}
+     {step === 1 && <SpaceNameStep {...props} />}
+     {step === 2 && <AdminCredentialsStep {...props} />}
+     {step === 3 && <InviteRuleStep {...props} />}
+     {step === 4 && <InviteLinkStep {...props} />}
+     {step === 5 && <CompletedStep {...props} />}
+     {step === 6 && <Navigate replace to="/" />}
     </div>
    </div>
   </StyledOnboardingPage>
diff --git a/src/routes/onboarding/steps/first.js b/src/routes/onboarding/steps/1-welcome.js
similarity index 82%
rename from src/routes/onboarding/steps/first.js
rename to src/routes/onboarding/steps/1-welcome.js
index 21b96cf2..a9debbfb 100644
--- a/src/routes/onboarding/steps/first.js
+++ b/src/routes/onboarding/steps/1-welcome.js
@@ -10,14 +10,14 @@ const StyledFirstStep = styled.div`
  align-items: center;
 `;
 
-export default function FirstStep({ onButtonClick }) {
+export default function WelcomeStep({ step, setStep }) {
  return (
   <StyledFirstStep>
    <span className="primaryText">Welcome to your Rustchat!</span>
    <span className="secondaryText">
     Everything in this space is owned by you. Let’s set up your space!
    </span>
-   <StyledButton className="startButton" onClick={onButtonClick}>
+   <StyledButton className="startButton" onClick={() => setStep(step + 1)}>
     <img src={PlayIcon} alt="play icon" />
     <span>Start</span>
    </StyledButton>
diff --git a/src/routes/onboarding/steps/2-spaceName.js b/src/routes/onboarding/steps/2-spaceName.js
new file mode 100644
index 00000000..e31a938d
--- /dev/null
+++ b/src/routes/onboarding/steps/2-spaceName.js
@@ -0,0 +1,55 @@
+import styled from "styled-components";
+import toast from "react-hot-toast";
+import StyledInput from "../../../common/component/styled/Input";
+import StyledButton from "../../../common/component/styled/Button";
+
+const StyledSpaceNameStep = styled.div`
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ > .secondaryText {
+  color: #667085;
+ }
+
+ > .button {
+  margin-top: 24px;
+ }
+`;
+
+export default function SpaceNameStep({ step, setStep, data, setData }) {
+ return (
+  <StyledSpaceNameStep>
+   <span className="primaryText">Create a new server</span>
+   <span className="secondaryText">
+    Servers are shared environments where teams can work on projects and chat.
+   </span>
+   <StyledInput
+    className="input"
+    placeholder="Enter server name"
+    value={data.spaceName}
+    onChange={(e) =>
+     setData({
+      ...data,
+      spaceName: e.target.value
+     })
+    }
+   />
+   <StyledButton
+    className="button"
+    onClick={() => {
+     // Verification for space name
+     if (data.spaceName === "") {
+      toast.error("Please enter server name!");
+      return;
+     }
+     setStep(step + 1);
+    }}
+   >
+    Create Server
+   </StyledButton>
+  </StyledSpaceNameStep>
+ );
+}
diff --git a/src/routes/onboarding/steps/adminCredentials.js b/src/routes/onboarding/steps/3-adminCredentials.js
similarity index 61%
rename from src/routes/onboarding/steps/adminCredentials.js
rename to src/routes/onboarding/steps/3-adminCredentials.js
index 4caafef0..3b581816 100644
--- a/src/routes/onboarding/steps/adminCredentials.js
+++ b/src/routes/onboarding/steps/3-adminCredentials.js
@@ -1,5 +1,7 @@
 import styled from "styled-components";
 import StyledInput from "../../../common/component/styled/Input";
+import StyledButton from "../../../common/component/styled/Button";
+import toast from "react-hot-toast";
 
 const StyledAdminCredentialsStep = styled.div`
  height: 100%;
@@ -8,12 +10,16 @@ const StyledAdminCredentialsStep = styled.div`
  justify-content: center;
  align-items: center;
 
- > .input:not(:last-child) {
+ > .input:not(:nth-last-child(2)) {
   margin-bottom: 20px;
  }
+
+ > .button {
+  margin-top: 24px;
+ }
 `;
 
-export default function AdminCredentialsStep({ data, setData }) {
+export default function AdminCredentialsStep({ step, setStep, data, setData }) {
  return (
   <StyledAdminCredentialsStep>
    <span className="primaryText">Now let’s set up your admin account</span>
@@ -53,6 +59,25 @@ export default function AdminCredentialsStep({ data, setData }) {
      })
     }
    />
+   <StyledButton
+    className="button"
+    onClick={() => {
+     // Verification for admin credentials
+     if (data.adminEmail === "") {
+      toast.error("Please enter admin email!");
+      return;
+     } else if (data.adminPassword === "") {
+      toast.error("Please enter admin password!");
+      return;
+     } else if (data.adminPassword !== data.adminPassword2) {
+      toast.error("Two passwords do not match!");
+      return;
+     }
+     setStep(step + 1);
+    }}
+   >
+    Sign Up
+   </StyledButton>
   </StyledAdminCredentialsStep>
  );
 }
diff --git a/src/routes/onboarding/steps/inviteRule.js b/src/routes/onboarding/steps/4-inviteRule.js
similarity index 62%
rename from src/routes/onboarding/steps/inviteRule.js
rename to src/routes/onboarding/steps/4-inviteRule.js
index a7e9b9d0..7738f25c 100644
--- a/src/routes/onboarding/steps/inviteRule.js
+++ b/src/routes/onboarding/steps/4-inviteRule.js
@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import StyledRadio from "../../../common/component/styled/Radio";
+import StyledButton from "../../../common/component/styled/Button";
 
 const StyledInviteRuleStep = styled.div`
  height: 100%;
@@ -8,12 +9,12 @@ const StyledInviteRuleStep = styled.div`
  justify-content: center;
  align-items: center;
 
- > .input:not(:last-child) {
+ > .input:not(:nth-last-child(2)) {
   margin-bottom: 20px;
  }
 `;
 
-export default function InviteRuleStep({ data, setData }) {
+export default function InviteRuleStep({ step, setStep, data, setData }) {
  return (
   <StyledInviteRuleStep>
    <span className="primaryText">Last step: invite others!</span>
@@ -21,13 +22,19 @@ export default function InviteRuleStep({ data, setData }) {
    <StyledRadio
     options={["Everyone", "Invitation link only"]}
     value={data.inviteRule}
-    onChange={(v) =>
+    onChange={(v) => {
      setData({
       ...data,
       inviteRule: v
-     })
-    }
+     });
+     setTimeout(() => {
+      setStep(step + 1);
+     }, 750);
+    }}
    />
+   <StyledButton className="button border_less ghost" onClick={() => setStep(step + 1)}>
+    Skip
+   </StyledButton>
   </StyledInviteRuleStep>
  );
 }
diff --git a/src/routes/onboarding/steps/inviteLink.js b/src/routes/onboarding/steps/5-inviteLink.js
similarity index 90%
rename from src/routes/onboarding/steps/inviteLink.js
rename to src/routes/onboarding/steps/5-inviteLink.js
index 57b751de..72bd6d1d 100644
--- a/src/routes/onboarding/steps/inviteLink.js
+++ b/src/routes/onboarding/steps/5-inviteLink.js
@@ -51,7 +51,7 @@ const StyledInviteLinkStep = styled.div`
  }
 `;
 
-export default function InviteLinkStep() {
+export default function InviteLinkStep({ step, setStep }) {
  const { link, linkCopied, copyLink } = useInviteLink();
 
  return (
@@ -65,6 +65,9 @@ export default function InviteLinkStep() {
      {linkCopied ? "Copied" : `Copy`}
     </StyledButton>
    </div>
+   <StyledButton className="button border_less ghost" onClick={() => setStep(step + 1)}>
+    Skip
+   </StyledButton>
   </StyledInviteLinkStep>
  );
 }
diff --git a/src/routes/onboarding/steps/last.js b/src/routes/onboarding/steps/6-completed.js
similarity index 86%
rename from src/routes/onboarding/steps/last.js
rename to src/routes/onboarding/steps/6-completed.js
index 5be297cc..9aebf237 100644
--- a/src/routes/onboarding/steps/last.js
+++ b/src/routes/onboarding/steps/6-completed.js
@@ -14,7 +14,7 @@ const StyledLastStep = styled.div`
  }
 
  > .tip {
-  width: 588px;
+  width: 560px;
   font-size: 20px;
   line-height: 24px;
   text-align: center;
@@ -26,7 +26,7 @@ const StyledLastStep = styled.div`
  }
 `;
 
-export default function LastStep({ data, onButtonClick }) {
+export default function CompletedStep({ data, step, setStep }) {
  return (
   <StyledLastStep>
    <span className="primaryText">Welcome to {data.spaceName}</span>
@@ -35,7 +35,7 @@ export default function LastStep({ data, onButtonClick }) {
     More settings, including domain resolution, privileges, securities, and invites are available in{" "}
     <span className="strong">Settings</span>
    </span>
-   <StyledButton className="startButton" onClick={onButtonClick}>
+   <StyledButton className="startButton" onClick={() => setStep(step + 1)}>
     <img src={PlayIcon} alt="play icon" />
     <span>Start</span>
    </StyledButton>
diff --git a/src/routes/onboarding/steps/spaceName.js b/src/routes/onboarding/steps/spaceName.js
deleted file mode 100644
index 170ddc73..00000000
--- a/src/routes/onboarding/steps/spaceName.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import styled from "styled-components";
-import StyledInput from "../../../common/component/styled/Input";
-
-const StyledSpaceNameStep = styled.div`
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-
- > .secondaryText {
-  color: #667085;
- }
-`;
-
-export default function SpaceNameStep({ data, setData }) {
- return (
-  <StyledSpaceNameStep>
-   <span className="primaryText">Let’s start with name:</span>
-   <span className="secondaryText">This space is called: </span>
-   <StyledInput
-    className="input"
-    placeholder="Enter space name"
-    value={data.spaceName}
-    onChange={(e) =>
-     setData({
-      ...data,
-      spaceName: e.target.value
-     })
-    }
-   />
-  </StyledSpaceNameStep>
- );
-}
diff --git a/src/routes/onboarding/styled.js b/src/routes/onboarding/styled.js
index 7328f390..39e01b9c 100644
--- a/src/routes/onboarding/styled.js
+++ b/src/routes/onboarding/styled.js
@@ -16,21 +16,6 @@ const StyledOnboardingPage = styled.div`
    border: 1px solid #f2f4f7;
    border-radius: 12px;
    box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
-
-   > .buttonBack,
-   > .buttonNext {
-    position: absolute;
-    bottom: 32px;
-   }
-
-   > .buttonBack {
-    left: 30px;
-    color: #98a2b3;
-   }
-
-   > .buttonNext {
-    right: 30px;
-   }
   }
  }
 
@@ -84,8 +69,21 @@ const StyledOnboardingPage = styled.div`
   line-height: 24px;
   padding: 10px 14px;
   border: 1px solid #d0d5dd;
-  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
   border-radius: 8px;
+  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
+ }
+
+ .button {
+  width: 360px;
+
+  &.ghost.border_less {
+   width: fit-content;
+   font-weight: 500;
+   font-size: 16px;
+   line-height: 24px;
+   color: #98a2b3;
+   margin-top: 14px;
+  }
  }
 `;