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"; |
||||
const userProduct = { |
||||
addVOD: |
||||
list: |
||||
(data = {}) => |
||||
async (dispatch) => { |
||||
await proxy.get("userProduct/list", data, { dispatch }); |
||||
}, |
||||
info: |
||||
(data = {}) => |
||||
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; |
||||
@ -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