Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New login and signup #1117

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,12 @@ import { colors } from "../../../colors";
const styles = theme => ({
primaryButtonStyle: {
backgroundColor: 'var(--primary-color3)',
borderRadius: 30,
borderRadius: theme.spacing(1),
color: 'white',
'&.disabled': {
color: '#7BA8AB',
background: 'rgba(0, 184, 196, 0.10)',
},
'&:hover': {
backgroundColor: 'var(--secondary-color6)',
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,127 +1,188 @@
import { fade } from '@mui/material/styles';

const styles = theme => ({
root: {
paddingTop: '2em',
paddingBottom: '2em',
flex: '1 0 auto',
// background: 'var(--primary-color2)',
// background:
// 'linear-gradient(to bottom, var(--primary-color2) 0%, var(--primary-color2) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)',
},
containerStyle: {
maxWidth: '600px',
[theme.breakpoints.up('1600')]: {
maxWidth: '950px',
export const mainStyles = theme => ({
wrapper: {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is this now mainStyles? we should revert back to styles. This only serves to add more diff and doesn't improve the code in any way

marginTop: theme.spacing(10),
[theme.breakpoints.down('lg')]: {
marginTop: theme.spacing(10),
},
[theme.breakpoints.down('400')]: {
marginTop:'30px',
[theme.breakpoints.down('md')]: {
marginTop: theme.spacing(5),
},
},
cardStyle: {
border: 0,
borderRadius: 15,
boxShadow: '0 3px 5px 2px rgba(0, 0, 0, .12)',
color: 'white',
padding: '0 30px',
},
titleStyle: {
fontWeight: 'bold',
fontSize: '1.7rem',
[theme.breakpoints.up('1600')]: {
fontSize: '2.5rem',
},
gridContainer: {
alignItems: 'center',
borderRadius: theme.spacing(1),
},
descStyle: {
[theme.breakpoints.up('1600')]: {
fontSize: '1.7rem',
header: {
color: theme.palette.text.primary,
fontSize: theme.spacing(5),
fontWeight: 800,
lineHeight: '50px',
[theme.breakpoints.down('sm')]: {
lineHeight: 'unset',
fontSize: '15px',
},
},
customLabelStyle: {
'&.MuiFormLabel-root.Mui-focused': {
color: 'var(--primary-color3)',
subHeader: {
color: theme.palette.text.primary,
fontSize: theme.spacing(3),
fontWeight: 800,
lineHeight: 'normal',
[theme.breakpoints.down('sm')]: {
fontSize: '18px',
fontWeight: 700,
},
[theme.breakpoints.up('1600')]: {
fontSize: '1.7rem',
},
text: {
fontSize: theme.spacing(2),
fontWeight: 400,
lineHeight: '32px',
color: theme.palette.text.secondary,
[theme.breakpoints.down('sm')]: {
fontSize: '12px',
lineHeight: 'unset',
},
},
customInputStyle: {
borderRadius: 15,
'&.MuiOutlinedInput-notchedOutline': {
border: '2px solid var(--primary-color3)',
boxShadow: `rgba(var(--primary-color3), 0.2rem) 0 0 0 0.2rem`,
header2: {
color: theme.palette.text.primary,
fontSize: '30px',
fontWeight: 700,
lineHeight: '50px',
},
subHeader2: {
color: theme.palette.text.primary,
fontSize: '18px',
fontWeight: 600,
lineHeight: '24px',
},
text2: {
marginBottom: '40px'
},
wizard: {
width: '100%',
},
outlinedInput: {
borderRadius: theme.spacing(1),
paddingInline: theme.spacing(3),
gap: theme.spacing(3),
'& .MuiOutlinedInput-input': {
padding: '20px 0',
},
'&.MuiOutlinedInput-root': {
'&:hover fieldset': {
border: '2px solid var(--primary-color3)',
boxShadow: `rgba(var(--primary-color3), 0.2rem) 0 0 0 0.2rem`,
border: `1px solid ${theme.palette.primary.light}`,
},
'&.Mui-focused fieldset': {
border: '2px solid var(--primary-color3)',
boxShadow: `rgba(var(--primary-color3), 0.2rem) 0 0 0 0.2rem`,
},
[theme.breakpoints.up('1600')]: {
fontSize: '1.7rem',
border: `2px solid ${theme.palette.primary.light}`,
},
},
},
secondaryLink: {
color: 'var(--primary-color3)',
'&:hover': {
color: 'var(--secondary-color6)',
formControl: {
gap: theme.spacing(3),
[theme.breakpoints.down('md')]: {
gap: theme.spacing(2),
},
[theme.breakpoints.up('1600')]: {
fontSize: '1.2rem',
[theme.breakpoints.down('sm')]: {
gap: theme.spacing(1),
},
},
center: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
inputIcon: {
fontSize: theme.spacing(3),
fill: theme.palette.grey[400],
},
dividerText: {
whiteSpace: 'nowrap',
[theme.breakpoints.up('1600')]: {
fontSize: '1.2rem',
button: {
fontSize: '18px',
fontWeight: 600,
paddingBlock: '20px',
[theme.breakpoints.down('sm')]: {
fontSize: '12px',
padding: '5px 16px',
},
},
divider: {
width: '30%',
marginRight: '1em',
marginLeft: '1em',
[theme.breakpoints.up('1600')]: {
height: '0.1em',
spaceBackground: {
width: '100%',
height: '100%',
},
backContainer: {
borderRadius: '50%',
background: theme.palette.background.default,
padding: '10px',
},
backIcon: {
fontSize: theme.spacing(3),
},
gridControl: {
background: theme.palette.background.default,
padding: '0 40px',
boxShadow: '2px 4px 5px 0px rgba(0, 184, 196, 0.05)',
},
});

export const step1Styles = theme => ({
paper: {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

step1Styles, step2Styles, step3Styles, step4Styles, step5Styles, should all be inside the styles. These are just form fields and they are to be in the same place

cursor: 'pointer',
width: '350px',
height: '300px',
borderRadius: theme.spacing(1),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: theme.spacing(2),
justifyContent: 'center',
[theme.breakpoints.down('sm')]: {
padding: theme.spacing(2, 3),
width: '342px',
height: '124px',
alignItems: 'unset',
},
[theme.breakpoints.down('510')]: {
width: '20%',
'&.selected': {
border: '3px solid var(--primary-color3)',
},
[theme.breakpoints.down('381')]: {
marginLeft: '0.5em',
marginRight: '0.5em',
},
icon: {
fill: '#00B8C4',
fontSize: '64px',
[theme.breakpoints.down('sm')]: {
fontSize: 'unset',
height: '32px',
width: '32px',
},
},
textDecorationNone: {
textDecoration: 'none',
});

export const step2Styles = theme => ({
container: {
background: theme.palette.background.paper,
borderRadius: theme.spacing(1),
padding: theme.spacing(8, 5),
boxShadow: '2px 4px 5px 0px rgba(0, 184, 196, 0.05)',
},
errorBox: {
width: '100%',
padding: '1em',
borderRadius: 6,
borderWidth: '1px',
borderColor: 'var(--primary-color2)',
backgroundColor: 'var(--secondary-color1)',
[theme.breakpoints.up('1600')]: {
fontSize: '1.5rem',
},
});

export const step3Styles = theme => ({});

export const step4Styles = theme => ({});
export const step5Styles = theme => ({
label: {
gap: theme.spacing(3),
},
error: {
color: 'var(--primary-color2)',
formControl: {
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(5),
alignItems: 'left',
},
fieldHelperTextStyle: {
[theme.breakpoints.up('1600')]: {
fontSize: '1.2rem',
fieldSet: {
padding: `20px ${theme.spacing(3)}`,
borderWidth: '1px',
borderColor: theme.palette.grey[300],
borderStyle: 'solid',
borderRadius: theme.spacing(1),
'&:hover': {
borderColor: theme.palette.primary.light,
},
'&.selected': {
borderWidth: '3px',
borderColor: theme.palette.primary.light,
},
},
});

export default styles;
54 changes: 32 additions & 22 deletions zubhub_frontend/zubhub/src/components/Navbar/Navbar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,8 @@ function NavBar(props) {
const [searchType, setSearchType] = useState(getQueryParams(window.location.href).get('type') || SearchType.PROJECTS);
const formRef = useRef();
const token = useSelector(state => state.auth.token);
const pathname = props.location?.pathname
const hideSearchAndActions = pathname === '/signup' || pathname === '/login';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@coderatomy is this part of the requirements? I think a user should be allowed access to the search box even in the signup page (since are user can search for things while not logged in)


const [state, setState] = React.useState({
username: null,
Expand Down Expand Up @@ -215,11 +217,14 @@ function NavBar(props) {
<AppBar className={classes.navBarStyle}>
<Container id="navbar-root" className={classes.mainContainerStyle}>
<Toolbar className={classes.toolBarStyle}>
<Hidden mdUp>
<Box style={{ marginRight: 10 }} onClick={toggleDrawer}>
<MenuIcon />
</Box>
</Hidden>
{!hideSearchAndActions && (
<Hidden mdUp>
<Box style={{ marginRight: 10 }} onClick={toggleDrawer}>
<MenuIcon />
</Box>
</Hidden>
)}

<Box className={classes.logoStyle}>
<Link to="/">
<img src={zubhub?.header_logo_url ? zubhub.header_logo_url : logo} alt="logo" />
Expand Down Expand Up @@ -268,6 +273,8 @@ function NavBar(props) {
))}
</Select>
</Box>
{
!hideSearchAndActions && (
<form
action="/search"
className={clsx(classes.searchFormStyle, classes.removeOn894)}
Expand Down Expand Up @@ -334,25 +341,28 @@ function NavBar(props) {
</FormGroup>
</FormControl>
</form>
)
}
</Box>
<div className={classes.navActionStyle}>
<SearchOutlined onClick={toggleSearchBar} className={classes.addOn894} />

<NotificationButton />
<Hidden smDown>
{props.auth.username && (
<Box>
<Typography className={clsx(common_classes.title2, classes.username)}>
{props.auth.username}
</Typography>
{/* Todo: Change this subheading based on current role of user */}
<Typography className="">Creator</Typography>
</Box>
)}
</Hidden>

{!hideSearchAndActions && (
<div className={classes.navActionStyle}>
<SearchOutlined onClick={toggleSearchBar} className={classes.addOn894} />

<NotificationButton />
<Hidden smDown>
{props.auth.username && (
<Box>
<Typography className={clsx(common_classes.title2, classes.username)}>
{props.auth.username}
</Typography>
{/* Todo: Change this subheading based on current role of user */}
<Typography className="">Creator</Typography>
</Box>
)}
</Hidden>
<AvatarButton navigate={props.navigate} />
</div>
)}
</Toolbar>
{open_search_form ? (
<ClickAwayListener onClickAway={e => handleSetState(closeSearchFormOrIgnore(e))}>
Expand Down Expand Up @@ -455,4 +465,4 @@ const mapDispatchToProps = dispatch => {
};
};

export default connect(mapStateToProps, mapDispatchToProps)(NavBar);
export default connect(mapStateToProps, mapDispatchToProps)(NavBar);
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { FormHelperText } from '@mui/material';
import React from 'react';

const CustomErrorMessage = props => {
const { name, touched, errors } = props;
return <FormHelperText error>{touched[name] && errors[name] && <>{errors[name]}</>}</FormHelperText>;
};

export default CustomErrorMessage;
Loading
Loading