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 @@
<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 {
......@@ -18,8 +23,7 @@
padding: 70px 0;
font-family: Arial, Helvetica, sans-serif;
display: grid;
justify-items: center;
align-items: center;
text-align: center;
}
input[type=submit]:hover {
......@@ -27,48 +31,20 @@
}
.main-container {
width: 40%;
height: 100%;
display: grid;
justify-items: center;
align-items: center;
background-color: white;
border-radius: 7px;
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-bottom: 1px solid #3a3a3a;
margin-bottom: 15px;
margin-left: 5px;
border-radius: 3px;
outline: none;
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>
......@@ -76,51 +52,61 @@
<body>
<main class="main-container">
<h1>Create a ServicePoints Account:</h1>
<form id="login-form" action="/accounts/create/" method="post" enctype="multipart/form-data">
<div class="flex-container">
<b>Your Name: </b>
<input type="text" placeholder="Enter Name" name="fullname" class="login-form-field" required />
</div>
<div class="flex-container">
<b>Username: </b>
<input type="text" placeholder="Enter Username" name="username" class="login-form-field" />
</div>
<div class="flex-container">
<b>Email: </b>
<input type="text" placeholder="Enter Email" name="email" class="login-form-field" />
</div>
<div class="flex-container">
<b>Password: </b>
<input type="password" placeholder="Enter Password" name="password" class="login-form-field" />
</div>
<div>
<b>Select an Organization:</b><br />
Once you select an organization to join, a request will be sent for approval.
Until approved, your organization will appear as 'None'.<br />
<div style="text-align: center; margin: auto; padding-bottom: 15px;">
<select name="orgName" id="orgName">
<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 class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12"></div>
<div class="col-md-4 col-sm-4 col-xs-12 main-container">
<form action="/accounts/create/" method="post" enctype="multipart/form-data">
<div class="form-group">
<b>Your Name: </b>
<input type="text" placeholder="Enter Name" name="fullname" class="form-control" required />
</div>
<div class="form-group">
<b>Username: </b>
<input type="text" placeholder="Enter Username" name="username" class="form-control" />
</div>
<div class="form-group">
<b>Email: </b>
<input type="text" placeholder="Enter Email" name="email" class="form-control" />
</div>
<div class="form-group">
<b>Password: </b>
<input type="password" placeholder="Enter Password" name="password" class="form-control" />
</div>
<div>
<b>Select an Organization:</b><br />
<small id="emailHelp" class="form-text text-muted">
Once you select an organization to join, a request will be sent for approval.
Until approved, your organization will appear as 'None'
</small>
<div class="form-group" style="text-align: center; margin: auto; padding-bottom: 15px;">
<select name="orgName" id="orgName" class="form-control">
<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 class="col-md-4 col-sm-4 col-xs-12"></div>
</div>
<input type="submit" name="signup" value="sign up" id="login-form-submit" />
</form>
<p>
Have an account?
<a href="/accounts/login/">Log in</a>
</p>
Want to register an organization with your new account account?<br />
<a href="/accounts/createOrg/">Register as organization leader</a>
</main>
</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>
</html>
servicePoints/templates/createOrg.html
+ 95
− 33
View file @ 8f9447c7
<!DOCTYPE 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>
<title>ServicePoints</title>
<p>
Don't want to register a new student organization?
<a href="/accounts/create/">Register as organization member</a>
</p>
<form action="/accounts/createOrg/" method="post" enctype="multipart/form-data">
<p>
New Student Organization Name
<input type="text" name="orgName"/>
</p>
<p>
Your Name
<input type="text" name="fullname"/>
</p>
<p>
Username
<input type="text" name="username"/>
</p>
<p>
Email
<input type="text" name="email"/>
</p>
<p>
Password
<input type="password" name="password"/>
</p>
<input type="submit" name="signup" value="sign up"/>
</form>
<p>
Have an account?
<a href="/accounts/login/">Log in</a>
</p>
<h1>Create a ServicePoints Organization and Admin Account:</h1>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12"></div>
<div class="col-md-4 col-sm-4 col-xs-12 main-container">
<form action="/accounts/createOrg/" method="post" enctype="multipart/form-data">
<div class="form-group">
<b>New Student Organization Name: </b>
<input type="text" placeholder="Enter Org Name" name="orgName" class="form-control" required />
</div>
<div class="form-group">
<b>Your Name: </b>
<input type="text" placeholder="Enter Your Name" name="fullname" class="form-control" required />
</div>
<div class="form-group">
<b>Username: </b>
<input type="text" placeholder="Enter Username" name="username" class="form-control" />
</div>
<div class="form-group">
<b>Email: </b>
<input type="text" placeholder="Enter Email" name="email" class="form-control" />
</div>
<div class="form-group">
<b>Password: </b>
<input type="password" placeholder="Enter Password" name="password" class="form-control" />
</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>
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>
</html>
servicePoints/templates/login.html
+ 23
− 15
View file @ 8f9447c7
......@@ -4,6 +4,11 @@
<link rel="stylesheet" type="text/css" href="/css/style.css">
<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 {
......@@ -27,12 +32,12 @@
}
.main-container {
width: 30%;
height: 100%;
display: grid;
justify-items: center;
align-items: center;
background-color: white;
padding: 10px 50px;
border-radius: 7px;
border: 3px solid black;
}
......@@ -66,26 +71,29 @@
<h1>Welcome to ServicePoints!</h1>
<main class="main-container">
<h1>Login:</h1>
<h1>Login:</h1>
<form id="login-form" action="/accounts/login/" method="post" enctype="multipart/form-data">
<div>
<b>Username: </b>
<input type="text" placeholder="Enter Username" class="login-form-field" name="username" required />
</div>
<div>
<b>Password: </b>
<input type="password" placeholder="Enter Password" class="login-form-field" name="password" required />
</div>
<form id="login-form" action="/accounts/login/" method="post" enctype="multipart/form-data">
<div>
<b>Username: </b>
<input type="text" placeholder="Enter Username" class="login-form-field" name="username" required />
</div>
<div>
<b>Password: </b>
<input type="password" placeholder="Enter Password" class="login-form-field" name="password" required />
</div>
<input type="submit" value="Login" id="login-form-submit" />
</form>
<input type="submit" value="Login" id="login-form-submit" />
</form>
<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/create/">Create a member account</a>
<a class="register" href="/accounts/createOrg/">Create an organization</a>
</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>
</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