Merge pull request #25 from CTU-ZeroOne/client-branch

Client branch
CTU-ZeroOne · Dec 8, 2022 · 42b0fc9 · 42b0fc9
2 parents 4edf5e6 + 7522bae
commit 42b0fc9
Show file tree

Hide file tree

Showing 4 changed files with 191 additions and 98 deletions.
diff --git a/client/src/components/AuthLayout/AuthLayout.module.scss b/client/src/components/AuthLayout/AuthLayout.module.scss
@@ -26,6 +26,6 @@
 .inner {
 	width: 400px;
 	border: 1px solid #ddd;
-	padding: 10px;
+	padding: 10px 40px;
 	box-shadow: 0 10px 20px #00000010;
 }
diff --git a/client/src/pages/Login/index.js b/client/src/pages/Login/index.js
@@ -15,9 +15,10 @@
 // You should have received a copy of the GNU General Public License
 // along with ctu-identity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { useId } from "react";
+import axios from "axios";
+import { useId, useState } from "react";
 import { Link } from "react-router-dom";
-import { Button, Divider, Typography } from "tiny-ui";
+import { Alert, Button, Divider, Typography } from "tiny-ui";
 
 import AuthLayout from "~/components/AuthLayout";
 
@@ -26,28 +27,62 @@ import styles from "./Login.module.scss";
 const Login = () => {
 	const fileId = useId();
 
+	const [file, setFile] = useState(null);
+	const [success, setSuccess] = useState(false);
+	const [failed, setFailed] = useState(false);
+
+	const handleLogin = async () => {
+		try {
+			const fileUrl = URL.createObjectURL(file);
+
+			const res = await axios.get(fileUrl);
+
+			const fileData = res.data;
+
+			console.log(fileData);
+
+			setSuccess(true);
+		} catch (error) {
+			setFailed(true);
+		}
+	};
+
 	return (
 		<AuthLayout>
 			<Typography.Heading level={2} style={{ textAlign: "center" }}>
 				Đăng nhập
 			</Typography.Heading>
-			<form>
-				<label className={styles.fileWrapper} htmlFor={fileId}>
-					Tải khóa lên để đăng nhập
-				</label>
 
-				<input type="file" id={fileId} style={{ display: "none" }} />
+			{success ? (
+				<Typography.Paragraph>Bạn đã đăng nhập thành công!</Typography.Paragraph>
+			) : (
+				<div>
+					<label className={styles.fileWrapper} htmlFor={fileId}>
+						Tải khóa lên để đăng nhập
+					</label>
+
+					<input
+						type="file"
+						id={fileId}
+						onChange={(event) => setFile(event.target.files[0])}
+						style={{ display: "none" }}
+					/>
+
+					{file && <Alert>Bạn đã tải lên 1 file</Alert>}
+
+					<Divider />
 
-				<Divider />
+					<Button block btnType="primary" disabled={!file} onClick={handleLogin}>
+						Đăng nhập
+					</Button>
 
-				<Button block btnType="primary">
-					Đăng nhập
-				</Button>
+					<Typography.Paragraph style={{ marginTop: 10 }}>
+						Chưa có tài khoản? <Link to="/register">Đăng ký ngay</Link>
+					</Typography.Paragraph>
+				</div>
+			)}
 
-				<Typography.Paragraph style={{ marginTop: 10 }}>
-					Chưa có tài khoản? <Link to="/register">Đăng ký ngay</Link>
-				</Typography.Paragraph>
-			</form>
+			{failed && <Alert type="error"></Alert>}
 		</AuthLayout>
 	);
 };

diff --git a/client/src/pages/Register/index.js b/client/src/pages/Register/index.js
@@ -23,12 +23,14 @@ import { Badge, Button, Divider, Form, Input, NativeSelect, Typography } from "t
 import AuthLayout from "~/components/AuthLayout";
 import authService from "~/services/authService";
 import cityService from "~/services/cityService";
+import fileService from "~/services/fileService";
 
 import RegisterScan from "./RegisterScan";
 
 const Register = () => {
 	const [ocrVisible, setOrcVisible] = useState(false);
 	const [cities, setCities] = useState([]);
+	const [success, setSuccess] = useState(false);
 
 	const formik = useFormik({
 		initialValues: {
@@ -43,8 +45,14 @@ const Register = () => {
 			try {
 				const res = await authService.register(values);
 
-				console.log(res.data);
-			} catch (error) {}
+				const key = res.data.keyUrl.split(/[./]/)[2];
+
+				fileService.downloadFileByKey(key);
+
+				setSuccess(true);
+			} catch (error) {
+			} finally {
+			}
 		},
 	});
 
@@ -71,86 +79,99 @@ const Register = () => {
 				Đăng ký
 			</Typography.Heading>
 
-			<form onSubmit={formik.handleSubmit}>
-				<Divider>Nhập thông tin</Divider>
-				<Form.Item label="Số CCCD" required>
-					<Input
-						placeholder="Số CCCD"
-						name="cccd"
-						required
-						maxLength={12}
-						minLength={12}
-						onInput={formik.handleChange}
-					/>
-				</Form.Item>
-
-				<Form.Item label="Họ tên" required>
-					<Input
-						placeholder="Họ tên"
-						name="name"
-						required
-						onInput={formik.handleChange}
-					/>
-				</Form.Item>
-
-				<Form.Item label="Ngày sinh" required>
-					<Input
-						placeholder="Ngày sinh"
-						name="birthday"
-						type="date"
-						required
-						onInput={formik.handleChange}
-					/>
-				</Form.Item>
-
-				<Form.Item label="Giới tính" required>
-					<NativeSelect
-						name="sex"
-						placeholder="Giới tính"
-						onInput={formik.handleChange}
-						required
-					>
-						<NativeSelect.Option value={1}>Nam</NativeSelect.Option>
-						<NativeSelect.Option value={2}>Nữ</NativeSelect.Option>
-					</NativeSelect>
-				</Form.Item>
-
-				<Form.Item label="Quê quán" required>
-					<NativeSelect
-						disabled={!cities.length}
-						name="place"
-						placeholder="Quê quán"
-						required
-						onInput={formik.handleChange}
-					>
-						{cities.map((city) => (
-							<NativeSelect.Option key={city.code} value={city.code}>
-								{city.code} - {city.name_with_type}
-							</NativeSelect.Option>
-						))}
-					</NativeSelect>
-				</Form.Item>
-
-				<Divider>Hoặc</Divider>
-
-				<Badge style={{ width: "100%" }} count="Đang phát triển">
-					<Button disabled block btnType="outline" onClick={() => setOrcVisible(true)}>
-						Tải ảnh căn cước công dân
-					</Button>
-				</Badge>
-
-				<Divider />
-
-				<Button btnType="primary" block type="submit">
-					Đăng ký
-				</Button>
-			</form>
-
-			<RegisterScan visible={ocrVisible} onCancel={() => setOrcVisible(false)} />
-
-			<Typography.Paragraph style={{ marginTop: 10 }}>
-				Đã có tài khoản? <Link to="/login">Đăng nhập ngay</Link>
-			</Typography.Paragraph>
+			{success ? (
+				<>
+					<Typography.Paragraph>Bạn đã tạo tài khoản thành công!</Typography.Paragraph>
+				</>
+			) : (
+				<>
+					<form onSubmit={formik.handleSubmit}>
+						<Divider>Nhập thông tin</Divider>
+						<Form.Item label="Số CCCD" required>
+							<Input
+								placeholder="Số CCCD"
+								name="cccd"
+								required
+								maxLength={12}
+								minLength={12}
+								onInput={formik.handleChange}
+							/>
+						</Form.Item>
+
+						<Form.Item label="Họ tên" required>
+							<Input
+								placeholder="Họ tên"
+								name="name"
+								required
+								onInput={formik.handleChange}
+							/>
+						</Form.Item>
+
+						<Form.Item label="Ngày sinh" required>
+							<Input
+								placeholder="Ngày sinh"
+								name="birthday"
+								type="date"
+								required
+								onInput={formik.handleChange}
+							/>
+						</Form.Item>
+
+						<Form.Item label="Giới tính" required>
+							<NativeSelect
+								name="sex"
+								placeholder="Giới tính"
+								onInput={formik.handleChange}
+								required
+							>
+								<NativeSelect.Option value={1}>Nam</NativeSelect.Option>
+								<NativeSelect.Option value={2}>Nữ</NativeSelect.Option>
+							</NativeSelect>
+						</Form.Item>
+
+						<Form.Item label="Quê quán" required>
+							<NativeSelect
+								disabled={!cities.length}
+								name="place"
+								placeholder="Quê quán"
+								required
+								onInput={formik.handleChange}
+							>
+								{cities.map((city) => (
+									<NativeSelect.Option key={city.code} value={city.code}>
+										{city.code} - {city.name_with_type}
+									</NativeSelect.Option>
+								))}
+							</NativeSelect>
+						</Form.Item>
+
+						<Divider>Hoặc</Divider>
+
+						<Badge style={{ width: "100%" }} count="Đang phát triển">
+							<Button
+								disabled
+								block
+								btnType="outline"
+								onClick={() => setOrcVisible(true)}
+							>
+								Tải ảnh căn cước công dân
+							</Button>
+						</Badge>
+
+						<Divider />
+
+						<Button btnType="primary" block type="submit">
+							Đăng ký
+						</Button>
+					</form>
+
+					<RegisterScan visible={ocrVisible} onCancel={() => setOrcVisible(false)} />
+
+					<Typography.Paragraph style={{ marginTop: 10 }}>
+						Đã có tài khoản? <Link to="/login">Đăng nhập ngay</Link>
+					</Typography.Paragraph>
+				</>
+			)}
 		</AuthLayout>
 	);
 };

diff --git a/client/src/services/fileService.js b/client/src/services/fileService.js
@@ -0,0 +1,37 @@
+// Copyright (C) 2022 Kim Minh Thắng
+//
+// This file is part of ctu-identity.
+//
+// ctu-identity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// ctu-identity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with ctu-identity.  If not, see <http://www.gnu.org/licenses/>.
+
+import axios from "axios";
+
+const fileService = {
+	async downloadFileByKey(key) {
+		try {
+			const res = await axios.get(
+				`${process.env.REACT_APP_BACKEND_ENDPOINT}key-download/${key}`
+			);
+
+			const jsonString = JSON.stringify(res.data, undefined, 2);
+			const blob = new Blob([jsonString], { type: "text/plain" });
+			const link = document.createElement("a");
+			link.download = "key.json";
+			link.href = URL.createObjectURL(blob);
+			link.click();
+		} catch (error) {}
+	},
+};
+
+export default fileService;