Register component

06-React/14-practice/class-task/nave/my-app/package.json → 06-React/14-practice/class-task/music-player/client/package.json

@@ -14,10 +14,17 @@
     "type-check": "tsc"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.15.3",
     "@reduxjs/toolkit": "^1.8.1",
+    "axios": "^1.6.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.0.1"
+    "react-redux": "^8.0.1",
+    "react-router-dom": "^6.21.1",
+    "sass": "^1.69.7",
+    "ts-audio": "^0.7.4"
   },
   "devDependencies": {
     "@testing-library/dom": "^9.2.0",

06-React/14-practice/class-task/music-player/client/src/API/registerApi/registerApi.ts

@@ -0,0 +1,19 @@
+import axios from "axios";
+
+export const BASE_URL = "/API/users";
+
+interface RegistrationData {
+  user_name: string;
+  password: string;
+}
+
+export const registerUser = async (registrationData: RegistrationData): Promise<boolean> => {
+  try {
+    const response = await axios.post(`${BASE_URL}/register-user`, registrationData);
+    console.log("Registration response:", response.data);
+    return true;
+  } catch (error) {
+    console.error("Error during user registration:", error);
+    return false;
+  }
+};

06-React/14-practice/class-task/music-player/client/src/App.scss

@@ -0,0 +1 @@
+@import url(../src/components/scss/register.scss);

06-React/14-practice/class-task/music-player/client/src/App.tsx

@@ -0,0 +1,15 @@
+
+import "./App.scss"
+import RegisterPage from "./pages/RegisterPage"
+import Buttons from "./components/Buttons"
+
+function App() {
+  return (
+    <div >
+          <RegisterPage/>
+      <Buttons />
+    </div>
+  )
+}
+
+export default App

06-React/14-practice/class-task/music-player/client/src/app/store.ts

@@ -0,0 +1,17 @@
+import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit"
+import userReducer from "../features/user/userSlice"
+import songReducer from "../features/song/songSlice"
+import setPassword from "../components/Password"
+
+export const store = configureStore({
+  reducer: {
+    user: userReducer,
+    song: songReducer,
+  },
+})
+
+export type AppDispatch = typeof store.dispatch;
+export type RootState = ReturnType<typeof store.getState>;
+export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, RootState, unknown, Action<string>>;
+export { setPassword }
+

06-React/14-practice/class-task/music-player/client/src/components/Buttons.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Audio } from 'ts-audio';
+import Sia from "../music/Sia - Bird Set Free.mp3"
+
+const audio = Audio({
+    file: Sia,
+    loop: true,
+    volume: 0.2,
+})
+
+const play = () => {
+    audio.play()
+}
+
+const pause = () => {
+    audio.pause()
+}
+
+const stop = () => {
+    audio.stop()
+}
+
+
+const Buttons = () => {
+    // const play = () => { };
+    // const pause = () => { };
+    return (
+        <div className='audio-buttons'>
+            <button onClick={play}>Play</button>
+            <button onClick={pause}>Pause</button>
+            <button onClick={stop}>Stop</button>
+            <p>{Sia}</p>
+        </div>
+    )
+}
+
+export default Buttons
+
+

06-React/14-practice/class-task/music-player/client/src/components/Password.tsx

@@ -0,0 +1,62 @@
+// Password.tsx
+import React, { useState, useEffect, Dispatch, SetStateAction } from "react";
+import { useDispatch } from "react-redux";
+import { setPassword } from "../app/store"
+
+interface Props {
+  password: string,
+  setPassword: Dispatch<SetStateAction<string>>,
+  match: boolean,
+  setMatch: Dispatch<SetStateAction<boolean>>
+}
+const Password = ({password, setPassword, match, setMatch}:Props) => {
+    const dispatch = useDispatch();
+    // const [password, setPasswordValue] = useState<string>("");
+    const [confirmPassword, setConfirmPassword] = useState<string>("");
+    const [visible, setVisbile] = useState(false);
+    // const [match, setMatch] = useState(false);
+
+    const validate = () => {
+      if (password === confirmPassword) {
+        setMatch(true);
+      } else {
+        setMatch(false);
+      }
+    };
+
+    useEffect(() => {
+      validate();
+    }, [confirmPassword, password]);
+
+    const handlePasswordInput = (value: string) => {
+      setPassword(value);
+      // dispatch(setPassword(value));
+    };
+
+    const handleVisibilityToggle = () => {
+      setVisbile(!visible);
+    };
+
+    return (
+      <div>
+        <input
+          type={visible ? "text" : "password"} className="inputPassword"
+          placeholder="password"
+          value={password}
+          onChange={(e) => handlePasswordInput(e.target.value)}
+        />
+        <button type="button" className="showBtn" onClick={handleVisibilityToggle}>
+          {visible ? "Hide" : "Show"} Password
+        </button>
+        <input
+          type="password" className="inputPassword"
+          placeholder="confirm password"
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+        />
+        <p className="match">{match ? "Passwords match!" : "Passwords do not match!"}</p>
+      </div>
+    );
+  };
+
+  export default Password;

06-React/14-practice/class-task/music-player/client/src/components/Register.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import { useDispatch } from "react-redux";
+import { useAppSelector } from "../app/hooks";
+import { userSelector } from "../features/user/userSlice";
+import Password from "./Password";
+import { registerUser } from "../API/registerApi/registerApi";
+import myImg from "../images/Happy girl wearing headphones.jpg"
+
+const RegisterForm: React.FC = () => {
+  const dispatch = useDispatch();
+  const user = useAppSelector(userSelector)
+  const [user_name, setUsername] = useState("")
+  const [password, setPassword] = useState("")
+  const [match, setMatch] = useState(false);
+
+  const handleSubmit = async () => {
+    console.log(user_name)
+    console.log(password)
+    console.log(match)
+      if (match) {
+const success = await registerUser({user_name, password});
+
+    if (success) {
+      console.log("Registration successful!");
+    } else {
+      console.error("Registration failed.");
+    }
+  }}
+
+
+
+  return (
+
+
+
+<div className="registerDiv">
+      <div className="formContainer">
+        <p className="appName">Multi Musix</p>
+        <h2 className="loginHeader">Login</h2>
+        <form
+          className="registerForm"
+          action=""
+          onSubmit={(event) => {
+            event.preventDefault();
+            handleSubmit();
+          }}
+        >
+          <input
+            type="text"
+            className="inputUserName"
+            placeholder="username"
+            value={user_name}
+            onInput={(ev) => setUsername((ev.target as HTMLInputElement).value)}
+          />
+          <Password password={password} setPassword={setPassword} setMatch={setMatch} match={match} />
+          <button className="registerBtn" type="submit">
+            Register
+          </button>
+        </form>
+        <p className="decoration">-------------------- o ---------------------</p>
+        <button className="signupBtn">Signup</button>
+      </div>
+      <div className="imageContainer">
+        <img src={myImg} className="imgRegister" alt="My Image" />
+      </div>
+    </div>
+  );
+};
+
+export default RegisterForm;

06-React/14-practice/class-task/music-player/client/src/components/scss/register.scss

@@ -0,0 +1,103 @@
+.registerDiv {
+    display: flex;
+    flex-wrap: wrap;
+
+    .formContainer {
+      flex: 1;
+      text-align: center;
+      align-content: center;
+      margin: 70px 120px 0px 120px ;
+
+      .appName,
+      .loginHeader {
+        padding: 0px 0px 5px 0px;
+        margin: 0px;
+        font-size: 1.2em;
+        color: #6467d4;
+      }
+
+      .loginHeader {
+        color: #000000;
+      }
+
+      .inputPassword,
+      .inputUserName {
+        padding: 0px 10px;
+        display: block;
+        height: 40px;
+        margin: 10px 0px;
+        width: 97%; // נעשה שינוי כדי שהתיבות יתמלאו את רוחב הקונטיינר
+        border: 1px solid #c3c3c3;
+        border-radius: 2px;
+        color: gray;
+      }
+
+      .inputPassword {
+        margin: 0px 0px;
+      }
+
+      .password-input-wrapper {
+        height: 40px;
+        width: 98%;
+      }
+
+      .inputPassword:focus,
+      .inputEmail:focus {
+        border: none;
+        border-color: none;
+      }
+
+      .inputPassword::placeholder,
+      .inputEmail::placeholder {
+        color: #aeacac;
+      }
+
+      .registerBtn, .signupBtn {
+        width: 100%;
+        background-color: #6467d4;
+        border-radius: 2px;
+        color: white;
+        padding: 15px;
+        border: none;
+      }
+
+      .signupBtn{
+        background-color: white;
+        color: #6467d4;
+        border: solid 1px #6467d4;
+
+
+      }
+    }
+
+    .showBtn{
+        width: 40%;
+        background-color: #6467d4;
+        color: white;
+        margin: 5px 0px;
+        border: none;
+        padding: 5px;
+    }
+    .imageContainer {
+      flex: 2;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+    }
+
+    .imgRegister {
+      max-width: 100%; // נעשה שינוי כדי שהתמונה תמלא את רוחב הקונטיינר
+      max-height: 80%; // נעשה שינוי כדי שהתמונה תמלא את גובה הקונטיינר
+    }
+  }
+  @media (max-width: 768px) {
+    .registerDiv {
+        flex-direction: column;
+
+
+  .formContainer {
+    margin: 20px 30px 20px 20px;
+
+
+}}}

06-React/14-practice/class-task/music-player/client/src/features/song/songSlice.ts

@@ -0,0 +1,30 @@
+import { createSlice } from "@reduxjs/toolkit"
+
+const initialState = {
+  song: null,
+  isLoading: false,
+  error: null,
+}
+
+const userSlice = createSlice({
+  name: "song",
+  initialState,
+  reducers: {
+    setSong(state, action) {
+      state.song = action.payload
+    },
+    setLoading(state, action) {
+      state.isLoading = action.payload
+    },
+    setError(state, action) {
+      state.error = action.payload
+    },
+    clearSong(state) {
+      state.song = null
+    },
+  },
+})
+
+export const { setSong, setLoading, setError, clearSong } = userSlice.actions
+
+export default userSlice.reducer