login

src/components/header.jsx

@@ -54,7 +54,7 @@ const links = [
 
 const HeaderSearch = () => {
     const { classes } = useStyles();
-    const { role } = useAuth();
+    const { user } = useAuth();
     const navigate = useNavigate();
 
     const items = links.map((link) => (
@@ -78,9 +78,13 @@ const HeaderSearch = () => {
                         {items}
                     </Group>
                     <SwitchToggle />
-                    <Tooltip label={'Connect'} withArrow>
+                    <Tooltip label={user ? 'Logout' : 'Connect'} withArrow>
                         <ActionIcon variant="light" size="lg" onClick={logout}>
-                            <IconUserOff size="1.2rem" stroke={1.5} />
+                            {user ? (
+                                <IconUserCheck size="1.2rem" stroke={1.5} />
+                            ) : (
+                                <IconUserOff size="1.2rem" stroke={1.5} />
+                            )}
                         </ActionIcon>
                     </Tooltip>
                 </Group>

src/pages/auth.jsx

@@ -2,32 +2,50 @@ import { TextInput, PasswordInput, Checkbox, Anchor, Paper, Title, Container, Gr
 import { isNotEmpty, useForm } from '@mantine/form';
 import { useAuth } from '../tools/auth-provider';
 import { useNavigate } from 'react-router-dom';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import setNotification from './errors/error-notification';
+import API from '../services/api';
 
 const Authentication = () => {
-    const { setRole } = useAuth();
+    const { user, setUser } = useAuth();
     const navigate = useNavigate();
+    const [isLoading, setIsLoading] = useState(false);
+
+    useEffect(() => {
+        if (user) navigate('/');
+    }, [user]);
+
     const form = useForm({
         initialValues: {
-            name: '',
+            login: '',
             password: '',
             remember: false,
         },
         validate: {
-            name: isNotEmpty('Name is required'),
+            login: isNotEmpty('Login is required'),
             password: isNotEmpty('Password is required'),
         },
     });
 
-    useEffect(() => {
-        localStorage.setItem('role', form.values.name);
-    }, [form.values.name]);
-
     const handleLogin = (e) => {
         e.preventDefault();
         if (form.validate().hasErrors) return;
-        setRole(form.values.name);
-        navigate('/');
+        setIsLoading(true);
+        API.login(form.values)
+            .then((res) => {
+                if (res.status === 200) {
+                    setUser(res.data);
+                    localStorage.setItem('user', res.data);
+                    navigate('/');
+                } else {
+                    setNotification(true, res.message);
+                    setIsLoading(false);
+                }
+            })
+            .catch((err) => {
+                setNotification(true, err.message);
+                setIsLoading(false);
+            });
     };
 
     return (
@@ -41,7 +59,7 @@ const Authentication = () => {
 
             <Paper withBorder shadow="md" p={30} mt={30} radius="md">
                 <form onSubmit={handleLogin}>
-                    <TextInput label="Name" placeholder="Your name" {...form.getInputProps('name')} withAsterisk />
+                    <TextInput label="Login" placeholder="Your login" {...form.getInputProps('login')} withAsterisk />
                     <PasswordInput
                         label="Password"
                         placeholder="Your password"
@@ -51,11 +69,11 @@ const Authentication = () => {
                     />
                     <Group position="apart" mt="lg">
                         <Checkbox label="Remember me" />
-                        <Anchor size="sm" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&pp=ygUJcmljayByb2xs">
+                        <Anchor size="sm" href="">
                             Forgot password(s)?
                         </Anchor>
                     </Group>
-                    <Button fullWidth mt="xl" type="submit">
+                    <Button fullWidth mt="xl" type="submit" loading={isLoading}>
                         Sign in
                     </Button>
                 </form>

src/pages/playlists/playlist-view-editor.jsx

@@ -5,7 +5,6 @@ import { useState } from 'react';
 const PlaylistViewEditor = ({ item, handler, buttonText, APICall }) => {
     const handleClose = (playlist) => {
         form.reset();
-        console.log('call jiezf');
         handler(playlist);
     };
 

src/services/api.js

@@ -7,11 +7,14 @@ const caller = (url = '/api') => {
 };
 
 const API = {
+    login(data) {
+        return caller().post('/auth/login', data);
+    },
     listPlaylists(data) {
         return caller().get('/playlist', data);
     },
     createPlaylist(data) {
-        return caller().put('/playlist', data);
+        return caller().post('/playlist', data);
     },
     updatePlaylist(playlistId, data) {
         return caller().post(`/playlist/${playlistId}/update`, data);

src/tools/auth-provider.js

@@ -3,13 +3,13 @@ import { createContext, useState, useContext } from 'react';
 const AuthContext = createContext();
 
 const AuthProvider = ({ children }) => {
-    const [role, setRole] = useState(localStorage.getItem('role') ?? 'user');
+    const [user, setUser] = useState(localStorage.getItem('user'));
 
-    return <AuthContext.Provider value={{ role, setRole }}>{children}</AuthContext.Provider>;
+    return <AuthContext.Provider value={{ user, setUser }}>{children}</AuthContext.Provider>;
 };
 
 const logout = () => {
-    localStorage.removeItem('role');
+    localStorage.removeItem('user');
     window.location.href = '/auth';
 };
 

src/tools/grant-access.jsx

@@ -1,8 +1,8 @@
 import { useAuth } from './auth-provider';
 
 const GrantAccess = ({ roles, children }) => {
-    const { role } = useAuth();
-    return roles.includes(role) ? children : null;
+    const { user } = useAuth();
+    return roles.includes(user) ? children : null;
 };
 
 export default GrantAccess;