Added some styles

server/.gitignore

@@ -0,0 +1 @@
+secret.js

server/routes/mail.js

@@ -12,7 +12,7 @@ const transporter = nodemailer.createTransport({
   port: 587,
   secure: false, // upgrade later with STARTTLS
   auth: {
-    user: "36995@leerling.heerenlanden.nl",
+    user: "36899@leerling.heerenlanden.nl",
     pass: secret
   }
 });
@@ -84,7 +84,7 @@ router.post('/', (req, res, _next) => {
   transporter.sendMail(mailOptions, function(error, info){
     if (error) {
       // Notify the front-end
-      res.json({result: {success: false, data: err}});
+      res.json({result: {success: false, data: error}});
     } else {
 
       // Add the user's data to the database identified by the id.

src/app/app.component.html

@@ -1,7 +1,10 @@
     <nav>
         <!-- nav here -->
-        <span>Surprise box reserveren</span>
+        <span><a routerLink="">Surprise box reserveren</a></span>
-        <a routerLink="login"><fa-icon [icon]="faSignInAlt"></fa-icon></a>
+        <a *ngIf="!loggedIn" routerLink="login">
+            <fa-icon [icon]="faSignInAlt"></fa-icon>
+            <span>Log in</span>
+        </a>
     </nav>
     <main>
         <div class="overlay" *ngIf="form.visible"></div>

src/app/app.component.scss

@@ -26,7 +26,7 @@ nav {
     color: white;
     background-color: rgba(0,0,0,0.25);
     position: relative;
-    span {
+    span > a {
         font-family: 'Staatliches', cursive;
         position: absolute;
         top: 50%;
@@ -36,7 +36,7 @@ nav {
         width: max-content;
     }
     a {
-        text-decoration: none;
+        // text-decoration: none;
         color: white;
         cursor: pointer;
         position: absolute;
@@ -47,10 +47,15 @@ nav {
         fa-icon {
             padding: 5px;
         }
+        span {
+            display: none;
+        }
     }
     @media screen and (min-width: 600px) {
-        a::after {
+        a {
-            content: "Login";
+            span {
+                display: inline;
+            }
         }
     }
 }
@@ -58,7 +63,7 @@ nav {
 main {
     padding: 16px;
     margin: 20px;
-    height: min-content;
+    min-height: calc(100vh - 64px - 72px);
     border-radius: 1em;
     background-color: #ffffff;
     text-align: center;

src/app/components/form/form.component.html

@@ -3,9 +3,7 @@
   <fa-icon (click)="formService.hideForm()" [icon]="faTimes"></fa-icon>
 
   <form *ngIf="!submitted" [formGroup]="form" (ngSubmit)="onSubmit()">
-
+    <span class="header">Formulier voor surpise box {{ number }}</span>
-    <h4>Formulier voor surpise box {{ number }}</h4>
-
     <label for="name">Naam: </label>
     <input type="text" formControlName="name"><br>
 
@@ -20,7 +18,7 @@
   </form>
 
   <div *ngIf="submitted">
-    <h4>Uw aanvraag is ingediend</h4>
+    <span class="header">Uw aanvraag is ingediend</span>
     <p>Check uw mailbox om uw aanvrag te valideren. Als u de mail niet kan vinden, check dan ook uw spam.</p>
   </div>
 

src/app/components/form/form.component.scss

@@ -4,13 +4,36 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  padding-bottom: 20px;
+  padding: 3em 2em 1em 2em;
+  border-radius: 0.5em;
+
+  span.header {
+    position: absolute;
+    font-weight: bold;
+    text-decoration: underline;
+    top: 0.6em;
+    left: 1em;
+    width: calc(100% - 50px);
+  }
+
+  form {
+    label {
+      float: left;
+      margin: 5px;
+    }
+    textarea, input {
+      border: 1px solid grey;
+      border-radius: 3px;
+      padding: 0.25em;
+      margin: 5px;
+      float: right;
+    }
+  }
 
   fa-icon {
-    position: relative;
+    position: absolute;
-    float: right;
-    padding-right: 10px;
-    padding-top: 10px;
     cursor: pointer;
+    top: 0.6em;
+    right: 1em;
   }
 }

src/app/components/home/home.component.html

@@ -10,7 +10,7 @@
             Je kan je box op 28 november ophalen en betalen.
         </p>
         <div>
-            <span *ngIf="loggedIn" (click)="logout()">Log uit</span>
+            <span class="logout" *ngIf="loggedIn" (click)="logout()">Log uit</span>
             <div class="container" *ngIf="!loggedIn && (data | async) as data">
               <div *ngFor="let item of data.result.data; let i = index">
                 <!-- [href]="item ? '' : ('mailto:doemiddag.hetheerenlanden@cvo-av.nl?subject=Reservatie Surprise box ' + (i + 1))" -->

src/app/components/home/home.component.scss

@@ -88,4 +88,10 @@
             }
 
         }
+        span.logout {
+            border: 1px solid grey;
+            border-radius: 3px;
+            padding: 0.25em;
+            margin: 5px;
+        }
     }

src/app/components/login/login.component.html

@@ -1,9 +1,12 @@
+<h3>Login</h3>
 <div class="alert" *ngIf="alert">
   De combinatie van de gebruikersnaam en wachtwoord is niet herkend.
 </div>
 
 <form [formGroup]="form" (ngSubmit)="onSubmit()">
-  <input formControlName="username" type="text">
+  <label for="username">Gebruikersnaam:</label><br>
-  <input formControlName="password" type="password">
+  <input formControlName="username" type="text"><br>
+  <label for="password">Wachtwoord:</label><br>
+  <input formControlName="password" type="password"><br>
   <input type="submit" value="Login!">
 </form>

src/app/components/login/login.component.scss

@@ -0,0 +1,8 @@
+form {
+    textarea, input {
+      border: 1px solid grey;
+      border-radius: 3px;
+      padding: 0.25em;
+      margin: 5px;
+    }
+  }