Skip to content

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

registerbackend connection

parent 168b1a7d
Expand all 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: services:
web: web:
build: build:
context: . context: .
dockerfile: Dockerfile dockerfile: Dockerfile
ports: ports:
- "8080:80" - '8080:80'
index.html
View file @ c4d3bf83
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<link <link
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
href="https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap" href="https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<title>Vite + React</title> <title>SSL</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
......
public/_redirects 0 → 100644
View file @ c4d3bf83
/* /index.html 200
src/App.css
View file @ c4d3bf83
#root { /* #root {
/* max-width: 1280px; max-width: 1280px;
margin: 0 auto; margin: 0 auto;
padding: 2rem; padding: 2rem;
text-align: center; */ text-align: center;
} } */
/* .logo { /* .logo {
height: 6em; height: 6em;
......
src/App.jsx
View file @ c4d3bf83
...@@ -6,10 +6,11 @@ import Profile from './components/Profile' ...@@ -6,10 +6,11 @@ import Profile from './components/Profile'
import Header from './components/Header' import Header from './components/Header'
import Footer from './components/Footer' import Footer from './components/Footer'
import EditProfile from './components/EditProfile' import EditProfile from './components/EditProfile'
import Subjects from './components/Subjects' import Subjects from './components/Lessons'
import LessonDetails from './components/LessonDetails' import LessonDetails from './components/LessonDetails'
import Games from './components/Games' import Games from './components/Games'
import Labs from './components/Labs' import Labs from './components/Labs'
import YourGrade from './components/YourGrade'
function App() { function App() {
const location = useLocation() const location = useLocation()
...@@ -22,6 +23,7 @@ function App() { ...@@ -22,6 +23,7 @@ function App() {
<Routes> <Routes>
<Route path="/" element={<HomePage />} /> <Route path="/" element={<HomePage />} />
<Route path="/login" element={<Auth />} /> <Route path="/login" element={<Auth />} />
<Route path="/grades" element={<YourGrade />} />
<Route path="/profile" element={<Profile />} /> <Route path="/profile" element={<Profile />} />
<Route path="/editprofile" element={<EditProfile />} /> <Route path="/editprofile" element={<EditProfile />} />
<Route path="/subjects/:subjectId" element={<Subjects />} /> <Route path="/subjects/:subjectId" element={<Subjects />} />
......
src/components/Auth.css
View file @ c4d3bf83
...@@ -143,7 +143,7 @@ form .password div { ...@@ -143,7 +143,7 @@ form .password div {
align-items: baseline; align-items: baseline;
flex-direction: row-reverse; flex-direction: row-reverse;
background-color: white; background-color: white;
padding: 20px 12px; padding: 0 12px;
border-radius: 12px; border-radius: 12px;
width: 80%; width: 80%;
margin-left: 10%; margin-left: 10%;
...@@ -162,7 +162,7 @@ form .input::placeholder { ...@@ -162,7 +162,7 @@ form .input::placeholder {
text-decoration: underline; text-decoration: underline;
} }
form .password div { form .password div {
align-items: start; align-items: center;
} }
form > div a { form > div a {
color: var(--text-color); color: var(--text-color);
...@@ -181,6 +181,7 @@ form div input { ...@@ -181,6 +181,7 @@ form div input {
border: none; border: none;
text-align: end; text-align: end;
margin-right: 5px; margin-right: 5px;
padding: 20px 0px;
} }
form div input i { form div input i {
width: 20px; width: 20px;
...@@ -253,6 +254,7 @@ form .log_button button:hover { ...@@ -253,6 +254,7 @@ form .log_button button:hover {
align-items: center; align-items: center;
font-family: var(--main-font); font-family: var(--main-font);
margin-left: 20px; margin-left: 20px;
cursor: pointer;
} }
.diff_login i { .diff_login i {
margin-left: 10px; 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() { ...@@ -47,7 +47,7 @@ function LessonDetails() {
let x = lessons[0].lessons.find( let x = lessons[0].lessons.find(
(l) => parseInt(l.id) === parseInt(param.lessonId) (l) => parseInt(l.id) === parseInt(param.lessonId)
) )
console.log('x=>', x) console.log('x=>', x.videoUrl)
if (x) setLesson(x) if (x) setLesson(x)
}, [param]) }, [param])
const handleLoadedMetadata = () => { const handleLoadedMetadata = () => {
......
src/components/Register.jsx
View file @ c4d3bf83
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { ErrorMessage, Field, Formik, Form } from 'formik' import { ErrorMessage, Field, Formik, Form } from 'formik'
import * as Yup from 'yup' import * as Yup from 'yup'
import { useNavigate } from 'react-router-dom' // import { useNavigate } from 'react-router-dom'
import { useAdduserMutation } from '../store-api/slices/User-slice' import { useRegisterMutation } from '../store-api/slices/User-slice'
import { ToastContainer, toast } from 'react-toastify'
function Register({ setpage }) { function Register({ setpage }) {
const [showPassword, setShowPassord] = useState(false) const [showPassword, setShowPassord] = useState(false)
const [screen, setscreen] = useState(false) const [screen, setscreen] = useState(false)
...@@ -14,7 +15,7 @@ function Register({ setpage }) { ...@@ -14,7 +15,7 @@ function Register({ setpage }) {
parent_phone: '', parent_phone: '',
parent_email: '', parent_email: '',
} }
const [adduser] = useAdduserMutation() const [adduser] = useRegisterMutation()
const schema = Yup.object({ const schema = Yup.object({
email: Yup.string().email('ايميل غير صحيح').required('الايميل مطلوب'), email: Yup.string().email('ايميل غير صحيح').required('الايميل مطلوب'),
password: Yup.string().required('كلمه المرور مطلوبه').min(6), password: Yup.string().required('كلمه المرور مطلوبه').min(6),
...@@ -31,9 +32,30 @@ function Register({ setpage }) { ...@@ -31,9 +32,30 @@ function Register({ setpage }) {
window.addEventListener('resize', handleResize) window.addEventListener('resize', handleResize)
return () => window.removeEventListener('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) => { const handleRegister = (values) => {
console.log('register_data => ', 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 ( return (
...@@ -143,6 +165,7 @@ function Register({ setpage }) { ...@@ -143,6 +165,7 @@ function Register({ setpage }) {
type="email" type="email"
placeholder="قم بادخال البريد الالكترونى" placeholder="قم بادخال البريد الالكترونى"
name="parent_email" name="parent_email"
// autoComplete={true}
/> />
</div> </div>
</div> </div>
...@@ -163,6 +186,7 @@ function Register({ setpage }) { ...@@ -163,6 +186,7 @@ function Register({ setpage }) {
<p>التسجيل من خلال ابل</p> <p>التسجيل من خلال ابل</p>
</a> </a>
</div> </div>
<ToastContainer />
</div> </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
This diff is collapsed.
src/index.css
View file @ c4d3bf83
...@@ -28,3 +28,9 @@ p { ...@@ -28,3 +28,9 @@ p {
direction: rtl; direction: rtl;
margin: 0; 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' ...@@ -2,13 +2,13 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
export const UserSlice = createApi({ export const UserSlice = createApi({
reducerPath: 'api', reducerPath: 'api',
baseQuery: fetchBaseQuery({ baseQuery: fetchBaseQuery({
baseUrl: 'https://68a4ba98c123272fb9b3a1cb.mockapi.io/apiadumark/', baseUrl: 'http://localhost:9090/api/auth/',
}), }),
tagTypes: ['Users'], tagTypes: ['Users'],
endpoints: (builder) => ({ endpoints: (builder) => ({
adduser: builder.mutation({ register: builder.mutation({
query: (user) => ({ query: (user) => ({
url: 'Users', url: 'register',
method: 'POST', method: 'POST',
body: user, body: user,
}), }),
...@@ -17,4 +17,4 @@ export const UserSlice = createApi({ ...@@ -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