feat: implement onboarding page

src/routes/onboarding/steps/adminCredentials.js

@@ -0,0 +1,58 @@
+import styled from "styled-components";
+import StyledInput from "../../../common/component/styled/Input";
+
+const StyledAdminCredentialsStep = styled.div`
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ > .input:not(:last-child) {
+  margin-bottom: 20px;
+ }
+`;
+
+export default function AdminCredentialsStep({ data, setData }) {
+ return (
+  <StyledAdminCredentialsStep>
+   <span className="primaryText">Now let’s set up your admin account</span>
+   <span className="secondaryText">You are the 1st user and admin of your space!</span>
+   <StyledInput
+    className="input"
+    placeholder="Enter your email"
+    value={data.adminEmail}
+    onChange={(e) =>
+     setData({
+      ...data,
+      adminEmail: e.target.value
+     })
+    }
+   />
+   <StyledInput
+    className="input"
+    type="password"
+    placeholder="Enter your password"
+    value={data.adminPassword}
+    onChange={(e) =>
+     setData({
+      ...data,
+      adminPassword: e.target.value
+     })
+    }
+   />
+   <StyledInput
+    className="input"
+    type="password"
+    placeholder="Confirm your password"
+    value={data.adminPassword2}
+    onChange={(e) =>
+     setData({
+      ...data,
+      adminPassword2: e.target.value
+     })
+    }
+   />
+  </StyledAdminCredentialsStep>
+ );
+}

src/routes/onboarding/steps/first.js

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+import StyledButton from "../../../common/component/styled/Button";
+import PlayIcon from "../../../assets/icons/play.svg?url";
+
+const StyledFirstStep = styled.div`
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+`;
+
+export default function FirstStep({ onButtonClick }) {
+ 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}>
+    <img src={PlayIcon} alt="play icon" />
+    <span>Start</span>
+   </StyledButton>
+  </StyledFirstStep>
+ );
+}

src/routes/onboarding/steps/inviteLink.js

@@ -0,0 +1,70 @@
+import styled from "styled-components";
+import StyledInput from "../../../common/component/styled/Input";
+import StyledButton from "../../../common/component/styled/Button";
+import useInviteLink from "../../../common/hook/useInviteLink";
+
+const StyledInviteLinkStep = styled.div`
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ > .secondaryText {
+  margin-bottom: 40px;
+ }
+
+ > .tip {
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+  color: #475467;
+  margin-bottom: 8px;
+ }
+
+ > .link {
+  position: relative;
+  background: #ffffff;
+  border: 1px solid #f4f4f5;
+  box-shadow: 0 1px 2px rgba(31, 41, 55, 0.08);
+  border-radius: 4px;
+  width: 374px;
+  display: flex;
+
+  > input {
+   border: none;
+   box-shadow: none;
+   padding: 11px 0 11px 8px;
+   font-weight: 400;
+   font-size: 14px;
+   line-height: 20px;
+   color: #78787c;
+  }
+
+  > button {
+   padding: 0 8px;
+   font-weight: 500;
+   font-size: 14px;
+   line-height: 20px;
+   color: #22ccee;
+  }
+ }
+`;
+
+export default function InviteLinkStep() {
+ const { link, linkCopied, copyLink } = useInviteLink();
+
+ return (
+  <StyledInviteLinkStep>
+   <span className="primaryText">Last step: invite others!</span>
+   <span className="secondaryText">Now let’s invite others!</span>
+   <span className="tip">Send invitation link to your future community members:</span>
+   <div className="link">
+    <StyledInput className="large" readOnly placeholder="Generating" value={link} />
+    <StyledButton onClick={copyLink} className="ghost small border_less">
+     {linkCopied ? "Copied" : `Copy`}
+    </StyledButton>
+   </div>
+  </StyledInviteLinkStep>
+ );
+}

src/routes/onboarding/steps/inviteRule.js

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+import StyledRadio from "../../../common/component/styled/Radio";
+
+const StyledInviteRuleStep = styled.div`
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ > .input:not(:last-child) {
+  margin-bottom: 20px;
+ }
+`;
+
+export default function InviteRuleStep({ data, setData }) {
+ return (
+  <StyledInviteRuleStep>
+   <span className="primaryText">Last step: invite others!</span>
+   <span className="secondaryText">Firstly, who can sign up to this server?</span>
+   <StyledRadio
+    options={["Everyone", "Invitation link only"]}
+    value={data.inviteRule}
+    onChange={(v) =>
+     setData({
+      ...data,
+      inviteRule: v
+     })
+    }
+   />
+  </StyledInviteRuleStep>
+ );
+}

src/routes/onboarding/steps/last.js

@@ -0,0 +1,44 @@
+import styled from "styled-components";
+import StyledButton from "../../../common/component/styled/Button";
+import PlayIcon from "../../../assets/icons/play.svg?url";
+
+const StyledLastStep = styled.div`
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ > .secondaryText {
+  margin-bottom: 48px;
+ }
+
+ > .tip {
+  width: 588px;
+  font-size: 20px;
+  line-height: 24px;
+  text-align: center;
+  margin-bottom: 96px;
+
+  > .strong {
+   font-weight: 700;
+  }
+ }
+`;
+
+export default function LastStep({ data, onButtonClick }) {
+ return (
+  <StyledLastStep>
+   <span className="primaryText">Welcome to {data.spaceName}</span>
+   <span className="secondaryText">Proudly presented by Rustchat</span>
+   <span className="tip">
+    More settings, including domain resolution, privileges, securities, and invites are available in{" "}
+    <span className="strong">Settings</span>
+   </span>
+   <StyledButton className="startButton" onClick={onButtonClick}>
+    <img src={PlayIcon} alt="play icon" />
+    <span>Start</span>
+   </StyledButton>
+  </StyledLastStep>
+ );
+}

src/routes/onboarding/steps/spaceName.js

@@ -0,0 +1,34 @@
+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>
+ );
+}