Register account with email and password

.eslintrc.js

@@ -16,5 +16,6 @@ module.exports = {
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "@typescript-eslint/no-explicit-any": "off",
   },
 };

package-lock.json

@@ -1300,6 +1300,12 @@
         "@types/node": "*"
       }
     },
+    "@types/js-cookie": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.6.tgz",
+      "integrity": "sha512-+oY0FDTO2GYKEV0YPvSshGq9t7YozVkgvXLty7zogQNuCxBhT9/3INX9Q7H1aRZ4SUDRXAKlJuA4EA5nTt7SNw==",
+      "dev": true
+    },
     "@types/json-schema": {
       "version": "7.0.7",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
@@ -7622,6 +7628,11 @@
         }
       }
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz",

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "buefy": "^0.9.6",
     "core-js": "^3.6.5",
+    "js-cookie": "^2.2.1",
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
@@ -17,6 +18,7 @@
     "vue-router": "^3.2.0"
   },
   "devDependencies": {
+    "@types/js-cookie": "^2.2.6",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
     "@vue/cli-plugin-babel": "~4.5.0",

src/api.ts

@@ -0,0 +1,68 @@
+import Cookies from "js-cookie";
+
+class APIError extends Error {
+  constructor(message: string, public readonly errors: unknown) {
+    super(message);
+  }
+}
+
+class Model {
+  static async fetch(
+    method: "get" | "post",
+    endpoint: string,
+    item_callback: (item: any) => any
+  ) {
+    const init = {
+      headers: new Headers(),
+      method: method,
+      //body: JSON.stringify({})
+    };
+    const csrfToken = Cookies.get("csrftoken");
+    if (csrfToken != undefined) {
+      init.headers.set("X-CSRFToken", csrfToken);
+    }
+    init.headers.set("Accept", "application/json");
+    init.headers.set("Content-Type", "application/json");
+    const response = await fetch(`/api/${endpoint}`, init);
+    const dataOrErrors: Array<any> = await response.json();
+    if (response.status === 200) {
+      return dataOrErrors.map(item_callback);
+    } else {
+      throw new APIError(response.statusText, dataOrErrors);
+    }
+  }
+
+  protected async create(endpoint: string, data: any) {
+    const init = {
+      headers: new Headers(),
+      method: "post",
+      body: JSON.stringify(data),
+    };
+    const csrfToken = Cookies.get("csrftoken");
+    if (csrfToken != undefined) {
+      init.headers.set("X-CSRFToken", csrfToken);
+    }
+    init.headers.set("Accept", "application/json");
+    init.headers.set("Content-Type", "application/json");
+    const response = await fetch(`/api/${endpoint}/`, init);
+    const dataOrErrors: Array<any> = await response.json();
+    if (response.status !== 201) {
+      throw new APIError(response.statusText, dataOrErrors);
+    }
+  }
+}
+
+interface UserData {
+  email: string;
+  password: string;
+}
+
+export class User extends Model implements UserData {
+  constructor(public email: string, public password: string) {
+    super();
+  }
+
+  async signup(): Promise<void> {
+    await super.create("users", { email: this.email, password: this.password });
+  }
+}

src/components/LoginForm.vue

@@ -1,10 +1,10 @@
 <template>
-  <form class="box" @submit.prevent="">
+  <form class="box" @submit.prevent="doSignup">
     <b-field label="E-Mail-Adresse">
-      <b-input type="email" icon="user" ref="email" />
+      <b-input type="email" v-model="user.email" />
     </b-field>
     <b-field label="Kennwort">
-      <b-input type="password" icon="key" />
+      <b-input type="password" v-model="user.password" />
     </b-field>
 
     <div v-if="false" class="notification is-danger">
@@ -25,7 +25,14 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import { User } from "@/api";
 
 @Component
-export default class LoginForm extends Vue {}
+export default class LoginForm extends Vue {
+  private user = new User("", "");
+
+  private async doSignup() {
+    await this.user.signup();
+  }
+}
 </script>

userausfall/migrations/0003_auto_20210414_0827.py

@@ -0,0 +1,31 @@
+# Generated by Django 2.2.13 on 2021-04-14 08:27
+
+import django.contrib.auth.validators
+from django.db import migrations, models
+import userausfall.models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('userausfall', '0002_accountrequest'),
+    ]
+
+    operations = [
+        migrations.AlterModelManagers(
+            name='user',
+            managers=[
+                ('objects', userausfall.models.UserManager()),
+            ],
+        ),
+        migrations.AlterField(
+            model_name='user',
+            name='email',
+            field=models.EmailField(blank=True, max_length=254, unique=True, verbose_name='email address'),
+        ),
+        migrations.AlterField(
+            model_name='user',
+            name='username',
+            field=models.CharField(blank=True, error_messages={'unique': 'A user with that username already exists.'}, help_text='Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.', max_length=150, validators=[django.contrib.auth.validators.UnicodeUsernameValidator()], verbose_name='username'),
+        ),
+    ]

userausfall/models.py

@@ -1,9 +1,101 @@
-from django.contrib.auth.models import AbstractUser
+from django.contrib.auth.base_user import AbstractBaseUser, BaseUserManager
+from django.contrib.auth.models import PermissionsMixin
+from django.contrib.auth.validators import UnicodeUsernameValidator
 from django.db import models
+from django.utils import timezone
+from django.utils.translation import gettext_lazy as _
 
 
-class User(AbstractUser):
+class UserManager(BaseUserManager):
-    pass
+    use_in_migrations = True
+
+    def _create_user(self, email, password, **extra_fields):
+        """
+        Create and save a user with the given username, email, and password.
+        """
+        email = self.normalize_email(email)
+        # TODO: username = self.model.normalize_username(username)
+        user = self.model(email=email, **extra_fields)
+        user.set_password(password)
+        user.save(using=self._db)
+        return user
+
+    def create_user(self, email, password=None, **extra_fields):
+        extra_fields.setdefault('is_staff', False)
+        extra_fields.setdefault('is_superuser', False)
+        return self._create_user(email, password, **extra_fields)
+
+    def create_superuser(self, username, email, password, **extra_fields):
+        extra_fields.setdefault('is_staff', True)
+        extra_fields.setdefault('is_superuser', True)
+
+        if extra_fields.get('is_staff') is not True:
+            raise ValueError('Superuser must have is_staff=True.')
+        if extra_fields.get('is_superuser') is not True:
+            raise ValueError('Superuser must have is_superuser=True.')
+
+        return self._create_user(username, email, password, **extra_fields)
+
+
+class User(AbstractBaseUser, PermissionsMixin):
+    username_validator = UnicodeUsernameValidator()
+
+    username = models.CharField(
+        _('username'),
+        max_length=150,
+        help_text=_('Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.'),
+        validators=[username_validator],
+        error_messages={
+            'unique': _("A user with that username already exists."),
+        },
+        blank=True,
+    )
+    first_name = models.CharField(_('first name'), max_length=30, blank=True)
+    last_name = models.CharField(_('last name'), max_length=150, blank=True)
+    email = models.EmailField(_('email address'), unique=True, blank=True)
+    is_staff = models.BooleanField(
+        _('staff status'),
+        default=False,
+        help_text=_('Designates whether the user can log into this admin site.'),
+    )
+    is_active = models.BooleanField(
+        _('active'),
+        default=True,
+        help_text=_(
+            'Designates whether this user should be treated as active. '
+            'Unselect this instead of deleting accounts.'
+        ),
+    )
+    date_joined = models.DateTimeField(_('date joined'), default=timezone.now)
+
+    objects = UserManager()
+
+    EMAIL_FIELD = 'email'
+    USERNAME_FIELD = 'email'
+    REQUIRED_FIELDS = []
+
+    class Meta:
+        verbose_name = _('user')
+        verbose_name_plural = _('users')
+
+    def clean(self):
+        super().clean()
+        self.email = self.__class__.objects.normalize_email(self.email)
+
+    def get_full_name(self):
+        """
+        Return the first_name plus the last_name, with a space in between.
+        """
+        full_name = '%s %s' % (self.first_name, self.last_name)
+        return full_name.strip()
+
+    def get_short_name(self):
+        """Return the short name for the user."""
+        return self.first_name
+
+    def email_user(self, subject, message, from_email=None, **kwargs):
+        """Send an email to this user."""
+        send_mail(subject, message, from_email, [self.email], **kwargs)
 
 
 class AccountRequest(models.Model):

userausfall/rest_api/urls.py

@@ -2,5 +2,5 @@ from rest_framework import routers
 
 from userausfall.rest_api.views import AccountRequestViewSet
 
-router = routers.DefaultRouter(trailing_slash=False)
+router = routers.DefaultRouter(trailing_slash=True)
 router.register(r'account_requests', AccountRequestViewSet)

userausfall/settings.py

@@ -38,6 +38,7 @@ INSTALLED_APPS = [
     'django.contrib.staticfiles',
     'userausfall',
     'rest_framework',
+    'djoser',
 ]
 
 MIDDLEWARE = [

userausfall/urls.py

@@ -5,5 +5,6 @@ from userausfall.rest_api import urls as rest_api_urls
 
 urlpatterns = [
     path('admin/', admin.site.urls),
-    path('api/', include(rest_api_urls.router.urls))
+    path('api/', include(rest_api_urls.router.urls)),
+    path('api/', include('djoser.urls')),
 ]

vue.config.js

@@ -0,0 +1,13 @@
+/**
+ * @type {import('@vue/cli-service').ProjectOptions}
+ */
+module.exports = {
+  outputDir: "build/webapp",
+  devServer: {
+    proxy: {
+      "/api": {
+        target: "http://localhost:8000",
+      },
+    },
+  },
+};