Merge remote-tracking branch 'origin/user_profile'

redbrickboard/accounts/templates/accounts/list.html

+{% extends "base.html" %}
+
+{% block content %}
+{% for object in object_list %}
+<a href="{{ object.get_absolute_url }}">{{ object.first_name }}</a> <br>
+{% endfor %}
+{% endblock %}
\ No newline at end of file

redbrickboard/accounts/templates/accounts/login.html

@@ -5,8 +5,8 @@
 {% endblock %}
 
 {% block content %}
-<div id="login-container" class="d-flex my-5">
-    <div id="login-form" class="mx-auto px-3 py-4 bg-white" style="width: 23rem;">
+<div id="rbb-container container" class="d-flex my-5">
+    <div id="rbb-section" class="mx-auto px-3 py-4 bg-white" style="width: 23rem;">
         <p class="h1">Log in</p>
         <form method="POST" autocomplete="off">
             {% csrf_token %}

redbrickboard/accounts/templates/accounts/profile.html

+{% extends "base.html" %}
+
+{% block content %}
+<div id="rbb-container container" class="d-flex my-5">
+    <div id="rbb-section" class="mx-auto px-3 py-4 bg-white" style="width: 59rem;">
+        <div class="row mx-4 mt-4 mb-5">
+            <div class="col">
+                <img class="img-fluid img-test float-end" src="https://placehold.co/400x400"/>
+            </div>
+            <div class="col">
+                <p class="h1 blue-text">{{ object.first_name }} {{ object.last_name }}</p>
+                {% comment %} <p><span class="badge badge-pill">{{ object.role }}</span></p> {% endcomment %}
+                <span class="profile-pill rounded-pill">
+                    {{ object.role.capitalize }}
+                    </span>
+                <p class="my-3 body-text">{{ object.bio }}</p>
+            </div>
+        </div>
+        <div class="row">
+            <p class="h1 blue-text">UPCOMING EVENTS</h1>
+            {% comment %} generate list of upcoming events {% endcomment %}
+        </div>
+        <div class="row">
+            <p class="h1 blue-text">EVENTS ATTENDED</h1>
+            {% comment %} generate list of upcoming events {% endcomment %}
+        </div>
+        <div class="row">
+            <p class="h1 blue-text">EVENTS ORGANIZED</h1>
+            {% comment %} generate list of upcoming events {% endcomment %}
+        </div>
+    </div>
+</div>
+
+{% endblock %}
\ No newline at end of file

redbrickboard/accounts/urls.py

 from django.urls import path
 
-from . import views
+from .views import *
 
 app_name = "accounts"
 
 urlpatterns = [
-    path('login', views.login_page, name="login"),
-    path('register', views.register, name="register"),
-    path('logout', views.user_logout, name="logout"),
-    path('auth-receiver', views.auth_receiver, name="auth-receiver")
+    path('login', login_page, name="login"),
+    path('register', register, name="register"),
+    path('logout', user_logout, name="logout"),
+    path('auth-receiver', auth_receiver, name="auth-receiver"),
+    path('list', UserList.as_view(), name="list"),
+    path('profile/<int:pk>', UserProfile.as_view(), name="profile")
 ]
\ No newline at end of file

redbrickboard/accounts/views.py

@@ -6,7 +6,8 @@ from google.oauth2 import id_token
 from google.auth.transport import requests
 
 from .forms import CustomUserCreationForm, CustomUserAuthenticationForm
-
+from django.views.generic.detail import DetailView
+from django.views.generic.list import ListView
 
 from django.contrib.auth.models import auth
 from django.contrib.auth import authenticate, login, logout
@@ -89,3 +90,11 @@ def auth_receiver(request):
     print("Login Successful")
     return redirect("index")
 
+
+class UserProfile(DetailView):
+    model = models.CustomUser
+    template_name = 'accounts/profile.html'
+
+class UserList(ListView):
+    model = models.CustomUser
+    template_name = 'accounts/list.html'
\ No newline at end of file

redbrickboard/static/css/custom.css

 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inria+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
 
 :root {
      --theme-prusian-blue: #003049;
@@ -13,6 +14,16 @@
      font-size: 1rem;
 }
 
+.blue-text {
+     color: var(--theme-prusian-blue);
+}
+
+.body-text {
+     font-family: 'Inria Sans';
+     font-weight: 400;
+     font-style: normal;
+}
+
 body {
      background-color: var(--theme-dutch-white);
      background-image: url("/static/images/Continuous Background.png");
@@ -88,12 +99,12 @@ body {
      height: 100vh;
 }
 
-#login-container {
+#rbb-container {
      align-items: center;
      justify-content: center;
 }
 
-#login-form {
+#rbb-section {
      border-radius: 0.625rem;
      border: 1px solid #000;
      background: #FFF;
@@ -117,3 +128,17 @@ body {
      background: #DF4E4E;
      border-color: #DF4E4E;
 }
+
+.profile-pill {
+     padding: .35em .65em;
+     font-size: .75em;
+     font-weight: 700;
+     line-height: 1;
+     color: #fff;
+     text-align: center;
+     white-space: nowrap;
+     vertical-align: baseline;
+     border-radius: .25rem;
+     background-color: var(--theme-bright-red);
+}
+