Skip to content

Commit

Permalink
Signup-PageUI-Redesign (#256)
Browse files Browse the repository at this point in the history
  • Loading branch information
@akhil-rana
akhil-rana authored Mar 27, 2020
1 parent c640503 commit 5964993
Show file tree
Hide file tree
Showing 4 changed files with 158 additions and 141 deletions.
2 changes: 1 addition & 1 deletion apps/landing/landing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
<div class="collapse navbar-collapse" id="navbarCollapse" >
<ul class="navbar-nav mr-auto">
<li class="nav-item active link" style="font-family: sans-serif;">
<a class="nav-link" href="landing.html">Home</a>
<a class="nav-link" href="landing.html">Home</a>
</li>
<li class="nav-item link" style="font-family: sans-serif;">
<a class="nav-link" href="../table.html">Slides</a>
Expand Down
Binary file removed apps/signup/bg_img.jpg
View file
Binary file not shown.
155 changes: 73 additions & 82 deletions apps/signup/signup.css
View file
Original file line number Diff line number Diff line change
@@ -1,100 +1,91 @@
/* signup.css */


body {
color: #fff;
background: url(bg_img.jpg);
background-size: cover;
font-family: sans-serif;
color: #999;
background: #f5f5f5;
font-family: 'Roboto', sans-serif;
}
* {
box-sizing: border-box;
text-decoration: none;

.form-control, .form-control:focus, .input-group-addon {
border-color: #e1e1e1;
border-radius: 0;
}

.login-panel {
width: 320px;
/*height: 420px;*/
background: rgba(0, 0, 0, 0.5);
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
border-radius: 15px;
padding:0 35px;
.signup-form {
width: 390px;
margin: 0 auto;
padding: 30px 0;
}
.login-panel h1 {
.signup-form h2 {
color: #636363;
margin: 0 0 15px;
text-align: center;
margin: 35px auto;
background: linear-gradient(120deg,#8e44ad, #3498db);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.txtb {
border-bottom: 2px solid #fff;
position: relative;
margin: 30px 0 0 0;
.signup-form .lead {
font-size: 14px;
margin-bottom: 30px;
text-align: center;
}


.txtb input {
font-size: 15px;
color: #fff;
border: none;
width: 100%;
outline: none;
background: none;
padding: 0 5px;
height: 40px;
.signup-form form {
border-radius: 1px;
margin-bottom: 15px;
background: #fff;
border: 1px solid #f3f3f3;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}

input[type=radio] {
margin: 15px 10px 0 50px;
transition: .5s;
.signup-form .form-group {
margin-bottom: 20px;
}
input[type=radio]:checked+label {
color: #8e44ad;
font-weight: bold;
.signup-form label {
font-weight: normal;
font-size: 13px;
}
.bottom-text {
font-size: 12px;
padding-top: 7px;
.signup-form .form-control {
min-height: 38px;
box-shadow: none !important;
border-width: 0 0 1px 0;
}
.signup-form .input-group-addon {
max-width: 42px;
text-align: center;
background: none;
border-width: 0 0 1px 0;
padding-left: 5px;
}



.sub-btn {
border-radius: 25px;
display: block;
width: 100%;
height: 35px;
.signup-form .btn {
font-size: 16px;
font-weight: bold;
background: #19aa8d;
border-radius: 3px;
border: none;
background: linear-gradient(120deg,rgba(52, 152, 219,.8), #8e44ad,rgba(52, 152, 219,.8));
background-size: 200%;
color: #fff;
outline: none;
cursor: pointer;
transition: .5s;
margin-top: 10px;
min-width: 140px;
outline: none !important;
}



.sub-btn:hover {
background-position: right;
.signup-form .btn:hover, .signup-form .btn:focus {
background: #179b81;
}
.signup-form a {
color: #19aa8d;
text-decoration: none;
}
.signup-form a:hover {
text-decoration: underline;
}
.signup-form .fa {
font-size: 21px;
}

.login-tips {
padding: 10px;
color: #8e44ad;
.link{
letter-spacing: 0.02em;
text-transform: uppercase;
font-size: 0.99em;
font-weight: bold;
margin: 35px 0;
border-radius: 15px;
background: rgba(200, 214, 229,0.7);
/* width: 100px;
height: 100px;
position: absolute;
top:-50px;
left: calc(50% - 50px);*/
}
color: #5e6875;
text-decoration:none;
padding-right: 0.7rem;
padding-left: 0.7rem;
margin-top: 0.2rem;
font-family: "Open Sans", Helvetica, sans-serif;
line-height: 1.8;
}

142 changes: 84 additions & 58 deletions apps/signup/signup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,28 @@
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
<title>CaMicroscope - User Signup</title>

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">

<link rel='stylesheet' type='text/css' media='all' href='../../css/normalize.css'/>
<link rel='stylesheet' type='text/css' media='all' href='signup.css'/>
</head>
<script>
var userSignupUrl = "../../data/Auth/post"
function addUser(){
var email = document.getElementById("name").value
var email = document.getElementById("mail").value
var collections = document.getElementById("collections").value
var attr = document.querySelector('input[name="attr"]:checked').value
// var attr = document.querySelector('input[name="attr"]:checked').value
var attrEle = document.getElementById("attr");
var attr = attrEle.options[attrEle.selectedIndex].value;
var attr_doc = []
if (attr == "admin"){
if (attr == "3"){
attr_doc = ["write", "admin"]
}
if (attr == "editor"){
if (attr == "2"){
attr_doc = ["write"]
}
var doc = {name: email, attrs: attr_doc, accessCollection:collections}
Expand All @@ -43,74 +51,92 @@
window.alert("success")
console.log(x)
}).catch(e=>{
window.alert("error!")
// window.alert("error!")
console.error(e)
})
}
</script>

<body>

<div id="signupForm" class="login-panel">
<H1>User Signup</H1>

<div class="txtb">
<input id="name" type="text" onblur="validateEmail(this);" placeholder="Email" >
</div>
<div class="txtb">
<input id="collections" type="text" placeholder="['list','of','collections']">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark" style="position: sticky;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item link">
<a class="nav-link" href="../landing/landing.html">Home</a>
</li>
<li class="nav-item link">
<a class="nav-link" href="../table.html">Slides</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item active link" style="font-family: sans-serif;">
<a class="nav-link" href="./signup.html">Signup</a>
</li>
<li class="nav-item link">
<a class="nav-link" target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLScL91LxrpAZjU88GBZP9gmcdgdf8__uNUwhws2lzU6Lr4qNwA/viewform">Feedback</a>
</li>
</ul>
</div>
</nav>


<!-- User Type selection -->
<input type="radio" id="attrchoice1"
name="attr" value="viewer" checked>
<label for="attrchoice1">Viewer</label><br>

<input type="radio" id="attrchoice2"
name="attr" value="editor">
<label for="attrchoice2">Editor</label><br>

<input type="radio" id="attrchoice3"
name="attr" value="admin">
<label for="attrchoice3">Admin (and Editor)</label>

<!-- submit btn -->
<input id="sub" class="sub-btn" onclick="addUser()" type="submit">

<div class="bottom-text">
Already have an account?
<div class="signup-form">
<div
style="text-align:center; background: #17a2b8; font-size: xx-large; color: white; padding: 4px; border-radius: 5px 5px 0px 0px;">
caMicroscope
</div>
<!-- <hr style="width: 24.25em; height: 0.01em; background-color: black; margin-top: 0em; margin-bottom: 0;"> -->

<div class="login-tips">If you reach this page, it's likely that you tried to log into this instance but lack access.
Email the administrator if you want to be added. If you are an admin, you should be able to use this form.
</div>
</div>
<script type="text/javascript">
const input_name = document.querySelector('#name');
input_name.addEventListener('focus',()=>{
input_name.classList.add('focus');
});
const input_collection= document.querySelector('#collections');
input_collection.addEventListener('focus',()=>{
input_collection.classList.add('focus');
});
input_name.addEventListener('blur',()=>{
if(input_name.value=="") input_name.classList.remove('focus');
});

function validateEmail(emailField){
var reg = /\S+@\S+\.\S+/;
<form>
<h2 style="margin-top: -.5em;">User Signup</h2>
<hr
style="width: 24.25em; margin-left: -1.9em; height: 0.01em; background-color: rgb(172, 172, 172); margin-bottom: 2em;">
<div class="form-group">
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope" style="margin-top: 0.5em;"></i></span>
<input id="mail" type="email" class="form-control" name="email" placeholder="Email" required="required">
</div>
</div>
<br>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-th-list" style="margin-top: 0.5em;"></i></span>
<input type="text" id="collections" class="form-control" placeholder="['list','of','collections']"
required="required">
</div>
</div> <br>

if (reg.test(emailField.value) == false)
{
alert('Invalid Email Address');
return false;
}
<!-- User Type selection -->
<select id="attr" class="browser-default custom-select">
<option selected value="1">Viewer</option>
<option value="2">Editor</option>
<option value="3">Admin (and Editor)</option>
</select>

return true;
<br> <br>
<div class="form-group">
<button type="submit" id="sub" class="btn btn-primary btn-block btn-lg sub-btn" onclick="addUser()">Sign
Up</button>
</div>
<p class="small text-center">If you reach this page, it's likely that you tried to log into this instance but lack
access.
Email the administrator if you want to be added. If you are an admin, you should be able to use this form.</p>
</form>
<div class="text-center">Already have an account? </div>
</div>

}
</script>
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

0 comments on commit 5964993

Please sign in to comment.