-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(login): add hook for login + interceptor
- Loading branch information
Showing
20 changed files
with
340 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1 @@ | ||
export * from './NavigationBar'; | ||
export { default as NavigationBar } from './NavigationBar'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
export const apis = { | ||
// TODO: Replace this by the BE api urls we would be using. Probably storing this in a config file | ||
url: 'https://jsonplaceholder.typicode.com', | ||
timeout: 2 * 60 * 1000, // 2 minutes timeout | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
export { apis } from './api'; | ||
export { storageNames } from './storage-names'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export const storageNames = { | ||
user: 'pl11', | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { createContext } from 'react'; | ||
|
||
interface UserContextState { | ||
isLoggedIn: boolean; | ||
login: (token: string) => void; | ||
logout: () => void; | ||
} | ||
|
||
const UserContext = createContext({} as UserContextState); | ||
|
||
export default UserContext; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default as UserContext } from './UserContext'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
$elevation-card: 0 0 1px 0 rgba(8, 11, 14, 0.6), 0 16px 16px -1px rgba(8, 11, 14, 0.1); | ||
$color-secondary: #e1e4e8; | ||
|
||
.login { | ||
&__card { | ||
max-width: 400px; | ||
margin: auto; | ||
box-shadow: $elevation-card; | ||
padding: 30px; | ||
background: white; | ||
} | ||
|
||
&__title { | ||
font-size: 22px; | ||
line-height: 32px; | ||
font-weight: 500; | ||
text-align: center; | ||
margin: 8px 0 20px; | ||
font-weight: bold; | ||
} | ||
|
||
&__input-container { | ||
position: relative; | ||
margin-top: 20px; | ||
} | ||
|
||
&__input { | ||
border-radius: 100px; | ||
border: 1px solid $color-secondary; | ||
font-size: 14px; | ||
line-height: 24px; | ||
font-weight: 500; | ||
height: 40px; | ||
width: 100%; | ||
outline: none; | ||
padding: 0 15px; | ||
} | ||
|
||
&__input-icon { | ||
position: absolute; | ||
right: 10px; | ||
top: 50%; | ||
transform: translateY(-50%); | ||
background: transparent; | ||
border: none; | ||
outline: none; | ||
display: inline-block; | ||
padding: 10px; | ||
color: $color-secondary; | ||
} | ||
|
||
&__password-icon { | ||
color: black; | ||
cursor: pointer; | ||
} | ||
|
||
&__button { | ||
border-radius: 100px; | ||
font-size: 14px; | ||
line-height: 24px; | ||
background: black; | ||
color: white; | ||
padding: 0 10px; | ||
height: 40px; | ||
width: 100%; | ||
border: none; | ||
margin-top: 40px; | ||
cursor: pointer; | ||
padding: 0 20px; | ||
outline: none; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,108 @@ | ||
import React, { useContext } from 'react'; | ||
import { FaEnvelope, FaEye, FaEyeSlash } from 'react-icons/fa'; | ||
import { Redirect, RouteComponentProps } from 'react-router-dom'; | ||
import UserContext from '../../hooks/UserContext'; | ||
import paralinkApi from '../../services/interceptor'; | ||
import './Login.scss'; | ||
|
||
interface LoginProps { | ||
from: string; | ||
} | ||
|
||
const Login = (props: RouteComponentProps<{}, {}, LoginProps>): JSX.Element => { | ||
const userContext = useContext(UserContext); | ||
|
||
const [state, setState] = React.useState({ | ||
email: '', | ||
password: '', | ||
seePassword: false, | ||
}); | ||
|
||
const { from } = props.location.state || { from: { pathname: '/' } }; | ||
|
||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => { | ||
const { id, value } = e.target; | ||
setState((prevState) => ({ | ||
...prevState, | ||
[id]: value, | ||
})); | ||
}; | ||
|
||
const togglePassword = (): void => { | ||
setState((prevState) => ({ | ||
...prevState, | ||
seePassword: !prevState.seePassword, | ||
})); | ||
}; | ||
|
||
const login = async (): Promise<any> => { | ||
// TODO: put like a loading icon on the login button | ||
|
||
// TODO: do like a safe check on the email & password here | ||
|
||
// Just to check | ||
await paralinkApi | ||
// For now this is going to be the placeholder | ||
.get('https://jsonplaceholder.typicode.com/todos') | ||
.then(() => { | ||
// We should get the login token here from the BE | ||
const token = 'faketokenhere'; | ||
userContext.login(token); | ||
}) | ||
.catch((err: any) => { | ||
// TODO: Need to display the error in the UI ( user not found, not correct password, not correct email) | ||
console.error(err); | ||
}) | ||
.finally(() => { | ||
// TODO: login loading should be set to false here | ||
}); | ||
}; | ||
|
||
if (userContext.isLoggedIn) { | ||
return <Redirect to={from} />; | ||
} | ||
|
||
// TODO: handle pressing enter to submit ( maybe having it as a form instead and using submit ) | ||
return ( | ||
<div className="login__card"> | ||
<div className="login__title">Login into your account</div> | ||
<div className="login__input-container"> | ||
<input | ||
type="email" | ||
className="login__email login__input" | ||
id="email" | ||
aria-describedby="emailHelp" | ||
placeholder="[email protected]" | ||
value={state.email} | ||
onChange={handleChange} | ||
/> | ||
<div className="login__input-icon"> | ||
<FaEnvelope className="login__email-icon" /> | ||
</div> | ||
</div> | ||
<div className="login__input-container"> | ||
<input | ||
type={state.seePassword ? 'text' : 'password'} | ||
className="login__password login__input" | ||
id="password" | ||
placeholder="Password" | ||
value={state.password} | ||
onChange={handleChange} | ||
/> | ||
|
||
<button className="login__input-icon" type="button" onClick={togglePassword}> | ||
{state.seePassword ? ( | ||
<FaEyeSlash className="login__password-icon" /> | ||
) : ( | ||
<FaEye className="login__password-icon" /> | ||
)} | ||
</button> | ||
</div> | ||
<button className="login__button" type="submit" onClick={login}> | ||
Login | ||
</button> | ||
</div> | ||
); | ||
}; | ||
|
||
export default Login; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default as Login } from './Login'; |
Oops, something went wrong.