You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by li...@apache.org on 2023/06/20 13:59:45 UTC
[incubator-devlake] branch main updated: feat(config-ui): use new component form password (#5528)
This is an automated email from the ASF dual-hosted git repository.
likyh pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
The following commit(s) were added to refs/heads/main by this push:
new be460739c feat(config-ui): use new component form password (#5528)
be460739c is described below
commit be460739ca7528bcd0ae7fabbfe5e1afca6adeca
Author: 青湛 <0x...@gmail.com>
AuthorDate: Tue Jun 20 21:59:41 2023 +0800
feat(config-ui): use new component form password (#5528)
* feat(config-ui): add new component form password
* refactor(config-ui): move form item to form
* refactor(config-ui): use form password to replace input password
---
.../{form-item/styled.ts => form/index.ts} | 16 ++--------
.../components/{form-item => form/item}/index.tsx | 0
.../components/{form-item => form/item}/styled.ts | 0
.../{form-item => form/password}/index.tsx | 34 ++++++++++++----------
config-ui/src/components/index.ts | 2 +-
.../components/connection-form/fields/password.tsx | 6 ++--
.../connection-form/fields/secret-key.tsx | 6 ++--
.../components/connection-form/fields/token.tsx | 6 ++--
.../register/github/connection-fields/token.tsx | 8 ++---
.../register/jira/connection-fields/auth.tsx | 18 +++---------
10 files changed, 40 insertions(+), 56 deletions(-)
diff --git a/config-ui/src/components/form-item/styled.ts b/config-ui/src/components/form/index.ts
similarity index 78%
copy from config-ui/src/components/form-item/styled.ts
copy to config-ui/src/components/form/index.ts
index 291e5b3e9..70ace6d30 100644
--- a/config-ui/src/components/form-item/styled.ts
+++ b/config-ui/src/components/form/index.ts
@@ -16,17 +16,5 @@
*
*/
-import styled from 'styled-components';
-
-export const Label = styled.label`
- font-size: 16px;
- font-weight: 600;
-`;
-
-export const LabelInfo = styled.i`
- color: #ff8b8b;
-`;
-
-export const subLabel = styled.p`
- margin: 0;
-`;
+export * from './item';
+export * from './password';
diff --git a/config-ui/src/components/form-item/index.tsx b/config-ui/src/components/form/item/index.tsx
similarity index 100%
copy from config-ui/src/components/form-item/index.tsx
copy to config-ui/src/components/form/item/index.tsx
diff --git a/config-ui/src/components/form-item/styled.ts b/config-ui/src/components/form/item/styled.ts
similarity index 100%
rename from config-ui/src/components/form-item/styled.ts
rename to config-ui/src/components/form/item/styled.ts
diff --git a/config-ui/src/components/form-item/index.tsx b/config-ui/src/components/form/password/index.tsx
similarity index 58%
rename from config-ui/src/components/form-item/index.tsx
rename to config-ui/src/components/form/password/index.tsx
index 0ee800c6d..b9de09a7d 100644
--- a/config-ui/src/components/form-item/index.tsx
+++ b/config-ui/src/components/form/password/index.tsx
@@ -16,25 +16,27 @@
*
*/
-import { FormGroup } from '@blueprintjs/core';
+import { useState } from 'react';
+import { InputGroup, InputGroupProps2 } from '@blueprintjs/core';
-import * as S from './styled';
+import { IconButton } from '@/components';
-interface Props {
- label?: React.ReactNode;
- subLabel?: React.ReactNode;
- required?: boolean;
- children: React.ReactNode;
-}
+interface Props extends InputGroupProps2 {}
+
+export const FormPassword = ({ ...props }: Props) => {
+ const [showPass, setShowPass] = useState(false);
-export const FormItem = ({ label, subLabel, required, children }: Props) => {
return (
- <FormGroup
- label={<S.Label>{label}</S.Label>}
- subLabel={<S.subLabel>{subLabel}</S.subLabel>}
- labelInfo={required ? <S.LabelInfo>*</S.LabelInfo> : null}
- >
- {children}
- </FormGroup>
+ <InputGroup
+ {...props}
+ type={showPass ? 'text' : 'password'}
+ rightElement={
+ <IconButton
+ icon={showPass ? 'unlock' : 'lock'}
+ tooltip={showPass ? 'Hide' : 'Show'}
+ onClick={() => setShowPass(!showPass)}
+ />
+ }
+ />
);
};
diff --git a/config-ui/src/components/index.ts b/config-ui/src/components/index.ts
index 07bb29f0f..97a1db2ff 100644
--- a/config-ui/src/components/index.ts
+++ b/config-ui/src/components/index.ts
@@ -23,7 +23,7 @@ export * from './card';
export * from './dialog';
export * from './divider';
export { default as ErrorBoundary } from './error-boundary';
-export * from './form-item';
+export * from './form';
export * from './inspector';
export * from './loading';
export * from './logo';
diff --git a/config-ui/src/plugins/components/connection-form/fields/password.tsx b/config-ui/src/plugins/components/connection-form/fields/password.tsx
index 409514013..226a25994 100644
--- a/config-ui/src/plugins/components/connection-form/fields/password.tsx
+++ b/config-ui/src/plugins/components/connection-form/fields/password.tsx
@@ -34,7 +34,9 @@
*/
import { useEffect } from 'react';
-import { FormGroup, InputGroup } from '@blueprintjs/core';
+import { FormGroup } from '@blueprintjs/core';
+
+import { FormPassword } from '@/components';
import * as S from './styled';
@@ -77,7 +79,7 @@ export const ConnectionPassword = ({
labelInfo={<S.LabelInfo>*</S.LabelInfo>}
subLabel={subLabel ? <S.LabelDescription>{subLabel}</S.LabelDescription> : null}
>
- <InputGroup type="password" placeholder={placeholder ?? 'Your Password'} value={value} onChange={handleChange} />
+ <FormPassword placeholder={placeholder ?? 'Your Password'} value={value} onChange={handleChange} />
</FormGroup>
);
};
diff --git a/config-ui/src/plugins/components/connection-form/fields/secret-key.tsx b/config-ui/src/plugins/components/connection-form/fields/secret-key.tsx
index ff61dacf5..bdfe3cf7e 100644
--- a/config-ui/src/plugins/components/connection-form/fields/secret-key.tsx
+++ b/config-ui/src/plugins/components/connection-form/fields/secret-key.tsx
@@ -34,7 +34,9 @@
*/
import { useEffect } from 'react';
-import { FormGroup, InputGroup } from '@blueprintjs/core';
+import { FormGroup } from '@blueprintjs/core';
+
+import { FormPassword } from '@/components';
import * as S from './styled';
@@ -77,7 +79,7 @@ export const ConnectionSecretKey = ({
labelInfo={<S.LabelInfo>*</S.LabelInfo>}
subLabel={subLabel ? <S.LabelDescription>{subLabel}</S.LabelDescription> : null}
>
- <InputGroup type="password" placeholder={placeholder ?? 'Your SecretKey'} value={value} onChange={handleChange} />
+ <FormPassword placeholder={placeholder ?? 'Your SecretKey'} value={value} onChange={handleChange} />
</FormGroup>
);
};
diff --git a/config-ui/src/plugins/components/connection-form/fields/token.tsx b/config-ui/src/plugins/components/connection-form/fields/token.tsx
index 108c6e958..bee803130 100644
--- a/config-ui/src/plugins/components/connection-form/fields/token.tsx
+++ b/config-ui/src/plugins/components/connection-form/fields/token.tsx
@@ -34,7 +34,9 @@
*/
import { useEffect } from 'react';
-import { FormGroup, InputGroup } from '@blueprintjs/core';
+import { FormGroup } from '@blueprintjs/core';
+
+import { FormPassword } from '@/components';
import * as S from './styled';
@@ -68,7 +70,7 @@ export const ConnectionToken = ({ label, subLabel, initialValue, value, setValue
labelInfo={<S.LabelInfo>*</S.LabelInfo>}
subLabel={subLabel && <S.LabelDescription>{subLabel}</S.LabelDescription>}
>
- <InputGroup type="password" placeholder="Your Token" value={value} onChange={handleChange} />
+ <FormPassword placeholder="Your Token" value={value} onChange={handleChange} />
</FormGroup>
);
};
diff --git a/config-ui/src/plugins/register/github/connection-fields/token.tsx b/config-ui/src/plugins/register/github/connection-fields/token.tsx
index 866f55189..b63cd30bd 100644
--- a/config-ui/src/plugins/register/github/connection-fields/token.tsx
+++ b/config-ui/src/plugins/register/github/connection-fields/token.tsx
@@ -17,9 +17,9 @@
*/
import { useEffect, useState } from 'react';
-import { FormGroup, InputGroup, Button, Icon, Intent } from '@blueprintjs/core';
+import { FormGroup, Button, Icon, Intent } from '@blueprintjs/core';
-import { ExternalLink } from '@/components';
+import { ExternalLink, FormPassword } from '@/components';
import * as API from '../api';
@@ -126,10 +126,8 @@ export const Token = ({ endpoint, proxy, initialValue, value, error, setValue, s
{tokens.map(({ value, isValid, status, from }, i) => (
<S.Input key={i}>
<div className="input">
- <InputGroup
+ <FormPassword
placeholder="Token"
- type="password"
- value={value ?? ''}
onChange={(e) => handleChangeToken(i, e.target.value)}
onBlur={() => handleTestToken(i)}
/>
diff --git a/config-ui/src/plugins/register/jira/connection-fields/auth.tsx b/config-ui/src/plugins/register/jira/connection-fields/auth.tsx
index b1527692a..681759c0e 100644
--- a/config-ui/src/plugins/register/jira/connection-fields/auth.tsx
+++ b/config-ui/src/plugins/register/jira/connection-fields/auth.tsx
@@ -19,7 +19,7 @@
import { useState, useEffect } from 'react';
import { FormGroup, RadioGroup, Radio, InputGroup } from '@blueprintjs/core';
-import { ExternalLink } from '@/components';
+import { ExternalLink, FormPassword } from '@/components';
import * as S from './styled';
@@ -152,12 +152,7 @@ export const Auth = ({ initialValues, values, errors, setValues, setErrors }: Pr
</S.LabelDescription>
}
>
- <InputGroup
- type="password"
- placeholder="Your PAT"
- value={values.password}
- onChange={handleChangePassword}
- />
+ <FormPassword placeholder="Your PAT" value={values.password} onChange={handleChangePassword} />
</FormGroup>
</>
)}
@@ -176,12 +171,7 @@ export const Auth = ({ initialValues, values, errors, setValues, setErrors }: Pr
<InputGroup placeholder="Your Username" value={values.username} onChange={handleChangeUsername} />
</FormGroup>
<FormGroup label={<S.Label>Password</S.Label>} labelInfo={<S.LabelInfo>*</S.LabelInfo>}>
- <InputGroup
- type="password"
- placeholder="Your Password"
- value={values.password}
- onChange={handleChangePassword}
- />
+ <FormPassword placeholder="Your Password" value={values.password} onChange={handleChangePassword} />
</FormGroup>
</>
)}
@@ -197,7 +187,7 @@ export const Auth = ({ initialValues, values, errors, setValues, setErrors }: Pr
</S.LabelDescription>
}
>
- <InputGroup type="password" placeholder="Your PAT" value={values.token} onChange={handleChangeToken} />
+ <FormPassword placeholder="Your PAT" value={values.token} onChange={handleChangeToken} />
</FormGroup>
)}
</>