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.

Sign up for GitHub

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

Jump to bottom

Login/Logout button state #23

Merged
merged 5 commits into from
Apr 3, 2017
Merged

Login/Logout button state #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
367ae55
Button changed
srijit10 Apr 3, 2017
195f49a
Button depicts state of user
srijit10 Apr 3, 2017
608dfd0
New button added for login/register
srijit10 Apr 3, 2017
6ea0547
Button depicts state of user
srijit10 Apr 3, 2017
5c29381
Added navigation bar and modified button state
srijit10 Apr 3, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
145 changes: 131 additions & 14 deletions web/chat.jsp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,31 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<title>Chat | DiFo</title>

<style type="text/css">
body {
<%@include file="assets/bootstrap/css/bootstrap.min.css" %>
<%@include file="assets/css/form-elements.css" %>
<%@include file="my.css" %>
<%@include file="style.css" %>
<%@include file="css/style.css" %>
<%@include file="css/reset.css" %>
<%@include file="font-awesome.min.css" %>
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>
<script src="assets/js/scripts.js"></script>
<script src="js/modernizr.js"></script>
body {
font:12px arial;
color: #222;
text-align:center;
padding:35px; }

form, p, span {
margin:0;
padding:0; }
padding-left:10px; }

input { font:12px arial; }

Expand All @@ -31,8 +45,8 @@
#wrapper, #loginform {
margin:0 auto;
background:#EBF4FB;
width:95%;
height: 90%;
width:100%;
height: 89.8%;
position: absolute;
overflow: hidden;
border:1px solid #ACD8F0; }
Expand All @@ -53,10 +67,12 @@
overflow:auto; }

#usermsg {
width:90%;
margin:auto;
padding-left:50px;
width:95%;
border:1px solid #ACD8F0; }

#submit { width: 60px; }
#submit { width: 50px; }

.error { color: #ff0000; }

Expand All @@ -67,21 +83,55 @@
.logout { float:right; }

.msgln { margin:0 0 2px 0; }

.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
}
</style>

<%
String name=(String)session.getAttribute("user_name");
String text;
if(name==null)
text="Login";
else
text="Logout";
%>
<style type="text/css">
#ask-question {
text-align:center;
}
</style>
</head>

<body>
<!--<div class="my-topnav my-card my-top my-light-grey" id="head">-->
<a href="index.jsp" aria-controls="home" role="tab">Home</a>&nbsp;&nbsp;
<a href="questions.jsp" aria-controls="messages" role="tab">Questions</a>&nbsp;&nbsp;
<a href="showprofile.jsp" aria-controls="profile" role="tab">Profile</a>&nbsp;&nbsp;
<div id="wrapper">
<div class="my-topnav my-card my-top my-light-grey" id="head">
<a href="index.jsp" >DiFo</a>
<!---Nav tabs -->
<ul class="nav nav-tabs" role="tablist" style="float: right;">
<li role="presentation"><a href="index.jsp" aria-controls="home" role="tab" >Home</a></li>
<li role="presentation"><a href="questions.jsp" aria-controls="messages" role="tab" >Questions</a></li>
<li role="presentation"><a href="#" aria-controls="settings" role="tab" >Chat</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" >Users</a></li>
<li role="presentation"><a href="showprofile.jsp" aria-controls="profile" role="tab" >Profile</a></li>
<li role="presentation"><a href="aboutus.jsp" aria-controls="profile" role="tab" >About Us</a></li>
<li><button onclick="func('<%=text %>');" class="btn btn-block btn-info"><%out.println(text);%></button></li>
</ul>
</div>
<div id="wrapper">
<div id="menu">
<p class="welcome">Welcome, <% out.println(name);%> <b></b></p>
<p class="logout"><a id="exit" href="logout.jsp">Exit Chat</a></p>
<!--<p class="logout"><a id="exit" href="logout.jsp">Exit Chat</a></p>-->
<div style="clear:both"></div>
</div>

Expand All @@ -91,7 +141,74 @@
<input name="usermsg" type="text" id="usermsg" size="100" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>



<div id="id01" class="modal"> <!-- log in form -->
<div class="cd-user-modal-container">
<form class="cd-form" action="login.jsp" method="post">
<p class="fieldset">
<label class="image-replace cd-email" for="signin-email">E-mail</label>
<input name="email" class="full-width has-padding has-border" id="signin-email" type="email" placeholder="E-mail">
<span class="cd-error-message">Error message here!</span>
</p>

<p class="fieldset">
<label class="image-replace cd-password" for="signin-password">Password</label>
<input class="full-width has-padding has-border" id="signin-password" type="password" placeholder="Password" name="password">
<a href="#0" class="hide-password">Show</a>
<span class="cd-error-message">Error message here!</span>
</p>

<p class="fieldset">
<input type="checkbox" id="remember-me" checked>
<label for="remember-me">Remember me</label>
</p>

<p class="fieldset">
<button class="full-width" id="login_form" onclick="login_form_submit()" type="submit">Login</button>
</p>
</form>

<p class="cd-form-bottom-message"><a href="#0">Forgot your password?</a></p>

<div id="cd-reset-password"> <!-- reset password form -->
<p class="cd-form-message">Lost your password? Please enter your email address. You will receive a link to create a new password.</p>

<form class="cd-form">
<p class="fieldset">
<label class="image-replace cd-email" for="reset-email">E-mail</label>
<input class="full-width has-padding has-border" id="reset-email" type="email" placeholder="E-mail">
<span class="cd-error-message">Error message here!</span>
</p>

<p class="fieldset">
<input class="full-width has-padding" type="submit" value="Reset password">
</p>
</form>

<p class="cd-form-bottom-message"><a href="#0">Back to log-in</a></p>
</div> <!-- cd-reset-password -->
<a href="#0" class="cd-close-form">Close</a>
</div>
</div>


<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>-->
<script type="text/javascript">
function func(text) {
if(text==="Logout")
window.location="logout.jsp";
else if(text==="Login")
document.getElementById('id01').style.display='block';
}
var modal = document.getElementById('id01');
window.onclick = function(event) {
if (event.target === modal) {
modal.style.display = "none";
}
}

</script>
</body>
</html>
4 changes: 2 additions & 2 deletions web/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,10 +161,10 @@ header[role=banner]::after {
.main-nav a.cd-signin, .main-nav a.cd-signup {
padding: .6em 1em;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 50em;
border-radius: 0em;
}
.main-nav a.cd-signup {
background: #2f889a;
background: lightcoral;
border: none;
}
}
Expand Down
4 changes: 2 additions & 2 deletions web/index.jsp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" >Users</a></li>
<li role="presentation"><a href="showprofile.jsp" aria-controls="profile" role="tab" >Profile</a></li>
<li role="presentation"><a href="aboutus.jsp" aria-controls="profile" role="tab" >About Us</a></li>
<li><div class="main-nav"><a class="cd-signup" href="#0" data-modal-id="modal-register"><i class="fa fa-user-plus fa-lg">Register</i></a></div></li>
<li><div class="main-nav"><a class="cd-signup" href="#0" data-modal-id="modal-register">Register</a></div></li>
</ul>
</div>

Expand Down Expand Up @@ -90,7 +90,7 @@
<input class="full-width has-padding has-border" id="signup-password" type="password" placeholder="Password" name="password" required onkeyup="return password_check();">
<a href="#0" class="hide-password">Show</a>
<span class="cd-error-message">Error message here!</span>
<span id="check">Type Password</span>
<span id="check" hidden="true">Type Password</span>
</p>

<p class="fieldset">
Expand Down
93 changes: 90 additions & 3 deletions web/questions.jsp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Questions | DiFo</title>

Expand All @@ -28,9 +29,30 @@
<%@include file="style.css" %>
<%@include file="css/style.css" %>
<%@include file="css/reset.css" %>
<%@include file="font-awesome.min.css" %>
</style>
<%@include file="font-awesome.min.css" %>
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
}

</style>
<%
String name=(String)session.getAttribute("user_name");
String text;
if(name==null)
text="Login";
else
text="Logout";
%>
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>
Expand All @@ -55,10 +77,59 @@
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" >Users</a></li>
<li role="presentation"><a href="showprofile.jsp" aria-controls="profile" role="tab" >Profile</a></li>
<li role="presentation"><a href="aboutus.jsp" aria-controls="profile" role="tab" >About Us</a></li>
<li><button onclick="logout();">Logout</button></li>
<li><button onclick="func('<%=text %>');" class="btn btn-block btn-info"><%out.println(text);%></button></li>
</ul>
</div>

<div id="id01" class="modal"> <!-- log in form -->
<div class="cd-user-modal-container">
<form class="cd-form" action="login.jsp" method="post">
<p class="fieldset">
<label class="image-replace cd-email" for="signin-email">E-mail</label>
<input name="email" class="full-width has-padding has-border" id="signin-email" type="email" placeholder="E-mail">
<span class="cd-error-message">Error message here!</span>
</p>

<p class="fieldset">
<label class="image-replace cd-password" for="signin-password">Password</label>
<input class="full-width has-padding has-border" id="signin-password" type="password" placeholder="Password" name="password">
<a href="#0" class="hide-password">Show</a>
<span class="cd-error-message">Error message here!</span>
</p>

<p class="fieldset">
<input type="checkbox" id="remember-me" checked>
<label for="remember-me">Remember me</label>
</p>

<p class="fieldset">
<button class="full-width" id="login_form" onclick="login_form_submit()" type="submit">Login</button>
</p>
</form>

<p class="cd-form-bottom-message"><a href="#0">Forgot your password?</a></p>

<div id="cd-reset-password"> <!-- reset password form -->
<p class="cd-form-message">Lost your password? Please enter your email address. You will receive a link to create a new password.</p>

<form class="cd-form">
<p class="fieldset">
<label class="image-replace cd-email" for="reset-email">E-mail</label>
<input class="full-width has-padding has-border" id="reset-email" type="email" placeholder="E-mail">
<span class="cd-error-message">Error message here!</span>
</p>

<p class="fieldset">
<input class="full-width has-padding" type="submit" value="Reset password">
</p>
</form>

<p class="cd-form-bottom-message"><a href="#0">Back to log-in</a></p>
</div> <!-- cd-reset-password -->
<a href="#0" class="cd-close-form">Close</a>
</div>
</div>

<%
List<Question> questions = null;
try {
Expand Down Expand Up @@ -99,4 +170,20 @@
</table>
</div>
</body>
<script type="text/javascript">
function func(text) {
if(text==="Logout")
window.location="logout.jsp";
else if(text==="Login")
document.getElementById('id01').style.display='block';
}
var modal = document.getElementById('id01');
window.onclick = function(event) {
if (event.target === modal) {
modal.style.display = "none";
}
}

</script>
</html>