From 609e01d643a6c0ac5fd405f4d611aa39cc02547b Mon Sep 17 00:00:00 2001
From: wisskirchenj <juergen.wisskirchen@cofinpro.de>
Date: Tue, 2 Jan 2024 22:45:42 +0100
Subject: [PATCH] implement rudimentary user management

for now on basic - should be token-based soon
---
 .idea/checkstyle-idea.xml                     |  2 +
 .idea/compiler.xml                            | 15 +++++
 .idea/gradle.xml                              |  2 +
 .idea/jarRepositories.xml                     | 20 +++++++
 compose.yaml                                  |  4 --
 frontend/src/components/HelloWorld.vue        |  2 +-
 .../flashcards/FlashcardsApplication.java     |  2 +
 .../flashcards/config/MongoConfiguration.java | 16 +++++
 .../config/ObservabilityConfiguration.java    | 20 +++++++
 .../config/WebSecurityConfiguration.java      | 52 ++++++++++++++++
 .../flashcards/model/Collection.java          |  4 ++
 .../registration/RegisterController.java      | 35 +++++++++++
 .../registration/RegisterService.java         | 26 ++++++++
 .../flashcards/registration/User.java         | 53 +++++++++++++++++
 .../UserAlreadyExistsException.java           | 12 ++++
 .../flashcards/registration/UserDto.java      | 13 ++++
 .../flashcards/registration/UserMapper.java   | 24 ++++++++
 .../src/main/resources/application.properties |  2 +-
 server/src/main/resources/logback-spring.xml  | 18 ++++++
 .../main/resources/static/css/register.css    | 59 +++++++++++++++++++
 .../src/main/resources/static/js/register.js  | 20 +++++++
 .../src/main/resources/static/register.html   | 33 +++++++++++
 22 files changed, 428 insertions(+), 6 deletions(-)
 create mode 100644 .idea/compiler.xml
 create mode 100644 .idea/jarRepositories.xml
 create mode 100644 server/src/main/java/org/hyperskill/community/flashcards/config/MongoConfiguration.java
 create mode 100644 server/src/main/java/org/hyperskill/community/flashcards/config/ObservabilityConfiguration.java
 create mode 100644 server/src/main/java/org/hyperskill/community/flashcards/config/WebSecurityConfiguration.java
 create mode 100644 server/src/main/java/org/hyperskill/community/flashcards/model/Collection.java
 create mode 100644 server/src/main/java/org/hyperskill/community/flashcards/registration/RegisterController.java
 create mode 100644 server/src/main/java/org/hyperskill/community/flashcards/registration/RegisterService.java
 create mode 100644 server/src/main/java/org/hyperskill/community/flashcards/registration/User.java
 create mode 100644 server/src/main/java/org/hyperskill/community/flashcards/registration/UserAlreadyExistsException.java
 create mode 100644 server/src/main/java/org/hyperskill/community/flashcards/registration/UserDto.java
 create mode 100644 server/src/main/java/org/hyperskill/community/flashcards/registration/UserMapper.java
 create mode 100644 server/src/main/resources/logback-spring.xml
 create mode 100644 server/src/main/resources/static/css/register.css
 create mode 100644 server/src/main/resources/static/js/register.js
 create mode 100644 server/src/main/resources/static/register.html

diff --git a/.idea/checkstyle-idea.xml b/.idea/checkstyle-idea.xml
index 8a64c85..51ef153 100644
--- a/.idea/checkstyle-idea.xml
+++ b/.idea/checkstyle-idea.xml
@@ -3,6 +3,8 @@
   <component name="CheckStyle-IDEA" serialisationVersion="2">
     <checkstyleVersion>10.3.2</checkstyleVersion>
     <scanScope>JavaOnly</scanScope>
+    <option name="thirdPartyClasspath" />
+    <option name="activeLocationIds" />
     <option name="locations">
       <list>
         <ConfigurationLocation id="bundled-sun-checks" type="BUNDLED" scope="All" description="Sun Checks">(bundled)</ConfigurationLocation>
diff --git a/.idea/compiler.xml b/.idea/compiler.xml
new file mode 100644
index 0000000..e40a389
--- /dev/null
+++ b/.idea/compiler.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="CompilerConfiguration">
+    <annotationProcessing>
+      <profile name="Gradle Imported" enabled="true">
+        <outputRelativeToContentRoot value="true" />
+        <processorPath useClasspath="false">
+          <entry name="$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.projectlombok/lombok/1.18.30/f195ee86e6c896ea47a1d39defbe20eb59cd149d/lombok-1.18.30.jar" />
+        </processorPath>
+        <module name="org.hyperskill.community.flashcards.flashcards-server.main" />
+      </profile>
+    </annotationProcessing>
+    <bytecodeTargetLevel target="21" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/gradle.xml b/.idea/gradle.xml
index f9163b4..3a9a7cd 100644
--- a/.idea/gradle.xml
+++ b/.idea/gradle.xml
@@ -7,6 +7,8 @@
         <option name="modules">
           <set>
             <option value="$PROJECT_DIR$" />
+            <option value="$PROJECT_DIR$/frontend" />
+            <option value="$PROJECT_DIR$/server" />
           </set>
         </option>
       </GradleProjectSettings>
diff --git a/.idea/jarRepositories.xml b/.idea/jarRepositories.xml
new file mode 100644
index 0000000..fdc392f
--- /dev/null
+++ b/.idea/jarRepositories.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="RemoteRepositoriesConfiguration">
+    <remote-repository>
+      <option name="id" value="central" />
+      <option name="name" value="Maven Central repository" />
+      <option name="url" value="https://repo1.maven.org/maven2" />
+    </remote-repository>
+    <remote-repository>
+      <option name="id" value="jboss.community" />
+      <option name="name" value="JBoss Community repository" />
+      <option name="url" value="https://repository.jboss.org/nexus/content/repositories/public/" />
+    </remote-repository>
+    <remote-repository>
+      <option name="id" value="MavenRepo" />
+      <option name="name" value="MavenRepo" />
+      <option name="url" value="https://repo.maven.apache.org/maven2/" />
+    </remote-repository>
+  </component>
+</project>
\ No newline at end of file
diff --git a/compose.yaml b/compose.yaml
index 5ca7d77..9608cfd 100644
--- a/compose.yaml
+++ b/compose.yaml
@@ -1,10 +1,6 @@
 services:
   mongodb:
     image: 'mongo:latest'
-    environment:
-      - 'MONGO_INITDB_DATABASE=mydatabase'
-      - 'MONGO_INITDB_ROOT_PASSWORD=secret'
-      - 'MONGO_INITDB_ROOT_USERNAME=root'
     ports:
       - '27017:27017'
     volumes:
diff --git a/frontend/src/components/HelloWorld.vue b/frontend/src/components/HelloWorld.vue
index 6775d4d..6bc87a8 100644
--- a/frontend/src/components/HelloWorld.vue
+++ b/frontend/src/components/HelloWorld.vue
@@ -5,7 +5,7 @@
 
       <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
 
-      <h1 class="text-h2 font-weight-bold">Vuetify</h1>
+      <h1 class="text-h2 font-weight-bold">Flashcards</h1>
 
       <div class="py-14" />
 
diff --git a/server/src/main/java/org/hyperskill/community/flashcards/FlashcardsApplication.java b/server/src/main/java/org/hyperskill/community/flashcards/FlashcardsApplication.java
index f50ba5a..4284c18 100644
--- a/server/src/main/java/org/hyperskill/community/flashcards/FlashcardsApplication.java
+++ b/server/src/main/java/org/hyperskill/community/flashcards/FlashcardsApplication.java
@@ -1,9 +1,11 @@
 package org.hyperskill.community.flashcards;
 
+import lombok.extern.slf4j.Slf4j;
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
 
 @SpringBootApplication
+@Slf4j
 public class FlashcardsApplication {
 
     public static void main(String[] args) {
diff --git a/server/src/main/java/org/hyperskill/community/flashcards/config/MongoConfiguration.java b/server/src/main/java/org/hyperskill/community/flashcards/config/MongoConfiguration.java
new file mode 100644
index 0000000..e1c5a07
--- /dev/null
+++ b/server/src/main/java/org/hyperskill/community/flashcards/config/MongoConfiguration.java
@@ -0,0 +1,16 @@
+package org.hyperskill.community.flashcards.config;
+
+import com.mongodb.client.MongoClients;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.data.mongodb.core.MongoTemplate;
+
+@Configuration
+public class MongoConfiguration {
+
+    @Bean
+    public MongoTemplate mongoTemplate() {
+        return new MongoTemplate(MongoClients.create(), "cards");
+    }
+
+}
diff --git a/server/src/main/java/org/hyperskill/community/flashcards/config/ObservabilityConfiguration.java b/server/src/main/java/org/hyperskill/community/flashcards/config/ObservabilityConfiguration.java
new file mode 100644
index 0000000..bf357ba
--- /dev/null
+++ b/server/src/main/java/org/hyperskill/community/flashcards/config/ObservabilityConfiguration.java
@@ -0,0 +1,20 @@
+package org.hyperskill.community.flashcards.config;
+
+import jakarta.servlet.Filter;
+import org.slf4j.MDC;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.security.core.context.SecurityContextHolder;
+
+@Configuration
+public class ObservabilityConfiguration {
+
+    @Bean
+    Filter correlationFilter() {
+        return (request, response, chain) -> {
+            var loggedIn = SecurityContextHolder.getContext().getAuthentication();
+            MDC.put("user", loggedIn.getName());
+            chain.doFilter(request, response);
+        };
+    }
+}
diff --git a/server/src/main/java/org/hyperskill/community/flashcards/config/WebSecurityConfiguration.java b/server/src/main/java/org/hyperskill/community/flashcards/config/WebSecurityConfiguration.java
new file mode 100644
index 0000000..c3cd6f3
--- /dev/null
+++ b/server/src/main/java/org/hyperskill/community/flashcards/config/WebSecurityConfiguration.java
@@ -0,0 +1,52 @@
+package org.hyperskill.community.flashcards.config;
+
+import org.hyperskill.community.flashcards.registration.User;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.data.mongodb.core.MongoTemplate;
+import org.springframework.http.HttpMethod;
+import org.springframework.security.config.annotation.web.builders.HttpSecurity;
+import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
+import org.springframework.security.config.annotation.web.configurers.CsrfConfigurer;
+import org.springframework.security.core.userdetails.UserDetailsService;
+import org.springframework.security.core.userdetails.UsernameNotFoundException;
+import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
+import org.springframework.security.crypto.password.PasswordEncoder;
+import org.springframework.security.web.SecurityFilterChain;
+
+import java.util.Optional;
+
+import static org.springframework.security.config.Customizer.withDefaults;
+
+/**
+ * new Spring security 6.0 style provision of SecurityFilterChain bean with the security configuration,
+ * as well as PasswordProvider and AuthenticationManager that makes use of our UserDetails persistence.
+ */
+@Configuration
+@EnableWebSecurity
+public class WebSecurityConfiguration {
+
+    @Bean
+    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
+        return http
+                .csrf(CsrfConfigurer::disable)
+                .authorizeHttpRequests(auth -> auth
+                        .requestMatchers("/register.html", "/js/register.js", "/css/register.css").permitAll()
+                        .requestMatchers(HttpMethod.POST, "/api/register").permitAll()
+                        .anyRequest().authenticated())
+                .httpBasic(withDefaults())
+                .build();
+    }
+
+    @Bean
+    public UserDetailsService userDetailsService(MongoTemplate mongoTemplate) {
+        return username ->
+            Optional.ofNullable(mongoTemplate.findById(username, User.class))
+                    .orElseThrow(() -> new UsernameNotFoundException("User not found."));
+    }
+
+    @Bean
+    public PasswordEncoder passwordEncoder() {
+        return new BCryptPasswordEncoder();
+    }
+}
\ No newline at end of file
diff --git a/server/src/main/java/org/hyperskill/community/flashcards/model/Collection.java b/server/src/main/java/org/hyperskill/community/flashcards/model/Collection.java
new file mode 100644
index 0000000..46e3742
--- /dev/null
+++ b/server/src/main/java/org/hyperskill/community/flashcards/model/Collection.java
@@ -0,0 +1,4 @@
+package org.hyperskill.community.flashcards.model;
+
+public record Collection(String name) {
+}
diff --git a/server/src/main/java/org/hyperskill/community/flashcards/registration/RegisterController.java b/server/src/main/java/org/hyperskill/community/flashcards/registration/RegisterController.java
new file mode 100644
index 0000000..409a6e9
--- /dev/null
+++ b/server/src/main/java/org/hyperskill/community/flashcards/registration/RegisterController.java
@@ -0,0 +1,35 @@
+package org.hyperskill.community.flashcards.registration;
+
+import jakarta.validation.Valid;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import static org.springframework.http.ResponseEntity.ok;
+
+@RestController
+@RequiredArgsConstructor
+@Slf4j
+@RequestMapping("/api/register")
+public class RegisterController {
+
+    private final RegisterService service;
+    private final UserMapper mapper;
+
+    /**
+     * register endpoint - unauthenticated (!).
+     * @param userDto dto containing provided user email (=username) and raw password
+     * @return empty response 200(OK) on successful register, 400(BadRequest) if dto validation fails or user exists
+     */
+    @PostMapping
+    public ResponseEntity<Void> registerUser(@Valid @RequestBody UserDto userDto) {
+        var userDocument = mapper.toDocument(userDto);
+        service.registerUser(userDocument);
+        log.info("User {} successfully registered", userDocument.getUsername());
+        return ok().build();
+    }
+}
diff --git a/server/src/main/java/org/hyperskill/community/flashcards/registration/RegisterService.java b/server/src/main/java/org/hyperskill/community/flashcards/registration/RegisterService.java
new file mode 100644
index 0000000..851d793
--- /dev/null
+++ b/server/src/main/java/org/hyperskill/community/flashcards/registration/RegisterService.java
@@ -0,0 +1,26 @@
+package org.hyperskill.community.flashcards.registration;
+
+import lombok.RequiredArgsConstructor;
+import org.springframework.data.mongodb.core.MongoTemplate;
+import org.springframework.stereotype.Service;
+
+import java.util.Objects;
+
+@Service
+@RequiredArgsConstructor
+public class RegisterService {
+
+    private final MongoTemplate mongoTemplate;
+
+    /**
+     * method receives and saves the User entity with data mapped from the UserDto (name and encrypted password),
+     * @param user the prepared User entity to save to the database.
+     * @throws UserAlreadyExistsException if user already exists.
+     */
+    public void registerUser(User user) throws UserAlreadyExistsException {
+        if (Objects.nonNull(mongoTemplate.findById(user.getUsername(), User.class))) {
+            throw new UserAlreadyExistsException();
+        }
+        mongoTemplate.save(user);
+    }
+}
diff --git a/server/src/main/java/org/hyperskill/community/flashcards/registration/User.java b/server/src/main/java/org/hyperskill/community/flashcards/registration/User.java
new file mode 100644
index 0000000..57242ab
--- /dev/null
+++ b/server/src/main/java/org/hyperskill/community/flashcards/registration/User.java
@@ -0,0 +1,53 @@
+package org.hyperskill.community.flashcards.registration;
+
+import lombok.Getter;
+import lombok.RequiredArgsConstructor;
+import lombok.Setter;
+import lombok.experimental.Accessors;
+import org.springframework.data.annotation.Id;
+import org.springframework.data.mongodb.core.mapping.Document;
+import org.springframework.security.core.GrantedAuthority;
+import org.springframework.security.core.userdetails.UserDetails;
+
+import java.util.Collection;
+import java.util.Collections;
+
+/**
+ * entity class for registered users, that implements UserDetails and whose instances thus serve the
+ * DaoAuthenticationProvider (AuthenticationManager).
+ */
+@Getter
+@Setter
+@RequiredArgsConstructor
+@Accessors(chain = true)
+@Document
+public class User implements UserDetails {
+    @Id
+    private String username;
+    private String password;
+
+    @Override
+    public Collection<? extends GrantedAuthority> getAuthorities() {
+        return Collections.emptyList();
+    }
+
+    @Override
+    public boolean isAccountNonExpired() {
+        return true;
+    }
+
+    @Override
+    public boolean isAccountNonLocked() {
+        return true;
+    }
+
+    @Override
+    public boolean isCredentialsNonExpired() {
+        return true;
+    }
+
+    @Override
+    public boolean isEnabled() {
+        return true;
+    }
+}
diff --git a/server/src/main/java/org/hyperskill/community/flashcards/registration/UserAlreadyExistsException.java b/server/src/main/java/org/hyperskill/community/flashcards/registration/UserAlreadyExistsException.java
new file mode 100644
index 0000000..c1bfd5d
--- /dev/null
+++ b/server/src/main/java/org/hyperskill/community/flashcards/registration/UserAlreadyExistsException.java
@@ -0,0 +1,12 @@
+package org.hyperskill.community.flashcards.registration;
+
+import org.springframework.http.HttpStatus;
+import org.springframework.web.bind.annotation.ResponseStatus;
+
+@ResponseStatus(HttpStatus.BAD_REQUEST)
+public class UserAlreadyExistsException extends RuntimeException {
+
+    public UserAlreadyExistsException() {
+        super("This user is already registered.");
+    }
+}
diff --git a/server/src/main/java/org/hyperskill/community/flashcards/registration/UserDto.java b/server/src/main/java/org/hyperskill/community/flashcards/registration/UserDto.java
new file mode 100644
index 0000000..2baea57
--- /dev/null
+++ b/server/src/main/java/org/hyperskill/community/flashcards/registration/UserDto.java
@@ -0,0 +1,13 @@
+package org.hyperskill.community.flashcards.registration;
+
+import jakarta.validation.constraints.NotBlank;
+import jakarta.validation.constraints.NotNull;
+import jakarta.validation.constraints.Pattern;
+import jakarta.validation.constraints.Size;
+
+/**
+ * immutable web-layer DTO as carrier for user register requests.
+ */
+public record UserDto(@NotNull @Pattern(regexp = "\\w+(\\.\\w+){0,2}@\\w+\\.\\w+") String email,
+                      @NotBlank @Size(min = 8) String password
+) { }
diff --git a/server/src/main/java/org/hyperskill/community/flashcards/registration/UserMapper.java b/server/src/main/java/org/hyperskill/community/flashcards/registration/UserMapper.java
new file mode 100644
index 0000000..c169f77
--- /dev/null
+++ b/server/src/main/java/org/hyperskill/community/flashcards/registration/UserMapper.java
@@ -0,0 +1,24 @@
+package org.hyperskill.community.flashcards.registration;
+
+import lombok.RequiredArgsConstructor;
+import org.springframework.security.crypto.password.PasswordEncoder;
+import org.springframework.stereotype.Component;
+
+
+/**
+ * mapper to map received UserDto on register to a User entity, hereby encoding the raw password.
+ */
+@Component
+@RequiredArgsConstructor
+public class UserMapper {
+
+    private final PasswordEncoder passwordEncoder;
+
+    /**
+     * map the Dto to the entity and encode the password hereby.
+     */
+    public User toDocument(UserDto dto) {
+        return new User().setUsername(dto.email())
+                .setPassword(passwordEncoder.encode(dto.password()));
+    }
+}
diff --git a/server/src/main/resources/application.properties b/server/src/main/resources/application.properties
index 8b13789..26beb33 100644
--- a/server/src/main/resources/application.properties
+++ b/server/src/main/resources/application.properties
@@ -1 +1 @@
-
+spring.data.mongodb.database=cards
diff --git a/server/src/main/resources/logback-spring.xml b/server/src/main/resources/logback-spring.xml
new file mode 100644
index 0000000..9f86f93
--- /dev/null
+++ b/server/src/main/resources/logback-spring.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<configuration>
+
+    <appender name="Console"
+              class="ch.qos.logback.core.ConsoleAppender">
+        <encoder>
+            <pattern>
+                %d{ISO8601} %highlight(%-5level) [%blue(%t)] %yellow(%C{1}): &lt;%X{user}&gt; %msg%n%throwable
+            </pattern>
+        </encoder>
+    </appender>
+
+    <!-- LOG everything at INFO level -->
+    <root level="info">
+        <appender-ref ref="Console" />
+    </root>
+
+</configuration>
diff --git a/server/src/main/resources/static/css/register.css b/server/src/main/resources/static/css/register.css
new file mode 100644
index 0000000..e2a1789
--- /dev/null
+++ b/server/src/main/resources/static/css/register.css
@@ -0,0 +1,59 @@
+main {
+    min-height: 100vh;
+    display: grid;
+    place-items: center;
+    font-family: "Open Sans", sans-serif;
+    background: hsl(210, 36%, 96%);
+    color: hsl(209, 61%, 16%);
+    line-height: 1.25;
+    font-size: 1.25rem;
+}
+header {
+    display: grid;
+    place-items: center;
+}
+.ui-width {
+    width: 80vw;
+}
+div {
+    margin-bottom: 10px;
+}
+label {
+    font: 2rem 'Fira Sans', sans-serif;
+    display: inline-block;
+    width: 40vw;
+    text-align: right;
+    padding-right: 1em;
+}
+input {
+    font: 1.5rem 'Fira Sans', sans-serif;
+}
+#div_button {
+    display: flex;
+    justify-content: center;
+}
+#register {
+    margin: 0 auto;
+    border: 0;
+    line-height: 2.5;
+    padding: 0 20px;
+    font-size: 1rem;
+    text-align: center;
+    color: white;
+    text-shadow: 1px 1px 1px black;
+    border-radius: 10px;
+    background-color: rgba(220, 0, 0, 1);
+    background-image: linear-gradient(to top left,
+        rgba(0, 0, 0, .2),
+        rgba(0, 0, 0, .2) 30%,
+        rgba(0, 0, 0, 0));
+    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
+    inset -2px -2px 3px rgba(0, 0, 0, .6);
+}
+#register:hover {
+    background-color: rgba(255, 0, 0, 1);
+}
+#register:active {
+    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
+    inset 2px 2px 3px rgba(0, 0, 0, .6);
+}
\ No newline at end of file
diff --git a/server/src/main/resources/static/js/register.js b/server/src/main/resources/static/js/register.js
new file mode 100644
index 0000000..76de4a1
--- /dev/null
+++ b/server/src/main/resources/static/js/register.js
@@ -0,0 +1,20 @@
+function register() {
+  let object = {
+    "email": document.getElementById("username").value,
+    "password": document.getElementById("password").value,
+  };
+
+  let json = JSON.stringify(object);
+
+  let xhr = new XMLHttpRequest();
+  xhr.open("POST", '/api/register', false)
+  xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
+  xhr.send(json);
+
+  if (xhr.status === 200) {
+    const success = document.getElementById("success");
+    success.hidden = false;
+  } else {
+    alert(`Error registering user! Status: ${xhr.status} response: ${xhr.responseText}`);
+  }
+}
\ No newline at end of file
diff --git a/server/src/main/resources/static/register.html b/server/src/main/resources/static/register.html
new file mode 100644
index 0000000..aa8519e
--- /dev/null
+++ b/server/src/main/resources/static/register.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Register User</title>
+  <link rel="stylesheet" href="css/register.css"/>
+  <script type="text/javascript" src="js/register.js"></script>
+</head>
+<body>
+<main>
+  <header class="ui-width">
+    <h1>Register with your Email</h1>
+    <h2>to access the Flashcards App</h2>
+  </header>
+  <div class="ui-width">
+    <div>
+      <label for="username">Username (Email):</label>
+      <input id="username" type="text" />
+    </div>
+    <div>
+      <label for="password">Password (min. 8 chars):</label>
+      <input id="password" type="password" />
+    </div>
+    <div id="success" hidden="hidden">
+      <h3><a href = "/index.html">Now proceed to the app!</a> For now you have to log in with your new account.</h3>
+    </div>
+  </div>
+  <div class="ui-width" id="div_button">
+    <button id="register" type="button" onclick="register()">Submit</button>
+  </div>
+</main>
+</body>
+</html>
\ No newline at end of file