Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Week 3 React - Todo #19

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion .eslintrc
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
{
"extends": ["next/babel", "next/core-web-vitals"]
"extends": ["next", "next/core-web-vitals"],
"rules": {
// Other rules
"@next/next/no-img-element": "off"
}
}
35 changes: 33 additions & 2 deletions components/AddTask.js
Original file line number Diff line number Diff line change
@@ -1,25 +1,56 @@
import axios from "../utils/axios"
import { useState } from "react"
import { useAuth } from "../context/auth"
import toast, { Toaster } from 'react-hot-toast';

export default function AddTask() {
const [taskData,settaskData] = useState('')
const { token, check, setCheck } = useAuth()

const addTask = () => {
/**
* @todo Complete this function.
* @todo 1. Send the request to add the task to the backend server.
* @todo 2. Add the task in the dom.
*/
if (token){
if (taskData == ''){
toast.error('Enter some data')
return
}
const dataForApiPost = {
title : taskData,
}
axios.post('todo/create/',dataForApiPost,{
headers:{
Authorization: 'Token '+ token
}
}).then((res)=>{
settaskData('')
setCheck(!check)
toast.success('Task added successfully!')
}).catch((err)=>{
toast.error('Failed to add task')
})
}
}

return (
<div className='flex items-center max-w-sm mt-24'>
<input
type='text'
className='todo-add-task-input px-4 py-2 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:ring w-full'
className='font-body todo-add-task-input px-4 py-2 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:ring w-full'
placeholder='Enter Task'
onChange={(e)=> settaskData(e.target.value)}
/>
<button
type='button'
className='todo-add-task bg-transparent hover:bg-green-500 text-green-700 text-sm hover:text-white px-3 py-2 border border-green-500 hover:border-transparent rounded'
className='todo-add-task bg-transparent hover:bg-yellow-500 text-yellow-700 text-sm hover:text-white px-3 py-2 border border-yellow-500 hover:border-transparent rounded'
onClick={addTask}
>
Add Task
</button>
<Toaster/>
</div>
)
}
67 changes: 60 additions & 7 deletions components/LoginForm.js
Original file line number Diff line number Diff line change
@@ -1,41 +1,94 @@
export default function RegisterForm() {
const login = () => {
import React, { useState } from 'react'
import axios from '../utils/axios'
import { useAuth } from '../context/auth'
import { useRouter } from 'next/router'
import noAuthRequired from '../middlewares/no_auth_required'
import toast, { Toaster } from 'react-hot-toast';

export default function LoginForm() {

const { setToken } = useAuth()
const router = useRouter()

noAuthRequired()

const [username, setUsername] = useState('')
const [password, setPassword] = useState('')

const loginFieldsAreValid = (username, password) => {
if( username == '' || password == ''){
toast.error("Please fill all the fields correctly")
return false
}
return true
}

const login = (e) => {

/***
* @todo Complete this function.
* @todo 1. Write code for form validation.
* @todo 2. Fetch the auth token from backend and login the user.
* @todo 3. Set the token in the context (See context/auth.js)
*/
e.preventDefault()

if (loginFieldsAreValid(username,password)) {

toast('Please wait...')

const dataForApiRequest = {
username: username,
password: password
}

axios.post('auth/login/',dataForApiRequest)
.then(
({ data, status }) => {
setToken(data.token)
window.location.reload()
toast.success('Logged in!')
}
)
.catch(
(err) => {
toast.error("Invalid Credentials")
}
)
}
}

return (
<div className='bg-grey-lighter min-h-screen flex flex-col'>
<div className='container max-w-sm mx-auto flex-1 flex flex-col items-center justify-center px-2'>
<div className='bg-white px-6 py-8 rounded shadow-md text-black w-full'>
<h1 className='mb-8 text-3xl text-center'>Login</h1>
<h1 className='font-body font-bold mb-8 text-3xl text-center'>Login</h1>
<input
type='text'
className='block border border-grey-light w-full p-3 rounded mb-4'
className='font-body block border border-grey-light w-full p-3 rounded mb-4'
name='inputUsername'
id='inputUsername'
placeholder='Username'
onChange={(e) => setUsername(e.target.value)}
/>

<input
type='password'
className='block border border-grey-light w-full p-3 rounded mb-4'
className='font-body block border border-grey-light w-full p-3 rounded mb-4'
name='inputPassword'
id='inputPassword'
placeholder='Password'
onChange={(e) => setPassword(e.target.value)}
/>

<button
type='submit'
className='w-full text-center py-3 rounded bg-transparent text-green-500 hover:text-white hover:bg-green-500 border border-green-500 hover:border-transparent focus:outline-none my-1'
onClick={login}
className='font-body w-full text-center py-3 rounded bg-transparent text-yellow-500 hover:text-white hover:bg-yellow-500 border border-yellow-500 hover:border-transparent focus:outline-none my-1'
onClick={(e)=>{login(e)}}
>
Login
</button>
<Toaster/>
</div>
</div>
</div>
Expand Down
28 changes: 14 additions & 14 deletions components/Nav.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,33 +8,33 @@ import { useAuth } from '../context/auth'
*/

export default function Nav() {
const { logout, profileName, avatarImage } = useAuth()
const { logout, profileName, avatarImage, token } = useAuth()

return (
<nav className='bg-blue-600'>
<nav className='bg-yellow-600'>
<ul className='flex items-center justify-between p-5'>
<ul className='flex items-center justify-between space-x-4'>
<li>
<Link href="/" passHref={true}>
<a>
<h1 className='text-white font-bold text-xl'>Todo</h1>
<h1 className='text-white font-bold text-4xl font-body'>Todo</h1>
</a>
</Link>
</li>
</ul>
<ul className='flex'>
<li className='text-white mr-2'>
{(!token) && <ul className='flex'>
<li className='text-white mr-2 font-body text-xl bg-yellow-500 p-2'>
<Link href='/login'>Login</Link>
</li>
<li className='text-white'>
<li className='text-white font-body text-xl bg-yellow-500 p-2'>
<Link href='/register'>Register</Link>
</li>
</ul>
<div className='inline-block relative w-28'>
</ul>}
{(token) && <div className='inline-block relative w-40'>
<div className='group inline-block relative'>
<button className='bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded inline-flex items-center'>
<button className='bg-yellow-500 text-white font-semibold py-2 px-4 rounded inline-flex items-center'>
<img src={avatarImage} />
<span className='mr-1'>{profileName}</span>
<span className='mr-1 ml-1 font-body'>{profileName}</span>
<svg
className='fill-current h-4 w-4'
xmlns='http://www.w3.org/2000/svg'
Expand All @@ -43,19 +43,19 @@ export default function Nav() {
<path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
</svg>
</button>
<ul className='absolute hidden text-gray-700 pt-1 group-hover:block'>
<ul className='absolute hidden text-black hover:text-white pt-1 group-hover:block'>
<li className=''>
<a
className='rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap'
className='rounded-b bg-yellow-200 hover:bg-yellow-500 py-2 px-4 block whitespace-no-wrap'
href='#'
onClick={logout}
onClick={()=>{logout()}}
>
Logout
</a>
</li>
</ul>
</div>
</div>
</div>}
</ul>
</nav>
)
Expand Down
27 changes: 17 additions & 10 deletions components/RegisterForm.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,16 @@ import React, { useState } from 'react'
import axios from '../utils/axios'
import { useAuth } from '../context/auth'
import { useRouter } from 'next/router'
import noAuthRequired from '../middlewares/no_auth_required'
import toast, { Toaster } from 'react-hot-toast';

export default function Register() {

export default function RegisterForm() {
const { setToken } = useAuth()
const router = useRouter()

noAuthRequired()

const [firstName, setFirstName] = useState('')
const [lastName, setLastName] = useState('')
const [email, setEmail] = useState('')
Expand All @@ -27,11 +32,11 @@ export default function Register() {
username === '' ||
password === ''
) {
console.log('Please fill all the fields correctly.')
toast.error('Please fill all the fields correctly.')
return false
}
if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
console.log('Please enter a valid email address.')
toast.error('Please enter a valid email address.')
return false
}
return true
Expand All @@ -43,7 +48,7 @@ export default function Register() {
if (
registerFieldsAreValid(firstName, lastName, email, username, password)
) {
console.log('Please wait...')
toast('Please wait...')

const dataForApiRequest = {
name: firstName + ' ' + lastName,
Expand All @@ -58,21 +63,22 @@ export default function Register() {
)
.then(function ({ data, status }) {
setToken(data.token)
router.push('/')
window.location.reload()
toast.success('Successfully registered!')
})
.catch(function (err) {
console.log(
toast.error(
'An account using same email or username is already created'
)
})
}
}

return (
<div className='bg-grey-lighter min-h-screen flex flex-col'>
<div className='font-body bg-grey-lighter min-h-screen flex flex-col'>
<div className='container max-w-sm mx-auto flex-1 flex flex-col items-center justify-center px-2'>
<div className='bg-white px-6 py-8 rounded shadow-md text-black w-full'>
<h1 className='mb-8 text-3xl text-center'>Register</h1>
<h1 className='mb-8 text-3xl text-center font-bold'>Register</h1>
<input
type='text'
className='block border border-grey-light w-full p-3 rounded mb-4'
Expand Down Expand Up @@ -124,11 +130,12 @@ export default function Register() {

<button
type='submit'
className='w-full text-center py-3 rounded bg-transparent text-green-500 hover:text-white hover:bg-green-500 border border-green-500 hover:border-transparent focus:outline-none my-1'
onClick={register}
className='w-full text-center py-3 rounded bg-transparent text-yellow-500 hover:text-white hover:bg-yellow-500 border border-yellow-500 hover:border-transparent focus:outline-none my-1'
onClick={(e)=>{register(e)}}
>
Register
</button>
<Toaster/>
</div>
</div>
</div>
Expand Down
Loading