ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: onboarding

Browse Source
This commit is contained in:
Tristan Yang
2022-12-12 10:13:52 +08:00
parent 4059a67c1b
commit 0e0dec9c9e
11 changed files with 151 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/onboarding/steps/adminAccount.tsx
+50 -51
View File
@@ -1,4 +1,4 @@
import { useEffect, useState, FC } from "react";
import { useEffect, useState, FC, useRef } from "react";
import styled from "styled-components";
import toast from "react-hot-toast";
import { useDispatch } from "react-redux";
@@ -13,6 +13,7 @@ import { useLoginMutation } from "../../../app/services/auth";
import { updateInitialized } from "../../../app/slices/auth.data";
import { useAppSelector } from "../../../app/store";
import { useTranslation } from "react-i18next";
import { useWizard } from "react-use-wizard";
const StyledWrapper = styled.div`
height: 100%;
@@ -36,7 +37,9 @@ const StyledWrapper = styled.div`
margin-bottom: 24px;
}
> .input {
form {
> .input {
margin-bottom: 20px;
width: 360px;
height: 44px;
font-weight: 400;
@@ -46,18 +49,13 @@ const StyledWrapper = styled.div`
border: 1px solid #d0d5dd;
border-radius: 8px;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
> .inner {
padding: 0;
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
&:not(:nth-last-child(2)) {
margin-bottom: 20px;
}
}
}}
> .button {
width: 360px;
@@ -66,13 +64,13 @@ const StyledWrapper = styled.div`
`;
type Props = {
serverName: string;
nextStep: () => void;
};
const AdminAccount: FC<Props> = ({ serverName, nextStep }) => {
const AdminAccount: FC<Props> = ({ serverName }) => {
const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
const { nextStep } = useWizard();
const formRef = useRef<HTMLFormElement | undefined>();
const loggedIn = useAppSelector((store) => !!store.authData.token);
const dispatch = useDispatch();
const [createAdmin, { isLoading: isSigningUp, isError: signUpError, isSuccess: signUpOk }] = useCreateAdminMutation();
const [login, { isLoading: isLoggingIn, isError: loginError, }] = useLoginMutation();
const { data: serverData } = useGetServerQuery();
@@ -127,50 +125,51 @@ const AdminAccount: FC<Props> = ({ serverName, nextStep }) => {
<StyledWrapper>
<span className="primaryText">{t("admin_title")}</span>
<span className="secondaryText">{t("admin_desc")}</span>
<StyledInput
className="input"
placeholder="Enter your email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<StyledInput
className="input"
type="password"
placeholder="Enter your password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<StyledInput
className="input"
type="password"
placeholder="Confirm your password"
value={confirm}
onChange={(e) => setConfirm(e.target.value)}
/>
<form ref={formRef} action="/">
<StyledInput
className="input"
placeholder="Enter your email"
type={"email"}
required
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<StyledInput
className="input"
type="password"
required
minLength={6}
placeholder="Enter your password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<StyledInput
className="input"
type="password"
required
minLength={6}
placeholder="Confirm your password"
value={confirm}
onChange={(e) => setConfirm(e.target.value)}
/>
</form>
<StyledButton
className="button"
onClick={async () => {
// Verification for admin credentials
if (email === "") {
toast.error("Please enter admin email!");
return;
} else if (password === "") {
toast.error("Please enter admin password!");
return;
} else if (password.length < 6) {
toast.error("Password length greater than 6!");
return;
} else if (password !== confirm) {
toast.error("Two passwords do not match!");
return;
const formEle = formRef?.current;
if (formEle) {
if (!formEle.checkValidity()) {
formEle.reportValidity();
return;
}
// nextStep();
createAdmin({
email,
name: "Admin",
password,
gender: 0
});
}
createAdmin({
email,
name: "Admin",
password,
gender: 0
});
}}
>
{!(isSigningUp || isLoggingIn || isUpdatingServer) ? t("sign") : "..."}
src/routes/onboarding/steps/inviteLink.tsx
+3 -2
View File
@@ -3,6 +3,7 @@ import StyledInput from "../../../common/component/styled/Input";
import StyledButton from "../../../common/component/styled/Button";
import useInviteLink from "../../../common/hook/useInviteLink";
import { useTranslation } from "react-i18next";
import { useWizard } from "react-use-wizard";
const StyledWrapper = styled.div`
height: 100%;
@@ -73,10 +74,10 @@ const StyledWrapper = styled.div`
margin-top: 24px;
}
`;
export default function InviteLink({ nextStep }: { nextStep: () => void }) {
export default function InviteLink() {
const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
const { t: ct } = useTranslation();
const { nextStep } = useWizard();
const { link, linkCopied, copyLink } = useInviteLink();
return (
<StyledWrapper>
src/routes/onboarding/steps/serverName.tsx
+3 -2
View File
@@ -4,6 +4,7 @@ import toast from "react-hot-toast";
import StyledInput from "../../../common/component/styled/Input";
import StyledButton from "../../../common/component/styled/Button";
import { useTranslation } from "react-i18next";
import { useWizard } from "react-use-wizard";
const StyledWrapper = styled.div`
height: 100%;
@@ -49,10 +50,10 @@ const StyledWrapper = styled.div`
type Props = {
serverName: string;
setServerName: (name: string) => void;
nextStep: () => void;
};
const ServerName: FC<Props> = ({ serverName, setServerName, nextStep }) => {
const ServerName: FC<Props> = ({ serverName, setServerName }) => {
const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
const { nextStep } = useWizard();
return (
<StyledWrapper>
<span className="primaryText">{t("new_server")}</span>
src/routes/onboarding/steps/welcomePage.tsx
+4 -1
View File
@@ -1,7 +1,9 @@
import styled from "styled-components";
import StyledButton from "../../../common/component/styled/Button";
import PlayIcon from "../../../assets/icons/play.svg?url";
import { useTranslation } from "react-i18next";
import { useWizard } from "react-use-wizard";
const StyledWrapper = styled.div`
height: 100%;
@@ -44,8 +46,9 @@ const StyledWrapper = styled.div`
}
`;
export default function WelcomePage({ nextStep }: { nextStep: () => void }) {
export default function WelcomePage() {
const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
const { nextStep } = useWizard();
return (
<StyledWrapper>
<span className="primaryText">{t("welcome")}</span>
src/routes/onboarding/steps/whoCanSignUp.tsx
+23 -9
View File
@@ -6,6 +6,7 @@ import StyledButton from "../../../common/component/styled/Button";
import { useGetLoginConfigQuery, useUpdateLoginConfigMutation } from "../../../app/services/server";
import { WhoCanSignUp } from "../../../types/server";
import { useTranslation } from "react-i18next";
import { useWizard } from "react-use-wizard";
const StyledWrapper = styled.div`
height: 100%;
@@ -40,16 +41,23 @@ const StyledWrapper = styled.div`
}
`;
export default function SignUpSetting({ nextStep }: { nextStep: () => void }) {
export default function SignUpSetting() {
const { t } = useTranslation("welcome");
const { data: loginConfig } = useGetLoginConfigQuery();
const { t: st } = useTranslation("setting");
const { nextStep } = useWizard();
const { data: loginConfig, refetch } = useGetLoginConfigQuery();
const [updateLoginConfig, { isSuccess, error }] = useUpdateLoginConfigMutation();
const [value, setValue] = useState<WhoCanSignUp>();
useEffect(() => {
refetch();
}, []);
// Sync to `value` when `loginConfig` is fetched
useEffect(() => {
if (loginConfig) {
console.log("login config", loginConfig.who_can_sign_up);
setValue(loginConfig.who_can_sign_up);
}
}, [loginConfig]);
@@ -69,21 +77,27 @@ export default function SignUpSetting({ nextStep }: { nextStep: () => void }) {
<StyledWrapper>
<span className="primaryText">{t("onboarding.invite_title")}</span>
<span className="secondaryText">{t("onboarding.invite_desc")}</span>
<StyledRadio
options={[t("overview.sign_up.everyone", { ns: "setting" }), t("overview.sign_up.invite", { ns: "setting" })]}
{value && <StyledRadio
options={[st("overview.sign_up.everyone"), st("overview.sign_up.invite")]}
values={["EveryOne", "InvitationOnly"]}
value={value}
onChange={setValue}
/>
/>}
<StyledButton
className="button"
disabled={!value}
onClick={() => {
// nextStep();
if (loginConfig !== undefined) {
updateLoginConfig({
...loginConfig,
who_can_sign_up: value
});
if (loginConfig.who_can_sign_up !== value) {
updateLoginConfig({
...loginConfig,
who_can_sign_up: value
});
} else {
nextStep();
}
}
}}
>