Skip to content

Commit

Permalink
feat(login): add account history (#1985)
Browse files Browse the repository at this point in the history
  • Loading branch information
@syt-honey
syt-honey authored Aug 5, 2023
1 parent 3908376 commit 102cf4c
Show file tree
Hide file tree
Showing 9 changed files with 209 additions and 66 deletions.
4 changes: 2 additions & 2 deletions .../flat-components/src/components/LoginPage/LoginWithPassword/LoginWithPassword.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const Overview: Story<LoginWithPasswordProps> = props => {
};

Overview.args = {
login: (type: PasswordLoginType, key: string, password: string) => {
login: (type: PasswordLoginType, { key }, password: string) => {
message.info("login with " + type + " to " + key + ". And the password is: " + password);
return new Promise(resolve => setTimeout(() => resolve(false), 1000));
},
Expand All @@ -32,7 +32,7 @@ Overview.args = {
message.info("send code with " + type + " to " + key);
return new Promise(resolve => setTimeout(() => resolve(false), 1000));
},
resetPassword: (type: PasswordLoginType, key: string, code: string, password: string) => {
resetPassword: (type: PasswordLoginType, { key }, code: string, password: string) => {
message.info(
"reset password with " +
type +
Expand Down
40 changes: 39 additions & 1 deletion packages/flat-components/src/components/LoginPage/LoginWithPassword/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,47 @@
margin: 0 auto 32px;
}

.login-width-limiter>div {
margin-bottom: 16px;
}

.ant-input-wrapper {
display: flex;

.ant-input-affix-wrapper {
flex: 1
}
}

.ant-input-affix-wrapper {
padding-left: 4px;
margin-bottom: 16px;
}

.ant-input-group-addon {
width: 32px;
background: #fff;

.ant-select .ant-select-selector {
margin-top: -12px;
}

.ant-select-selection-item,
.ant-select-selection-placeholder {
display: none;
}

.ant-select-item-option-content {
text-align: start;
}

.ant-select-arrow {
right: 6px;
}

.ant-select-dropdown {
width: 200px !important;
}

}

.ant-input-password-icon.anticon {
Expand Down
139 changes: 97 additions & 42 deletions packages/flat-components/src/components/LoginPage/LoginWithPassword/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,18 +49,24 @@ export enum PasswordLoginPageType {
Reset = "reset-password",
}

export type LoginKeyType = {
key: string;
originKey: string;
};

export interface LoginWithPasswordProps {
buttons?: LoginButtonProviderType[];
privacyURL?: LoginAgreementProps["privacyURL"];
serviceURL?: LoginAgreementProps["serviceURL"];
login: (type: PasswordLoginType, key: string, password: string) => Promise<boolean>;
accountHistory: Array<{ key: string; password: string }> | [];
login: (type: PasswordLoginType, key: LoginKeyType, password: string) => Promise<boolean>;
register: () => void;
onClickButton: LoginButtonsProps["onClick"];
loginWithVerificationCode: () => void;
sendVerificationCode: (type: PasswordLoginType, key: string) => Promise<boolean>;
resetPassword: (
type: PasswordLoginType,
key: string,
key: LoginKeyType,
code: string,
password: string,
) => Promise<boolean>;
Expand All @@ -70,6 +76,7 @@ export const LoginWithPassword: React.FC<LoginWithPasswordProps> = ({
buttons: userButtons,
privacyURL,
serviceURL,
accountHistory,
onClickButton,
login,
resetPassword,
Expand Down Expand Up @@ -97,8 +104,8 @@ export const LoginWithPassword: React.FC<LoginWithPasswordProps> = ({
const isUnMountRef = useIsUnMounted();

// account and password
const [keyValue, setKeyValue] = useState("");
const [password, setPassword] = useState("");
const [keyValue, setKeyValue] = useState(accountHistory[0]?.key || "");
const [password, setPassword] = useState(accountHistory[0]?.password || "");

const [agreed, setAgreed] = useState(false);
const [clickedLogin, setClickedLogin] = useState(false);
Expand Down Expand Up @@ -132,15 +139,14 @@ export const LoginWithPassword: React.FC<LoginWithPasswordProps> = ({
}, [keyValue, isPhone]);

useEffect(() => {
if (keyValue) {
if (!keyValue) {
setPassword("");
}
}, [keyValue]);

useEffect(() => {
setPassword("");

if (isResettingPage) {
setPassword("");
setCode("");
}
}, [page, isResettingPage]);
Expand Down Expand Up @@ -190,7 +196,18 @@ export const LoginWithPassword: React.FC<LoginWithPasswordProps> = ({
setAgreed(true);
}
setClickedLogin(true);
if (await sp(login(key, isPhone ? countryCode + keyValue : keyValue, password))) {
if (
await sp(
login(
key,
{
key: isPhone ? countryCode + keyValue : keyValue,
originKey: keyValue,
},
password,
),
)
) {
await new Promise(resolve => setTimeout(resolve, 60000));
} else {
message.info(t("login-failed"));
Expand All @@ -214,7 +231,15 @@ export const LoginWithPassword: React.FC<LoginWithPasswordProps> = ({
setClickedReset(true);
if (
await sp(
resetPassword(key, isPhone ? countryCode + keyValue : keyValue, code, password),
resetPassword(
key,
{
key: isPhone ? countryCode + keyValue : keyValue,
originKey: keyValue,
},
code,
password,
),
)
) {
await new Promise(resolve => setTimeout(resolve, 60000));
Expand Down Expand Up @@ -243,40 +268,70 @@ export const LoginWithPassword: React.FC<LoginWithPasswordProps> = ({
<div className="login-with-email">
<div className="login-width-limiter">
<LoginTitle subtitle=" " />
<Input
placeholder={t("enter-email-or-phone")}
prefix={
isPhone ? (
<Select
bordered={false}
defaultValue="+86"
onChange={setCountryCode}
>
{COUNTRY_CODES.map(code => (
<Select.Option
key={code}
value={`+${code}`}
>{`+${code}`}</Select.Option>
))}
</Select>
) : (
<img alt="email" src={emailSVG} />
)
}
size={inputSize}
status={isKeyInputValidate || !keyValue ? void 0 : "error"}
type={inputType}
value={keyValue}
onChange={ev => setKeyValue(ev.currentTarget.value)}
/>
<div>
<Input
allowClear
addonAfter={
accountHistory?.length ? (
<Select
labelInValue
bordered={false}
placement="bottomRight"
value={{ key: password, value: keyValue }}
onChange={options => {
setKeyValue(options.value);
setPassword(options.key);
}}
>
{accountHistory.map(account => {
return (
<Select.Option
key={account.password}
value={account.key}
>
{account.key}
</Select.Option>
);
})}
</Select>
) : null
}
placeholder={t("enter-email-or-phone")}
prefix={
isPhone ? (
<Select
bordered={false}
defaultValue="+86"
onChange={setCountryCode}
>
{COUNTRY_CODES.map(code => (
<Select.Option
key={code}
value={`+${code}`}
>{`+${code}`}</Select.Option>
))}
</Select>
) : (
<img alt="email" src={emailSVG} />
)
}
size={inputSize}
status={isKeyInputValidate || !keyValue ? void 0 : "error"}
type={inputType}
value={keyValue}
onChange={ev => setKeyValue(ev.currentTarget.value)}
/>
</div>

<Input.Password
placeholder={t("enter-password")}
prefix={<img alt="password" src={lockSVG} />}
status={!password || validatePassword(password) ? void 0 : "error"}
value={password}
onChange={ev => setPassword(ev.currentTarget.value)}
/>
<div>
<Input.Password
placeholder={t("enter-password")}
prefix={<img alt="password" src={lockSVG} />}
status={!password || validatePassword(password) ? void 0 : "error"}
value={password}
onChange={ev => setPassword(ev.currentTarget.value)}
/>
</div>

<div className="login-with-email-btn-wrapper">
<Button type="link" onClick={loginWithVerificationCode}>
Expand Down
2 changes: 1 addition & 1 deletion packages/flat-components/src/components/RegisterModal/RegisterModal.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ Overview.args = {
onClickButton: (provider: string) => {
message.info("login with " + provider);
},
register: (type: PasswordLoginType, key: string, code, password: string) => {
register: (type: PasswordLoginType, { key }, code, password: string) => {
message.info(
"register. current type: " +
type +
Expand Down
17 changes: 15 additions & 2 deletions packages/flat-components/src/components/RegisterModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
LoginButtonsDescription,
LoginButtons,
LoginButtonsProps,
LoginKeyType,
} from "../LoginPage";
import { COUNTRY_CODES } from "../LoginPage/LoginWithCode/data";
import { useIsUnMounted, useSafePromise } from "../../utils/hooks";
Expand All @@ -33,7 +34,7 @@ export interface RegisterProps {
sendVerificationCode: (type: PasswordLoginType, key: string) => Promise<boolean>;
register: (
type: PasswordLoginType,
key: string,
key: LoginKeyType,
code: string,
password: string,
) => Promise<boolean>;
Expand Down Expand Up @@ -92,7 +93,19 @@ export const RegisterModal: React.FC<RegisterProps> = ({
setAgreed(true);
}
setClickedRegister(true);
if (await sp(register(key, isPhone ? countryCode + keyValue : keyValue, code, password))) {
if (
await sp(
register(
key,
{
key: isPhone ? countryCode + keyValue : keyValue,
originKey: keyValue,
},
code,
password,
),
)
) {
await new Promise(resolve => setTimeout(resolve, 60000));
} else {
message.info(t("reset-failed"));
Expand Down
Loading

0 comments on commit 102cf4c

Please sign in to comment.