Commit 2f6d7a96 authored by Francin Anoj Vincent's avatar Francin Anoj Vincent
Browse files

Merge branch '2-login' into 'main'

Resolve "LogIn"

Closes #2

See merge request !7
parents 7e55a491 64c8f7bc
.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
import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import CssBaseline from '@mui/material/CssBaseline';
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import { Dispatch } from "redux";
import { createTheme, ThemeProvider } from '@mui/material/styles';
import './index.css';
import { useAppDispatch } from '../../services/hooks';
import { letterSpacing } from '@mui/system';
import { loginAsUser } from './loginslice';
import { useState } from 'react';
const theme = createTheme();
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 (
<ThemeProvider theme={theme}>
<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>
</ThemeProvider>
);
}
export default SignIn;
import * as React from 'react';
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, 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;
}
const LoginModal:React.FC<SignInProps> = ({isLoginModalVisible, setIsModalVisible}) => {
const { setUser, logOut } = actionDispatch(useAppDispatch());
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;
}
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
}
})
......@@ -60,7 +60,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}>
......
......@@ -6,11 +6,11 @@ import { setSearchQuery } from "../../pages/mainPageSlice";
import { logOut } from "../login/loginslice"
import { selectUserIsLoggedIn } from "../../services/selectors";
import { useState } from "react";
import SignIn from "../login";
import { Appbar } from "react-native-paper";
import { StyleSheet } from "react-native";
import { useFonts, Quicksand_600SemiBold} from '@expo-google-fonts/quicksand';
import AppLoading from "expo-app-loading";
import LoginModal from "../login/login";
const actionDispatch = (dispatch: Dispatch) => ({
setSearch: (query: string) => dispatch(setSearchQuery(query)),
......@@ -39,10 +39,6 @@ const NavBar: React.FC<NavBarProps> = ({isLoginModalVisible, onCloseClick, close
'Quicksand-SemiBold': require('../../assets/fonts/Quicksand-SemiBold.ttf'),
})
const handleUser = () => {
console.log("TODO, must fix login modal");
}
const getIcon = () => {
if (isSideBarVisible) {
return "menu-open"
......@@ -52,7 +48,7 @@ const NavBar: React.FC<NavBarProps> = ({isLoginModalVisible, onCloseClick, close
}
if (!fontsLoaded) {
return <AppLoading />
return (<AppLoading />)
}
else {
return (
......@@ -62,7 +58,7 @@ const NavBar: React.FC<NavBarProps> = ({isLoginModalVisible, onCloseClick, close
onPress={closeSideBar}
/>
<Appbar.Content title="What To Watch?" titleStyle={{fontFamily:'Quicksand-SemiBold', fontSize:30}}/>
<Appbar.Action icon="account" />
<Appbar.Action icon="account" onPress={onCloseClick} />
</Appbar.Header>
);
}
......
import { ApolloClient, InMemoryCache } from "@apollo/client";
import {DB_URL} from "@env";
//import "dotenv/config"
//console.log(process.env.DB_URL)
console.log(DB_URL)
export const apolloClient = new ApolloClient({
uri: "http://it2810-29.idi.ntnu.no:4000/graphql",
//uri: "http://localhost:4000/graphql",
uri: process.env.DB_URL ? process.env.DB_URL : "http://localhost:4000/graphql",
cache: new InMemoryCache(),
});
......@@ -21,6 +21,7 @@ import MovieTable from "../components/moviesview";
import UserDisplay from "../components/userDisplay";
import { Dimensions, ScrollView, StyleSheet, useWindowDimensions, View } from "react-native";
import styles from "./styles";
import LoginModal from "../components/login/login";
import MenuDrawer from "react-native-side-drawer";
......@@ -75,13 +76,6 @@ export const MainPage: FunctionComponent = () => {
setIsLoginModalVisible((wasModalVisible) => !wasModalVisible);
};
const closeLoginModal = () => {
if (isLoginModalVisible){
setIsLoginModalVisible(false);
}
}
const [isSideBarVisible, setSideBarVisible] = useState(false);
const closeSideBar = () => {
......@@ -97,6 +91,7 @@ export const MainPage: FunctionComponent = () => {
return (
<View style={{width:width}}>
<View>
<LoginModal isLoginModalVisible={isLoginModalVisible} setIsModalVisible={toggleLogInModal}/>
<NavBar
onCloseClick={toggleLogInModal}
isLoginModalVisible={isLoginModalVisible}
......
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