Skip to content
Snippets Groups Projects
Commit 8f9447c7 authored by mrschnei's avatar mrschnei
Browse files

Updated UI for login and create account pages with bootstrap

parent a266ec85
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
servicePoints/templates/create.html
+ 61
− 75
View file @ 8f9447c7
...@@ -4,6 +4,11 @@ ...@@ -4,6 +4,11 @@
<head> <head>
<title>ServicePoints</title> <title>ServicePoints</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style> <style>
a { a {
...@@ -18,8 +23,7 @@ ...@@ -18,8 +23,7 @@
padding: 70px 0; padding: 70px 0;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
display: grid; display: grid;
justify-items: center; text-align: center;
align-items: center;
} }
input[type=submit]:hover { input[type=submit]:hover {
...@@ -27,48 +31,20 @@ ...@@ -27,48 +31,20 @@
} }
.main-container { .main-container {
width: 40%;
height: 100%;
display: grid;
justify-items: center;
align-items: center;
background-color: white;
border-radius: 7px; border-radius: 7px;
border: 3px solid black; border: 3px solid black;
padding: 10px 10px 10px 10px; padding: 25px;
margin-top: 10px;
text-align: left;
} }
input[type=text], input[type=password] { input[type=text], input[type=password], input[type=email] {
border: none; border: none;
border-bottom: 1px solid #3a3a3a; border-bottom: 1px solid #3a3a3a;
margin-bottom: 15px; margin-bottom: 15px;
margin-left: 5px;
border-radius: 3px; border-radius: 3px;
outline: none; outline: none;
padding: 0px 0px 5px 5px; padding: 0px 0px 5px 5px;
flex: 1;
}
#login-form-submit {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
color: white;
font-weight: bold;
background-color: #3a3a3a;
}
#login-form {
width: 50%;
}
.register {
padding: 5px 0px 10px 0px;
}
.flex-container {
display: flex;
} }
</style> </style>
...@@ -76,51 +52,61 @@ ...@@ -76,51 +52,61 @@
<body> <body>
<main class="main-container">
<h1>Create a ServicePoints Account:</h1> <h1>Create a ServicePoints Account:</h1>
<form id="login-form" action="/accounts/create/" method="post" enctype="multipart/form-data"> <div class="container-fluid">
<div class="flex-container"> <div class="row">
<b>Your Name: </b> <div class="col-md-4 col-sm-4 col-xs-12"></div>
<input type="text" placeholder="Enter Name" name="fullname" class="login-form-field" required /> <div class="col-md-4 col-sm-4 col-xs-12 main-container">
</div> <form action="/accounts/create/" method="post" enctype="multipart/form-data">
<div class="flex-container"> <div class="form-group">
<b>Username: </b> <b>Your Name: </b>
<input type="text" placeholder="Enter Username" name="username" class="login-form-field" /> <input type="text" placeholder="Enter Name" name="fullname" class="form-control" required />
</div> </div>
<div class="flex-container"> <div class="form-group">
<b>Email: </b> <b>Username: </b>
<input type="text" placeholder="Enter Email" name="email" class="login-form-field" /> <input type="text" placeholder="Enter Username" name="username" class="form-control" />
</div> </div>
<div class="flex-container"> <div class="form-group">
<b>Password: </b> <b>Email: </b>
<input type="password" placeholder="Enter Password" name="password" class="login-form-field" /> <input type="text" placeholder="Enter Email" name="email" class="form-control" />
</div> </div>
<div> <div class="form-group">
<b>Select an Organization:</b><br /> <b>Password: </b>
Once you select an organization to join, a request will be sent for approval. <input type="password" placeholder="Enter Password" name="password" class="form-control" />
Until approved, your organization will appear as 'None'.<br /> </div>
<div style="text-align: center; margin: auto; padding-bottom: 15px;"> <div>
<select name="orgName" id="orgName"> <b>Select an Organization:</b><br />
<option value="NONE">Choose Later</option> <small id="emailHelp" class="form-text text-muted">
{% for org in orgs %} Once you select an organization to join, a request will be sent for approval.
{% if org.orgName != 'NONE' %} Until approved, your organization will appear as 'None'
<option value="{{org.orgName}}">{{org.orgName}}</option> </small>
{%endif%} <div class="form-group" style="text-align: center; margin: auto; padding-bottom: 15px;">
{% endfor %} <select name="orgName" id="orgName" class="form-control">
</select> <option value="NONE">Choose Later</option>
{% for org in orgs %}
{% if org.orgName != 'NONE' %}
<option value="{{org.orgName}}">{{org.orgName}}</option>
{%endif%}
{% endfor %}
</select>
</div>
</div>
<input type="submit" class="btn btn-block btn-primary" name="signup" value="sign up" />
</form>
<div style="text-align:center;">
<p>Have an account? <a href="/accounts/login/">Log in</a></p>
Want to register a new organization?<br />
<a href="/accounts/createOrg/">Register as organization leader</a>
</div>
</div> </div>
<div class="col-md-4 col-sm-4 col-xs-12"></div>
</div> </div>
<input type="submit" name="signup" value="sign up" id="login-form-submit" /> </div>
</form>
<p> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
Have an account? <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<a href="/accounts/login/">Log in</a> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</p>
Want to register an organization with your new account account?<br />
<a href="/accounts/createOrg/">Register as organization leader</a>
</main>
</body> </body>
</html> </html>
servicePoints/templates/createOrg.html
+ 95
− 33
View file @ 8f9447c7
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<title>ServicePoints</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
body {
padding: 70px 0;
font-family: Arial, Helvetica, sans-serif;
display: grid;
text-align: center;
}
input[type=submit]:hover {
opacity: 0.8;
}
.main-container {
border-radius: 7px;
border: 3px solid black;
padding: 25px;
margin-top: 10px;
text-align:left;
}
input[type=text], input[type=password], input[type=email] {
border: none;
border-bottom: 1px solid #3a3a3a;
margin-bottom: 15px;
border-radius: 3px;
outline: none;
padding: 0px 0px 5px 5px;
}
</style>
</head>
<body> <body>
<title>ServicePoints</title>
<p> <h1>Create a ServicePoints Organization and Admin Account:</h1>
Don't want to register a new student organization?
<a href="/accounts/create/">Register as organization member</a> <div class="container-fluid">
</p> <div class="row">
<div class="col-md-4 col-sm-4 col-xs-12"></div>
<form action="/accounts/createOrg/" method="post" enctype="multipart/form-data"> <div class="col-md-4 col-sm-4 col-xs-12 main-container">
<p> <form action="/accounts/createOrg/" method="post" enctype="multipart/form-data">
New Student Organization Name <div class="form-group">
<input type="text" name="orgName"/> <b>New Student Organization Name: </b>
</p> <input type="text" placeholder="Enter Org Name" name="orgName" class="form-control" required />
<p> </div>
Your Name <div class="form-group">
<input type="text" name="fullname"/> <b>Your Name: </b>
</p> <input type="text" placeholder="Enter Your Name" name="fullname" class="form-control" required />
<p> </div>
Username <div class="form-group">
<input type="text" name="username"/> <b>Username: </b>
</p> <input type="text" placeholder="Enter Username" name="username" class="form-control" />
<p> </div>
Email <div class="form-group">
<input type="text" name="email"/> <b>Email: </b>
</p> <input type="text" placeholder="Enter Email" name="email" class="form-control" />
<p> </div>
Password <div class="form-group">
<input type="password" name="password"/> <b>Password: </b>
</p> <input type="password" placeholder="Enter Password" name="password" class="form-control" />
<input type="submit" name="signup" value="sign up"/> </div>
</form> <input type="submit" class="btn btn-block btn-primary" name="signup" value="sign up" />
<p> </form>
Have an account? <div style="text-align:center;">
<a href="/accounts/login/">Log in</a> <p>Have an account? <a href="/accounts/login/">Log in</a></p>
</p> Don't want to register a new student organization?<br />
<a href="/accounts/create/">Register as organization member</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body> </body>
</html> </html>
servicePoints/templates/login.html
+ 23
− 15
View file @ 8f9447c7
...@@ -4,6 +4,11 @@ ...@@ -4,6 +4,11 @@
<link rel="stylesheet" type="text/css" href="/css/style.css"> <link rel="stylesheet" type="text/css" href="/css/style.css">
<title>servicePoints</title> <title>servicePoints</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style> <style>
a { a {
...@@ -27,12 +32,12 @@ ...@@ -27,12 +32,12 @@
} }
.main-container { .main-container {
width: 30%;
height: 100%; height: 100%;
display: grid; display: grid;
justify-items: center; justify-items: center;
align-items: center; align-items: center;
background-color: white; background-color: white;
padding: 10px 50px;
border-radius: 7px; border-radius: 7px;
border: 3px solid black; border: 3px solid black;
} }
...@@ -66,26 +71,29 @@ ...@@ -66,26 +71,29 @@
<h1>Welcome to ServicePoints!</h1> <h1>Welcome to ServicePoints!</h1>
<main class="main-container"> <main class="main-container">
<h1>Login:</h1> <h1>Login:</h1>
<form id="login-form" action="/accounts/login/" method="post" enctype="multipart/form-data"> <form id="login-form" action="/accounts/login/" method="post" enctype="multipart/form-data">
<div> <div>
<b>Username: </b> <b>Username: </b>
<input type="text" placeholder="Enter Username" class="login-form-field" name="username" required /> <input type="text" placeholder="Enter Username" class="login-form-field" name="username" required />
</div> </div>
<div> <div>
<b>Password: </b> <b>Password: </b>
<input type="password" placeholder="Enter Password" class="login-form-field" name="password" required /> <input type="password" placeholder="Enter Password" class="login-form-field" name="password" required />
</div> </div>
<input type="submit" value="Login" id="login-form-submit" /> <input type="submit" value="Login" id="login-form-submit" />
</form> </form>
<a class="register" href="/accounts/create/">Create a member account</a> <a class="register" href="/accounts/create/">Create a member account</a>
<a class="register" href="/accounts/createOrg/">Create an organization</a> <a class="register" href="/accounts/createOrg/">Create an organization</a>
</main> </main>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body> </body>
</html> </html>
......
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