Reza_ashrafi
3 years ago
parent
0b973829ec
commit
bf42375d40
57 changed files with 3059 additions and 81 deletions
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 567 B |
|
After Width: | Height: | Size: 668 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 800 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 988 B |
|
After Width: | Height: | Size: 382 B |
@ -0,0 +1,91 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import { Link } from "react-router-dom"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
import activeHomeIcon from "../../assets/icons/bottom-home-active.svg"; |
||||||
|
import deactiveProductsIcon from "../../assets/icons/bottom-products-deactive.svg"; |
||||||
|
import deactiveVideoIcon from "../../assets/icons/bottom-video-deactive.svg"; |
||||||
|
import deactiveProfileIcon from "../../assets/icons/bottom-profile-deactive.svg"; |
||||||
|
import deactiveTestIcon from "../../assets/icons/bottom-test-deactive.svg"; |
||||||
|
|
||||||
|
export const BottomNavigation = ({ pages, isDark }) => { |
||||||
|
const [activeLink, setActiveLink] = useState("/"); |
||||||
|
|
||||||
|
const Tab = ({ page }) => { |
||||||
|
return ( |
||||||
|
<Link |
||||||
|
to={page.link} |
||||||
|
className="flex flex-col justify-center itemms-center" |
||||||
|
onClick={() => setActiveLink(page.link)} |
||||||
|
> |
||||||
|
<img |
||||||
|
className="w-8 h-8 mx-auto" |
||||||
|
src={activeLink === page.link ? page.activeIcon : page.deactiveIcon} |
||||||
|
alt="" |
||||||
|
/> |
||||||
|
<span className="text-blueB9 text-xs text-center font-bold mt-1"> |
||||||
|
{page.name} |
||||||
|
</span> |
||||||
|
</Link> |
||||||
|
); |
||||||
|
}; |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<footer |
||||||
|
className="w-full flex flex-row justify-around items-center fixed bottom-0 left-0 py-2 z-20 lg:hidden" |
||||||
|
style={{ background: isDark ? "hsla(209, 39%, 28%, 1)" : "#E8FCFF" }} |
||||||
|
> |
||||||
|
{pages.map((page, index) => ( |
||||||
|
<Tab page={page} key={index} /> |
||||||
|
))} |
||||||
|
</footer> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({ |
||||||
|
isDark: state.publicApi.isDark, |
||||||
|
}); |
||||||
|
|
||||||
|
const mapDispatchToProps = {}; |
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(BottomNavigation); |
||||||
|
|
||||||
|
BottomNavigation.defaultProps = { |
||||||
|
pages: [ |
||||||
|
{ |
||||||
|
id: 0, |
||||||
|
name: "صفحه اصلی", |
||||||
|
link: "/", |
||||||
|
activeIcon: activeHomeIcon, |
||||||
|
deactiveIcon: "", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: "محصولات", |
||||||
|
link: "/products", |
||||||
|
activeIcon: "", |
||||||
|
deactiveIcon: deactiveProductsIcon, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
name: "ویدئو", |
||||||
|
link: "/vod", |
||||||
|
activeIcon: "", |
||||||
|
deactiveIcon: deactiveVideoIcon, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
name: "آزمون", |
||||||
|
link: "/test", |
||||||
|
activeIcon: "", |
||||||
|
deactiveIcon: deactiveTestIcon, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 4, |
||||||
|
name: "حساب کاربری", |
||||||
|
link: "/profile", |
||||||
|
activeIcon: "", |
||||||
|
deactiveIcon: deactiveProfileIcon, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
After Width: | Height: | Size: 860 B |
@ -0,0 +1,171 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import _ from "lodash"; |
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
import tick from "./tick.png"; |
||||||
|
import danger from "./danger.png"; |
||||||
|
|
||||||
|
const langDetector = (lang, option1, option2) => { |
||||||
|
return lang === "fa" ? option1 : option2; |
||||||
|
}; |
||||||
|
|
||||||
|
const inputStatusHandler = (value, focus, status, primary, success, danger) => { |
||||||
|
if (!focus) { |
||||||
|
return ""; |
||||||
|
} else { |
||||||
|
if (!value) { |
||||||
|
return primary; |
||||||
|
} else { |
||||||
|
if (status) { |
||||||
|
return success; |
||||||
|
} else { |
||||||
|
return danger; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
export default function Input(props) { |
||||||
|
const [value, setValue] = useState(""); |
||||||
|
const [focusToggle, setFocusToggle] = useState(false); |
||||||
|
|
||||||
|
const { lang, theme, inputMode, label, status, maxLength, message } = props; |
||||||
|
|
||||||
|
const onChange = (val) => { |
||||||
|
setValue(val); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={_.join( |
||||||
|
["input flex flex-col relative my-2", langDetector(lang, "fa", "en")], |
||||||
|
" " |
||||||
|
)} |
||||||
|
> |
||||||
|
<label |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"absolute top-1/2 transform -translate-y-1/2 text-gray-500 bg-white px-2 text-xs transition-all duration-300", |
||||||
|
langDetector(lang, "right-2", "left-2"), |
||||||
|
inputStatusHandler( |
||||||
|
value, |
||||||
|
focusToggle, |
||||||
|
status, |
||||||
|
"input__labelFocus", |
||||||
|
"input__labelSuccess", |
||||||
|
"input__labelDanger" |
||||||
|
), |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
onClick={() => setFocusToggle(true)} |
||||||
|
> |
||||||
|
{label} |
||||||
|
</label> |
||||||
|
<input |
||||||
|
type="text" |
||||||
|
inputMode={inputMode} |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"flex-1 border border-gray-500 rounded-md outline-none py-3 px-4 text-xs", |
||||||
|
inputStatusHandler( |
||||||
|
value, |
||||||
|
focusToggle, |
||||||
|
status, |
||||||
|
"input__inputActive", |
||||||
|
"input__inputSuccess", |
||||||
|
"input__inputDanger" |
||||||
|
), |
||||||
|
"transition", |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
onChange={(e) => onChange(e.target.value)} |
||||||
|
value={value} |
||||||
|
onFocus={() => setFocusToggle(true)} |
||||||
|
onBlur={() => !value ? setFocusToggle(false) : setFocusToggle(true)} |
||||||
|
maxLength={maxLength} |
||||||
|
/> |
||||||
|
{!status && value && ( |
||||||
|
<img |
||||||
|
src={danger} |
||||||
|
alt={langDetector(lang, "اشتباه", "wrong")} |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"w-4 h-4 absolute top-1/2 transform -translate-y-1/2", |
||||||
|
langDetector(lang, "left-2", "right-2"), |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
/> |
||||||
|
)} |
||||||
|
{status && value && ( |
||||||
|
<img |
||||||
|
src={tick} |
||||||
|
alt={langDetector(lang, "درست", "right")} |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"w-4 h-4 absolute top-1/2 transform -translate-y-1/2", |
||||||
|
langDetector(lang, "left-2", "right-2"), |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
/> |
||||||
|
)} |
||||||
|
|
||||||
|
{value && !status && ( |
||||||
|
<span |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"input__message text-xs absolute -bottom-5", |
||||||
|
langDetector(lang, "right-2", "left-2"), |
||||||
|
inputStatusHandler( |
||||||
|
value, |
||||||
|
focusToggle, |
||||||
|
status, |
||||||
|
"", |
||||||
|
"input__messageSuccess", |
||||||
|
"input__messageDanger" |
||||||
|
), |
||||||
|
"transition", |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
> |
||||||
|
{message} |
||||||
|
</span> |
||||||
|
)} |
||||||
|
{value && ( |
||||||
|
<span |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"input__length absolute -bottom-5 text-xs", |
||||||
|
langDetector(lang, "left-2", "right-2"), |
||||||
|
inputStatusHandler( |
||||||
|
value, |
||||||
|
focusToggle, |
||||||
|
status, |
||||||
|
"", |
||||||
|
"input__lengthSuccess", |
||||||
|
"input__lengthDanger" |
||||||
|
), |
||||||
|
"transition", |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
> |
||||||
|
{value.length + "/" + maxLength} |
||||||
|
</span> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
Input.defaultProps = { |
||||||
|
lang : 'fa', |
||||||
|
inputMode : 'numeric', |
||||||
|
label : 'label', |
||||||
|
status : '', |
||||||
|
maxLength : '', |
||||||
|
message : '', |
||||||
|
} |
||||||
@ -0,0 +1,60 @@ |
|||||||
|
$primary: #196EC0; |
||||||
|
$gray: #dbdbdb; |
||||||
|
$danger: #E00A0A; |
||||||
|
$success: #23C933; |
||||||
|
|
||||||
|
.input { |
||||||
|
&__labelFocus{ |
||||||
|
top: 0px !important; |
||||||
|
font-size: 9px !important; |
||||||
|
color: $primary !important; |
||||||
|
} |
||||||
|
&__labelDanger{ |
||||||
|
top: 0px !important; |
||||||
|
font-size: 9px !important; |
||||||
|
color: $danger !important; |
||||||
|
} |
||||||
|
&__labelSuccess{ |
||||||
|
top: 0px !important; |
||||||
|
font-size: 9px !important; |
||||||
|
color: $success !important; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
&__inputActive{ |
||||||
|
border-color: $primary !important; |
||||||
|
} |
||||||
|
&__inputSuccess{ |
||||||
|
border-color: $success !important; |
||||||
|
} |
||||||
|
&__inputDanger{ |
||||||
|
border-color: $danger !important; |
||||||
|
} |
||||||
|
|
||||||
|
&__message{ |
||||||
|
&Success{ |
||||||
|
color: $success; |
||||||
|
} |
||||||
|
&Danger{ |
||||||
|
color: $danger; |
||||||
|
} |
||||||
|
} |
||||||
|
&__length{ |
||||||
|
&Success{ |
||||||
|
color: $success; |
||||||
|
} |
||||||
|
&Danger{ |
||||||
|
color: $danger; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.en { |
||||||
|
direction: ltr; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
.fa { |
||||||
|
direction: rtl; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 411 B |
@ -0,0 +1,32 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { Route, Redirect } from "react-router-dom"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
|
||||||
|
const PrivateRouter = ({ |
||||||
|
component: Component, |
||||||
|
restricted, |
||||||
|
status, |
||||||
|
customPage, |
||||||
|
...rest |
||||||
|
}) => { |
||||||
|
return ( |
||||||
|
<Route |
||||||
|
{...rest} |
||||||
|
render={(props) => |
||||||
|
restricted ? ( |
||||||
|
<Redirect to="/" /> |
||||||
|
) : ( |
||||||
|
<Component page={customPage} /> |
||||||
|
|
||||||
|
) |
||||||
|
} |
||||||
|
/> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default connect( |
||||||
|
(state) => ({ |
||||||
|
status: state.user.status, |
||||||
|
}), |
||||||
|
{} |
||||||
|
)(PrivateRouter); |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
import React from "react"; |
||||||
|
import _ from "lodash"; |
||||||
|
|
||||||
|
export default function Textarea({ placeholder, theme }) { |
||||||
|
const light = theme === "light"; |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<textarea |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"custom-textarea", |
||||||
|
light ? "custom-textarea-light" : "custom-textarea-dark", |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
rows={6} |
||||||
|
placeholder={placeholder} |
||||||
|
/> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,63 @@ |
|||||||
|
.custom-textarea { |
||||||
|
width: 100%; |
||||||
|
padding: 10px 12px; |
||||||
|
border-radius: 10px; |
||||||
|
|
||||||
|
margin-top: 10px; |
||||||
|
&-light { |
||||||
|
border: 1px solid $green; |
||||||
|
background-color: white; |
||||||
|
color: $gray5; |
||||||
|
} |
||||||
|
&-dark { |
||||||
|
border: 1px solid $gray2; |
||||||
|
background-color: black; |
||||||
|
color: white; |
||||||
|
} |
||||||
|
&::placeholder { |
||||||
|
color: #a2a2a2; |
||||||
|
} |
||||||
|
&:focus { |
||||||
|
border: 1px solid $green1; |
||||||
|
outline: none; |
||||||
|
&::placeholder { |
||||||
|
color: $green1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1441px) { |
||||||
|
.custom-textarea { |
||||||
|
font-size: 16px; |
||||||
|
&::placeholder { |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||||
|
.custom-textarea { |
||||||
|
font-size: calc(100vw / 110); |
||||||
|
&::placeholder { |
||||||
|
font-size: calc(100vw / 110); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 641px) and (max-width: 1007px) { |
||||||
|
.custom-textarea { |
||||||
|
font-size: calc(100vw / 40); |
||||||
|
&::placeholder { |
||||||
|
font-size: calc(100vw / 40); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-width: 640px) { |
||||||
|
.custom-textarea { |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
&::placeholder { |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,84 @@ |
|||||||
|
import { Component } from "react"; |
||||||
|
|
||||||
|
const maxDesktopSize = 1250; |
||||||
|
const maxMobileSize = 550; |
||||||
|
|
||||||
|
const fontSize = { |
||||||
|
desktop: { |
||||||
|
div: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, |
||||||
|
}, |
||||||
|
mobile: { |
||||||
|
div: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, |
||||||
|
}, |
||||||
|
}; |
||||||
|
export default class Timer extends Component { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
this.state = { |
||||||
|
time: { |
||||||
|
h: 0, |
||||||
|
m: 0, |
||||||
|
s: 0, |
||||||
|
}, |
||||||
|
seconds : props.seconds, |
||||||
|
flag: true, |
||||||
|
}; |
||||||
|
this.timer = 0; |
||||||
|
this.startTimer = this.startTimer.bind(this); |
||||||
|
this.countDown = this.countDown.bind(this); |
||||||
|
} |
||||||
|
|
||||||
|
secondsToTime(secs) { |
||||||
|
let hours = Math.floor(secs / (60 * 60)); |
||||||
|
|
||||||
|
let divisor_for_minutes = secs % (60 * 60); |
||||||
|
let minutes = Math.floor(divisor_for_minutes / 60); |
||||||
|
|
||||||
|
let divisor_for_seconds = divisor_for_minutes % 60; |
||||||
|
let seconds = Math.ceil(divisor_for_seconds); |
||||||
|
|
||||||
|
let obj = { |
||||||
|
h: hours, |
||||||
|
m: minutes, |
||||||
|
s: seconds, |
||||||
|
}; |
||||||
|
return obj; |
||||||
|
} |
||||||
|
|
||||||
|
componentDidMount() { |
||||||
|
this.startTimer(); |
||||||
|
let timeLeftVar = this.secondsToTime(this.state.seconds); |
||||||
|
this.setState({ time: timeLeftVar }); |
||||||
|
} |
||||||
|
|
||||||
|
startTimer() { |
||||||
|
if (this.timer === 0 && this.state.seconds > 0) { |
||||||
|
this.timer = setInterval(this.countDown, 1000); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
countDown = async () => { |
||||||
|
// Remove one second, set state so a re-render happens.
|
||||||
|
let seconds = this.state.seconds - 1; |
||||||
|
this.setState({ |
||||||
|
time: this.secondsToTime(seconds), |
||||||
|
seconds: seconds, |
||||||
|
}); |
||||||
|
if (seconds === 0) { |
||||||
|
this.props.refresh(true); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
componentWillUnmount() { |
||||||
|
clearInterval(this.timer); |
||||||
|
} |
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<div className="timer"> |
||||||
|
{this.state.time ? this.state.time.m : ''}:{this.state.time ? this.state.time.s : ''}
|
||||||
|
</div> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
.timer { |
||||||
|
flex-direction: row; |
||||||
|
direction: rtl !important; |
||||||
|
margin-right: 10px; |
||||||
|
margin-left: 10px; |
||||||
|
color: $green2; |
||||||
|
font-family: numeralLight; |
||||||
|
} |
||||||
@ -1,9 +1,33 @@ |
|||||||
import proxy from "../proxy"; |
import proxy from "../proxy"; |
||||||
const userProduct = { |
const userProduct = { |
||||||
addVOD: |
list: |
||||||
|
(data = {}) => |
||||||
|
async (dispatch) => { |
||||||
|
await proxy.get("userProduct/list", data, { dispatch }); |
||||||
|
}, |
||||||
|
info: |
||||||
(data = {}) => |
(data = {}) => |
||||||
async (dispatch) => |
async (dispatch) => |
||||||
await proxy.post("userProduct/addVOD", data, { dispatch }), |
await proxy.get("userProduct/info", data, { dispatch }), |
||||||
|
update: |
||||||
|
(data = {}, data2 = {}) => |
||||||
|
async (dispatch) => { |
||||||
|
await proxy.put("userProduct/update", data); |
||||||
|
await proxy.get("userProduct/list", data2, { dispatch }); |
||||||
|
}, |
||||||
|
add: |
||||||
|
(data = {}, data2 = {}, data3 = {}) => |
||||||
|
async (dispatch) => { |
||||||
|
await proxy.post("userProduct/add", data, { dispatch }); |
||||||
|
await proxy.get("userProduct/list", data2, { dispatch }); |
||||||
|
await proxy.get("userFactor/info", data3, { dispatch }); |
||||||
|
}, |
||||||
|
del: |
||||||
|
(data = {}, data2 = {}) => |
||||||
|
async (dispatch) => { |
||||||
|
await proxy.delete("userProduct/delete", data); |
||||||
|
await proxy.get("userProduct/list", data2, { dispatch }); |
||||||
|
}, |
||||||
}; |
}; |
||||||
|
|
||||||
export default userProduct; |
export default userProduct; |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
import React, { useState, useRef, useEffect } from "react"; |
||||||
|
import { Link } from "react-router-dom"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
import onInput from "../../../utils/onInput"; |
||||||
|
|
||||||
|
import { user } from "../../../redux/actions"; |
||||||
|
import _ from "lodash"; |
||||||
|
|
||||||
|
//assets
|
||||||
|
|
||||||
|
|
||||||
|
function Login({ login, theme, ...props }) { |
||||||
|
const [loginFields, setSignUpFiels] = useState(undefined); |
||||||
|
const onChange = (name, value) => { |
||||||
|
setSignUpFiels({ ...loginFields, [name]: value }); |
||||||
|
}; |
||||||
|
|
||||||
|
useEffect(() => {}, []); |
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"flex flex-col items-center justify-center w-screen h-screen relative", |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
> |
||||||
|
|
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default connect(() => ({}), { login: user.login })(Login); |
||||||
@ -0,0 +1,262 @@ |
|||||||
|
.login { |
||||||
|
|
||||||
|
&-light { |
||||||
|
.MuiFormControl-root label{ |
||||||
|
background-color: white !important; |
||||||
|
} |
||||||
|
b{ |
||||||
|
color: $gray5 !important; |
||||||
|
} |
||||||
|
.login { |
||||||
|
&__back { |
||||||
|
a { |
||||||
|
color: black !important; |
||||||
|
} |
||||||
|
} |
||||||
|
&__options { |
||||||
|
color: $gray9; |
||||||
|
a { |
||||||
|
color: $green4; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&__options { |
||||||
|
color: #b5b5b5; |
||||||
|
a { |
||||||
|
color: $green4; |
||||||
|
} |
||||||
|
} |
||||||
|
button[type="submit"] { |
||||||
|
margin-top: 25px; |
||||||
|
background-color: $green4; |
||||||
|
color: white; |
||||||
|
padding: 10px 0px; |
||||||
|
border: 0px; |
||||||
|
border-radius: 10px; |
||||||
|
} |
||||||
|
img { |
||||||
|
// transform: rotate(-90deg); |
||||||
|
} |
||||||
|
.MuiButtonBase-root { |
||||||
|
padding: 0px !important; |
||||||
|
} |
||||||
|
.footer { |
||||||
|
position: fixed; |
||||||
|
bottom: 0px; |
||||||
|
left: 0px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1441px) { |
||||||
|
.login { |
||||||
|
section { |
||||||
|
width: 410px; |
||||||
|
b { |
||||||
|
color: white; |
||||||
|
font-size: 16px; |
||||||
|
margin-bottom: 30px; |
||||||
|
font-weight: 500; |
||||||
|
p { |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
button { |
||||||
|
font-size: 17px; |
||||||
|
} |
||||||
|
} |
||||||
|
&__info { |
||||||
|
width: 350px; |
||||||
|
margin: 40px auto 0px; |
||||||
|
text-align: center; |
||||||
|
color: white; |
||||||
|
font-size: 14px; |
||||||
|
a { |
||||||
|
color: $green4; |
||||||
|
} |
||||||
|
} |
||||||
|
&__back { |
||||||
|
margin-bottom: 60px; |
||||||
|
img { |
||||||
|
transform: rotate(-90deg); |
||||||
|
} |
||||||
|
a { |
||||||
|
color: white; |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
} |
||||||
|
&__options { |
||||||
|
div { |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
a { |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||||
|
.login { |
||||||
|
section { |
||||||
|
width: 350px; |
||||||
|
transform: scale(0.9); |
||||||
|
b { |
||||||
|
color: white; |
||||||
|
font-size: calc(100vw / 80); |
||||||
|
margin-bottom: 30px; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
|
||||||
|
button { |
||||||
|
font-size: calc(100vw / 80); |
||||||
|
} |
||||||
|
} |
||||||
|
&__info { |
||||||
|
width: 300px; |
||||||
|
margin: 40px auto 0px; |
||||||
|
text-align: center; |
||||||
|
color: white; |
||||||
|
font-size: calc(100vw / 110); |
||||||
|
a { |
||||||
|
color: $green4; |
||||||
|
} |
||||||
|
} |
||||||
|
&__back { |
||||||
|
margin-bottom: 40px; |
||||||
|
img { |
||||||
|
transform: rotate(-90deg); |
||||||
|
} |
||||||
|
a { |
||||||
|
color: white; |
||||||
|
font-size: calc(100vw / 110); |
||||||
|
} |
||||||
|
} |
||||||
|
&__options { |
||||||
|
div { |
||||||
|
font-size: calc(100vw / 110); |
||||||
|
} |
||||||
|
a { |
||||||
|
font-size: calc(100vw / 110); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 641px) and (max-width: 1007px) { |
||||||
|
.login { |
||||||
|
.footer { |
||||||
|
display: none !important; |
||||||
|
} |
||||||
|
section { |
||||||
|
// background-color: red; |
||||||
|
width: 90%; |
||||||
|
max-width: 700px; |
||||||
|
height: calc(100% - 60px); |
||||||
|
justify-content: center; |
||||||
|
b { |
||||||
|
color: white; |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
margin-bottom: 30px; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
|
||||||
|
button { |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
width: 100%; |
||||||
|
max-width: 400px; |
||||||
|
margin: 50px auto 0px; |
||||||
|
} |
||||||
|
} |
||||||
|
&__info { |
||||||
|
width: 300px; |
||||||
|
margin: 40px auto 0px; |
||||||
|
text-align: center; |
||||||
|
color: white; |
||||||
|
font-size: calc(100vw / 40); |
||||||
|
a { |
||||||
|
color: $green4; |
||||||
|
} |
||||||
|
} |
||||||
|
&__back { |
||||||
|
position: fixed; |
||||||
|
top: 100px; |
||||||
|
margin-bottom: 40px; |
||||||
|
left: 30px; |
||||||
|
a { |
||||||
|
color: white; |
||||||
|
font-size: calc(100vw / 110); |
||||||
|
} |
||||||
|
img { |
||||||
|
width: 50px; |
||||||
|
} |
||||||
|
} |
||||||
|
&__options { |
||||||
|
padding-top: 20px; |
||||||
|
div { |
||||||
|
font-size: calc(100vw / 40); |
||||||
|
} |
||||||
|
a { |
||||||
|
font-size: calc(100vw / 45); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-width: 640px) { |
||||||
|
.login { |
||||||
|
section { |
||||||
|
// background-color: red; |
||||||
|
width: 90%; |
||||||
|
max-width: 400px; |
||||||
|
height: calc(100% - 60px); |
||||||
|
// transform: scale(0.9); |
||||||
|
justify-content: center; |
||||||
|
// align-items: center; |
||||||
|
b { |
||||||
|
color: white; |
||||||
|
font-size: calc(100vw / 18); |
||||||
|
margin-bottom: 30px; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
|
||||||
|
button { |
||||||
|
margin-top: 25px; |
||||||
|
font-size: calc(100vw / 25); |
||||||
|
} |
||||||
|
} |
||||||
|
&__info { |
||||||
|
width: 300px; |
||||||
|
margin: 40px auto 0px; |
||||||
|
text-align: center; |
||||||
|
color: white; |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
a { |
||||||
|
color: $green4; |
||||||
|
} |
||||||
|
} |
||||||
|
&__back { |
||||||
|
position: fixed; |
||||||
|
top: 70px; |
||||||
|
left: 20px; |
||||||
|
margin-bottom: 40px; |
||||||
|
a { |
||||||
|
color: white; |
||||||
|
font-size: calc(100vw / 110); |
||||||
|
} |
||||||
|
img { |
||||||
|
width: 40px; |
||||||
|
// transform: scale() |
||||||
|
} |
||||||
|
} |
||||||
|
&__options { |
||||||
|
div { |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
} |
||||||
|
a { |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,61 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import onInput from "../../../../utils/onInput"; |
||||||
|
import Input from "../../../../components/Input/index"; |
||||||
|
|
||||||
|
import moment from "jalali-moment"; |
||||||
|
|
||||||
|
export default function Birthdate({ defaultValue, name, ...props }) { |
||||||
|
let momentDate = moment(defaultValue[name]); |
||||||
|
let isvalid = momentDate.isValid(); |
||||||
|
const day = isvalid ? momentDate.format("jDD") : null, |
||||||
|
month = isvalid ? momentDate.format("jMM") : null, |
||||||
|
year = isvalid ? momentDate.format("jYYYY") : null; |
||||||
|
const [state, setState] = useState({ day, month, year }); |
||||||
|
const onChange = (_name, value) => { |
||||||
|
let _state = { ...state, [_name]: value }; |
||||||
|
setState(_state); |
||||||
|
|
||||||
|
props.onChange( |
||||||
|
name, |
||||||
|
moment |
||||||
|
.from(`${_state.year}/${_state.month}/${_state.day}`, "fa", "YYYY/M/D") |
||||||
|
.locale("en") |
||||||
|
); |
||||||
|
}; |
||||||
|
return ( |
||||||
|
<div className="birthdate d-flex justify-content-between align-items-center"> |
||||||
|
<label>تاریخ تولد</label> |
||||||
|
<div className="mobile-birthdate__date d-flex align-items-center"> |
||||||
|
<Input |
||||||
|
variant="standard" |
||||||
|
name="day" |
||||||
|
placeholder="روز" |
||||||
|
maxLength={2} |
||||||
|
onInput={onInput.dayHandler} |
||||||
|
onChange={onChange} |
||||||
|
defaultValue={state} |
||||||
|
/> |
||||||
|
<span>/</span> |
||||||
|
<Input |
||||||
|
variant="standard" |
||||||
|
name="month" |
||||||
|
placeholder="ماه" |
||||||
|
maxLength={2} |
||||||
|
onInput={onInput.monthHandler} |
||||||
|
onChange={onChange} |
||||||
|
defaultValue={state} |
||||||
|
/> |
||||||
|
<span>/</span> |
||||||
|
<Input |
||||||
|
variant="standard" |
||||||
|
name="year" |
||||||
|
placeholder="سال" |
||||||
|
maxLength={4} |
||||||
|
onInput={onInput.yearHandler} |
||||||
|
onChange={onChange} |
||||||
|
defaultValue={state} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,118 @@ |
|||||||
|
.birthdate { |
||||||
|
width: 100%; |
||||||
|
border-radius: 10px; |
||||||
|
padding: 0px 10px; |
||||||
|
border: 1px solid $gray1; |
||||||
|
margin: 10px 0px; |
||||||
|
label { |
||||||
|
width: fit-content; |
||||||
|
color: #ccc; |
||||||
|
font-weight: 100; |
||||||
|
} |
||||||
|
span { |
||||||
|
color: #bfbfbf; |
||||||
|
margin: 0px 5px; |
||||||
|
} |
||||||
|
|
||||||
|
input { |
||||||
|
border: none !important; |
||||||
|
background-color: rgba(204, 204, 204, 0.098); |
||||||
|
color: $green4; |
||||||
|
max-width: 40px; |
||||||
|
text-align: center !important; |
||||||
|
direction: ltr; |
||||||
|
margin: 0px 5px !important; |
||||||
|
border: none; |
||||||
|
&:focus { |
||||||
|
outline: 0px; |
||||||
|
border: 0px; |
||||||
|
} |
||||||
|
&::placeholder { |
||||||
|
color: $gray1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//INPUT |
||||||
|
|
||||||
|
.MuiOutlinedInput-notchedOutline { |
||||||
|
border : none !important; |
||||||
|
} |
||||||
|
|
||||||
|
.MuiOutlinedInput-input { |
||||||
|
padding: 5px !important; |
||||||
|
&:focus { |
||||||
|
border: none !important; |
||||||
|
border-radius: 0px !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1441px) { |
||||||
|
.birthdate { |
||||||
|
label { |
||||||
|
font-size: 14px !important; |
||||||
|
} |
||||||
|
span { |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
input { |
||||||
|
font-size: 16px; |
||||||
|
&::placeholder { |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||||
|
.birthdate { |
||||||
|
label { |
||||||
|
font-size: calc(100vw / 120) !important; |
||||||
|
} |
||||||
|
span { |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
} |
||||||
|
input { |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
&::placeholder { |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 640px) and (max-width: 1007px) { |
||||||
|
.birthdate { |
||||||
|
label { |
||||||
|
font-size: calc(100vw / 40) !important; |
||||||
|
} |
||||||
|
span { |
||||||
|
font-size: calc(100vw / 35); |
||||||
|
} |
||||||
|
input { |
||||||
|
font-size: calc(100vw / 20); |
||||||
|
margin: 0px 5px !important; |
||||||
|
&::placeholder { |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-width: 640px) { |
||||||
|
.birthdate { |
||||||
|
label { |
||||||
|
font-size: calc(100vw / 35) !important; |
||||||
|
} |
||||||
|
span { |
||||||
|
font-size: calc(100vw / 35); |
||||||
|
} |
||||||
|
input { |
||||||
|
font-size: calc(100vw / 20); |
||||||
|
|
||||||
|
&::placeholder { |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
export default function Document({ defaultValue, name, onChange }) { |
||||||
|
return ( |
||||||
|
<div className="mobile-auth-profile__document d-flex justify-content-center align-items-center mb-3"> |
||||||
|
{defaultValue.docFileIds === "" ? ( |
||||||
|
<> |
||||||
|
<input |
||||||
|
type="file" |
||||||
|
name={name} |
||||||
|
onChange={(e) => onChange(name, e.target.files[0])} |
||||||
|
/> |
||||||
|
<span>گواهی تدریس خود را آپلود کنید.</span> |
||||||
|
</> |
||||||
|
) : ( |
||||||
|
<> |
||||||
|
<input |
||||||
|
type="file" |
||||||
|
name="file" |
||||||
|
onChange={(e) => onChange(name, e.target.files[0])} |
||||||
|
/> |
||||||
|
<span |
||||||
|
style={{ |
||||||
|
width: "100%", |
||||||
|
textAlign: "center", |
||||||
|
margin: "auto", |
||||||
|
}} |
||||||
|
> |
||||||
|
{/* {defaultValue.docFileIds.name || |
||||||
|
"گواهی تدریس ثبت شده و درحال بررسی می باشد"} */} |
||||||
|
</span> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,52 @@ |
|||||||
|
.mobile-auth-profile { |
||||||
|
&__document { |
||||||
|
margin: 10px auto; |
||||||
|
width: 100%; |
||||||
|
height: 50px; |
||||||
|
border-radius: 10px; |
||||||
|
border: 2px dashed $gray1; |
||||||
|
position: relative; |
||||||
|
input { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
position: absolute; |
||||||
|
left: 0px; |
||||||
|
top: 0px; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
object-fit: cover; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
span { |
||||||
|
color: #afafaf; |
||||||
|
font-family: numeralLight; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1441px){ |
||||||
|
span{ |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px){ |
||||||
|
span{ |
||||||
|
font-size: calc(100vw / 100); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 641px) and (max-width: 1007px){ |
||||||
|
span{ |
||||||
|
font-size: calc(100vw / 45); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-width: 640px){ |
||||||
|
span{ |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
|
||||||
|
export default function GenderSwitch({ |
||||||
|
onChange, |
||||||
|
name, |
||||||
|
options, |
||||||
|
selectedOption, |
||||||
|
label, |
||||||
|
}) { |
||||||
|
return ( |
||||||
|
<div className="gender d-flex justify-content-between align-items-center"> |
||||||
|
<div |
||||||
|
className={selectedOption === 2 && "gender__active"} |
||||||
|
onClick={() => onChange(name, 2)} |
||||||
|
> |
||||||
|
{options[0]} |
||||||
|
</div> |
||||||
|
<div |
||||||
|
className={selectedOption === 1 && "gender__active"} |
||||||
|
onClick={() => onChange(name, 1)} |
||||||
|
> |
||||||
|
{options[1]} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
.gender { |
||||||
|
width: 100%; |
||||||
|
margin-bottom: 10px; |
||||||
|
div { |
||||||
|
border-radius: 10px; |
||||||
|
font-family: numeralLight; |
||||||
|
padding: 13px 0px; |
||||||
|
width: 45%; |
||||||
|
text-align: center; |
||||||
|
cursor: pointer; |
||||||
|
color: #ccc; |
||||||
|
background-color: black; |
||||||
|
border: 1px solid $gray1; |
||||||
|
} |
||||||
|
&__active{ |
||||||
|
background-color: $green4 !important; |
||||||
|
color: white !important; |
||||||
|
border: none !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1441px) { |
||||||
|
.gender{ |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||||
|
.gender{ |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 641px) and (max-width: 1007px) { |
||||||
|
.gender{ |
||||||
|
font-size: calc(100vw / 40); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-width: 640px) { |
||||||
|
.gender{ |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default function MultipleSelector({align, onChange, selectedOptions, options, defaultValue, label, name,}) { |
||||||
|
return ( |
||||||
|
<></> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
.mobile-multiple-selector { |
||||||
|
width: 100%; |
||||||
|
border-radius: 10px; |
||||||
|
padding: 9px 10px; |
||||||
|
border: 1px solid $gray6 !important; |
||||||
|
margin: 0px !important; |
||||||
|
.MuiInput-formControl { |
||||||
|
margin: 9px 0px 8px !important; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
export default function Upload({ name, value, onChange, label }) { |
||||||
|
return ( |
||||||
|
<div className="profile-upload d-flex justify-content-center align-items-center mb-3"> |
||||||
|
<> |
||||||
|
{value === null ? ( |
||||||
|
<></> |
||||||
|
) : ( |
||||||
|
<img |
||||||
|
src={ |
||||||
|
value.name |
||||||
|
? URL.createObjectURL(value) |
||||||
|
: window.baseURL + "file/" + value |
||||||
|
} |
||||||
|
alt={"کاربر"} |
||||||
|
/> |
||||||
|
)} |
||||||
|
<input |
||||||
|
type="file" |
||||||
|
name={name} |
||||||
|
onChange={(e) => onChange(e.target.name, e.target.files[0])} |
||||||
|
/> |
||||||
|
</> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,61 @@ |
|||||||
|
.profile-upload { |
||||||
|
width: 100px; |
||||||
|
height: 100px; |
||||||
|
border-radius: 50%; |
||||||
|
margin-top: 15px auto 0px; |
||||||
|
// border: 2px dotted #ccc; |
||||||
|
position: relative; |
||||||
|
cursor: pointer; |
||||||
|
background-color: $gray8; |
||||||
|
img{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
input { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
opacity: 0; |
||||||
|
position: absolute; |
||||||
|
left: 0px; |
||||||
|
top: 0px; |
||||||
|
z-index: 50; |
||||||
|
} |
||||||
|
span { |
||||||
|
color: $blue1; |
||||||
|
font-family: numeralLight; |
||||||
|
height: 20px; |
||||||
|
position: absolute; |
||||||
|
left: 0px; |
||||||
|
top: calc(50% - 10px); |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
z-index: 10; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1441px) { |
||||||
|
.profile-upload { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||||
|
.profile-upload { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 641px) and (max-width: 1007px) { |
||||||
|
.profile-upload { |
||||||
|
width: 80px; |
||||||
|
height: 80px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-width: 640px) { |
||||||
|
.profile-upload { |
||||||
|
width : 80px; |
||||||
|
height : 80px; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,166 @@ |
|||||||
|
@import './Birthdate/index.scss'; |
||||||
|
@import './Document/index.scss'; |
||||||
|
@import './GenderSwitch/index.scss'; |
||||||
|
@import './MultipleSelector/index.scss'; |
||||||
|
@import './Upload/index.scss'; |
||||||
|
|
||||||
|
.MuiOutlinedInput-input { |
||||||
|
font-family: numeralLight !important; |
||||||
|
} |
||||||
|
|
||||||
|
.profile { |
||||||
|
scrollbar-width: 0px; |
||||||
|
padding: 50px 20px 0px; |
||||||
|
&::-webkit-scrollbar { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
header { |
||||||
|
margin: 30px 0px; |
||||||
|
h1 { |
||||||
|
margin-top: 15px; |
||||||
|
font-family: numeralMedium; |
||||||
|
color: white; |
||||||
|
letter-spacing: -1px; |
||||||
|
} |
||||||
|
p { |
||||||
|
font-family: numeralLight; |
||||||
|
color: white; |
||||||
|
text-align: justify; |
||||||
|
} |
||||||
|
} |
||||||
|
&__box { |
||||||
|
width: 100%; |
||||||
|
border: 1px solid $gray1; |
||||||
|
border-radius: 20px; |
||||||
|
&--section { |
||||||
|
width: 45%; |
||||||
|
} |
||||||
|
|
||||||
|
.MuiMenu-list, |
||||||
|
.MuiFormControl-root { |
||||||
|
width: 100%; |
||||||
|
margin: 10px auto !important; |
||||||
|
scrollbar-width: 0px !important; |
||||||
|
&::-webkit-scrollbar { |
||||||
|
display: none !important; |
||||||
|
width: 0px !important; |
||||||
|
} |
||||||
|
option { |
||||||
|
font-family: numeralLight !important; |
||||||
|
} |
||||||
|
.MuiSelect-iconOutlined { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.MuiSelect-outlined.MuiSelect-outlined { |
||||||
|
padding-right: 15px; |
||||||
|
} |
||||||
|
color: $gray7 !important; |
||||||
|
} |
||||||
|
|
||||||
|
button { |
||||||
|
margin-top: 20px; |
||||||
|
margin-bottom: 50px; |
||||||
|
font-family: numeralLight; |
||||||
|
border: 0px; |
||||||
|
background-color: $green3; |
||||||
|
border-radius: 7px; |
||||||
|
color: white; |
||||||
|
padding: 12px 0px; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1441px) { |
||||||
|
.profile { |
||||||
|
h1{ |
||||||
|
font-size: 30px; |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
button { |
||||||
|
font-size: 21px; |
||||||
|
} |
||||||
|
header { |
||||||
|
} |
||||||
|
&__box { |
||||||
|
flex-direction: row; |
||||||
|
justify-content: space-around; |
||||||
|
padding: 30px 10px; |
||||||
|
margin-bottom: 50px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||||
|
.profile { |
||||||
|
h1{ |
||||||
|
font-size: calc(100vw / 50); |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
} |
||||||
|
button { |
||||||
|
font-size: calc(100vw / 70); |
||||||
|
} |
||||||
|
&__box { |
||||||
|
padding: 30px 10px; |
||||||
|
flex-direction: row; |
||||||
|
justify-content: space-around; |
||||||
|
margin-bottom: 50px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 641px) and (max-width: 1007px) { |
||||||
|
.profile { |
||||||
|
padding: 50px 100px 10px; |
||||||
|
button { |
||||||
|
font-size: calc(100vw / 40); |
||||||
|
} |
||||||
|
header { |
||||||
|
margin: 0px; |
||||||
|
margin-top: 30px; |
||||||
|
h1{ |
||||||
|
font-size: calc(100vw / 35); |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: calc(100vw / 55); |
||||||
|
} |
||||||
|
} |
||||||
|
&__box { |
||||||
|
flex-direction: column; |
||||||
|
border: none; |
||||||
|
&--section { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-width: 640px) { |
||||||
|
.profile { |
||||||
|
padding: 0px 10px; |
||||||
|
button { |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
} |
||||||
|
header { |
||||||
|
margin: 0px; |
||||||
|
margin-top: 70px; |
||||||
|
h1{ |
||||||
|
font-size: calc(100vw / 20); |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: calc(100vw / 35); |
||||||
|
} |
||||||
|
} |
||||||
|
&__box { |
||||||
|
flex-direction: column; |
||||||
|
border: none; |
||||||
|
&--section { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 18 KiB |
@ -0,0 +1,118 @@ |
|||||||
|
import React, { useState, useRef, useEffect } from "react"; |
||||||
|
import { useNavigate } from "react-router-dom"; |
||||||
|
import Input from "../../../components/Input"; |
||||||
|
import Button from "../../../components/Button"; |
||||||
|
import Timer from "../../../components/Timer"; |
||||||
|
import onInput from "../../../utils/onInput"; |
||||||
|
import { Link } from "react-router-dom"; |
||||||
|
|
||||||
|
import { connect } from "react-redux"; |
||||||
|
import { user } from "../../../redux/actions"; |
||||||
|
import _ from "lodash"; |
||||||
|
//assets
|
||||||
|
import logoIcon from "./assets/logo.svg"; |
||||||
|
|
||||||
|
function SignUp({ sendOtp, sendPhoneNumber, loginFlag, theme }) { |
||||||
|
const [level, setLevel] = useState("phonenumber"); |
||||||
|
const [signUpFields, setSignUpFiels] = useState(null); |
||||||
|
const [error, setError] = useState(""); |
||||||
|
const [resend, setResend] = useState(false); |
||||||
|
const navigate = useNavigate(); |
||||||
|
|
||||||
|
const onChange = (name, value) => { |
||||||
|
setSignUpFiels({ ...signUpFields, [name]: value }); |
||||||
|
}; |
||||||
|
|
||||||
|
const checkPhoneNumber = () => { |
||||||
|
if ( |
||||||
|
signUpFields?.cellphone?.slice(0, 2) === "09" && |
||||||
|
signUpFields?.cellphone.length === 11 |
||||||
|
) { |
||||||
|
setLevel("otp"); |
||||||
|
setResend(false); |
||||||
|
sendPhoneNumber({ cellphone: signUpFields?.cellphone }); |
||||||
|
setError(undefined); |
||||||
|
} else { |
||||||
|
setError("شماره موبایل خود را چک کنید."); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const checkOtp = () => { |
||||||
|
if (signUpFields?.otp?.length === 4) { |
||||||
|
sendOtp({ |
||||||
|
cellphone: signUpFields?.cellphone, |
||||||
|
otp: signUpFields?.otp, |
||||||
|
userToken: "2", |
||||||
|
applicationToken: "22", |
||||||
|
}); |
||||||
|
setError(undefined); |
||||||
|
} else { |
||||||
|
setError("کد وارد شده را چک کنید."); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const otpInput = useRef(); |
||||||
|
const numberInput = useRef(); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
// numberInput.current.focus();
|
||||||
|
}, []); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (signUpFields?.otp?.length === 4) { |
||||||
|
sendOtp({ |
||||||
|
cellphone: signUpFields?.cellphone, |
||||||
|
otp: signUpFields?.otp, |
||||||
|
userToken: "2", |
||||||
|
applicationToken: "22", |
||||||
|
}); |
||||||
|
} |
||||||
|
}, [signUpFields]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (level === "phonenumber") { |
||||||
|
// numberInput.current.focus();
|
||||||
|
} else { |
||||||
|
// otpInput.current.focus();
|
||||||
|
} |
||||||
|
}, [level]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (loginFlag) { |
||||||
|
navigate("/"); |
||||||
|
} |
||||||
|
}, [loginFlag]); |
||||||
|
const light = theme === "light"; |
||||||
|
return ( |
||||||
|
<div |
||||||
|
className="flex flex-col items-center justify-center w-screen p-4 transform -translate-y-20" |
||||||
|
style={{ height: "calc(100vh - 80px)" }} |
||||||
|
> |
||||||
|
<img src={logoIcon} alt="" className="" /> |
||||||
|
<strong className="w-full leading-6 dark:text-white mt-10"> |
||||||
|
سلام <br /> خوش برگشتی! |
||||||
|
</strong> |
||||||
|
<form className="w-full flex flex-col mt-10"> |
||||||
|
<Input label={"شماره موبایل"} /> |
||||||
|
<br/> |
||||||
|
<Button |
||||||
|
title="ادامه فرایند خرید" |
||||||
|
backgroundColor="bg-blueC0" |
||||||
|
border={{ color: "#196EC055", width: "1px" }} |
||||||
|
width="100%" |
||||||
|
color="text-white" |
||||||
|
/> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default connect( |
||||||
|
(state) => ({ |
||||||
|
loginFlag: state.user.setLogin, |
||||||
|
}), |
||||||
|
{ |
||||||
|
sendOtp: user.otp_login, |
||||||
|
sendPhoneNumber: user.otp, |
||||||
|
} |
||||||
|
)(SignUp); |
||||||
@ -0,0 +1,320 @@ |
|||||||
|
.signup { |
||||||
|
width: 100%; |
||||||
|
height: 100vh; |
||||||
|
position: relative; |
||||||
|
font-family: numeralLight; |
||||||
|
&__back{ |
||||||
|
img{ |
||||||
|
width: 40px; |
||||||
|
} |
||||||
|
} |
||||||
|
&-light { |
||||||
|
b { |
||||||
|
color: $gray5 !important; |
||||||
|
} |
||||||
|
input { |
||||||
|
background-color: white; |
||||||
|
border: 1px solid $green1; |
||||||
|
color: $gray5; |
||||||
|
&::placeholder { |
||||||
|
color: $gray9; |
||||||
|
} |
||||||
|
&:focus { |
||||||
|
border: 1px solid $green4; |
||||||
|
&::placeholder { |
||||||
|
color: $green4; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.signup { |
||||||
|
&__info { |
||||||
|
color: $gray5; |
||||||
|
a { |
||||||
|
color: $green4; |
||||||
|
} |
||||||
|
} |
||||||
|
&__back { |
||||||
|
a { |
||||||
|
color: $gray5; |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&-dark { |
||||||
|
input { |
||||||
|
background-color: $gray8; |
||||||
|
border: 1px solid $gray; |
||||||
|
color: white; |
||||||
|
&:focus { |
||||||
|
border: 1px solid $green4; |
||||||
|
&::placeholder { |
||||||
|
color: $green4; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.signup { |
||||||
|
&__info { |
||||||
|
color: white; |
||||||
|
a { |
||||||
|
color: $green4; |
||||||
|
} |
||||||
|
} |
||||||
|
&__back { |
||||||
|
a { |
||||||
|
color: white; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
img { |
||||||
|
// transform: rotate(-90deg); |
||||||
|
} |
||||||
|
.footer { |
||||||
|
position: fixed; |
||||||
|
bottom: 0px; |
||||||
|
left: 0px; |
||||||
|
} |
||||||
|
button[type="submit"] { |
||||||
|
margin-top: 25px; |
||||||
|
background-color: $green4; |
||||||
|
color: white; |
||||||
|
padding: 10px 0px; |
||||||
|
border: 0px; |
||||||
|
border-radius: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1441px) { |
||||||
|
.signup { |
||||||
|
section { |
||||||
|
width: 410px; |
||||||
|
b { |
||||||
|
color: white; |
||||||
|
font-size: 16px; |
||||||
|
margin-bottom: 30px; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 1.7; |
||||||
|
p { |
||||||
|
} |
||||||
|
} |
||||||
|
input { |
||||||
|
text-align: center; |
||||||
|
border-radius: 8px; |
||||||
|
font-size: 20px; |
||||||
|
padding: 8px 0px; |
||||||
|
direction: ltr; |
||||||
|
&:focus { |
||||||
|
&::placeholder { |
||||||
|
opacity: 0.3; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
button { |
||||||
|
margin-top: 25px; |
||||||
|
font-size: 17px; |
||||||
|
} |
||||||
|
} |
||||||
|
&__info { |
||||||
|
width: 350px; |
||||||
|
margin: 30px auto 0px; |
||||||
|
text-align: center; |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
&__back { |
||||||
|
margin-bottom: 60px; |
||||||
|
a { |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
.desktop { |
||||||
|
img { |
||||||
|
transform: rotate(-90deg); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&__error { |
||||||
|
margin-top: 10px; |
||||||
|
color: $red1; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||||
|
.signup { |
||||||
|
section { |
||||||
|
width: 350px; |
||||||
|
b { |
||||||
|
color: white; |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
margin-bottom: 30px; |
||||||
|
font-weight: 500; |
||||||
|
p { |
||||||
|
// font-size: calc(100vw / 140) !important; |
||||||
|
} |
||||||
|
} |
||||||
|
input { |
||||||
|
text-align: center; |
||||||
|
border-radius: 8px; |
||||||
|
font-size: calc(100vw / 75); |
||||||
|
padding: 8px 0px; |
||||||
|
direction: ltr; |
||||||
|
&:focus { |
||||||
|
&::placeholder { |
||||||
|
opacity: 0.3; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
button { |
||||||
|
margin-top: 25px; |
||||||
|
font-size: calc(100vw / 80); |
||||||
|
} |
||||||
|
} |
||||||
|
&__info { |
||||||
|
width: 300px; |
||||||
|
margin: 20px auto 0px; |
||||||
|
text-align: center; |
||||||
|
font-size: calc(100vw / 110); |
||||||
|
} |
||||||
|
&__back { |
||||||
|
margin-bottom: 50px; |
||||||
|
a { |
||||||
|
font-size: calc(100vw / 110); |
||||||
|
} |
||||||
|
.desktop { |
||||||
|
img { |
||||||
|
transform: rotate(-90deg); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&__error { |
||||||
|
margin-top: 10px; |
||||||
|
color: $red1; |
||||||
|
font-size: calc(100vw / 110); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 641px) and (max-width: 1007px) { |
||||||
|
.signup { |
||||||
|
.footer { |
||||||
|
display: none !important; |
||||||
|
} |
||||||
|
section { |
||||||
|
width: 90%; |
||||||
|
max-width: 700px; |
||||||
|
height: calc(100% - 60px); |
||||||
|
justify-content: center; |
||||||
|
b { |
||||||
|
color: white; |
||||||
|
font-size: calc(100vw / 35); |
||||||
|
margin-bottom: 70px; |
||||||
|
font-weight: 500; |
||||||
|
p { |
||||||
|
// font-size: calc(100vw / 30) !important; |
||||||
|
} |
||||||
|
} |
||||||
|
input { |
||||||
|
text-align: center; |
||||||
|
border-radius: 8px; |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
padding: 10px 14px; |
||||||
|
direction: ltr; |
||||||
|
&:focus { |
||||||
|
&::placeholder { |
||||||
|
opacity: 0.3; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
button { |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
width: 100%; |
||||||
|
max-width: 400px; |
||||||
|
margin: 50px auto 0px; |
||||||
|
} |
||||||
|
} |
||||||
|
&__info { |
||||||
|
width: 400px; |
||||||
|
margin: 20px auto 0px; |
||||||
|
text-align: center; |
||||||
|
font-size: calc(100vw / 40); |
||||||
|
} |
||||||
|
&__back { |
||||||
|
position: fixed; |
||||||
|
top: 100px; |
||||||
|
left: 30px; |
||||||
|
margin-bottom: 50px; |
||||||
|
a { |
||||||
|
font-size: calc(100vw / 110); |
||||||
|
} |
||||||
|
img { |
||||||
|
width: 50px; |
||||||
|
} |
||||||
|
} |
||||||
|
&__error { |
||||||
|
margin-top: 10px; |
||||||
|
color: $red1; |
||||||
|
font-size: calc(100vw / 110); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-width: 640px) { |
||||||
|
.signup { |
||||||
|
section { |
||||||
|
width: 90%; |
||||||
|
max-width: 400px; |
||||||
|
height: calc(100% - 60px); |
||||||
|
justify-content: center; |
||||||
|
b { |
||||||
|
color: white; |
||||||
|
font-size: calc(100vw / 25); |
||||||
|
margin-bottom: 30px; |
||||||
|
font-weight: 500; |
||||||
|
p { |
||||||
|
// font-size: calc(100vw / 30) !important; |
||||||
|
} |
||||||
|
} |
||||||
|
input { |
||||||
|
text-align: center; |
||||||
|
border-radius: 8px; |
||||||
|
font-size: calc(100vw / 22); |
||||||
|
padding: 10px 14px; |
||||||
|
direction: ltr; |
||||||
|
&:focus { |
||||||
|
&::placeholder { |
||||||
|
opacity: 0.3; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
button { |
||||||
|
margin-top: 20px; |
||||||
|
font-size: calc(100vw / 24); |
||||||
|
padding: 12px 0px; |
||||||
|
border: 0px; |
||||||
|
border-radius: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
&__info { |
||||||
|
width: 300px; |
||||||
|
margin: 30px auto 0px; |
||||||
|
text-align: center; |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
line-height: 1.5; |
||||||
|
} |
||||||
|
&__back { |
||||||
|
position: fixed; |
||||||
|
top: 70px; |
||||||
|
left: 20px; |
||||||
|
margin-bottom: 50px; |
||||||
|
a { |
||||||
|
font-size: calc(100vw / 110); |
||||||
|
} |
||||||
|
} |
||||||
|
&__error { |
||||||
|
margin-top: 10px; |
||||||
|
color: $red1; |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
import React, {useState, useEffect} from 'react'; |
||||||
|
import SignUp from './SignUp/index'; |
||||||
|
import Profile from './Profile/index'; |
||||||
|
import Login from './Login/index'; |
||||||
|
import {connect} from 'react-redux'; |
||||||
|
|
||||||
|
|
||||||
|
function Auth(props) { |
||||||
|
const [page, setPage] = useState(props.page); |
||||||
|
useEffect(() => { |
||||||
|
setPage(() => props.page); |
||||||
|
},[props.page]); |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{ page === 'signup' && <SignUp theme={props.theme} /> } |
||||||
|
{ page === 'login' && <Login theme={props.theme} setPage={setPage} /> } |
||||||
|
{ page === 'profile' && <Profile theme={props.theme} /> } |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default connect((state) => ({ |
||||||
|
theme : state.publicApi.theme, |
||||||
|
}))(Auth); |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
@import './Login/index.scss'; |
||||||
|
@import './Profile/index.scss'; |
||||||
|
@import './SignUp/index.scss'; |
||||||
Loading…
Reference in new issue