Skip to content

W
WorkLMs
Commit c4d3bf83 authored by TokaKaram's avatar TokaKaram
Browse files
Options

registerbackend connection

parent 168b1a7d
Hide whitespace changes
Inline Side-by-side
Showing with 319 additions and 46 deletions
docker-compose.yml
View file @ c4d3bf83
version: "3"
version: '3'
services:
web:
build:
context: .
dockerfile: Dockerfile
ports:
- "8080:80"
- '8080:80'
index.html
View file @ c4d3bf83
......@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/logo192.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="manifest" href="/manifest.json" />
<link
......@@ -15,7 +15,7 @@
href="https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap"
rel="stylesheet"
/>
<title>Vite + React</title>
<title>SSL</title>
</head>
<body>
<div id="root"></div>
......
public/_redirects 0 → 100644
View file @ c4d3bf83
/* /index.html 200
src/App.css
View file @ c4d3bf83
#root {
/* max-width: 1280px;
/* #root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center; */
}
text-align: center;
} */
/* .logo {
height: 6em;
......
src/App.jsx
View file @ c4d3bf83
......@@ -6,10 +6,11 @@ import Profile from './components/Profile'
import Header from './components/Header'
import Footer from './components/Footer'
import EditProfile from './components/EditProfile'
import Subjects from './components/Subjects'
import Subjects from './components/Lessons'
import LessonDetails from './components/LessonDetails'
import Games from './components/Games'
import Labs from './components/Labs'
import YourGrade from './components/YourGrade'
function App() {
const location = useLocation()
......@@ -22,6 +23,7 @@ function App() {
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/login" element={<Auth />} />
<Route path="/grades" element={<YourGrade />} />
<Route path="/profile" element={<Profile />} />
<Route path="/editprofile" element={<EditProfile />} />
<Route path="/subjects/:subjectId" element={<Subjects />} />
......
src/components/Auth.css
View file @ c4d3bf83
......@@ -143,7 +143,7 @@ form .password div {
align-items: baseline;
flex-direction: row-reverse;
background-color: white;
padding: 20px 12px;
padding: 0 12px;
border-radius: 12px;
width: 80%;
margin-left: 10%;
......@@ -162,7 +162,7 @@ form .input::placeholder {
text-decoration: underline;
}
form .password div {
align-items: start;
align-items: center;
}
form > div a {
color: var(--text-color);
......@@ -181,6 +181,7 @@ form div input {
border: none;
text-align: end;
margin-right: 5px;
padding: 20px 0px;
}
form div input i {
width: 20px;
......@@ -253,6 +254,7 @@ form .log_button button:hover {
align-items: center;
font-family: var(--main-font);
margin-left: 20px;
cursor: pointer;
}
.diff_login i {
margin-left: 10px;
......
src/components/Grades.css 0 → 100644
View file @ c4d3bf83
.grades
{
position: relative;
}
.grades_frame
{
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
}
.grades_frame img
{
filter: invert(1);
width: 550px;
}
.grades h1 {
font-size: 33px;
font-weight: 700;
font-family: var(--main-font);
text-align: center;
color: var(--text-color);
}
.system_buttons {
display: flex;
align-items: center;
justify-content: center;
margin-top: 70px;
width: 60%;
margin-left: 20%;
background-color: var(--neutral-grey);
padding: 12px;
border-radius: 24px;
}
.system_buttons button {
cursor: pointer;
outline: none;
width: 30%;
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-left: 20px;
border-radius: 12px;
border: 1px solid rgb(51, 51, 51, 0.2);
color: var(--text-color);
background-color: #f9f9f9;
box-shadow: 1px 1px 2px 1px rgba(75, 75, 75, 0.08);
}
.grades > p {
font-size: 20px;
font-family: var(--main-font);
font-weight: 700;
color: var(--text-color);
margin: 40px 100px 0 0;
}
.grades .grades_devs {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
margin-top: 40px;
z-index: 4;
}
.grades .grades_devs > div {
width: 15%;
border-radius: 12px;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
height: 300px;
cursor: pointer;
}
.grades .grades_devs > div .img_parent {
width: 130px;
height: 130px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--text-color);
}
.grades .grades_devs > div img {
width: 60px;
height: 50px;
object-fit: contain;
}
.grades .grades_devs > div p {
color: var(--text-color);
margin-top: 40px;
font-size: 20px;
font-weight: 700;
font-family: var(--main-font);
}
.active_system {
background-color: var(--text-color) !important;
color: white !important;
}
.active_grade {
background-color: #f9f9f9;
}
.grades .images
{
display: flex;
justify-content: space-between;
align-items: center;
width: 95%;
margin: 70px 0% 0 3%;
}
.grades .images .dots_todo
{
display: flex;
justify-content: space-between;
align-items: center;
width: 40%;
}
.grades .images img
{
width: 300px;
height: 200px;
object-fit: contain;
}
.grades .images .dots_todo img:nth-child(2)
{
width: 120px;
height: 60px;
filter: invert(1);
}
\ No newline at end of file
src/components/LessonDetails.jsx
View file @ c4d3bf83
......@@ -47,7 +47,7 @@ function LessonDetails() {
let x = lessons[0].lessons.find(
(l) => parseInt(l.id) === parseInt(param.lessonId)
)
console.log('x=>', x)
console.log('x=>', x.videoUrl)
if (x) setLesson(x)
}, [param])
const handleLoadedMetadata = () => {
......
src/components/Register.jsx
View file @ c4d3bf83
import { useEffect, useState } from 'react'
import { ErrorMessage, Field, Formik, Form } from 'formik'
import * as Yup from 'yup'
import { useNavigate } from 'react-router-dom'
import { useAdduserMutation } from '../store-api/slices/User-slice'
// import { useNavigate } from 'react-router-dom'
import { useRegisterMutation } from '../store-api/slices/User-slice'
import { ToastContainer, toast } from 'react-toastify'
function Register({ setpage }) {
const [showPassword, setShowPassord] = useState(false)
const [screen, setscreen] = useState(false)
......@@ -14,7 +15,7 @@ function Register({ setpage }) {
parent_phone: '',
parent_email: '',
}
const [adduser] = useAdduserMutation()
const [adduser] = useRegisterMutation()
const schema = Yup.object({
email: Yup.string().email('ايميل غير صحيح').required('الايميل مطلوب'),
password: Yup.string().required('كلمه المرور مطلوبه').min(6),
......@@ -31,9 +32,30 @@ function Register({ setpage }) {
window.addEventListener('resize', handleResize)
return () => window.removeEventListener('resize', handleResize)
}, [])
const navigate = useNavigate()
const errorNotify = () => toast.error('Wrong password or email')
const successNotify1 = () => toast.success('Register done')
// const navigate = useNavigate()
const handleRegister = (values) => {
console.log('register_data => ', values)
let user = {
username: values.name,
email: values.email,
password: values.password,
}
adduser(user)
.unwrap()
.then((res) => {
console.log('✅ Added successfully:', res)
successNotify1()
console.log('res=>', res)
setTimeout(() => {
// navigate('/login')
}, 2000)
})
.catch((err) => {
console.log('err=>', err)
errorNotify()
})
}
return (
......@@ -143,6 +165,7 @@ function Register({ setpage }) {
type="email"
placeholder="قم بادخال البريد الالكترونى"
name="parent_email"
// autoComplete={true}
/>
</div>
</div>
......@@ -163,6 +186,7 @@ function Register({ setpage }) {
<p>التسجيل من خلال ابل</p>
</a>
</div>
<ToastContainer />
</div>
)
}
......
src/components/YourGrade.jsx 0 → 100644
View file @ c4d3bf83
import { useState } from 'react'
import './Grades.css'
function YourGrade() {
const [system, setSystem] = useState()
const [grade, setGrade] = useState()
return (
<div className="grades">
<div className="grades_frame">
<img alt="" src="./gradesFrame.png" />
</div>
<h1>استكشف المعرفة، صفًا بعد صف</h1>
<div className="system_buttons">
<button
className={system === 'National' ? 'active_system' : ''}
onClick={() => setSystem('National')}
>
<span>National</span>
<i className="fa-solid fa-globe"></i>
</button>
<button
className={system === 'American' ? 'active_system' : ''}
onClick={() => setSystem('American')}
>
<span>American</span>
<i className="fa-solid fa-globe"></i>
</button>
<button
className={system === 'IG' ? 'active_system' : ''}
onClick={() => setSystem('IG')}
>
<span>IG</span>
<i className="fa-solid fa-globe"></i>
</button>
</div>
<p>إختر صفك الدراسي للبدء</p>
<div className="grades_devs">
<div
className={parseInt(grade) === 4 ? 'active_grade' : ''}
onClick={() => setGrade(4)}
>
<div className="img_parent">
<img alt="" src="./defult.png" />
</div>
<p>grade 4</p>
</div>
<div
className={parseInt(grade) === 5 ? 'active_grade' : ''}
onClick={() => setGrade(5)}
>
<div className="img_parent">
<img alt="" src="./defult.png" />
</div>
<p>grade 5</p>
</div>
<div
className={parseInt(grade) === 6 ? 'active_grade' : ''}
onClick={() => setGrade(6)}
>
<div className="img_parent">
<img alt="" src="./defult.png" />
</div>
<p>grade 6</p>
</div>
</div>
<div className="images">
<div className="dots_todo">
<img src="./todo.png" alt="" />
<img src="./dots.png" alt="" />
</div>
<div>
<img src="./atom_circles.png" alt="" />
</div>
</div>
</div>
)
}
export default YourGrade
src/components/data.jsx
View file @ c4d3bf83
......@@ -86,7 +86,8 @@ export const lessons_data = [
duration: '17:03',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-7.jpg',
videoUrl: '/videos/lesson-7.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
{
id: 8,
......@@ -97,7 +98,8 @@ export const lessons_data = [
duration: '14:27',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-8.jpg',
videoUrl: '/videos/lesson-8.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
{
id: 9,
......@@ -108,7 +110,8 @@ export const lessons_data = [
duration: '21:00',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-9.jpg',
videoUrl: '/videos/lesson-9.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
{
id: 10,
......@@ -119,7 +122,8 @@ export const lessons_data = [
duration: '11:45',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-10.jpg',
videoUrl: '/videos/lesson-10.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
{
id: 11,
......@@ -130,7 +134,8 @@ export const lessons_data = [
duration: '16:34',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-11.jpg',
videoUrl: '/videos/lesson-11.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
{
id: 12,
......@@ -141,7 +146,8 @@ export const lessons_data = [
duration: '13:22',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-12.jpg',
videoUrl: '/videos/lesson-12.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
{
id: 13,
......@@ -152,7 +158,8 @@ export const lessons_data = [
duration: '19:47',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-13.jpg',
videoUrl: '/videos/lesson-13.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
{
id: 14,
......@@ -163,7 +170,8 @@ export const lessons_data = [
duration: '10:58',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-14.jpg',
videoUrl: '/videos/lesson-14.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
{
id: 15,
......@@ -174,7 +182,8 @@ export const lessons_data = [
duration: '08:36',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-15.jpg',
videoUrl: '/videos/lesson-15.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
{
id: 16,
......@@ -185,7 +194,8 @@ export const lessons_data = [
duration: '19:15',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-16.jpg',
videoUrl: '/videos/lesson-16.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
{
id: 17,
......@@ -196,7 +206,8 @@ export const lessons_data = [
duration: '14:55',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-17.jpg',
videoUrl: '/videos/lesson-17.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
{
id: 18,
......@@ -207,7 +218,8 @@ export const lessons_data = [
duration: '16:40',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-18.jpg',
videoUrl: '/videos/lesson-18.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
{
id: 19,
......@@ -218,7 +230,8 @@ export const lessons_data = [
duration: '12:28',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-19.jpg',
videoUrl: '/videos/lesson-19.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
{
id: 20,
......@@ -229,7 +242,8 @@ export const lessons_data = [
duration: '18:33',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-20.jpg',
videoUrl: '/videos/lesson-20.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
{
id: 21,
......@@ -240,7 +254,8 @@ export const lessons_data = [
duration: '13:19',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-21.jpg',
videoUrl: '/videos/lesson-21.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
{
id: 22,
......@@ -251,7 +266,8 @@ export const lessons_data = [
duration: '11:45',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-22.jpg',
videoUrl: '/videos/lesson-22.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
{
id: 23,
......@@ -262,7 +278,8 @@ export const lessons_data = [
duration: '15:52',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-23.jpg',
videoUrl: '/videos/lesson-23.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
{
id: 24,
......@@ -273,7 +290,8 @@ export const lessons_data = [
duration: '17:22',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-24.jpg',
videoUrl: '/videos/lesson-24.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
{
id: 25,
......@@ -284,7 +302,8 @@ export const lessons_data = [
duration: '09:38',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-25.jpg',
videoUrl: '/videos/lesson-25.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
{
id: 26,
......@@ -295,7 +314,8 @@ export const lessons_data = [
duration: '22:10',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-26.jpg',
videoUrl: '/videos/lesson-26.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
{
id: 27,
......@@ -306,7 +326,8 @@ export const lessons_data = [
duration: '19:02',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-27.jpg',
videoUrl: '/videos/lesson-27.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
{
id: 28,
......@@ -317,7 +338,8 @@ export const lessons_data = [
duration: '16:41',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-28.jpg',
videoUrl: '/videos/lesson-28.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
{
id: 29,
......@@ -328,7 +350,8 @@ export const lessons_data = [
duration: '14:19',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-29.jpg',
videoUrl: '/videos/lesson-29.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
{
id: 30,
......@@ -339,7 +362,8 @@ export const lessons_data = [
duration: '20:44',
tags: ['تأثير القوى', 'القوى المتزنة', 'القوى الغير متزنة'],
thumbnail: '/assets/thumbnails/lesson-30.jpg',
videoUrl: '/videos/lesson-30.mp4',
videoUrl:
'/رحلة الكافيين داخل جسم الانسان ! - شارع العلوم (1080p, h264).mp4',
},
],
},
......@@ -421,6 +445,7 @@ export let Questions = [
'كل اللي عليك تسجّل بحسابك، تختار الصف الدراسي، وهيظهرلك المحتوى المناسب فورًا.',
},
]
export const Temp1 = [
{
title: '1وصول كامل للمناهج',
......@@ -443,6 +468,7 @@ export const Temp1 = [
img: '/package_img.png',
},
]
export const Temp2 = [
{
title: ' وصول كامل للمناهج',
......@@ -465,6 +491,7 @@ export const Temp2 = [
img: '/package_img.png',
},
]
export const Temp3 = [
{
title: '2وصول كامل للمناهج',
......@@ -487,6 +514,7 @@ export const Temp3 = [
img: '/package_img.png',
},
]
export const profileLessons = [
{
clock: '20:19',
......@@ -513,6 +541,7 @@ export const profileLessons = [
stop_time: '12',
},
]
export const profileLabs = [
{
clock: '15:19',
......@@ -545,6 +574,7 @@ export const profileLabs = [
stop_time: '12',
},
]
export const profileGames = [
{
clock: '20:19',
......
src/index.css
View file @ c4d3bf83
......@@ -28,3 +28,9 @@ p {
direction: rtl;
margin: 0;
}
input:-webkit-autofill,
input:-internal-autofill-selected {
-webkit-appearance: textfield !important;
transition: background-color 5000s ease-in-out 0s;
background: transparent !important;
}
src/store-api/slices/User-slice.jsx
View file @ c4d3bf83
......@@ -2,13 +2,13 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
export const UserSlice = createApi({
reducerPath: 'api',
baseQuery: fetchBaseQuery({
baseUrl: 'https://68a4ba98c123272fb9b3a1cb.mockapi.io/apiadumark/',
baseUrl: 'http://localhost:9090/api/auth/',
}),
tagTypes: ['Users'],
endpoints: (builder) => ({
adduser: builder.mutation({
register: builder.mutation({
query: (user) => ({
url: 'Users',
url: 'register',
method: 'POST',
body: user,
}),
......@@ -17,4 +17,4 @@ export const UserSlice = createApi({
}),
})
export const { useAdduserMutation } = UserSlice
export const { useRegisterMutation } = UserSlice
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment