login page

src/components/EditPlaylistModal.js

@@ -25,7 +25,7 @@ export function EditPlaylistModal  (props)  {
 
         sendForm('playlists/' + props.playlist?.id + '/edit', data);  
         setTimeout(() => store.dispatch(actionPlaylistById(props.playlist?.id)), 100) ;
-        RunToast('bg-success','Success', 'Playlist updated')
+        RunToast('bg-success','Success', 'Playlist updated');
     } 
     const PreViewImage = (image) => {
         if (image && typeof (image) !== "string") {

src/components/Routs.js

@@ -1,6 +1,6 @@
 import {Router, Route, Redirect, Switch} from 'react-router-dom';
 import { history } from '../App';
-import {LoginForm} from './authorization';
+import {LoginForm} from '../pages/authorization';
 import {CRegisterForm} from './authRegistration';
 import { store } from '../store/store';
 import { ToastNotify } from './Toast';
@@ -26,10 +26,10 @@ export const Main = ({auth}) =>
           {!auth && <Redirect from='/user' to={'/login'} exact />} 
           {!auth && <Redirect from='/editprofile' to={'/login'} exact />}
           {!auth && <Redirect from='/allplaylists' to={'/login'} exact />}
-          {!auth && <Redirect from='/playlist' to={'/login'} exact />}
-          {!auth && <Redirect from='/artists' to={'/login'} exact />}
-          {!auth && <Redirect from='/albums' to={'/login'} exact />}
-          {!auth && <Redirect from='/search' to={'/login'} exact />}
+          {!auth && <Redirect from='/playlist' to={'/login'} />}
+          {!auth && <Redirect from='/artists' to={'/login'} />}
+          {!auth && <Redirect from='/albums' to={'/login'}/>}
+          {!auth && <Redirect from='/search' to={'/login'} />}
           <Route path={'/login'} component={LoginForm} />
           <Route path={'/register'} component={CRegisterForm}/>
           <Route path={'/editprofile'} component={CEditProfile}/>

src/components/Tracks.js

@@ -7,9 +7,10 @@ import Modal from 'react-bootstrap/Modal';
 import { sendForm } from './SendForm';
 import React, {useState} from 'react';
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faCheck, faPlay} from "@fortawesome/free-solid-svg-icons";
+import {faCheck, faPause, faPlay} from "@fortawesome/free-solid-svg-icons";
 import { Link } from 'react-router-dom';
 import { Dropdown , Form} from 'react-bootstrap';
+import { RunToast } from './Toast';
 
 
 export let audio = new Audio();
@@ -56,26 +57,26 @@ const ButtonDeleteTrack = (track) => {
 }
 
 
-const Track = ({track,  playlist}) => {
+const Track = ({track,  playlist, isPlaying}) => {
     const PostLoadTracks = async(form)  =>{
         console.log(form.target)
         const data = new FormData(form.target);
         sendForm('playlists/add-track', data);
-
+        RunToast('bg-success','Success', `Track add to playlist`)
       }
 
     
 return(
-<tr>
+<tr className={`disactive-track track-play-button-${track?.id}`}>
 <td scope="row" width={30} data-id={track.id}>
     <div className="col">
-        <Button variant="outline-light" className='rounded-5'  title='Play' onClick={async () => {
-            console.log(playlist.tracks, playlist?.tracks[playlist?.tracks.indexOf(track)]);
+        <Button variant="outline-light" className={`rounded-5`}  title='Play' onClick={async () => {
+            // console.log(playlist.tracks, playlist?.tracks[playlist?.tracks.indexOf(track)]);
             playlist.tracks && store.dispatch(actionFullSetPlaylist(playlist?.tracks));
             playlist.tracks ? store.dispatch(actionFullSetTrack(playlist?.tracks[playlist?.tracks.indexOf(track)])) : store.dispatch(actionFullSetTrack(track))
             store.dispatch(actionFullPlay());
         }}>
-            <FontAwesomeIcon className={`track-play-icon${track?.id}`} icon={faPlay}/>
+            <FontAwesomeIcon className={`track-play-icon-${track?.id}`} icon={faPlay}/>
         </Button>
     </div>
 </td>
@@ -98,6 +99,7 @@ return(
             <Form className="input-group d-flex" onSubmit={(e) => {
                 e.preventDefault();
                 PostLoadTracks(e);
+                
             }}>
                 <input type={"hidden"} name="trackId" value={track?.id}></input>
                 <select className="dropdown-item btn btn-outline-secondary w-75" name="playlistId" id="inputGroupSelect04"
@@ -118,7 +120,7 @@ return(
 }
 
 
-export const TracksAll = ({tracks, playlist, playingTrack}) => 
+export const TracksAll = ({tracks, playlist, isPlaying}) => 
 <table className="table table-dark table-hover align-middle">
     <thead>
         <tr>
@@ -130,9 +132,10 @@ export const TracksAll = ({tracks, playlist, playingTrack}) =>
         </tr>
 </thead>
     <tbody>
-        {tracks.map((tracks, i) => <Track key={i} track={tracks} playlist={playlist}/>)}
+        {tracks.map((tracks, i) => <Track key={i} track={tracks} playlist={playlist} isPlaying={isPlaying}/>)}
     </tbody>
 </table>
 
 export const СAllTracks = connect(state => ({playlist: state.promise.plstById?.payload || {},
-                                 tracks: state.promise?.plstById?.payload?.tracks || []} ), )(TracksAll);
+                                 tracks: state.promise?.plstById?.payload?.tracks || [],
+                                 isPlaying: state.player?.isPlaying || false,} ), )(TracksAll);

src/components/authorization.js

@@ -1,69 +0,0 @@
-import React, {useState} from 'react';
-import {Link} from 'react-router-dom';
-import { actionAuthLogin } from '../store/authReducer';
-import { store } from '../store/store';
-import { connect } from 'react-redux';
-import {history} from '../App';
-
-
-
-export async function SendForm (url, data) {
-
-
-  let error = await fetch(`http://player-api/api/${url}`, {
-      method: 'POST',
-      body: data
-    }).then(res => res.json())
-    .then((data) => {
-        if(data.token) {
-          history.push('/user');
-          store.dispatch(actionAuthLogin(data.token, data.user));
-
-          return data
-        } else {
-          return data.message;
-        }
-    })
-    console.log(error)
-    return error;
-}
-
-export const LoginForm = ({authState}) => {
-    const [login, setLogin] = useState('');
-    const [password, setPassword] = useState('');
-    const [textModal, setTextModal] = useState('');
-
-
-  
-    
-    const postForm = async(event)  =>{
-      event.preventDefault();
-      const data = new FormData();
-      data.append("login", login);
-      data.append("password", password);
-    
-      setTextModal(( typeof(await SendForm('login', data))==='string')? (await SendForm('login', data)) : '');
-    }
-
-    return <>
-      <form onSubmit={postForm} className="authorization container align-items-center justify-content-center vw-100 vh-100 d-flex">
-        <div className="col-4">
-              <h4 className="w-100 text-center">Login</h4>
-              
-              <hr/>
-              <label  className="form-label">*Username</label><br/>
-              <input type="text" id="username" className='input form-control mb-3' value={login} onChange={e => setLogin(e.target.value)}/>
-              <label  className="form-label">*Password</label>
-              <input type="password" id="password" className='form-control mb-3' value={password} onChange={e => setPassword(e.target.value)}/>
-              <p className='text-danger'>{textModal ? ('*' + textModal) : ''}</p>
-              <div className="d-flex justify-content-between">
-                  <Link to="/register" className="">Register</Link>
-                  <button type='submit' className="btn btn-outline-danger" disabled={ password.length < 8 || login.length < 5} onClick={() => console.log(textModal)}>Log in</button>
-              </div>
-          </div>
-      </form>
-    </>
-  }
-
-  //export const CLoginForm = connect(state => ({ authState: state.auth?.token }))(LoginForm);
-  

src/components/header.js

@@ -46,7 +46,7 @@ export const Header = ({children}) =>
                         </NavDropdown.Item>
                     </NavDropdown>
                     <Link to={"/user"}>
-                        <Image className="nav-avatar rounded-circle" src={store.getState().auth.user?.avatar}></Image>
+                        <Image className="nav-avatar rounded-circle" src={store.getState().auth.user?.avatar || image}></Image>
                     </Link>
                 </Nav>
             </Navbar.Collapse>

src/index.css

@@ -276,4 +276,15 @@ i.fa-step-backward{
   font-size: 1rem;
   max-width: 100px;
   max-height: 100px;
+}
+.active-track {
+  background-color: rgba(255, 255, 255, 0.152)!important;
+  --bs-table-accent-bg: var(--bs-table-hover-bg);
+  color: var(--bs-table-hover-color);
+}
+.disactive-track {
+  background-color: inherit!important;
+}
+.disactive-track-icon {
+  display: none;
 }

src/pages/authorization.js

@@ -0,0 +1,80 @@
+import React, {useState} from 'react';
+import {Link} from 'react-router-dom';
+import Form from 'react-bootstrap/Form';
+import { actionAuthLogin } from '../store/authReducer';
+import { store } from '../store/store';
+import {history} from '../App';
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faEyeSlash, faEye} from "@fortawesome/free-solid-svg-icons";
+import { Button, InputGroup } from 'react-bootstrap';
+
+
+
+export async function SendForm (url, data) {
+  let error = await fetch(`http://player-api/api/${url}`, {
+      method: 'POST',
+      body: data
+    }).then(res => res.json())
+    .then((data) => {
+        if(data.token) {
+          history.push('/user');
+          store.dispatch(actionAuthLogin(data.token, data.user));
+          return data
+        } else {
+          return data.message;
+        }
+    })
+    console.log(error);
+    return error;
+}
+
+export const LoginForm = () => {
+    const [login, setLogin] = useState('');
+    const [password, setPassword] = useState('');
+    const [textModal, setTextModal] = useState('');
+    const [showPass, setShowPass] = useState(false);
+
+    
+    const postForm = async(event)  =>{
+      event.preventDefault();
+      const data = new FormData();
+      data.append("login", login);
+      data.append("password", password);
+    
+      setTextModal(( typeof(await SendForm('login', data))==='string')? (await SendForm('login', data)) : '');
+    }
+
+    return <>
+    <Form onSubmit={postForm} className="authorization container align-items-center justify-content-center vw-100 vh-100 d-flex">
+      
+        <div className="col-4">
+              <h4 className="w-100 text-center">Login</h4>
+              
+              <hr/>
+              <Form.Group>
+                <Form.Label className="form-label">*Username</Form.Label>
+                <Form.Control type="text"  id="username" className='input form-control mb-3'
+                  value={login} onChange={e => setLogin(e.target.value)} />
+              </Form.Group>
+
+              <Form.Group>
+                <Form.Label className="form-label">*Password</Form.Label>
+                <InputGroup>
+                  <Form.Control type={showPass ? "text" : "password"} id="password" className='form-control mb-3'
+                    value={password} onChange={e => setPassword(e.target.value)} />
+                  <InputGroup.Text className='mb-3'>
+                    <FontAwesomeIcon icon={showPass ? faEye : faEyeSlash} onClick={() => showPass? setShowPass(false) : setShowPass(true)}/>
+                  </InputGroup.Text>
+                </InputGroup>
+              </Form.Group>
+              
+              <p className='text-danger'>{textModal ? ('*' + textModal) : ''}</p>
+              <div className="d-flex justify-content-between">
+                  <Link to="/register" className="">Register</Link>
+                  <Button type='submit' variant="outline-danger" disabled={ password.length < 8 || login.length < 5} onClick={() => console.log(textModal)}>Log in</Button>
+              </div>
+          </div>
+      </Form>
+    </>
+  }
+  

src/store/authReducer.js

@@ -1,4 +1,3 @@
-//import { store } from "./store";
 import { store } from '../store/store';
 
 export const authReducer = function(state, {type, token, user}) {

src/store/playerReducer.js

@@ -88,7 +88,14 @@ const actionSetVolume = (volume) => ({type:'SET_VOLUME', volume})
 const actionSetTrack = (track) => ({type:'SET_TRACK', track})
     export const actionFullSetTrack = (track) =>
         dispatch => {
-            console.log(track)
+            // let activeTrack = document.querySelector('.active-track')
+            // if(activeTrack) {
+            //     activeTrack.classList.add('disactive-track');
+            //     activeTrack.classList.remove('active-track');
+            // }
+            // document.querySelector(`.track-play-button-${track?.id}`).classList.remove('disactive-track')
+            // document.querySelector(`.track-play-button-${track?.id}`).classList.add('active-track')
+            // console.log(track)
             audio.src = `http://player-api/storage/tracks/${track?.file}`;
             dispatch(actionSetTrack(track));
             dispatch(actionFullPlay());