Oupsie

accounts/views/login.py

@@ -18,6 +18,6 @@ class LoginView(APIView):
 		serializer.is_valid(raise_exception=True)
 		user = serializer.get_user(data)
 		if user is None:
-			return Response({'user': ['Username or password wrong.']}, status.HTTP_200_OK)
+			return Response({'error': ['Username or password wrong.']}, status.HTTP_400_BAD_REQUEST)
 		login(request, user)
-		return Response({'id': user.pk}, status=status.HTTP_200_OK)
+		return Response({'id': user.pk}, status=status.HTTP_200_OK)

frontend/static/css/bootstrap-5.3.2/bootstrap-reboot.css

@@ -0,0 +1,597 @@
+/*!
+ * Bootstrap Reboot v5.3.2 (https://getbootstrap.com/)
+ * Copyright 2011-2023 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+:root,
+[data-bs-theme=light] {
+  --bs-blue: #0d6efd;
+  --bs-indigo: #6610f2;
+  --bs-purple: #6f42c1;
+  --bs-pink: #d63384;
+  --bs-red: #dc3545;
+  --bs-orange: #fd7e14;
+  --bs-yellow: #ffc107;
+  --bs-green: #198754;
+  --bs-teal: #20c997;
+  --bs-cyan: #0dcaf0;
+  --bs-black: #000;
+  --bs-white: #fff;
+  --bs-gray: #6c757d;
+  --bs-gray-dark: #343a40;
+  --bs-gray-100: #f8f9fa;
+  --bs-gray-200: #e9ecef;
+  --bs-gray-300: #dee2e6;
+  --bs-gray-400: #ced4da;
+  --bs-gray-500: #adb5bd;
+  --bs-gray-600: #6c757d;
+  --bs-gray-700: #495057;
+  --bs-gray-800: #343a40;
+  --bs-gray-900: #212529;
+  --bs-primary: #0d6efd;
+  --bs-secondary: #6c757d;
+  --bs-success: #198754;
+  --bs-info: #0dcaf0;
+  --bs-warning: #ffc107;
+  --bs-danger: #dc3545;
+  --bs-light: #f8f9fa;
+  --bs-dark: #212529;
+  --bs-primary-rgb: 13, 110, 253;
+  --bs-secondary-rgb: 108, 117, 125;
+  --bs-success-rgb: 25, 135, 84;
+  --bs-info-rgb: 13, 202, 240;
+  --bs-warning-rgb: 255, 193, 7;
+  --bs-danger-rgb: 220, 53, 69;
+  --bs-light-rgb: 248, 249, 250;
+  --bs-dark-rgb: 33, 37, 41;
+  --bs-primary-text-emphasis: #052c65;
+  --bs-secondary-text-emphasis: #2b2f32;
+  --bs-success-text-emphasis: #0a3622;
+  --bs-info-text-emphasis: #055160;
+  --bs-warning-text-emphasis: #664d03;
+  --bs-danger-text-emphasis: #58151c;
+  --bs-light-text-emphasis: #495057;
+  --bs-dark-text-emphasis: #495057;
+  --bs-primary-bg-subtle: #cfe2ff;
+  --bs-secondary-bg-subtle: #e2e3e5;
+  --bs-success-bg-subtle: #d1e7dd;
+  --bs-info-bg-subtle: #cff4fc;
+  --bs-warning-bg-subtle: #fff3cd;
+  --bs-danger-bg-subtle: #f8d7da;
+  --bs-light-bg-subtle: #fcfcfd;
+  --bs-dark-bg-subtle: #ced4da;
+  --bs-primary-border-subtle: #9ec5fe;
+  --bs-secondary-border-subtle: #c4c8cb;
+  --bs-success-border-subtle: #a3cfbb;
+  --bs-info-border-subtle: #9eeaf9;
+  --bs-warning-border-subtle: #ffe69c;
+  --bs-danger-border-subtle: #f1aeb5;
+  --bs-light-border-subtle: #e9ecef;
+  --bs-dark-border-subtle: #adb5bd;
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-body-font-size: 1rem;
+  --bs-body-font-weight: 400;
+  --bs-body-line-height: 1.5;
+  --bs-body-color: #212529;
+  --bs-body-color-rgb: 33, 37, 41;
+  --bs-body-bg: #fff;
+  --bs-body-bg-rgb: 255, 255, 255;
+  --bs-emphasis-color: #000;
+  --bs-emphasis-color-rgb: 0, 0, 0;
+  --bs-secondary-color: rgba(33, 37, 41, 0.75);
+  --bs-secondary-color-rgb: 33, 37, 41;
+  --bs-secondary-bg: #e9ecef;
+  --bs-secondary-bg-rgb: 233, 236, 239;
+  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
+  --bs-tertiary-color-rgb: 33, 37, 41;
+  --bs-tertiary-bg: #f8f9fa;
+  --bs-tertiary-bg-rgb: 248, 249, 250;
+  --bs-heading-color: inherit;
+  --bs-link-color: #0d6efd;
+  --bs-link-color-rgb: 13, 110, 253;
+  --bs-link-decoration: underline;
+  --bs-link-hover-color: #0a58ca;
+  --bs-link-hover-color-rgb: 10, 88, 202;
+  --bs-code-color: #d63384;
+  --bs-highlight-color: #212529;
+  --bs-highlight-bg: #fff3cd;
+  --bs-border-width: 1px;
+  --bs-border-style: solid;
+  --bs-border-color: #dee2e6;
+  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
+  --bs-border-radius: 0.375rem;
+  --bs-border-radius-sm: 0.25rem;
+  --bs-border-radius-lg: 0.5rem;
+  --bs-border-radius-xl: 1rem;
+  --bs-border-radius-xxl: 2rem;
+  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
+  --bs-border-radius-pill: 50rem;
+  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
+  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+  --bs-focus-ring-width: 0.25rem;
+  --bs-focus-ring-opacity: 0.25;
+  --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
+  --bs-form-valid-color: #198754;
+  --bs-form-valid-border-color: #198754;
+  --bs-form-invalid-color: #dc3545;
+  --bs-form-invalid-border-color: #dc3545;
+}
+
+[data-bs-theme=dark] {
+  color-scheme: dark;
+  --bs-body-color: #dee2e6;
+  --bs-body-color-rgb: 222, 226, 230;
+  --bs-body-bg: #212529;
+  --bs-body-bg-rgb: 33, 37, 41;
+  --bs-emphasis-color: #fff;
+  --bs-emphasis-color-rgb: 255, 255, 255;
+  --bs-secondary-color: rgba(222, 226, 230, 0.75);
+  --bs-secondary-color-rgb: 222, 226, 230;
+  --bs-secondary-bg: #343a40;
+  --bs-secondary-bg-rgb: 52, 58, 64;
+  --bs-tertiary-color: rgba(222, 226, 230, 0.5);
+  --bs-tertiary-color-rgb: 222, 226, 230;
+  --bs-tertiary-bg: #2b3035;
+  --bs-tertiary-bg-rgb: 43, 48, 53;
+  --bs-primary-text-emphasis: #6ea8fe;
+  --bs-secondary-text-emphasis: #a7acb1;
+  --bs-success-text-emphasis: #75b798;
+  --bs-info-text-emphasis: #6edff6;
+  --bs-warning-text-emphasis: #ffda6a;
+  --bs-danger-text-emphasis: #ea868f;
+  --bs-light-text-emphasis: #f8f9fa;
+  --bs-dark-text-emphasis: #dee2e6;
+  --bs-primary-bg-subtle: #031633;
+  --bs-secondary-bg-subtle: #161719;
+  --bs-success-bg-subtle: #051b11;
+  --bs-info-bg-subtle: #032830;
+  --bs-warning-bg-subtle: #332701;
+  --bs-danger-bg-subtle: #2c0b0e;
+  --bs-light-bg-subtle: #343a40;
+  --bs-dark-bg-subtle: #1a1d20;
+  --bs-primary-border-subtle: #084298;
+  --bs-secondary-border-subtle: #41464b;
+  --bs-success-border-subtle: #0f5132;
+  --bs-info-border-subtle: #087990;
+  --bs-warning-border-subtle: #997404;
+  --bs-danger-border-subtle: #842029;
+  --bs-light-border-subtle: #495057;
+  --bs-dark-border-subtle: #343a40;
+  --bs-heading-color: inherit;
+  --bs-link-color: #6ea8fe;
+  --bs-link-hover-color: #8bb9fe;
+  --bs-link-color-rgb: 110, 168, 254;
+  --bs-link-hover-color-rgb: 139, 185, 254;
+  --bs-code-color: #e685b5;
+  --bs-highlight-color: #dee2e6;
+  --bs-highlight-bg: #664d03;
+  --bs-border-color: #495057;
+  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
+  --bs-form-valid-color: #75b798;
+  --bs-form-valid-border-color: #75b798;
+  --bs-form-invalid-color: #ea868f;
+  --bs-form-invalid-border-color: #ea868f;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}
+
+body {
+  margin: 0;
+  font-family: var(--bs-body-font-family);
+  font-size: var(--bs-body-font-size);
+  font-weight: var(--bs-body-font-weight);
+  line-height: var(--bs-body-line-height);
+  color: var(--bs-body-color);
+  text-align: var(--bs-body-text-align);
+  background-color: var(--bs-body-bg);
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+hr {
+  margin: 1rem 0;
+  color: inherit;
+  border: 0;
+  border-top: var(--bs-border-width) solid;
+  opacity: 0.25;
+}
+
+h6, h5, h4, h3, h2, h1 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+  color: var(--bs-heading-color);
+}
+
+h1 {
+  font-size: calc(1.375rem + 1.5vw);
+}
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 2.5rem;
+  }
+}
+
+h2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  h2 {
+    font-size: 2rem;
+  }
+}
+
+h3 {
+  font-size: calc(1.3rem + 0.6vw);
+}
+@media (min-width: 1200px) {
+  h3 {
+    font-size: 1.75rem;
+  }
+}
+
+h4 {
+  font-size: calc(1.275rem + 0.3vw);
+}
+@media (min-width: 1200px) {
+  h4 {
+    font-size: 1.5rem;
+  }
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title] {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul {
+  padding-left: 2rem;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-left: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 0.875em;
+}
+
+mark {
+  padding: 0.1875em;
+  color: var(--bs-highlight-color);
+  background-color: var(--bs-highlight-bg);
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+a {
+  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
+  text-decoration: underline;
+}
+a:hover {
+  --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
+}
+
+a:not([href]):not([class]), a:not([href]):not([class]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: var(--bs-font-monospace);
+  font-size: 1em;
+}
+
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  font-size: 0.875em;
+}
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
+}
+
+code {
+  font-size: 0.875em;
+  color: var(--bs-code-color);
+  word-wrap: break-word;
+}
+a > code {
+  color: inherit;
+}
+
+kbd {
+  padding: 0.1875rem 0.375rem;
+  font-size: 0.875em;
+  color: var(--bs-body-bg);
+  background-color: var(--bs-body-color);
+  border-radius: 0.25rem;
+}
+kbd kbd {
+  padding: 0;
+  font-size: 1em;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: var(--bs-secondary-color);
+  text-align: left;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+label {
+  display: inline-block;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+[role=button] {
+  cursor: pointer;
+}
+
+select {
+  word-wrap: normal;
+}
+select:disabled {
+  opacity: 1;
+}
+
+[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
+  display: none !important;
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+button:not(:disabled),
+[type=button]:not(:disabled),
+[type=reset]:not(:disabled),
+[type=submit]:not(:disabled) {
+  cursor: pointer;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  float: left;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0.5rem;
+  font-size: calc(1.275rem + 0.3vw);
+  line-height: inherit;
+}
+@media (min-width: 1200px) {
+  legend {
+    font-size: 1.5rem;
+  }
+}
+legend + * {
+  clear: left;
+}
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+/* rtl:raw:
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+*/
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+::file-selector-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+iframe {
+  border: 0;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+/*# sourceMappingURL=bootstrap-reboot.css.map */

frontend/static/css/bootstrap-5.3.2/bootstrap-reboot.rtl.css

@@ -0,0 +1,594 @@
+/*!
+ * Bootstrap Reboot v5.3.2 (https://getbootstrap.com/)
+ * Copyright 2011-2023 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+:root,
+[data-bs-theme=light] {
+  --bs-blue: #0d6efd;
+  --bs-indigo: #6610f2;
+  --bs-purple: #6f42c1;
+  --bs-pink: #d63384;
+  --bs-red: #dc3545;
+  --bs-orange: #fd7e14;
+  --bs-yellow: #ffc107;
+  --bs-green: #198754;
+  --bs-teal: #20c997;
+  --bs-cyan: #0dcaf0;
+  --bs-black: #000;
+  --bs-white: #fff;
+  --bs-gray: #6c757d;
+  --bs-gray-dark: #343a40;
+  --bs-gray-100: #f8f9fa;
+  --bs-gray-200: #e9ecef;
+  --bs-gray-300: #dee2e6;
+  --bs-gray-400: #ced4da;
+  --bs-gray-500: #adb5bd;
+  --bs-gray-600: #6c757d;
+  --bs-gray-700: #495057;
+  --bs-gray-800: #343a40;
+  --bs-gray-900: #212529;
+  --bs-primary: #0d6efd;
+  --bs-secondary: #6c757d;
+  --bs-success: #198754;
+  --bs-info: #0dcaf0;
+  --bs-warning: #ffc107;
+  --bs-danger: #dc3545;
+  --bs-light: #f8f9fa;
+  --bs-dark: #212529;
+  --bs-primary-rgb: 13, 110, 253;
+  --bs-secondary-rgb: 108, 117, 125;
+  --bs-success-rgb: 25, 135, 84;
+  --bs-info-rgb: 13, 202, 240;
+  --bs-warning-rgb: 255, 193, 7;
+  --bs-danger-rgb: 220, 53, 69;
+  --bs-light-rgb: 248, 249, 250;
+  --bs-dark-rgb: 33, 37, 41;
+  --bs-primary-text-emphasis: #052c65;
+  --bs-secondary-text-emphasis: #2b2f32;
+  --bs-success-text-emphasis: #0a3622;
+  --bs-info-text-emphasis: #055160;
+  --bs-warning-text-emphasis: #664d03;
+  --bs-danger-text-emphasis: #58151c;
+  --bs-light-text-emphasis: #495057;
+  --bs-dark-text-emphasis: #495057;
+  --bs-primary-bg-subtle: #cfe2ff;
+  --bs-secondary-bg-subtle: #e2e3e5;
+  --bs-success-bg-subtle: #d1e7dd;
+  --bs-info-bg-subtle: #cff4fc;
+  --bs-warning-bg-subtle: #fff3cd;
+  --bs-danger-bg-subtle: #f8d7da;
+  --bs-light-bg-subtle: #fcfcfd;
+  --bs-dark-bg-subtle: #ced4da;
+  --bs-primary-border-subtle: #9ec5fe;
+  --bs-secondary-border-subtle: #c4c8cb;
+  --bs-success-border-subtle: #a3cfbb;
+  --bs-info-border-subtle: #9eeaf9;
+  --bs-warning-border-subtle: #ffe69c;
+  --bs-danger-border-subtle: #f1aeb5;
+  --bs-light-border-subtle: #e9ecef;
+  --bs-dark-border-subtle: #adb5bd;
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-body-font-size: 1rem;
+  --bs-body-font-weight: 400;
+  --bs-body-line-height: 1.5;
+  --bs-body-color: #212529;
+  --bs-body-color-rgb: 33, 37, 41;
+  --bs-body-bg: #fff;
+  --bs-body-bg-rgb: 255, 255, 255;
+  --bs-emphasis-color: #000;
+  --bs-emphasis-color-rgb: 0, 0, 0;
+  --bs-secondary-color: rgba(33, 37, 41, 0.75);
+  --bs-secondary-color-rgb: 33, 37, 41;
+  --bs-secondary-bg: #e9ecef;
+  --bs-secondary-bg-rgb: 233, 236, 239;
+  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
+  --bs-tertiary-color-rgb: 33, 37, 41;
+  --bs-tertiary-bg: #f8f9fa;
+  --bs-tertiary-bg-rgb: 248, 249, 250;
+  --bs-heading-color: inherit;
+  --bs-link-color: #0d6efd;
+  --bs-link-color-rgb: 13, 110, 253;
+  --bs-link-decoration: underline;
+  --bs-link-hover-color: #0a58ca;
+  --bs-link-hover-color-rgb: 10, 88, 202;
+  --bs-code-color: #d63384;
+  --bs-highlight-color: #212529;
+  --bs-highlight-bg: #fff3cd;
+  --bs-border-width: 1px;
+  --bs-border-style: solid;
+  --bs-border-color: #dee2e6;
+  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
+  --bs-border-radius: 0.375rem;
+  --bs-border-radius-sm: 0.25rem;
+  --bs-border-radius-lg: 0.5rem;
+  --bs-border-radius-xl: 1rem;
+  --bs-border-radius-xxl: 2rem;
+  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
+  --bs-border-radius-pill: 50rem;
+  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
+  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+  --bs-focus-ring-width: 0.25rem;
+  --bs-focus-ring-opacity: 0.25;
+  --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
+  --bs-form-valid-color: #198754;
+  --bs-form-valid-border-color: #198754;
+  --bs-form-invalid-color: #dc3545;
+  --bs-form-invalid-border-color: #dc3545;
+}
+
+[data-bs-theme=dark] {
+  color-scheme: dark;
+  --bs-body-color: #dee2e6;
+  --bs-body-color-rgb: 222, 226, 230;
+  --bs-body-bg: #212529;
+  --bs-body-bg-rgb: 33, 37, 41;
+  --bs-emphasis-color: #fff;
+  --bs-emphasis-color-rgb: 255, 255, 255;
+  --bs-secondary-color: rgba(222, 226, 230, 0.75);
+  --bs-secondary-color-rgb: 222, 226, 230;
+  --bs-secondary-bg: #343a40;
+  --bs-secondary-bg-rgb: 52, 58, 64;
+  --bs-tertiary-color: rgba(222, 226, 230, 0.5);
+  --bs-tertiary-color-rgb: 222, 226, 230;
+  --bs-tertiary-bg: #2b3035;
+  --bs-tertiary-bg-rgb: 43, 48, 53;
+  --bs-primary-text-emphasis: #6ea8fe;
+  --bs-secondary-text-emphasis: #a7acb1;
+  --bs-success-text-emphasis: #75b798;
+  --bs-info-text-emphasis: #6edff6;
+  --bs-warning-text-emphasis: #ffda6a;
+  --bs-danger-text-emphasis: #ea868f;
+  --bs-light-text-emphasis: #f8f9fa;
+  --bs-dark-text-emphasis: #dee2e6;
+  --bs-primary-bg-subtle: #031633;
+  --bs-secondary-bg-subtle: #161719;
+  --bs-success-bg-subtle: #051b11;
+  --bs-info-bg-subtle: #032830;
+  --bs-warning-bg-subtle: #332701;
+  --bs-danger-bg-subtle: #2c0b0e;
+  --bs-light-bg-subtle: #343a40;
+  --bs-dark-bg-subtle: #1a1d20;
+  --bs-primary-border-subtle: #084298;
+  --bs-secondary-border-subtle: #41464b;
+  --bs-success-border-subtle: #0f5132;
+  --bs-info-border-subtle: #087990;
+  --bs-warning-border-subtle: #997404;
+  --bs-danger-border-subtle: #842029;
+  --bs-light-border-subtle: #495057;
+  --bs-dark-border-subtle: #343a40;
+  --bs-heading-color: inherit;
+  --bs-link-color: #6ea8fe;
+  --bs-link-hover-color: #8bb9fe;
+  --bs-link-color-rgb: 110, 168, 254;
+  --bs-link-hover-color-rgb: 139, 185, 254;
+  --bs-code-color: #e685b5;
+  --bs-highlight-color: #dee2e6;
+  --bs-highlight-bg: #664d03;
+  --bs-border-color: #495057;
+  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
+  --bs-form-valid-color: #75b798;
+  --bs-form-valid-border-color: #75b798;
+  --bs-form-invalid-color: #ea868f;
+  --bs-form-invalid-border-color: #ea868f;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}
+
+body {
+  margin: 0;
+  font-family: var(--bs-body-font-family);
+  font-size: var(--bs-body-font-size);
+  font-weight: var(--bs-body-font-weight);
+  line-height: var(--bs-body-line-height);
+  color: var(--bs-body-color);
+  text-align: var(--bs-body-text-align);
+  background-color: var(--bs-body-bg);
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+hr {
+  margin: 1rem 0;
+  color: inherit;
+  border: 0;
+  border-top: var(--bs-border-width) solid;
+  opacity: 0.25;
+}
+
+h6, h5, h4, h3, h2, h1 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+  color: var(--bs-heading-color);
+}
+
+h1 {
+  font-size: calc(1.375rem + 1.5vw);
+}
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 2.5rem;
+  }
+}
+
+h2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  h2 {
+    font-size: 2rem;
+  }
+}
+
+h3 {
+  font-size: calc(1.3rem + 0.6vw);
+}
+@media (min-width: 1200px) {
+  h3 {
+    font-size: 1.75rem;
+  }
+}
+
+h4 {
+  font-size: calc(1.275rem + 0.3vw);
+}
+@media (min-width: 1200px) {
+  h4 {
+    font-size: 1.5rem;
+  }
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title] {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul {
+  padding-right: 2rem;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-right: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 0.875em;
+}
+
+mark {
+  padding: 0.1875em;
+  color: var(--bs-highlight-color);
+  background-color: var(--bs-highlight-bg);
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+a {
+  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
+  text-decoration: underline;
+}
+a:hover {
+  --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
+}
+
+a:not([href]):not([class]), a:not([href]):not([class]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: var(--bs-font-monospace);
+  font-size: 1em;
+}
+
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  font-size: 0.875em;
+}
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
+}
+
+code {
+  font-size: 0.875em;
+  color: var(--bs-code-color);
+  word-wrap: break-word;
+}
+a > code {
+  color: inherit;
+}
+
+kbd {
+  padding: 0.1875rem 0.375rem;
+  font-size: 0.875em;
+  color: var(--bs-body-bg);
+  background-color: var(--bs-body-color);
+  border-radius: 0.25rem;
+}
+kbd kbd {
+  padding: 0;
+  font-size: 1em;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: var(--bs-secondary-color);
+  text-align: right;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+label {
+  display: inline-block;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+[role=button] {
+  cursor: pointer;
+}
+
+select {
+  word-wrap: normal;
+}
+select:disabled {
+  opacity: 1;
+}
+
+[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
+  display: none !important;
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+button:not(:disabled),
+[type=button]:not(:disabled),
+[type=reset]:not(:disabled),
+[type=submit]:not(:disabled) {
+  cursor: pointer;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  float: right;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0.5rem;
+  font-size: calc(1.275rem + 0.3vw);
+  line-height: inherit;
+}
+@media (min-width: 1200px) {
+  legend {
+    font-size: 1.5rem;
+  }
+}
+legend + * {
+  clear: right;
+}
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+::file-selector-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+iframe {
+  border: 0;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden] {
+  display: none !important;
+}
+/*# sourceMappingURL=bootstrap-reboot.rtl.css.map */

frontend/static/css/game.css

@@ -0,0 +1,7 @@
+#canva {
+    background-color: white;
+    border: 1px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}

frontend/static/js/api/Game.js

@@ -1,34 +0,0 @@
-class Game
-{
-	/**
-	 * @param  {Client} client
-	 */
-	constructor(client, id)
-	{
-		/**
-		 * @type {Client}
-		 */
-        this.client = client;
-        this.id = id;
-    }
-
-    async init()
-    {
-        let response = await this.client._get(`/api/games/${this.id}`);
-
-        if (response.status !== 200)
-            return response.status;
-        
-        let response_data = await response.json();
-    
-        this.players_id = response_data.players_id;
-        this.state = response_data.state;
-        this.started = response_data.started;
-        this.finished = response_data.finished;
-        this.winner_id = this.finished ? response_data.winner_id : undefined;
-
-        return 0;
-    }
-}
-
-export { Game }

frontend/static/js/api/account.js

@@ -20,7 +20,7 @@ class Account
 
 		if (response_data == "user created")
 		{
-			this._logged = true;
+			await this.client._update_logged(true);
 			return null;
 		}
 		return response_data
@@ -31,13 +31,13 @@ class Account
 		let response = await this.client._delete("/api/accounts/delete", {password: password});
 		let response_data = await response.json();
 
-		if (JSON.stringify(response_data) == JSON.stringify({'detail': 'Authentication credentials were not provided.'}))
+		if (response.status === 403)
 		{
 			this.client._update_logged(false);
-			return null;			
+			return null;
 		}
 		if (response_data == "user deleted")
-			this.client._logged = false;
+			this.client._update_logged(false);
 		return response_data;
 	}
 
@@ -46,10 +46,10 @@ class Account
 		let response = await this.client._get("/api/accounts/edit");
 		let response_data = await response.json();
 
-		if (JSON.stringify(response_data) == JSON.stringify({'detail': 'Authentication credentials were not provided.'}))
+		if (response.status === 403)
 		{
-			this.client._logged = false;
-			return null;			
+			this.client._update_logged(false);
+			return null;
 		}
 		return response_data;
 	}
@@ -60,13 +60,13 @@ class Account
 		let response = await this.client._patch_json("/api/accounts/edit", data);
 		let response_data = await response.json();
 
-		if (JSON.stringify(response_data) == JSON.stringify({'detail': 'Authentication credentials were not provided.'}))
+		if (response.status === 403)
 		{
-			this.client._;
+			this.client._update_logged(false);
 			return null;
 		}
 		return response_data;
 	}
 }
 
-export { Account }
+export { Account }

frontend/static/js/api/client.js

@@ -37,8 +37,8 @@ class Client
 	async isAuthentificate()
 	{
 		if (this._logged == undefined)
-			this.logged = await this._test_logged();
-		return this.logged;	
+			this._logged = await this._test_logged();
+		return this._logged;	
 	}
 
 	async _get(uri, data)
@@ -103,31 +103,40 @@ class Client
 
 	async _update_logged(state)
 	{
-		if (this.logged == state)
+		if (this._logged == state)
 			return;
 
 		if (state)
 		{
 			this.me = new MyProfile(this);
 			await this.me.init();
+			[...document.getElementById('nav-account-links').children].forEach(el => {
+				if (el.matches('[logged-in]'))
+					el.classList.remove('d-none');
+				else
+					el.classList.add('d-none');
+			});
 		}
 		else
 		{
 			this.me = undefined;
+			[...document.getElementById('nav-account-links').children].forEach(el => {
+				if (el.matches('[logged-in]'))
+					el.classList.add('d-none');
+				else
+					el.classList.remove('d-none');
+			});
 		}
-		this.logged = state;
+		this._logged = state;
 	}
 
 	async login(username, password)
 	{
 		let response = await this._post("/api/accounts/login", {username: username, password: password})
-		
-		if (response.status != 200)
-			return response.status;
+		if (response.status == 200)
+			await this._update_logged(true);
 
-		this._update_logged(true);
-
-		return 0;
+		return response;
 	}
 
 	async logout()

frontend/static/js/api/game/Ball.js

@@ -0,0 +1,14 @@
+
+
+class Ball
+{
+    constructor (position_x, position_y, velocity_x, velocity_y)
+    {
+        this.position_x = position_x;
+        this.position_y = position_y;
+        this.velocity_x = velocity_x;
+        this.velocity_y = velocity_y; 
+    }
+}
+
+export { Ball }

frontend/static/js/api/game/Game.js

@@ -0,0 +1,122 @@
+import { Ball } from "./Ball.js";
+import { GameConfig } from "./GameConfig.js"
+import { Player } from "./Player.js";
+
+class Game
+{
+	/**
+	 * @param  {Client} client
+	 */
+	constructor(client, id)
+	{
+		/**
+		 * @type {Client}
+		 */
+        this.client = client;
+        this.id = id;
+    }
+
+    async init()
+    {
+        let response = await this.client._get(`/api/games/${this.id}`);
+
+        if (response.status !== 200)
+            return response.status;
+        
+        let response_data = await response.json();
+    
+        this.players_id = response_data.players_id;
+        this.state = response_data.state;
+        this.started = response_data.started;
+        this.finished = response_data.finished;
+        this.winner_id = this.finished ? response_data.winner_id : undefined;
+
+        //TODO invert line
+        if (false)
+        //if (this.finished === true || this.started === false)
+            return 0;
+
+        this.config = new GameConfig(this.client);
+        
+        let ret = await this.config.init();
+        if (ret !== 0)
+            return ret;
+
+        this.players = [];
+        response_data.players.forEach(player_data => {
+            let player = new Player(player_data.id, player_data.pos, player_data.nb_goal);
+            this.players.push(player);
+        });
+
+        this.ball = new Ball(response_data.ball_pos_x, response_data.ball_pos_y, response_data.ball_vel_x, response_data.ball_vel_y);
+
+        return 0;
+    }
+
+    _send(data)
+    {
+        this._socket.send(JSON.stringify(data));
+    }
+
+    _send_paddle()
+    {
+        this._send({"detail": "update_my_paddle_pos", "pos": this.players.find(player => player.id === this.client.me.id).pos});        
+    }
+
+    _update_paddles(data)
+    {
+        data.forEach(player_data => {
+            let player = this.players.find(player_data2 => player_data2.id === player_data)
+            
+            if (player === null)
+            {
+                console.error("error 1000: je ne comprends pas");
+                return;
+            }
+
+            player.pos = player_data.pos;
+        });
+    }
+
+    _update_ball(data)
+    {
+        this.ball.position_x = data.position_x;
+        this.ball.position_y = data.position_y;
+        this.ball.velocity_x = data.velocity_x;
+        this.ball.velocity_y = data.velocity_y; 
+    }
+
+    _update(data)
+    {
+        if (data.detail === "update_paddles")
+            this._update_paddles(data);
+        else if (data.detail === "update_ball")
+            this._
+    }
+
+    join()
+    {
+        if (this.started !== true || this.finished === true)
+        {
+            console.error("The Game is not currently ongoing.");
+            return;
+        }
+
+        let url = `${window.location.protocol[4] === 's' ? 'wss' : 'ws'}://${window.location.host}/ws/games/${this.id}`;
+
+        this._socket = WebSocket(url);
+
+        this._socket.onmessage = (event) => {
+			const data = JSON.parse(event.data);
+			this._update(data);
+		};
+    }
+
+    leave()
+    {
+        this._socket.close();
+        this._socket = undefined;
+    }
+}
+
+export { Game }

frontend/static/js/api/game/GameConfig.js

@@ -0,0 +1,43 @@
+class GameConfig
+{
+	/**
+	 * @param  {Client} client
+	 */
+	constructor(client)
+	{
+		/**
+		 * @type {Client}
+		 */
+        this.client = client;
+    }
+
+    async init()
+    {
+        let response = await this.client._get("/api/games/");
+        
+        if (response.status !== 200)
+            return response.status;
+
+        let response_data = await response.json();
+
+        
+        this.size_x = response_data.MAP_SIZE_X;
+        this.size_y = response_data.MAP_SIZE_Y;
+        this.center_x = this.size_x / 2;
+        this.center_y = this.size_y / 2;
+
+        this.paddle_ratio = response_data.PADDLE_RATIO;
+        this.wall_ratio = response_data.WALL_RATIO;
+
+        this.ball_speed_inc = response_data.BALL_SPEED_INC;
+        this.ball_speed_start = response_data.BALL_SPEED_START;
+
+        this.ball_size = response_data.BALL_SIZE;
+        this.ball_spawn_x = this.center_x;
+        this.ball_spawn_y = this.center_y;
+
+        return 0;
+    }
+}
+
+export { GameConfig }

frontend/static/js/api/game/MyPlayer.js

@@ -0,0 +1,7 @@
+import { Player } from "./Player";
+
+
+class MyPlayer extends Player
+{
+    
+}

frontend/static/js/api/game/Player.js

@@ -0,0 +1,12 @@
+
+class Player
+{
+    constructor(id, pos, nb_goal)
+    {
+        this.id = id;
+        this.pos = pos;
+        this.nb_goal = nb_goal;
+    }
+}
+
+export { Player }

frontend/static/js/index.js

@@ -117,9 +117,7 @@ document.addEventListener("DOMContentLoaded", () => {
     document.body.addEventListener("click", e => {
         if (e.target.matches("[data-link]")) {
             e.preventDefault();
-			document.querySelectorAll('[data-link]').forEach(e => {
-				e.classList.remove('active');
-			});
+			document.querySelector('[data-link].active').classList.remove('active');
 			e.target.classList.add('active');
             navigateTo(e.target.href.slice(location.origin.length));
         }

frontend/static/js/views/GameView.js

@@ -1,5 +1,5 @@
 import { client } from "../index.js";
-import { Game } from "../api/Game.js";
+import { Game } from "../api/game/Game.js";
 import AbstractView from "./abstracts/AbstractView.js";
 
 export default class extends AbstractView
@@ -10,24 +10,137 @@ export default class extends AbstractView
 		this.game = new Game(client, params.id);
     }
 
+    draw_wall(ctx, stop_x, stop_y)
+    {
+        ctx.lineTo(stop_x, stop_y);
+    }
+
+    draw_paddle(ctx, rail_start_x, rail_start_y, rail_stop_x, rail_stop_y, pos)
+    {
+        let rail_size = Math.abs(rail_stop_x - rail_start_x) + Math.abs(rail_stop_y - rail_start_y) 
+        
+        let paddle_size = rail_size * this.game.config.paddle_ratio;
+
+        let diff_x = rail_stop_x - rail_start_x,
+            diff_y = rail_stop_y - rail_start_y;
+        
+        let pos_x = rail_start_x + diff_x * pos,
+            pos_y = rail_start_y + diff_y * pos;
+        
+        let start_x = pos_x - (diff_x * (paddle_size / rail_size)),
+            start_y = pos_y - (diff_y * (paddle_size / rail_size)),
+            stop_x = pos_x + (diff_x * (paddle_size / rail_size)),
+            stop_y = pos_y + (diff_y * (paddle_size / rail_size));
+
+        console.log(start_x, start_y, stop_x, stop_y);
+        ctx.moveTo(start_x, start_y);
+        ctx.lineTo(stop_x, stop_y);
+
+        ctx.moveTo(rail_stop_x, rail_stop_y);
+    }
+
+    _down()
+    {
+        pl
+    }
+
+    draw_ball(ctx, x, y)
+    {
+        ctx.rect(x, y, this.game.config.ball_size, this.game.config.ball_size);
+    }
+
+    draw_sides(ctx, nb_sides)
+    {
+        let start_x,
+            start_y,
+            stop_x,
+            stop_y;
+        
+        for (let i = 0; i <= nb_sides; i++)
+        {
+            let angle = (i * 2 * Math.PI / nb_sides) + (Math.PI * 3 / 4);
+
+            stop_x = this.game.config.center_x + 400 * Math.cos(angle);
+            stop_y = this.game.config.center_y + 400 * Math.sin(angle);
+
+            if (i == 0)
+                ctx.moveTo(stop_x, start_y);
+            if (i % 2 == 0)
+                this.draw_wall(ctx, stop_x, stop_y);
+            else
+                this.draw_paddle(ctx, start_x, start_y, stop_x, stop_y, 0.5);
+
+            start_x = stop_x;
+            start_y = stop_y;
+        }
+    }
+
+    draw_game()
+    {
+        let ctx = document.getElementById('canva').getContext('2d');
+
+        ctx.beginPath()
+
+        this.draw_sides(ctx, (this.game.players_id.length +0) * 2);
+        this.draw_ball(ctx, this.game.ball_pos_x, this.game.ball_pos_y);
+
+        ctx.strokeStyle = "#000000";
+        ctx.lineWidth = 10;
+        ctx.stroke();
+    }
+
+    render_game()
+    {
+        while (true)
+        {
+            this.draw_game();
+            // TODO remove the line below
+            break;
+        }
+    }
+
+    start_game()
+    {
+        let canva = document.createElement("canvas");
+
+        canva.height = this.game.config.size_x;
+        canva.width = this.game.config.size_y;
+        canva.id = "canva"; 
+
+        document.getElementById("app").appendChild(canva);
+
+        this.game.join()
+        this.render_game();
+    }
+
+    async update_game_state()
+    {
+        await this.game.init();
+
+        document.getElementById("game-state").innerText = this.game.state;
+
+        //TODO invert line
+        //if (this.game.started === true && this.game.finished === false)
+        if (true)
+            this.start_game();
+    }
+
 	async postInit()
 	{
 		let error_code = await this.game.init();
 
         if (error_code)
             return error_code;
+
+        await this.update_game_state();
 	}
 
     async getHtml()
 	{
-        return `
-            <h1>Welcome back, Dom</h1>
-            <p>
-                Fugiat voluptate et nisi Lorem cillum anim sit do eiusmod occaecat irure do. Reprehenderit anim fugiat sint exercitation consequat. Sit anim laborum sit amet Lorem adipisicing ullamco duis. Anim in do magna ea pariatur et.
-            </p>
-            <p>
-                <a href="/posts" data-link>View recent posts</a>.
-            </p>
+        return /* HTML */ `
+            <link rel="stylesheet" href="/static/css/game.css">
+            <h2 id="game-state"></h2>
+            <div id="player_list"></div>
         `;
     }
 }

frontend/static/js/views/accounts/LoginView.js

@@ -7,16 +7,14 @@ async function login()
 	let username = document.getElementById("username-input").value;
 	let password = document.getElementById("password-input").value;
 	
-	let response_data = await client.login(username, password);
+	let response = await client.login(username, password);
 
-	if (response_data == null)
-	{
+	if (response.status == 200) {
 		navigateTo("/home");
-		return;
+	} else {
+		let error = await response.json();
+		fill_errors(error, "innerHTML");
 	}
-
-	clear("innerHTML", ["username", "user", "password"]);
-	fill_errors(response_data, "innerHTML");
 }
 
 export default class extends AbstractNonAuthentifiedView {
@@ -26,6 +24,17 @@ export default class extends AbstractNonAuthentifiedView {
 
 	async postInit()
 	{
+		let usernameField = document.getElementById('username-input');
+		usernameField.addEventListener('keydown', ev => {
+			if (ev.key === 'Enter')
+				login();
+		});
+		usernameField.focus();
+		let passwordField = document.getElementById('password-input');
+		passwordField.addEventListener('keydown', ev => {
+			if (ev.key === 'Enter')
+				login();
+		});
 		document.getElementById("login-button").onclick = login;
 	}
 
@@ -35,11 +44,9 @@ export default class extends AbstractNonAuthentifiedView {
 				<label>Login</label>
 				<link rel="stylesheet" href="/static/css/accounts/login.css">
 				<input type="text" id="username-input" placeholder="username">
-				<span id="username"></span>
 				<input type="password" id="password-input" placeholder="password">
-				<span id="password"></span>
 				<input type="button" value="Login" id="login-button">
-				<span id="user"></span>
+				<span id="error"></span>
 				<a href="/register" class="nav__link" data-link>Register</a>
 			</div>
         `;

frontend/static/js/views/accounts/LogoutView.js

@@ -5,7 +5,10 @@ export default class extends AbstractAuthentifiedView
 {
 	constructor(params) {
 		super(params, "Logout");
-		client.logout();
+	}
+
+	async postInit() {
+		await client.logout();
 		navigateTo("/login")
 	}
 }

frontend/static/js/views/accounts/RegisterView.js

@@ -6,7 +6,15 @@ async function register()
 {
 	let username = document.getElementById("username-input").value;
 	let password = document.getElementById("password-input").value;
-	
+	if (username === '' || password === '') {
+		clear("innerHTML", ["username", "password"]);
+		if (username === '')
+			document.getElementById('username').innerHTML = 'This field may not be blank.';
+		if (password === '')
+			document.getElementById('password').innerHTML = 'This field may not be blank.';
+		return;
+	}
+
 	let response_data = await client.account.create(username, password);
 
 	if (response_data == null)
@@ -26,6 +34,17 @@ export default class extends AbstractNonAuthentifiedView {
 
 	async postInit()
 	{
+		let usernameField = document.getElementById('username-input');
+		usernameField.addEventListener('keydown', ev => {
+			if (ev.key === 'Enter')
+				register();
+		});
+		usernameField.focus();
+		let passwordField = document.getElementById('password-input');
+		passwordField.addEventListener('keydown', ev => {
+			if (ev.key === 'Enter')
+				register();
+		});
 		document.getElementById("register-button").onclick = register;
 	}
 

frontend/templates/index.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Bozo Pong</title>
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+	<link rel="stylesheet" href="{% static 'css/bootstrap-5.3.2/bootstrap.css' %}">
 </head>
 <body data-bs-theme="dark">
 	<nav class="navbar navbar-expand-lg bg-body-tertiary rounded m-2">
@@ -15,9 +15,11 @@
 			<a href="/search" class="nav-link" data-link>Search</a>
 			<a href="/home" class="nav-link" data-link>Home</a>
 		</div>
-		<div class="navbar-nav d-flex justify-content-end flex-row gap-2">
+		<div id="nav-account-links" class="navbar-nav d-flex justify-content-end flex-row gap-2">
 			<a href="/login" class="nav-link" data-link>Login</a>
 			<a href="/register" class="nav-link" data-link>Register</a>
+			<a logged-in href="/me" class="nav-link d-none" data-link>My Profile</a>
+			<a logged-in href="/logout" class="nav-link d-none" data-link>Logout</a>
 		</div>
 	</div>
 	</nav>

games/config.py

@@ -1,9 +1,13 @@
-PADDLE_SPEED_MAX = 1
-PADDLE_SIZE_HEIGHT = 10
-PADDLE_SIZE_WIDTH = 100
+PADDLE_SPEED_PER_SECOND_MAX = 0.5
+PADDLE_RATIO = 0.1
 
-PADDLE_RAIL = PADDLE_SIZE_WIDTH * 5
+MAP_SIZE_X = 900
+MAP_SIZE_Y = 900
+
+WALL_RATIO = 1
 
 BALL_SPEED_INC = 1
 BALL_SPEED_START = 1
 BALL_SIZE = 4
+BALL_SPAWN_POS_X = MAP_SIZE_X / 2
+BALL_SPAWN_POS_Y = MAP_SIZE_Y / 2

games/consumers.py

@@ -28,7 +28,7 @@ class GameWebSocket(AsyncWebsocketConsumer):
 		self.room = game_room_manager.get(self.game_id)
 
 		if (self.room is None):
-			self.member.send("Game not found.")
+			self.send("Game not found.")
 			self.disconnect(1017)
 	
 		self.room.append(self.member)

games/objects/Ball.py

@@ -0,0 +1,8 @@
+from .. import config
+
+class Ball:
+    
+    def __init__(self) -> None:
+        self.x: float = config.BALL_SPAWN_POS_X
+        self.y: float = config.BALL_SPAWN_POS_Y
+        

games/objects/Game.py

@@ -0,0 +1,8 @@
+from .Ball import Ball
+from .Paddle import Paddle
+
+class Game:
+    
+    def __init__(self, paddles: [Paddle], ball: Ball) -> None:
+        self.ball: Ball = ball
+        self.paddles: [paddles] = paddles

games/objects/GameMember.py

@@ -14,4 +14,5 @@ class GameMember(AbstractRoomMember):
 			return
 
 	def send_ball(self, ball):
-		pass
+		self.send("update_ball_pos", {"x": ball.x,
+                                 	  "y": ball.y})

games/objects/Paddle.py

@@ -0,0 +1,8 @@
+
+
+class Player:
+    
+    def __init__(self, user_id, pos, nb_goal) -> None:
+        self.user_id = user_id
+        self.pos = pos
+        self.nb_goal = nb_goal

games/views.py

@@ -10,13 +10,17 @@ class GameConfigView(APIView):
     
 	permission_classes = (permissions.AllowAny,)
 
-	def get(self, request):
+	def get(self, request: HttpRequest):
 		config_data = {
-			"BALL_SIZE": config.BALL_SIZE,
+			"MAP_SIZE_X": config.MAP_SIZE_X,
+			"MAP_SIZE_Y": config.MAP_SIZE_Y,
+   
+			"WALL_RATIO": config.WALL_RATIO,
+   
 			"PADDLE_SPEED_MAX": config.PADDLE_SPEED_MAX,
-			"PADDLE_SIZE_HEIGHT": config.PADDLE_SIZE_HEIGHT,
-			"PADDLE_SIZE_WIDTH": config.PADDLE_SIZE_WIDTH,
-			"PADDLE_RAIL": config.PADDLE_RAIL,
+			"PADDLE_RATIO": config.PADDLE_RATIO,	
+ 
+ 			"BALL_SIZE": config.BALL_SIZE,
 			"BALL_SPEED_INC": config.BALL_SPEED_INC,
 			"BALL_SPEED_START": config.BALL_SPEED_START
 		}