Skip to content

Commit

Permalink
login & register fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@diablo1408
diablo1408 committed Jan 3, 2021
1 parent 5a3812a commit bdefd8f
Show file tree
Hide file tree
Showing 10 changed files with 156 additions and 252 deletions.
1 change: 1 addition & 0 deletions frontend/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vision</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<!-- Your custom styles (optional) -->
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/ImageTable/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function ImageTable({ images, currentPage, pageSize, genre }) {
"base64"
);
const coverImage = "data:image/jpeg;base64," + encodedImage;
return( <div className="col-3 ">
return( <div className="col-4 ">
<img src={coverImage} className="gallery-img" alt={"cover"} />
</div>

Expand Down
113 changes: 47 additions & 66 deletions frontend/src/pages/Login/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,12 @@
import React from "react";
import Joi from "@hapi/joi";
import "../assets/css/bootstrap.css";
import "../assets/css/bootstrap.min.css";
import "../assets/css/mdb.css";
import "../assets/css/mdb.lite.css";
import "../assets/css/mdb.lite.min.css";
import "../assets/css/mdb.min.css";
import "../assets/css/style.min.css";

import _ from "lodash";
import { connect } from "react-redux";
import { signIn } from "../../actions/authAction";
// import Button from "../../components/common/Button";
import "./style.css";
// import {Helmet} from 'react-helmet';
import {Helmet} from 'react-helmet';

class Login extends React.Component {
state = {
Expand Down Expand Up @@ -80,59 +74,52 @@ class Login extends React.Component {
const { email, password } = data;
const { authMessage, loggedIn,userData} = this.props;
if (loggedIn) this.props.history.push("/dashboard");
// console.log("logged",loggedIn);
console.log("error",errors);
console.log("logged",loggedIn);
return (
<div class="login-page">
<div class="mask rgba-stylish-strong h-100 d-flex justify-content-center align-items-center">
<div class="container">
<div class="row">
<div class="col-xl-5 col-lg-6 col-md-10 col-sm-12 mx-auto mt-5">

<div class="card wow fadeIn" data-wow-delay="0.3s">
<div class="card-body">

<div class="form-header purple-gradient">
<h3 class="font-weight-500 my-2 py-1"><i class="fas fa-user"></i> Log in:</h3>

<div className="bg-image-login ">
<div className=" d-flex h-100 justify-content-center align-items-center">
<div className="container">
<div className="row">
<div className="col-xl-5 col-lg-6 col-md-10 col-sm-12 mx-auto mt-5">

<div className="card wow fadeIn" data-wow-delay="0.3s">
<div className="card-body">

<div className="form-header purple-gradient">
<h3 className="font-weight-500 my-2 py-1"><i className="fas fa-user"></i> Log in</h3>
</div>

{/* <div class="md-form">
<i class="fas fa-user prefix white-text"></i>
<input
type="text"
id="orangeForm-name"
class="form-control"
/>
<label for="orangeForm-name">Your name</label>
</div> */}

<form onSubmit={this.handleSubmit} onClick={this.saveUserDetais(userData,loggedIn)}>
<div class="md-form">
<i class="fas fa-envelope prefix white-text" style={{color:"black"}}></i>
<div className="md-form">
<i className="fas fa-envelope prefix " ></i>
<input
type="email"
name="email"
error={errors["email"]}
id="orangeForm-email"
class="form-control"
className="form-control"
onChange={this.handleChange}
value={email}
autoFocus
/>
<label for="orangeForm-email">Your email</label>
<label htmlFor="orangeForm-email">Your email</label>
{ errors["email"] && <div className="alert alert-danger"> {errors["email"]} </div> }
</div>

<div class="md-form">
<i class="fas fa-lock prefix white-text"></i>
<div className="md-form">
<i className="fas fa-lock prefix "></i>
<input
name="password"
type="password"
error={errors["password"]}
onChange={this.handleChange}
value={password}
id="orangeForm-pass"
class="form-control"
className="form-control"
/>
<label for="orangeForm-pass">Your password</label>
<label htmlFor="orangeForm-pass">Your password</label>
{ errors["password"] && <div className="alert alert-danger"> {errors["password"]} </div> }
</div>

Expand All @@ -146,23 +133,20 @@ class Login extends React.Component {
)}


<div class="text-center">
<button class="btn purple-gradient btn-lg"
onClick={this.handleSubmit}>Log In</button>
<div class="inline-ul text-center d-flex justify-content-center">
{/* <a class="p-2 m-2 fa-lg tw-ic"><i class="fab fa-twitter white-text"></i></a>
<a class="p-2 m-2 fa-lg li-ic"><i class="fab fa-linkedin-in white-text"> </i></a>
<a class="p-2 m-2 fa-lg ins-ic"><i class="fab fa-instagram white-text"> </i></a> */}
<div style = {{
display : "flex",
flexDirection : "column"
}}>
<a href="http://localhost:3000/register" style={{
color:"blue"}}>New User</a>
<div style = {{backgroundColor: "blue",
width: "70px",
height: "1px"}}/>
</div>

<div className="text-center">
<button className="btn purple-gradient btn-lg"
onClick={this.handleSubmit}>Login</button>
<div className="inline-ul text-center d-flex justify-content-center">


<div className="d-flex flex-row mt-5">
<span className=" text-right mt-2 text-info">No Account?</span>
<a href="http://localhost:3000/register"
> <button type="button" className="btn btn-info btn-rounded btn-sm"> Register </button></a>
</div>


</div>
</div>
</form>
Expand All @@ -172,16 +156,13 @@ class Login extends React.Component {
</div>
</div>
</div>

</div>

</div>
{/* <Helmet>
<meta charSet="utf-8" />
<script type="text/javascript" src={"./js/jquery-3.4.1.min.js"} />
<script type="text/javascript" src={"./js/popper.min.js"} />
<script type="text/javascript" src={"./js/bootstrap.min.js"} />
<script type="text/javascript" src={"./js/mdb.min.js"} />
</Helmet> */}

</div>



);
}
}
Expand All @@ -198,4 +179,4 @@ const mapDispatchToProps = (dispatch) => {
};
};

export default connect(mapStateToProps, mapDispatchToProps)(Login);
export default connect(mapStateToProps, mapDispatchToProps)(Login);
11 changes: 1 addition & 10 deletions frontend/src/pages/MainPage/MultiDropDown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,16 +64,7 @@ class MultiDropDown extends React.Component{
<form className="dropdown-menu" aria-labelledby="dropdownMenuButton">


<a className="dropdown-item">
<div className="custom-control custom-checkbox"
>
<input type="checkbox" className="custom-control-input" id="checkbox1" name = {"All"}
onChange = {this.onChangeCheck}
/>

<label className="custom-control-label" htmlFor="checkbox1">All</label>
</div>
</a>

{
genres.map((ele)=>{
return(
Expand Down
16 changes: 1 addition & 15 deletions frontend/src/pages/MainPage/header-index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,7 @@ class Header extends React.Component {
};

componentDidMount() {
// const fpath = "/assets/";
// let scripts = [
// "js/jquery-3.4.1.min.js"
// // "js/popper.min.js",
// // "js/bootstrap.min.js",
// // "js/mdb.min.js",
// // "js/dropdown_label_select.js",
// ];
// for(let i = 0;i<scripts.length ;i++){
// const script = scripts[i];
// appendScript(fpath + script);
// }

this.props.userDetail();
this.props.userDetail();
}

LogOut = () => {
Expand Down Expand Up @@ -130,7 +117,6 @@ class Header extends React.Component {
<div className="list-group list-group-flush">
<a href="#" className="list-group-item active waves-effect">
<i className="far fa-images mr-3"></i>Photos

</a>
{/* <a href="http://localhost:3000/profile" class="list-group-item list-group-item-action waves-effect">
<i class="fas fa-user mr-3"></i>Profile</a> */}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/MainPage/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ class MainPage extends React.Component {
Images found.
</p>
<hr></hr>
<div className="row">




Expand Down Expand Up @@ -214,7 +214,7 @@ class MainPage extends React.Component {
onPageChange={this.onPageChange}
currentPage={currentPage}
/>
</div>

</div>
</main>
<Footer />
Expand Down
34 changes: 11 additions & 23 deletions frontend/src/pages/Profile/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,8 @@
import React from "react";
import Joi from "@hapi/joi";
import "../assets/css/bootstrap.css";
import "../assets/css/bootstrap.min.css";
import "../assets/css/mdb.css";
import "../assets/css/mdb.lite.css";
import "../assets/css/mdb.lite.min.css";
import "../assets/css/mdb.min.css";
import "../assets/css/style.min.css";
import { connect } from "react-redux";
import { getOTP, updateandVerify ,userDetail,addUserImage,signOut} from "../../actions/authAction";
import "./style.css";

// import {Helmet} from 'react-helmet';
import { Redirect } from 'react-router-dom';

Expand Down Expand Up @@ -137,14 +130,15 @@ class Profile extends React.Component {
<div class="sidenav-bg mask-strong"></div>
</div>
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
<div
{/* <div
style = {{fontSize: "x-large",
fontWeight : "400",
color: "blue"}}
>PhotoCat</div>
>PhotoCat</div> */}
<ul class="nav navbar-nav nav-flex-icons ml-auto">
<li class="nav-item dropdown">
<a class="nav-link " href="http://localhost:3000/dashboard" id="userDropdown" style = {{color : "black"}}>

<a class="nav-link " href="/dashboard" id="userDropdown" style = {{color : "black"}}>
<i class="fas fa-home"></i> <span class=" clearfix d-none d-sm-inline-block">Dashboard</span>
</a>
</li>
Expand Down Expand Up @@ -203,7 +197,7 @@ class Profile extends React.Component {
<div class="card card-cascade narrower">

<div class="view view-cascade gradient-card-header mdb-color lighten-3">
<h5 class="mb-0 font-weight-bold">Edit Account</h5>
<h5 class="mb-0 font-weight-bold">Account Details</h5>
</div>

<div class="card-body card-body-cascade text-center">
Expand All @@ -213,7 +207,7 @@ class Profile extends React.Component {


<div class="md-form">
<i class="fas fa-user prefix set_icon"></i>

<input
type = "text"
name="username"
Expand All @@ -228,7 +222,7 @@ class Profile extends React.Component {
<label for="orangeForm-name">Your name</label>
</div>
<div class="md-form">
<i class="fas fa-envelope prefix set_icon"></i>

<input
name="email"
id="orangeForm-email"
Expand All @@ -243,7 +237,7 @@ class Profile extends React.Component {
</div>

<div class="md-form">
<i class="fas fa-lock prefix set_icon"></i>

<input
name="password"
id="orangeForm-pass"
Expand Down Expand Up @@ -305,7 +299,7 @@ class Profile extends React.Component {
</div>
:
<div class="text-center">
<button class="btn btn-indigo btn-rounded mt-5"
<button class="btn btn-info btn-lg btn-rounded mt-5"
type="button"
onClick={this.handleSubmit}
>Update</button>
Expand All @@ -320,13 +314,7 @@ class Profile extends React.Component {
</section>
</div>
</main>
{/* <Helmet>
<meta charSet="utf-8" />
<script type="text/javascript" src={"./js/jquery-3.4.1.min.js"} />
<script type="text/javascript" src={"./js/popper.min.js"} />
<script type="text/javascript" src={"./js/bootstrap.min.js"} />
<script type="text/javascript" src={"./js/mdb.min.js"} />
</Helmet> */}

</div>
);
}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/Profile/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.card.card-cascade .view.gradient-card-header {
/* .card.card-cascade .view.gradient-card-header {
padding: 1.1rem 1rem;
}
Expand All @@ -10,4 +10,4 @@
}
.navbar{
padding-left: 25px;
}
} */
Loading

0 comments on commit bdefd8f

Please sign in to comment.