AuthForm.tsx 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. import React, { useContext, useMemo, useState } from 'react';
  2. import { makeStyles, Theme, Typography } from '@material-ui/core';
  3. import CustomButton from '@/components/customButton/CustomButton';
  4. import CustomInput from '@/components/customInput/CustomInput';
  5. import icons from '@/components/icons/Icons';
  6. import { useTranslation } from 'react-i18next';
  7. import { ITextfieldConfig } from '@/components/customInput/Types';
  8. import { useFormValidation } from '@/hooks/Form';
  9. import { formatForm } from '@/utils/Form';
  10. import { MilvusHttp } from '@/http/Milvus';
  11. import { useNavigate } from 'react-router-dom';
  12. import { rootContext } from '@/context/Root';
  13. import { authContext } from '@/context/Auth';
  14. import { MILVUS_ADDRESS, LAST_TIME_ADDRESS } from '../../consts/Localstorage';
  15. import { MILVUS_URL } from '../../consts/Milvus';
  16. import { CustomRadio } from '@/components/customRadio/CustomRadio';
  17. import { prometheusContext } from '@/context/Prometheus';
  18. const useStyles = makeStyles((theme: Theme) => ({
  19. wrapper: {
  20. display: 'flex',
  21. flexDirection: 'column',
  22. alignItems: 'flex-end',
  23. padding: theme.spacing(0, 3),
  24. },
  25. titleWrapper: {
  26. display: 'flex',
  27. alignItems: 'center',
  28. padding: theme.spacing(3),
  29. margin: '0 auto',
  30. flexDirection: 'column',
  31. '& .title': {
  32. margin: 0,
  33. color: '#323232',
  34. fontWeight: 'bold',
  35. },
  36. },
  37. logo: {
  38. width: '42px',
  39. height: 'auto',
  40. marginBottom: theme.spacing(1),
  41. display: 'block',
  42. },
  43. input: {
  44. margin: theme.spacing(0.5, 0, 0),
  45. },
  46. sslWrapper: {
  47. display: 'flex',
  48. width: '100%',
  49. justifyContent: 'flex-start',
  50. },
  51. }));
  52. export const AuthForm = (props: any) => {
  53. const navigate = useNavigate();
  54. const classes = useStyles();
  55. const { openSnackBar } = useContext(rootContext);
  56. const { setAddress, setIsAuth } = useContext(authContext);
  57. const Logo = icons.zilliz;
  58. const { t: commonTrans } = useTranslation();
  59. const attuTrans = commonTrans('attu');
  60. const { t: btnTrans } = useTranslation('btn');
  61. const { t: warningTrans } = useTranslation('warning');
  62. const { t: successTrans } = useTranslation('success');
  63. const [form, setForm] = useState({
  64. address: window.localStorage.getItem(LAST_TIME_ADDRESS) || MILVUS_URL,
  65. username: '',
  66. password: '',
  67. ssl: false,
  68. });
  69. const checkedForm = useMemo(() => {
  70. return formatForm(form);
  71. }, [form]);
  72. const { validation, checkIsValid } = useFormValidation(checkedForm);
  73. const handleInputChange = (
  74. key: 'address' | 'username' | 'password',
  75. value: string | boolean
  76. ) => {
  77. setForm(v => ({ ...v, [key]: value }));
  78. };
  79. const inputConfigs: ITextfieldConfig[] = useMemo(() => {
  80. const noAuthConfigs: ITextfieldConfig[] = [
  81. {
  82. label: attuTrans.address,
  83. key: 'address',
  84. onChange: (val: string) => handleInputChange('address', val),
  85. variant: 'filled',
  86. className: classes.input,
  87. placeholder: attuTrans.address,
  88. fullWidth: true,
  89. validations: [
  90. {
  91. rule: 'require',
  92. errorText: warningTrans('required', { name: attuTrans.address }),
  93. },
  94. ],
  95. defaultValue: form.address,
  96. },
  97. ];
  98. return [
  99. ...noAuthConfigs,
  100. {
  101. label: `Milvus ${attuTrans.username} ${attuTrans.optional}`,
  102. key: 'username',
  103. onChange: (value: string) => handleInputChange('username', value),
  104. variant: 'filled',
  105. className: classes.input,
  106. placeholder: attuTrans.username,
  107. fullWidth: true,
  108. defaultValue: form.username,
  109. },
  110. {
  111. label: `Milvus ${attuTrans.password} ${attuTrans.optional}`,
  112. key: 'password',
  113. onChange: (value: string) => handleInputChange('password', value),
  114. variant: 'filled',
  115. className: classes.input,
  116. placeholder: attuTrans.password,
  117. fullWidth: true,
  118. type: 'password',
  119. defaultValue: form.username,
  120. },
  121. ];
  122. }, [form, attuTrans, warningTrans, classes.input]);
  123. const {
  124. withPrometheus,
  125. setWithPrometheus,
  126. prometheusAddress,
  127. prometheusInstance,
  128. prometheusNamespace,
  129. setPrometheusAddress,
  130. setPrometheusInstance,
  131. setPrometheusNamespace,
  132. } = useContext(prometheusContext);
  133. const prometheusConfigs: ITextfieldConfig[] = useMemo(
  134. () => [
  135. {
  136. label: `${attuTrans.prometheusAddress}`,
  137. key: 'prometheus_address',
  138. onChange: setPrometheusAddress,
  139. variant: 'filled',
  140. className: classes.input,
  141. placeholder: attuTrans.prometheusAddress,
  142. fullWidth: true,
  143. defaultValue: prometheusAddress,
  144. },
  145. {
  146. label: `${attuTrans.prometheusNamespace}`,
  147. key: 'prometheus_namespace',
  148. onChange: setPrometheusNamespace,
  149. variant: 'filled',
  150. className: classes.input,
  151. placeholder: attuTrans.prometheusNamespace,
  152. fullWidth: true,
  153. defaultValue: prometheusNamespace,
  154. },
  155. {
  156. label: `${attuTrans.prometheusInstance}`,
  157. key: 'prometheus_instance',
  158. onChange: setPrometheusInstance,
  159. variant: 'filled',
  160. className: classes.input,
  161. placeholder: attuTrans.prometheusInstance,
  162. fullWidth: true,
  163. defaultValue: prometheusInstance,
  164. },
  165. ],
  166. []
  167. );
  168. const handleConnect = async (event: React.FormEvent) => {
  169. event.preventDefault();
  170. const address = form.address;
  171. const data = { ...form, address };
  172. await MilvusHttp.connect(data);
  173. setIsAuth(true);
  174. setAddress(address);
  175. openSnackBar(successTrans('connect'));
  176. window.localStorage.setItem(MILVUS_ADDRESS, address);
  177. // store address for next time using
  178. window.localStorage.setItem(LAST_TIME_ADDRESS, address);
  179. navigate('/');
  180. };
  181. const btnDisabled = useMemo(() => {
  182. return form.address.trim().length === 0;
  183. }, [form.address]);
  184. return (
  185. <form onSubmit={handleConnect}>
  186. <section className={classes.wrapper}>
  187. <div className={classes.titleWrapper}>
  188. <Logo classes={{ root: classes.logo }} />
  189. <Typography variant="h2" className="title">
  190. {attuTrans.admin}
  191. </Typography>
  192. </div>
  193. {inputConfigs.map(v => (
  194. <CustomInput
  195. type="text"
  196. textConfig={v}
  197. checkValid={checkIsValid}
  198. validInfo={validation}
  199. key={v.label}
  200. />
  201. ))}
  202. <div className={classes.sslWrapper}>
  203. <CustomRadio
  204. defaultChecked={withPrometheus}
  205. label={attuTrans.prometheus}
  206. handleChange={setWithPrometheus}
  207. />
  208. </div>
  209. {withPrometheus &&
  210. prometheusConfigs.map(v => (
  211. <CustomInput
  212. type="text"
  213. textConfig={v}
  214. checkValid={checkIsValid}
  215. validInfo={validation}
  216. key={v.label}
  217. />
  218. ))}
  219. <CustomButton type="submit" variant="contained" disabled={btnDisabled}>
  220. {btnTrans('connect')}
  221. </CustomButton>
  222. </section>
  223. </form>
  224. );
  225. };