diff --git a/package-lock.json b/package-lock.json index 42515e1..ed73005 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "@types/node": "^12.20.15", "@types/react": "^17.0.13", "@types/react-dom": "^17.0.8", + "axios": "^0.23.0", "moment": "^2.29.1", "node-sass": "^6.0.1", "query-string": "^7.0.1", @@ -3725,6 +3726,15 @@ "pretty-format": "^26.0.0" } }, + "node_modules/@types/jquery": { + "version": "3.5.8", + "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.8.tgz", + "integrity": "sha512-cXk6NwqjDYg+UI9p2l3x0YmPa4m7RrXqmbK4IpVVpRJiYXU/QTo+UZrn54qfE1+9Gao4qpYqUnxm5ZCy2FTXAw==", + "dev": true, + "dependencies": { + "@types/sizzle": "*" + } + }, "node_modules/@types/json-schema": { "version": "7.0.7", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz", @@ -3827,6 +3837,12 @@ "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz", "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==" }, + "node_modules/@types/sizzle": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz", + "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==", + "dev": true + }, "node_modules/@types/source-list-map": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", @@ -3850,6 +3866,15 @@ "@types/jest": "*" } }, + "node_modules/@types/toastr": { + "version": "2.1.39", + "resolved": "https://registry.npmjs.org/@types/toastr/-/toastr-2.1.39.tgz", + "integrity": "sha512-jgbMLTjj7dsSY/EYYOoZXhK6OY/bR909Bn6YNnwL3Oq+f0AeFKbYa198XU/6bsmUqqCCWw5VvCi11FDN1/fetw==", + "dev": true, + "dependencies": { + "@types/jquery": "*" + } + }, "node_modules/@types/uglify-js": { "version": "3.13.1", "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.1.tgz", @@ -4805,6 +4830,14 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.23.0.tgz", + "integrity": "sha512-NmvAE4i0YAv5cKq8zlDoPd1VLKAqX5oLuZKs8xkJa4qi6RGn0uhCYFjWtHHC9EM/MwOwYWOs53W+V0aqEXq1sg==", + "dependencies": { + "follow-redirects": "^1.14.4" + } + }, "node_modules/axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -9432,9 +9465,9 @@ } }, "node_modules/follow-redirects": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz", - "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==", + "version": "1.14.4", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.4.tgz", + "integrity": "sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g==", "funding": [ { "type": "individual", @@ -25798,6 +25831,15 @@ "pretty-format": "^26.0.0" } }, + "@types/jquery": { + "version": "3.5.8", + "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.8.tgz", + "integrity": "sha512-cXk6NwqjDYg+UI9p2l3x0YmPa4m7RrXqmbK4IpVVpRJiYXU/QTo+UZrn54qfE1+9Gao4qpYqUnxm5ZCy2FTXAw==", + "dev": true, + "requires": { + "@types/sizzle": "*" + } + }, "@types/json-schema": { "version": "7.0.7", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz", @@ -25900,6 +25942,12 @@ "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz", "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==" }, + "@types/sizzle": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz", + "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==", + "dev": true + }, "@types/source-list-map": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", @@ -25923,6 +25971,15 @@ "@types/jest": "*" } }, + "@types/toastr": { + "version": "2.1.39", + "resolved": "https://registry.npmjs.org/@types/toastr/-/toastr-2.1.39.tgz", + "integrity": "sha512-jgbMLTjj7dsSY/EYYOoZXhK6OY/bR909Bn6YNnwL3Oq+f0AeFKbYa198XU/6bsmUqqCCWw5VvCi11FDN1/fetw==", + "dev": true, + "requires": { + "@types/jquery": "*" + } + }, "@types/uglify-js": { "version": "3.13.1", "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.1.tgz", @@ -26656,6 +26713,14 @@ "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.2.3.tgz", "integrity": "sha512-pXnVMfJKSIWU2Ml4JHP7pZEPIrgBO1Fd3WGx+fPBsS+KRGhE4vxooD8XBGWbQOIVSZsVK7pUDBBkCicNu80yzQ==" }, + "axios": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.23.0.tgz", + "integrity": "sha512-NmvAE4i0YAv5cKq8zlDoPd1VLKAqX5oLuZKs8xkJa4qi6RGn0uhCYFjWtHHC9EM/MwOwYWOs53W+V0aqEXq1sg==", + "requires": { + "follow-redirects": "^1.14.4" + } + }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -30298,9 +30363,9 @@ } }, "follow-redirects": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz", - "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==" + "version": "1.14.4", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.4.tgz", + "integrity": "sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g==" }, "for-in": { "version": "1.0.2", diff --git a/package.json b/package.json index 95dfe71..4db4b86 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@types/node": "^12.20.15", "@types/react": "^17.0.13", "@types/react-dom": "^17.0.8", + "axios": "^0.23.0", "moment": "^2.29.1", "node-sass": "^6.0.1", "query-string": "^7.0.1", diff --git a/src/App.tsx b/src/App.tsx index 7065055..1bad0fb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -19,6 +19,9 @@ import { ALL_WORDS } from "./data/all-words"; import { WordDetails } from "./components/word-details/WordDetails"; import { Calendar } from "./components/calendar/Calendar"; import { Login } from "./components/auth/Login"; +import { Signup } from "./components/auth/Signup"; + +export const SERVER_URL = 'http://localhost:8001'; export var userProfileData: IProfile = { @@ -86,6 +89,7 @@ function App() { : + diff --git a/src/components/auth/Login.tsx b/src/components/auth/Login.tsx index c0e9df3..1abdea6 100644 --- a/src/components/auth/Login.tsx +++ b/src/components/auth/Login.tsx @@ -4,12 +4,30 @@ import { ReactComponent as LogoIcon } from '../../assets/icons/anamnesis.svg'; import { ReactComponent as EyeOffIcon } from '../../assets/icons/eye-off-outline.svg'; import { ReactComponent as EyeIcon } from '../../assets/icons/eye-outline.svg'; import { NavLink } from "react-router-dom"; +import axios from 'axios'; +import { SERVER_URL } from "../../App"; + +const authenticateCredentials = async (username: string, password: string) => { + return await axios.post(SERVER_URL + '/auth/api-auth/', { + email: username, + password: password + }); +} export const Login: React.FC = () => { const [showPassowrd, setShowPassword] = useState(true); const [userName, setUsername] = useState(''); const [password, setPassword] = useState(''); + function auth() { + authenticateCredentials(userName, password).then((response: any) => { + localStorage.anamnesisToken = response.data.token; + window.location.assign('/home'); + }, () => { + window.alert("Please check your credentials"); + }); + } + return
@@ -30,11 +48,11 @@ export const Login: React.FC = () => { - - Signup? + Signup?
diff --git a/src/components/auth/Signup.tsx b/src/components/auth/Signup.tsx new file mode 100644 index 0000000..755badc --- /dev/null +++ b/src/components/auth/Signup.tsx @@ -0,0 +1,111 @@ +import React, { useState } from "react"; +import styles from './Auth.module.scss'; +import { ReactComponent as LogoIcon } from '../../assets/icons/anamnesis.svg'; +import { ReactComponent as EyeOffIcon } from '../../assets/icons/eye-off-outline.svg'; +import { ReactComponent as EyeIcon } from '../../assets/icons/eye-outline.svg'; +import { NavLink } from "react-router-dom"; +import axios from 'axios'; +import { SERVER_URL } from "../../App"; + + +const registerUser = async (name: string, username: string, password: string) => { + return await axios.post(SERVER_URL + '/auth/register/', { + name: name, + email: username, + password: password + }); +} + +const requestVerification = async (email: string) => { + return await axios.post(SERVER_URL + '/auth/request-verification/', { + email: email, + }); +} + +const verifyUser = async (email: string, otp: string) => { + return await axios.post(SERVER_URL + '/auth/verify-user/', { + email: email, + otp: otp + }); +} + + +export const Signup: React.FC = () => { + const [showPassowrd, setShowPassword] = useState(true); + const [fullName, setFullName] = useState(''); + const [userName, setUsername] = useState(''); + const [password, setPassword] = useState(''); + const [otp, setOtp] = useState(''); + const [viewState, setViewState] = useState<'REGISTER' | 'VERIFY'>('REGISTER'); + + function register() { + registerUser(fullName, userName, password).then(() => { + + setTimeout(() => { + requestVerification(userName).then(() => { + setViewState('VERIFY'); + }, () => { + window.alert("Couldn't send Verfication request"); + }); + }, 1000); + + }, (e) => { + window.alert(e.toString()); + }); + } + + function verify() { + verifyUser(userName, otp).then(() => { + window.alert("Verified user!"); + window.location.assign("/login"); + }, () => window.alert("Failed Verification, please try again")) + } + + return
+
+ +
+ + { viewState === 'REGISTER' &&
+ +
+ setFullName(e.currentTarget.value)} + type="text" placeholder="Full Name" /> +
+ +
+ setUsername(e.currentTarget.value)} + type="email" placeholder="Email ID" /> +
+ +
+ setPassword(e.currentTarget.value)} + type={ showPassowrd ? "text" : "password" } placeholder="Password" /> + +
+ + + + Login? + +
} + + { viewState === 'VERIFY' &&
+ +
+ setOtp(e.currentTarget.value)} + type="tel" placeholder="Enter OTP sent to your Mail ID" /> +
+ + + +
} + +
+}; \ No newline at end of file