From 8f9447c76d55ba5b191ab2f5bd69bbc87b0d3233 Mon Sep 17 00:00:00 2001
From: mrschnei <mrschnei@umich.edu>
Date: Mon, 27 Jul 2020 20:39:49 -0400
Subject: [PATCH] Updated UI for login and create account pages with bootstrap
---
servicePoints/templates/create.html | 136 +++++++++++--------------
servicePoints/templates/createOrg.html | 128 +++++++++++++++++------
servicePoints/templates/login.html | 38 ++++---
3 files changed, 179 insertions(+), 123 deletions(-)
diff --git a/servicePoints/templates/create.html b/servicePoints/templates/create.html
index 1e7fe83..2dde6fe 100644
--- a/servicePoints/templates/create.html
+++ b/servicePoints/templates/create.html
@@ -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>
diff --git a/servicePoints/templates/createOrg.html b/servicePoints/templates/createOrg.html
index afecf95..9ed244d 100644
--- a/servicePoints/templates/createOrg.html
+++ b/servicePoints/templates/createOrg.html
@@ -1,38 +1,100 @@
<!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>
diff --git a/servicePoints/templates/login.html b/servicePoints/templates/login.html
index a45cc33..4bfb5fc 100644
--- a/servicePoints/templates/login.html
+++ b/servicePoints/templates/login.html
@@ -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>
--
GitLab