Skip to content
GitLab
Commit 4193d568 authored by Francin Anoj Vincent's avatar Francin Anoj Vincent
Browse files

(#2) Completed loginModal

parent 75552e90
Hide whitespace changes
Inline Side-by-side
frontend/src/components/login/index.css deleted 100644 → 0
View file @ 75552e90
.sign-in-container{
position: absolute;
z-index: 1;
background-color: gray;
opacity: 90%;
top: 72px;
right: 0px;
color: white;
border-bottom-left-radius: 10px;
-webkit-box-shadow: -9px 10px 28px -6px #000000;
box-shadow: -9px 10px 28px -6px #000000;
}
.submit-sign{
background-color: rgba(0, 0, 0, 1) !important;
transition: background-color 0.2s;
}
.submit-sign:hover{
background-color: rgba(0, 0, 0, 0.8) !important;
}
.input-sign > div::after{
border-bottom: 2px solid white !important;
}
.input-sign > label.Mui-focused{
color:white !important;
}
@media (max-width:810px){
.sign-in-container{
top:64px;
}
}
\ No newline at end of file
frontend/src/components/login/index.tsx deleted 100644 → 0
View file @ 75552e90
import * as React from 'react';
import { Dispatch } from "redux";
import './index.css';
import { useAppDispatch } from '../../services/hooks';
import { loginAsUser } from './loginslice';
import { useState } from 'react';
import { Button } from 'react-native';
import { Avatar } from 'react-native-paper';
import { Container } from 'react-bootstrap';
const actionDispatch = (dispatch: Dispatch) => ({
setUser: (query: string) => dispatch(loginAsUser(query)),
});
interface SignInProps{
isLoginModalVisible:boolean;
onCloseClick: () => void;
}
/**
* This is the component for LogIn. The component will show a login form. And setUser based on username.
* This component use redux to update state.
*
* @param isLoginModalVisible, onCloseClick
* @returns a login form if isLoginModalVisible = false, if not it will return nothing.
*/
const SignIn: React.FC<SignInProps> = ({isLoginModalVisible, onCloseClick}) => {
const { setUser } = actionDispatch(useAppDispatch());
const [value, setValue] = useState("");
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
console.log(value);
setUser(value);
onCloseClick();
};
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setValue(event.target.value);
}
if (!isLoginModalVisible) {
return null;
}
return (
<Container className="sign-in-container" component="div" maxWidth="xs">
<CssBaseline />
<Box
sx={{
marginTop: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Avatar sx={{ m: 1, bgcolor: 'black' }}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
<TextField
margin="normal"
required
fullWidth
id="username"
label="Username"
name="username"
value={value}
autoComplete="username"
variant="standard"
autoFocus
className="input-sign"
onChange={handleChange}
/>
<Button
type="submit"
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
className="btn-small submit-sign"
>
Sign In
</Button>
</Box>
</Box>
</Container>
);
}
export default SignIn;
frontend/src/components/login/login.tsx
View file @ 4193d568
import * as React from 'react';
import { Modal, Portal, Text, Button, Provider } from 'react-native-paper';
import { Modal, StyleSheet, View } from 'react-native';
import { Portal, Text, Button, Provider, Title, TextInput, IconButton } from 'react-native-paper';
import { useAppDispatch } from '../../services/hooks';
import { loginAsUser } from './loginslice';
import { loginAsUser, logOut } from './loginslice';
import { useState } from 'react';
import { Dispatch } from "redux";
import { useFonts } from '@expo-google-fonts/quicksand';
import AppLoading from 'expo-app-loading';
import { useSelector } from 'react-redux';
import { selectUserIsLoggedIn } from '../../services/selectors';
const actionDispatch = (dispatch: Dispatch) => ({
setUser: (query: string) => dispatch(loginAsUser(query)),
});
logOut: () => dispatch(logOut()),
});
interface SignInProps{
isLoginModalVisible:boolean;
setIsModalVisible: (isModalVisible:boolean) => void;
}
isLoginModalVisible:boolean;
setIsModalVisible: (isModalVisible:boolean) => void;
}
const LoginModal= () => {
const { setUser } = actionDispatch(useAppDispatch());
/*
const [value, setValue] = useState("");
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
console.log(value);
setUser(value);
hideModal();
};
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setValue(event.target.value);
}
if (!isLoginModalVisible) {
return null;
}
*/
const [visible, setVisible] = useState(false);
const LoginModal:React.FC<SignInProps> = ({isLoginModalVisible, setIsModalVisible}) => {
const { setUser, logOut } = actionDispatch(useAppDispatch());
const showModal = () => {
//isLoginModalVisible = true;
setVisible(true);
}
const hideModal = () => {
//isLoginModalVisible = false;
setVisible(false);
const [value, setValue] = useState("");
const isLoggedIn = useSelector(selectUserIsLoggedIn);
let [fontsLoaded] = useFonts({
'Quicksand-Medium': require('../../assets/fonts/Quicksand-Medium.ttf'),
'Quicksand-Regular': require('../../assets/fonts/Quicksand-Regular.ttf'),
})
const handleSubmit = () => {
setUser(value);
setIsModalVisible;
}
const containerStyle = {backgroundColor: 'white', padding: 20};
return (
<Provider>
<Portal>
<Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
<Text>Example Modal. Click outside this area to dismiss.</Text>
</Modal>
</Portal>
<Button style={{marginTop: 10}} onPress={showModal}>
Show
</Button>
</Provider>
);
if (!fontsLoaded) {
return <AppLoading />
}
else {
return (
<Modal
visible={isLoginModalVisible}
onRequestClose={() => {setIsModalVisible(!isLoginModalVisible);}}
animationType="slide"
transparent={true}
>
<View style={styles.containerStyle}>
<View style={styles.containerInnerStyle}>
<View style={{flexDirection:'row-reverse'}}>
<IconButton
icon="close"
size={30}
color="white"
onPress={()=>{setIsModalVisible(!isLoginModalVisible)}}
/>
</View>
{
isLoggedIn
? <>
<Title
style={{
color: 'white',
fontFamily: 'Quicksand-Medium',
fontSize: 30,
textAlign: 'center',
padding: 15,
}}
>Sign Out</Title>
<View
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '50%',
}}
>
<Button
mode="contained"
onPress={() => logOut()}
color="white"
labelStyle={{
fontFamily: 'Quicksand-Regular',
}}
style={{
margin: 15,
}}
>
Sign Out
</Button>
</View>
</>
: <>
<Title
style={{
color: 'white',
fontFamily: 'Quicksand-Medium',
fontSize: 30,
textAlign: 'center',
padding: 15,
}}
>Sign In</Title>
<View
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '50%',
}}
>
<TextInput
label="Username"
value={value}
onChangeText={text => setValue(text)}
style={{
fontFamily: 'Quicksand-Regular',
width: '60%',
}}
activeUnderlineColor='black'
/>
<Button
mode="contained"
onPress={handleSubmit}
color="white"
labelStyle={{
fontFamily: 'Quicksand-Regular',
}}
style={{
margin: 15,
}}
>
Log In
</Button>
</View>
</>
}
</View>
</View>
</Modal>
);
}
};
export default LoginModal;
const styles = StyleSheet.create({
containerStyle:{
display:'flex',
justifyContent: "center",
alignItems: "center",
flex:1,
},
containerInnerStyle:{
backgroundColor: "black",
borderRadius: 20,
padding: 5,
width:'100%',
height:'50%',
elevation: 2
}
})
frontend/src/components/moviedetail/MovieModal.tsx
View file @ 4193d568
......@@ -61,7 +61,7 @@ const MovieModal: React.FC<ModalProps> = ({movie, setIsModalVisible, isModalVisi
size={30}
color="white"
onPress={()=>{setIsModalVisible(!isModalVisible)}}
style={styles.icon}
/* style={styles.icon}*/
/>
</View>
<View style={styles.headerContainer}>
......
frontend/src/components/navbar/index.tsx
View file @ 4193d568
......@@ -39,45 +39,16 @@ const NavBar: React.FC<NavBarProps> = ({isLoginModalVisible, onCloseClick}) => {
'Quicksand-SemiBold': require('../../assets/fonts/Quicksand-SemiBold.ttf'),
})
// const searchEvent = () => {
// setSearch(localSearch);
// }
const handleMenu = () => {
console.log("TODO, must fix filter/sidebar");
}
const handleUser = () => {
console.log("TODO, must fix login modal");
}
// const keyPress = (event: React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>) => {
// if (event.keyCode === 13) {
// setSearch(localSearch);
// }
// };
// function inputChange(
// event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
// ) {
// setLocalSearch(event.target.value);
// }
if (!fontsLoaded) {
return (<AppLoading />)
}
else {
return (
<>
<Appbar.Header style={{backgroundColor:'black'}}>
<Appbar.Action icon="menu" />
<Appbar.Content title="What To Watch?" titleStyle={{fontFamily:'Quicksand-SemiBold', fontSize:30}}/>
{isLoggedIn ? <Appbar.Action icon="account" onPress= {setLogOut}/> : <Appbar.Action icon="menu" onPress= {onCloseClick} />}
<Appbar.Action icon="account" onPress={onCloseClick} />
</Appbar.Header>
<LoginModal/>
</>
);
}
}
......
frontend/src/pages/MainPage.tsx
View file @ 4193d568
......@@ -21,6 +21,7 @@ import MovieTable from "../components/moviesview";
import UserDisplay from "../components/userDisplay";
import { ScrollView, View } from "react-native";
import styles from "./styles";
import LoginModal from "../components/login/login";
const actionDispatch = (dispatch: Dispatch) => ({
......@@ -74,18 +75,12 @@ export const MainPage: FunctionComponent = () => {
setIsLoginModalVisible((wasModalVisible) => !wasModalVisible);
};
const closeLoginModal = () => {
if (isLoginModalVisible){
setIsLoginModalVisible(false);
}
}
return (
<View>
<View>
<NavBar onCloseClick={toggleLogInModal} isLoginModalVisible={isLoginModalVisible}/>
<LoginModal isLoginModalVisible={isLoginModalVisible} setIsModalVisible={toggleLogInModal}/>
</View>
<View style={[styles.displayContainer]}>
<UserDisplay />
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment