Skip to content

Commit

Permalink
Merge pull request #132 from DDMAL/login-design
Browse files Browse the repository at this point in the history 
Frontend updates for account-related pages
  • Loading branch information
@yinanazhou
yinanazhou authored Jul 24, 2024
2 parents 60bc761 + 0f9bef8 commit e0cafd4
Show file tree
Hide file tree
Showing 14 changed files with 304 additions and 280 deletions.
22 changes: 15 additions & 7 deletions web-app/django/VIM/apps/main/static/main/css/login.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,18 @@
width: 80vw;
}

.login-container {
.account-container {
background-color: white;
border: 3px solid #9eb384;
border-radius: 30px;
height: auto !important;
height: 500px !important;
position: relative;
color: #435334;
}

.login-form {
color: #435334;
.message-container {
position: absolute;
top: 10px;
}

#signup-decor {
Expand Down Expand Up @@ -47,12 +50,12 @@ input::placeholder {
color: #9eb384;
}

.sign-in-btn {
.account-btn {
background-color: #435334;
border: 1px solid #435334;
}

.sign-in-btn:hover {
.account-btn:hover {
background-color: #9eb384;
border: 1px solid #9eb384;
}
Expand All @@ -74,5 +77,10 @@ a:hover {
}

.errorlist {
color: red;
margin: 0;
}

ul {
list-style-type: none;
padding: 0 0.5rem;
}
57 changes: 57 additions & 0 deletions web-app/django/VIM/apps/main/templates/registration/changePassword.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
{% extends "base.html" %}

{% load static %}

{% block title %}
Change Password
{% endblock title %}

{% block css_files %}
<link rel="stylesheet"
type="text/css"
href="{% static 'main/css/login.css' %}" />
{% endblock css_files %}

{% block content %}
<div class="container content-container d-flex justify-content-center align-items-center">
<div class="col-10 p-4 align-content-center account-container">
{% if form.errors %}
<div class="alert alert-danger p-2 z-2 d-flex justify-content-end message-container">
{% for field, error in form.errors.items %}{{ error }}{% endfor %}
</div>
{% endif %}
<div class="container z-1">
<div class="row">
<div class="col-6 my-4 login-form" id="change-password">
<h5 class="mb-4">
<strong>Change Password</strong>
</h5>
<form method="post">
{% csrf_token %}
<div class="mb-4">
<label for="exampleInputPassword0" class="form-label">Current Password</label>
<div>{{ form.old_password }}</div>
</div>
<div class="mb-4">
<label for="exampleInputPassword1" class="form-label">New Password</label>
<div>{{ form.new_password1 }}</div>
</div>
<div class="mb-4">
<label for="exampleInputPassword2" class="form-label">
Confirm New Password
</label>
<div>{{ form.new_password2 }}</div>
</div>
<button type="submit" class="btn btn-primary account-btn">
Change Password
</button>
</form>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}

{% block scripts %}
{% endblock scripts %}
53 changes: 0 additions & 53 deletions web-app/django/VIM/apps/main/templates/registration/change_password.html
View file

This file was deleted.

16 changes: 5 additions & 11 deletions web-app/django/VIM/apps/main/templates/registration/login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,15 @@

{% block content %}
<div class="container content-container d-flex justify-content-center align-items-center">
<div class="col-8 p-4 login-container">
{% if messages %}
<div class="alert alert-success alert-dismissible">
{% for message in messages %}{{ message }}{% endfor %}
</div>
{% endif %}
<div class="col-10 p-4 align-content-center account-container">
{% if form.errors %}
<div class="alert alert-danger alert-dismissible">
<div class="alert alert-danger p-2 z-2 message-container">
{% for field, error in form.errors.items %}{{ error }}{% endfor %}
</div>
{% endif %}
<div class="container">
<div class="container z-1">
<div class="row">
<div class="col-6 my-4 px-4 d-flex justify-content-center align-items-center login-form"
id="login">
<div class="col-6 my-4 px-4 d-flex justify-content-center align-items-center">
<div class="col-12 mx-4 px-2">
<h5>
<strong>Login</strong>
Expand All @@ -43,7 +37,7 @@ <h5>
<label for="exampleInputPassword" class="form-label">Password</label>
<div>{{ form.password }}</div>
</div>
<button type="submit" class="btn btn-primary sign-in-btn">Sign in</button>
<button type="submit" class="btn btn-primary account-btn">Sign in</button>
<p class="mt-2">
<a href="{% url 'main:reset_password' %}">Forgot your password?</a>
</p>
Expand Down
104 changes: 53 additions & 51 deletions web-app/django/VIM/apps/main/templates/registration/register.html
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,53 @@
{% extends "base.html" %}

{% load static %}

{% block title %}
Register
{% endblock title %}

{% block css_files %}
<link rel="stylesheet"
type="text/css"
href="{% static 'main/css/login.css' %}" />
{% endblock css_files %}

{% block content %}
<div class="container">
<div class="row">
<div class="mr-3 p-4 col-md-8">
{% if form.errors %}
<div class="alert alert-danger alert-dismissible">
{% for field, error in form.errors.items %}{{ error }}{% endfor %}
</div>
{% endif %}
<div class="col-md mt-4 login-form" id="registration">
<h5 class="mb-4">
<strong>Create a New Account</strong>
</h5>
<form method="post">
{% csrf_token %}
<div class="mt-4 mb-4">
<label for="exampleInputEmail" class="form-label">Email Address</label>
{{ form.username }}
</div>
<div class="mb-4">
<label for="exampleInputPassword1" class="form-label">Password</label>
{{ form.password1 }}
</div>
<div class="mb-4">
<label for="exampleInputPassword2" class="form-label">Confirm Password</label>
{{ form.password2 }}
</div>
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</div>
</div>
</div>
{% endblock content %}

{% block scripts %}
{% endblock scripts %}
{% extends "base.html" %}

{% load static %}

{% block title %}
Register
{% endblock title %}

{% block css_files %}
<link rel="stylesheet"
type="text/css"
href="{% static 'main/css/login.css' %}" />
{% endblock css_files %}

{% block content %}
<div class="container content-container d-flex justify-content-center align-items-center">
<div class="col-10 p-4 align-content-center account-container">
{% if form.errors %}
<div class="alert alert-danger p-2 z-2 message-container">
{% for field, error in form.errors.items %}{{ error }}{% endfor %}
</div>
{% endif %}
<div class="container z-1">
<div class="row">
<div class="col-6 my-4" id="registration">
<h5 class="mb-4">
<strong>Create a New Account</strong>
</h5>
<form method="post">
{% csrf_token %}
<div class="mt-4 mb-4">
<label for="exampleInputEmail" class="form-label">Email Address</label>
<div>{{ form.username }}</div>
</div>
<div class="mb-4">
<label for="exampleInputPassword1" class="form-label">Password</label>
<div>{{ form.password1 }}</div>
</div>
<div class="mb-4">
<label for="exampleInputPassword2" class="form-label">Confirm Password</label>
<div>{{ form.password2 }}</div>
</div>
<button type="submit" class="btn btn-primary account-btn">Register</button>
</form>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}

{% block scripts %}
{% endblock scripts %}
56 changes: 56 additions & 0 deletions web-app/django/VIM/apps/main/templates/registration/resetPassword.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
{% extends "base.html" %}

{% load static %}

{% block title %}
Reset Password
{% endblock title %}

{% block css_files %}
<link rel="stylesheet"
type="text/css"
href="{% static 'main/css/login.css' %}" />
{% endblock css_files %}

{% block content %}
<div class="container content-container d-flex justify-content-center align-items-center">
<div class="col-10 p-4 align-content-center account-container">
{% if form.errors %}
<div class="alert alert-danger p-2 z-2 message-container">
{% for field, error in form.errors.items %}{{ error }}{% endfor %}
</div>
{% endif %}
<div class="container pb-4 z-1 d-flex flex-column">
<div class="row">
<div class="col-12">
<h5>
<strong>Reset Password</strong>
</h5>
<p class="mt-4">
Forgotten your password?
<br />
Enter your email address below, and we'll email instructions for setting a new one.
</p>
</div>
</div>
<div class="row mb-4">
<div class="col-12 mb-4">
<form method="post">
{% csrf_token %}
<div class="mt-2 mb-4">
<label for="exampleInputEmail" class="form-label">Email Address</label>
<div>{{ form.email }}</div>
</div>
<button type="submit" class="btn btn-primary mb-4 account-btn">
Send Password Reset Email
</button>
</form>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}

{% block scripts %}
{% endblock scripts %}
Loading

0 comments on commit e0cafd4

Please sign in to comment.