Skip to content

Commit 42b0fc9

Browse files
thangvedthangved
authored
Merge pull request #25 from CTU-ZeroOne/client-branch
Client branch
2 parents 4edf5e6 + 7522bae commit 42b0fc9

File tree

4 files changed

+191
-98
lines changed

4 files changed

+191
-98
lines changed

‎client/src/components/AuthLayout/AuthLayout.module.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,6 @@
2626
.inner {
2727
width: 400px;
2828
border: 1px solid #ddd;
29-
padding: 10px;
29+
padding: 10px 40px;
3030
box-shadow: 0 10px 20px #00000010;
3131
}

‎client/src/pages/Login/index.js

+50-15
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,10 @@
1515
// You should have received a copy of the GNU General Public License
1616
// along with ctu-identity. If not, see <http://www.gnu.org/licenses/>.
1717

18-
import { useId } from "react";
18+
import axios from "axios";
19+
import { useId, useState } from "react";
1920
import { Link } from "react-router-dom";
20-
import { Button, Divider, Typography } from "tiny-ui";
21+
import { Alert, Button, Divider, Typography } from "tiny-ui";
2122

2223
import AuthLayout from "~/components/AuthLayout";
2324

@@ -26,28 +27,62 @@ import styles from "./Login.module.scss";
2627
const Login = () => {
2728
const fileId = useId();
2829

30+
const [file, setFile] = useState(null);
31+
const [success, setSuccess] = useState(false);
32+
const [failed, setFailed] = useState(false);
33+
34+
const handleLogin = async () => {
35+
try {
36+
const fileUrl = URL.createObjectURL(file);
37+
38+
const res = await axios.get(fileUrl);
39+
40+
const fileData = res.data;
41+
42+
console.log(fileData);
43+
44+
setSuccess(true);
45+
} catch (error) {
46+
setFailed(true);
47+
}
48+
};
49+
2950
return (
3051
<AuthLayout>
3152
<Typography.Heading level={2} style={{ textAlign: "center" }}>
3253
Đăng nhập
3354
</Typography.Heading>
34-
<form>
35-
<label className={styles.fileWrapper} htmlFor={fileId}>
36-
Tải khóa lên để đăng nhập
37-
</label>
3855

39-
<input type="file" id={fileId} style={{ display: "none" }} />
56+
{success ? (
57+
<Typography.Paragraph>Bạn đã đăng nhập thành công!</Typography.Paragraph>
58+
) : (
59+
<div>
60+
<label className={styles.fileWrapper} htmlFor={fileId}>
61+
Tải khóa lên để đăng nhập
62+
</label>
63+
64+
<input
65+
type="file"
66+
id={fileId}
67+
onChange={(event) => setFile(event.target.files[0])}
68+
style={{ display: "none" }}
69+
/>
70+
71+
{file && <Alert>Bạn đã tải lên 1 file</Alert>}
72+
73+
<Divider />
4074

41-
<Divider />
75+
<Button block btnType="primary" disabled={!file} onClick={handleLogin}>
76+
Đăng nhập
77+
</Button>
4278

43-
<Button block btnType="primary">
44-
Đăng nhập
45-
</Button>
79+
<Typography.Paragraph style={{ marginTop: 10 }}>
80+
Chưa có tài khoản? <Link to="/register">Đăng ký ngay</Link>
81+
</Typography.Paragraph>
82+
</div>
83+
)}
4684

47-
<Typography.Paragraph style={{ marginTop: 10 }}>
48-
Chưa có tài khoản? <Link to="/register">Đăng ký ngay</Link>
49-
</Typography.Paragraph>
50-
</form>
85+
{failed && <Alert type="error"></Alert>}
5186
</AuthLayout>
5287
);
5388
};

‎client/src/pages/Register/index.js

+103-82
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,14 @@ import { Badge, Button, Divider, Form, Input, NativeSelect, Typography } from "t
2323
import AuthLayout from "~/components/AuthLayout";
2424
import authService from "~/services/authService";
2525
import cityService from "~/services/cityService";
26+
import fileService from "~/services/fileService";
2627

2728
import RegisterScan from "./RegisterScan";
2829

2930
const Register = () => {
3031
const [ocrVisible, setOrcVisible] = useState(false);
3132
const [cities, setCities] = useState([]);
33+
const [success, setSuccess] = useState(false);
3234

3335
const formik = useFormik({
3436
initialValues: {
@@ -43,8 +45,14 @@ const Register = () => {
4345
try {
4446
const res = await authService.register(values);
4547

46-
console.log(res.data);
47-
} catch (error) {}
48+
const key = res.data.keyUrl.split(/[./]/)[2];
49+
50+
fileService.downloadFileByKey(key);
51+
52+
setSuccess(true);
53+
} catch (error) {
54+
} finally {
55+
}
4856
},
4957
});
5058

@@ -71,86 +79,99 @@ const Register = () => {
7179
Đăng ký
7280
</Typography.Heading>
7381

74-
<form onSubmit={formik.handleSubmit}>
75-
<Divider>Nhập thông tin</Divider>
76-
<Form.Item label="Số CCCD" required>
77-
<Input
78-
placeholder="Số CCCD"
79-
name="cccd"
80-
required
81-
maxLength={12}
82-
minLength={12}
83-
onInput={formik.handleChange}
84-
/>
85-
</Form.Item>
86-
87-
<Form.Item label="Họ tên" required>
88-
<Input
89-
placeholder="Họ tên"
90-
name="name"
91-
required
92-
onInput={formik.handleChange}
93-
/>
94-
</Form.Item>
95-
96-
<Form.Item label="Ngày sinh" required>
97-
<Input
98-
placeholder="Ngày sinh"
99-
name="birthday"
100-
type="date"
101-
required
102-
onInput={formik.handleChange}
103-
/>
104-
</Form.Item>
105-
106-
<Form.Item label="Giới tính" required>
107-
<NativeSelect
108-
name="sex"
109-
placeholder="Giới tính"
110-
onInput={formik.handleChange}
111-
required
112-
>
113-
<NativeSelect.Option value={1}>Nam</NativeSelect.Option>
114-
<NativeSelect.Option value={2}>Nữ</NativeSelect.Option>
115-
</NativeSelect>
116-
</Form.Item>
117-
118-
<Form.Item label="Quê quán" required>
119-
<NativeSelect
120-
disabled={!cities.length}
121-
name="place"
122-
placeholder="Quê quán"
123-
required
124-
onInput={formik.handleChange}
125-
>
126-
{cities.map((city) => (
127-
<NativeSelect.Option key={city.code} value={city.code}>
128-
{city.code} - {city.name_with_type}
129-
</NativeSelect.Option>
130-
))}
131-
</NativeSelect>
132-
</Form.Item>
133-
134-
<Divider>Hoặc</Divider>
135-
136-
<Badge style={{ width: "100%" }} count="Đang phát triển">
137-
<Button disabled block btnType="outline" onClick={() => setOrcVisible(true)}>
138-
Tải ảnh căn cước công dân
139-
</Button>
140-
</Badge>
141-
142-
<Divider />
143-
144-
<Button btnType="primary" block type="submit">
145-
Đăng ký
146-
</Button>
147-
</form>
148-
149-
<RegisterScan visible={ocrVisible} onCancel={() => setOrcVisible(false)} />
150-
151-
<Typography.Paragraph style={{ marginTop: 10 }}>
152-
Đã có tài khoản? <Link to="/login">Đăng nhập ngay</Link>
153-
</Typography.Paragraph>
82+
{success ? (
83+
<>
84+
<Typography.Paragraph>Bạn đã tạo tài khoản thành công!</Typography.Paragraph>
85+
</>
86+
) : (
87+
<>
88+
<form onSubmit={formik.handleSubmit}>
89+
<Divider>Nhập thông tin</Divider>
90+
<Form.Item label="Số CCCD" required>
91+
<Input
92+
placeholder="Số CCCD"
93+
name="cccd"
94+
required
95+
maxLength={12}
96+
minLength={12}
97+
onInput={formik.handleChange}
98+
/>
99+
</Form.Item>
100+
101+
<Form.Item label="Họ tên" required>
102+
<Input
103+
placeholder="Họ tên"
104+
name="name"
105+
required
106+
onInput={formik.handleChange}
107+
/>
108+
</Form.Item>
109+
110+
<Form.Item label="Ngày sinh" required>
111+
<Input
112+
placeholder="Ngày sinh"
113+
name="birthday"
114+
type="date"
115+
required
116+
onInput={formik.handleChange}
117+
/>
118+
</Form.Item>
119+
120+
<Form.Item label="Giới tính" required>
121+
<NativeSelect
122+
name="sex"
123+
placeholder="Giới tính"
124+
onInput={formik.handleChange}
125+
required
126+
>
127+
<NativeSelect.Option value={1}>Nam</NativeSelect.Option>
128+
<NativeSelect.Option value={2}>Nữ</NativeSelect.Option>
129+
</NativeSelect>
130+
</Form.Item>
131+
132+
<Form.Item label="Quê quán" required>
133+
<NativeSelect
134+
disabled={!cities.length}
135+
name="place"
136+
placeholder="Quê quán"
137+
required
138+
onInput={formik.handleChange}
139+
>
140+
{cities.map((city) => (
141+
<NativeSelect.Option key={city.code} value={city.code}>
142+
{city.code} - {city.name_with_type}
143+
</NativeSelect.Option>
144+
))}
145+
</NativeSelect>
146+
</Form.Item>
147+
148+
<Divider>Hoặc</Divider>
149+
150+
<Badge style={{ width: "100%" }} count="Đang phát triển">
151+
<Button
152+
disabled
153+
block
154+
btnType="outline"
155+
onClick={() => setOrcVisible(true)}
156+
>
157+
Tải ảnh căn cước công dân
158+
</Button>
159+
</Badge>
160+
161+
<Divider />
162+
163+
<Button btnType="primary" block type="submit">
164+
Đăng ký
165+
</Button>
166+
</form>
167+
168+
<RegisterScan visible={ocrVisible} onCancel={() => setOrcVisible(false)} />
169+
170+
<Typography.Paragraph style={{ marginTop: 10 }}>
171+
Đã có tài khoản? <Link to="/login">Đăng nhập ngay</Link>
172+
</Typography.Paragraph>
173+
</>
174+
)}
154175
</AuthLayout>
155176
);
156177
};

‎client/src/services/fileService.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// Copyright (C) 2022 Kim Minh Thắng
2+
//
3+
// This file is part of ctu-identity.
4+
//
5+
// ctu-identity is free software: you can redistribute it and/or modify
6+
// it under the terms of the GNU General Public License as published by
7+
// the Free Software Foundation, either version 3 of the License, or
8+
// (at your option) any later version.
9+
//
10+
// ctu-identity is distributed in the hope that it will be useful,
11+
// but WITHOUT ANY WARRANTY; without even the implied warranty of
12+
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13+
// GNU General Public License for more details.
14+
//
15+
// You should have received a copy of the GNU General Public License
16+
// along with ctu-identity. If not, see <http://www.gnu.org/licenses/>.
17+
18+
import axios from "axios";
19+
20+
const fileService = {
21+
async downloadFileByKey(key) {
22+
try {
23+
const res = await axios.get(
24+
`${process.env.REACT_APP_BACKEND_ENDPOINT}key-download/${key}`
25+
);
26+
27+
const jsonString = JSON.stringify(res.data, undefined, 2);
28+
const blob = new Blob([jsonString], { type: "text/plain" });
29+
const link = document.createElement("a");
30+
link.download = "key.json";
31+
link.href = URL.createObjectURL(blob);
32+
link.click();
33+
} catch (error) {}
34+
},
35+
};
36+
37+
export default fileService;

0 commit comments

Comments
 (0)