From b1c18315ad16755f69e45b4edb52c7065ce43b81 Mon Sep 17 00:00:00 2001
From: hirsch <gery.hirschfeld@w3tec.ch>
Date: Sat, 7 Mar 2020 18:11:47 +0100
Subject: [PATCH] feat(home): add create tournament form

---
 package.json                                  |   3 +-
 src/app/components/CreateTournamentForm.vue   | 139 +++++++++++++-
 src/app/components/form/TextInput.vue         | 153 +++++++++++++++
 src/app/components/layout/Footer.vue          |   4 +-
 src/app/components/layout/Header.vue          |  24 ++-
 src/app/components/layout/Spinner.vue         | 174 ++++++++++++++++++
 ...formation.effect.ts => meta.api.effect.ts} |   0
 src/app/effects/tournament.api.effect.ts      |  46 +++++
 src/app/pages/Home.vue                        |  33 ++--
 src/i18n/en.ts                                |  77 ++++----
 src/plugins/fontawesome.plugin.ts             |  16 +-
 src/styles/styles.scss                        |   7 +-
 src/styles/utilities/_all.scss                |   2 +
 src/styles/{ => utilities}/animations.scss    |  37 ++++
 src/styles/utilities/variables.scss           |  72 ++++++++
 src/styles/variables.scss                     |  30 ---
 src/types/vue.d.ts                            |   2 +-
 yarn.lock                                     |  10 +
 18 files changed, 723 insertions(+), 106 deletions(-)
 create mode 100644 src/app/components/form/TextInput.vue
 create mode 100644 src/app/components/layout/Spinner.vue
 rename src/app/effects/{api-information.effect.ts => meta.api.effect.ts} (100%)
 create mode 100644 src/app/effects/tournament.api.effect.ts
 create mode 100644 src/styles/utilities/_all.scss
 rename src/styles/{ => utilities}/animations.scss (99%)
 create mode 100644 src/styles/utilities/variables.scss
 delete mode 100644 src/styles/variables.scss

diff --git a/package.json b/package.json
index 5184cf5..da1a5e7 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,6 @@
 {
   "name": "copa-frontend",
   "version": "1.11.0",
-  "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -15,6 +14,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/vue-fontawesome": "^0.1.7",
     "@types/qs": "^6.5.3",
+    "@types/validator": "^12.0.1",
     "@vue/composition-api": "^0.4.0",
     "axios": "^0.19.0",
     "buefy": "^0.8.5",
@@ -26,6 +26,7 @@
     "qs": "^6.9.0",
     "register-service-worker": "^1.6.2",
     "v-clipboard": "^2.2.2",
+    "validator": "^12.2.0",
     "vue": "^2.6.10",
     "vue-class-component": "^7.1.0",
     "vue-i18n": "^8.15.0",
diff --git a/src/app/components/CreateTournamentForm.vue b/src/app/components/CreateTournamentForm.vue
index 16a3516..d3d48ac 100644
--- a/src/app/components/CreateTournamentForm.vue
+++ b/src/app/components/CreateTournamentForm.vue
@@ -1,22 +1,147 @@
 <template>
-  <section class="create-tournament-form">
-    <h1 class="title is-1 has-text-black">Create Form TODO</h1>
-    <h1 class="subtitle is-2 has-text-black">Create Form TODO</h1>
+  <section class="create-tournament-form has-text-left">
+    <h1 class="title is-2 has-text-black">{{ $t('createTournament.title') }}</h1>
+    <h2 class="subtitle is-4 has-text-black">{{ $t('createTournament.subtitle') }}</h2>
+
+    <transition name="fade">
+      <b-notification
+        v-if="hasError"
+        type="is-danger"
+        aria-close-label="Close notification"
+        role="alert">
+        {{ $t('createTournament.submitFailed') }}
+      </b-notification>
+    </transition>
+
+    <TextInput icon="trophy"
+               label="createTournament.name.label"
+               placeholder="createTournament.name.placeholder"
+               :state="nameState"
+               :message="nameMessage"
+               :loading="isPending"
+               v-model="name"/>
+
+    <TextInput icon="user"
+               label="createTournament.owner.label"
+               placeholder="createTournament.owner.placeholder"
+               :state="ownerState"
+               :message="ownerMessage"
+               :loading="isPending"
+               v-model="owner"/>
+
+    <TextInput icon="envelope"
+               label="createTournament.email.label"
+               placeholder="createTournament.email.placeholder"
+               :state="emailState"
+               :message="emailMessage"
+               :loading="isPending"
+               v-model="email"/>
+
+    <br>
+
+    <b-button
+      class="create-tournament-submit-button"
+      type="is-primary"
+      :disabled="isPending"
+      :loading="isPending"
+      @click="submit">
+      {{ $t('createTournament.submitButton') }}
+    </b-button>
+
   </section>
 </template>
 
 <script lang="ts">
-  import {defineComponent} from '@vue/composition-api'
+  import {computed, defineComponent, ref, watch, Ref} from '@vue/composition-api'
+  import TextInput from '@/app/components/form/TextInput.vue'
+  import {useApiTournamentCreate} from '@/app/effects/tournament.api.effect'
+  import isEmail from 'validator/lib/isEmail'
+  import isEmpty from 'validator/lib/isEmpty'
+  import Spinner from '@/app/components/layout/Spinner.vue'
 
   export default defineComponent({
-    setup() {
+    components: {
+      TextInput, Spinner,
+    },
+    setup(props, {root}) {
+      const isPristine = ref(true)
+      const {name, nameState, nameMessage, isNameInvalid} = useNameInput(isPristine)
+      const {owner, ownerState, ownerMessage, isOwnerInvalid} = useOwnerInput(isPristine)
+      const {email, emailState, emailMessage, isEmailInvalid} = useEmailInput(isPristine)
+      const {isPending, hasError, createTournament, createdTournament} = useApiTournamentCreate()
+
+      const submit = async () => {
+        isPristine.value = false
+        if (!isNameInvalid.value && !isOwnerInvalid.value && !isEmailInvalid.value) {
+          await createTournament({
+            name: name.value,
+            owner: owner.value,
+            email: email.value,
+          })
+          if (!hasError) {
+            await root.$router.push({
+              name: 'admin-teams',
+              params: {id: createdTournament.value.adminId},
+            })
+          }
+        }
+      }
 
-      return {}
+      return {
+        isPending, submit, hasError,
+        name, nameState, nameMessage,
+        owner, ownerState, ownerMessage,
+        email, emailState, emailMessage,
+      }
     },
   })
+
+  function useNameInput(isPristine: Ref<boolean>) {
+    const name = ref('')
+    const isNameInvalid = ref(false)
+    const isNamePristine = ref(true)
+    watch(name, () => isNameInvalid.value = isEmpty(name.value))
+    return {
+      nameState: computed(() => isPristine.value ? '' : isNameInvalid.value ? 'is-danger' : 'is-success'),
+      nameMessage: computed(() => isNameInvalid.value && !isPristine.value ? 'createTournament.name.message' : ''),
+      name, isNameInvalid, isNamePristine,
+    }
+  }
+
+  function useOwnerInput(isPristine: Ref<boolean>) {
+    const owner = ref('')
+    const isOwnerInvalid = ref(false)
+    const isOwnerPristine = ref(true)
+    watch(owner, () => isOwnerInvalid.value = isEmpty(owner.value))
+    return {
+      ownerState: computed(() => isPristine.value ? '' : isOwnerInvalid.value ? 'is-danger' : 'is-success'),
+      ownerMessage: computed(() => isOwnerInvalid.value && !isPristine.value ? 'createTournament.owner.message' : ''),
+      owner, isOwnerInvalid, isOwnerPristine,
+    }
+  }
+
+  function useEmailInput(isPristine: Ref<boolean>) {
+    const email = ref('')
+    const isEmailInvalid = ref(false)
+    const isEmailPristine = ref(true)
+    watch(email, () => isEmailInvalid.value = !isEmail(email.value))
+    return {
+      emailState: computed(() => isPristine.value ? '' : isEmailInvalid.value ? 'is-danger' : 'is-success'),
+      emailMessage: computed(() => isEmailInvalid.value && !isPristine.value ? 'createTournament.email.message' : ''),
+      email, isEmailInvalid, isEmailPristine,
+    }
+  }
+
 </script>
 
 <style lang="scss">
-  @import '../../styles/variables.scss';
+  @import 'src/styles/utilities/all';
+
+  @include mobile() {
+    button.create-tournament-submit-button {
+      display: flex;
+      width: 100%;
+    }
+  }
 
 </style>
diff --git a/src/app/components/form/TextInput.vue b/src/app/components/form/TextInput.vue
new file mode 100644
index 0000000..20f7aeb
--- /dev/null
+++ b/src/app/components/form/TextInput.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="field copa-field" :class="loading ? 'is-loading':''">
+    <label class="label">{{ $t(label) }}</label>
+    <p :class="`control ${hasIconLeft ? 'has-icons-left':''} has-icons-right`">
+      <input class="input"
+             :class="state"
+             :type="type"
+             :disabled="disabled || loading"
+             :readonly="loading"
+             :maxlength="maxlength"
+             :placeholder="$t(placeholder)"
+             :value="modelValue"
+             @input="onInput"/>
+      <b-icon
+        v-if="icon"
+        class="is-left"
+        :icon="icon"
+        :pack="'fas'"/>
+      <transition name="slide">
+        <b-icon
+          v-if="hasIconRight && !loading"
+          class="is-right"
+          :class="iconRightClass"
+          :icon="iconRight"
+          :pack="'fas'"/>
+      </transition>
+    </p>
+    <transition name="slide">
+      <p v-if="message" class="help" :class="iconRightClass">{{ $t(message) }}</p>
+    </transition>
+  </div>
+</template>
+
+<script lang="ts">
+  import {computed, defineComponent, ref, watch} from '@vue/composition-api'
+
+  export default defineComponent({
+    props: {
+      value: [Number, String],
+      label: String,
+      type: {
+        type: String,
+        default: 'text',
+      },
+      state: String,
+      message: String,
+      icon: String,
+      placeholder: String,
+      maxlength: Number,
+      loading: Boolean,
+      disabled: Boolean,
+    },
+    setup(props, {emit}) {
+
+      const modelValue = ref(props.value)
+
+      watch(() => props.value, (changedValue: any) => modelValue.value = changedValue)
+
+      return {
+        modelValue,
+        onInput: (event: any) => {
+          modelValue.value = event.target.value
+          emit('input', modelValue.value)
+        },
+        hasIconLeft: computed(() => !!props.icon),
+        hasIconRight: computed(() => !!props.state || !!props.loading),
+        iconRight: computed(() => {
+          if (props.loading) {
+            return ''
+          }
+          if (props.state) {
+            if (props.state === 'is-success') {
+              return 'check'
+            } else if (props.state === 'is-danger') {
+              return 'exclamation'
+            } else if (props.state === 'is-warning') {
+              return 'exclamation-triangle'
+            }
+          }
+          return ''
+        }),
+        iconRightClass: computed(() => {
+          if (props.state) {
+            return `has-text-${props.state.substring(3)}`
+          }
+          return ''
+        }),
+      }
+    },
+  })
+</script>
+
+<style lang="scss">
+  @import 'src/styles/utilities/all';
+
+  .copa-field {
+    position: relative;
+    min-height: 105px;
+
+    &:not(:last-child) {
+      margin-bottom: 0.25rem;
+    }
+
+    input {
+      border-left: none;
+      border-right: none;
+      border-top: none;
+      border-bottom-width: 2px;
+      border-radius: 4px 4px 0 0;
+      outline: none !important;
+      box-shadow: none !important;
+    }
+
+    &.is-loading input {
+      background: linear-gradient(-45deg, $white-ter 40%, $white, $white-ter 60%);
+      background-size: 300% 350%;
+      animation: loading 2s infinite linear;
+      animation-delay: 0s;
+      border-color: $grey-lightest !important;
+    }
+
+    &:not(.is-loading) input:disabled {
+      background: $white-bis;
+    }
+
+    &.is-loading .is-right {
+      animation: rotating 2s linear infinite;
+      color: $purple;
+    }
+
+    .control {
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        height: 0;
+        width: 0;
+        left: 50%;
+        transition: left 0.3s, width 0.3s, height 0.3s;
+        background: linear-gradient(45deg, $purple, $turquoise);
+      }
+    }
+
+    &:focus-within {
+      .control::after {
+        height: 2px;
+        left: 0;
+        width: 100%;
+      }
+    }
+  }
+
+</style>
diff --git a/src/app/components/layout/Footer.vue b/src/app/components/layout/Footer.vue
index 8e4831d..e9a769b 100644
--- a/src/app/components/layout/Footer.vue
+++ b/src/app/components/layout/Footer.vue
@@ -17,7 +17,7 @@
 <script lang="ts">
   import {defineComponent} from '@vue/composition-api'
   import {useAppConfig} from '@/app/effects/config.effect'
-  import {useApiInformation} from '@/app/effects/api-information.effect'
+  import {useApiInformation} from '@/app/effects/meta.api.effect'
 
   export default defineComponent({
     setup() {
@@ -36,7 +36,7 @@
 </script>
 
 <style lang="scss">
-  @import '../../../styles/variables.scss';
+  @import 'src/styles/utilities/variables';
 
   footer.footer {
     position: relative;
diff --git a/src/app/components/layout/Header.vue b/src/app/components/layout/Header.vue
index fe59c08..5cfb3bf 100644
--- a/src/app/components/layout/Header.vue
+++ b/src/app/components/layout/Header.vue
@@ -2,7 +2,10 @@
   <b-navbar shadow type="is-white">
     <template slot="brand">
       <b-navbar-item tag="router-link" :to="{ name: 'home' }">
-        <span class="logo">COPA</span>
+        <span class="logo">
+          COPA
+          <b-tag type="is-danger">Alpha</b-tag>
+        </span>
       </b-navbar-item>
     </template>
     <template slot="start">
@@ -30,13 +33,19 @@
 </script>
 
 <style lang="scss">
-  @import '../../../styles/variables.scss';
+  @import 'src/styles/utilities/all';
 
   span.logo {
     font-family: 'Poppins';
     font-weight: bold;
     font-size: 32px;
     color: $black;
+    align-items: center;
+    display: flex;
+
+    span.tag {
+      margin-left: 8px;
+    }
   }
 
   nav.navbar {
@@ -52,10 +61,6 @@
     }
   }
 
-  .navbar-brand {
-    margin-right: 30px;
-  }
-
   a.navbar-item {
     font-family: 'Poppins';
     font-weight: bold;
@@ -63,4 +68,11 @@
     padding-left: 15px;
     padding-right: 15px;
   }
+
+  @include desktop() {
+    .navbar-brand {
+      margin-right: 30px;
+    }
+  }
+
 </style>
diff --git a/src/app/components/layout/Spinner.vue b/src/app/components/layout/Spinner.vue
new file mode 100644
index 0000000..b967242
--- /dev/null
+++ b/src/app/components/layout/Spinner.vue
@@ -0,0 +1,174 @@
+<template>
+  <section class="spinner" :class="small ? 'spinner--small':large ? 'spinner--large': ''">
+    <div class="spinner__container">
+      <b-icon class="spinner__ball"
+              icon="volleyball-ball"
+              pack="fas"/>
+      <div class="spinner__shadow"></div>
+    </div>
+    <transition name="slide">
+      <h3 v-if="!!message && !small" class="subtitle">{{message}}</h3>
+    </transition>
+  </section>
+</template>
+
+<script lang="ts">
+  import {defineComponent} from '@vue/composition-api'
+
+  export default defineComponent({
+    props: {
+      small: Boolean,
+      large: Boolean,
+      message: String,
+    },
+    setup() {
+
+    },
+  })
+</script>
+
+<style lang="scss">
+  @import 'src/styles/utilities/all';
+
+  $ball-size: 50px;
+  $container-height: 200px;
+  $ball-svg-width: 3.25rem !important;
+  $ball-svg-height: 3.25rem !important;
+  $ball-shadow-width: 60px;
+  $ball-shadow-height: 22.5px;
+
+  .spinner {
+    position: relative;
+    width: 100%;
+    height: $container-height;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    margin-bottom: 10px;
+
+    .subtitle {
+      color: $black !important;
+      padding: 15px 0;
+    }
+  }
+
+  .spinner__container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .spinner__ball {
+    position: absolute;
+    width: $ball-size;
+    height: $ball-size;
+    background: $white;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    overflow: hidden;
+    animation: ball 1.3s cubic-bezier(.12, 0, .87, 1) infinite;
+
+    svg {
+      width: 100% !important;
+      height: 100% !important;
+      color: $info;
+    }
+  }
+
+  .spinner__shadow {
+    position: absolute;
+    width: $ball-shadow-width;
+    height: $ball-shadow-height;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 50%;
+    transform: translate(-50%, 100%);
+    overflow: hidden;
+    filter: blur(2px);
+    z-index: -1;
+    animation: shadow 1.3s cubic-bezier(.12, 0, .87, 1) infinite;
+  }
+
+  .spinner--small {
+    height: ($container-height / 2);
+
+    .spinner__ball {
+      animation: ball-small 1.3s cubic-bezier(.12, 0, .87, 1) infinite;
+      width: ($ball-size / 2);
+      height: ($ball-size / 2);
+    }
+
+    .spinner__shadow {
+      width: ($ball-shadow-width / 2);
+      height: ($ball-shadow-height / 2);
+    }
+  }
+
+  .spinner--large {
+    height: ($container-height * 2);
+
+    .spinner__container {
+      top: 60%;
+    }
+
+    .spinner__ball {
+      animation: ball-large 1.3s cubic-bezier(.12, 0, .87, 1) infinite;
+      width: ($ball-size * 2);
+      height: ($ball-size * 2);
+    }
+
+    .spinner__shadow {
+      width: ($ball-shadow-width * 2);
+      height: ($ball-shadow-height * 2);
+    }
+  }
+
+  @keyframes ball-large {
+    0% {
+      transform: translate(-50%, -50%) translateY(-160px) rotate(0deg);
+    }
+    50% {
+      transform: translate(-50%, -50%) translateY(0px) rotate(180deg);
+    }
+    100% {
+      transform: translate(-50%, -50%) translateY(-160px) rotate(360deg);
+    }
+  }
+
+  @keyframes ball {
+    0% {
+      transform: translate(-50%, -50%) translateY(-60px) rotate(0deg);
+    }
+    50% {
+      transform: translate(-50%, -50%) translateY(0px) rotate(180deg);
+    }
+    100% {
+      transform: translate(-50%, -50%) translateY(-60px) rotate(360deg);
+    }
+  }
+
+  @keyframes ball-small {
+    0% {
+      transform: translate(-50%, -50%) translateY(-30px) rotate(0deg);
+    }
+    50% {
+      transform: translate(-50%, -50%) translateY(0px) rotate(180deg);
+    }
+    100% {
+      transform: translate(-50%, -50%) translateY(-30px) rotate(360deg);
+    }
+  }
+
+  @keyframes shadow {
+    0% {
+      transform: translate(-50%, 100%) scale(1);
+    }
+    50% {
+      transform: translate(-50%, 100%) scale(0.5);
+    }
+    100% {
+      transform: translate(-50%, 100%) scale(1);
+    }
+  }
+
+</style>
diff --git a/src/app/effects/api-information.effect.ts b/src/app/effects/meta.api.effect.ts
similarity index 100%
rename from src/app/effects/api-information.effect.ts
rename to src/app/effects/meta.api.effect.ts
diff --git a/src/app/effects/tournament.api.effect.ts b/src/app/effects/tournament.api.effect.ts
new file mode 100644
index 0000000..6b2938d
--- /dev/null
+++ b/src/app/effects/tournament.api.effect.ts
@@ -0,0 +1,46 @@
+import Vue from 'vue'
+import {computed, ref} from '@vue/composition-api'
+import {classToPlain, plainToClass} from 'class-transformer'
+import {defaultApiConfig} from '@/config/api.config'
+import {Tournament} from '@/app/models/Tournament'
+import {CreateTournamentRequest} from '@/app/models/CreateTournamentRequest'
+import {AxiosError, AxiosRequestConfig} from 'axios'
+
+const apiTournamentConfig: AxiosRequestConfig = {
+  ...defaultApiConfig,
+  url: 'tournament',
+}
+
+export const useApiTournamentCreate = () => {
+  const isPending = ref(false)
+  const error = ref<AxiosError<Tournament>>(null)
+  const createdTournament = ref<Tournament>({})
+
+  const createTournament = async (createTournamentRequest: CreateTournamentRequest) => {
+    isPending.value = true
+    error.value = null
+    const data = classToPlain(createTournamentRequest)
+    try {
+      const response = await Vue.$http.request({
+        ...apiTournamentConfig,
+        method: 'POST',
+        data,
+      })
+      createdTournament.value = plainToClass(Tournament, response.data)
+    } catch (exception) {
+      error.value = exception
+    }
+
+    isPending.value = false
+    return createdTournament
+  }
+
+  return {
+    isPending,
+    createdTournament,
+    hasError: computed(() => !!error.value),
+    createTournament,
+  }
+}
+
+
diff --git a/src/app/pages/Home.vue b/src/app/pages/Home.vue
index fb55358..96469bc 100644
--- a/src/app/pages/Home.vue
+++ b/src/app/pages/Home.vue
@@ -4,22 +4,27 @@
     <section class="hero is-dark is-fullheight-with-navbar">
       <div class="hero-body">
         <div class="container has-text-centered">
-          <h1 class="title animated" :class="{
+          <h1 class="title animated"
+              v-html="$t('home.title')"
+              :class="{
+                'is-hidden': isBannerGone,
+                fadeInDown: !isCreateDialogOpen,
+                fadeOutUp: isCreateDialogOpen,
+              }"></h1>
+          <h1 class="subtitle is-5 animated"
+              v-html="$t('home.subtitle')"
+              :class="{
               'is-hidden': isBannerGone,
               fadeInDown: !isCreateDialogOpen,
               fadeOutUp: isCreateDialogOpen,
-            }">
-            Create amazing <br> tournaments
-          </h1>
-          <h1 class="subtitle is-5 animated" :class="{
-              'is-hidden': isBannerGone,
-              fadeInDown: !isCreateDialogOpen,
-              fadeOutUp: isCreateDialogOpen,
-            }">
-            Get started today for free<br>
-            A better way to manage your own tournament<br>
-            Invite your participants, generate your schedule and much more
-          </h1>
+            }"></h1>
+          <h1 class="subtitle is-1 animated"
+              v-html="$t('home.beta')"
+              :class="{
+                'is-hidden': isBannerGone,
+                fadeInDown: !isCreateDialogOpen,
+                fadeOutUp: isCreateDialogOpen,
+              }"></h1>
           <b-button @click="() => openCreateDialog()"
                     class="animated"
                     type="is-dark"
@@ -76,7 +81,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import '../../styles/variables.scss';
+  @import 'src/styles/utilities/variables';
   @import '~bulma/sass/utilities/all';
 
   $margin-outside: 180px;
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index 7c7c5b9..70ecf0f 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -1,76 +1,77 @@
 export default {
   locale: {
-    en: "English",
-    de: "German",
+    en: 'English',
+    de: 'German',
   },
   home: {
-    title: "Create your tournament today!",
-    subtitle: "With COPA, managing your tournaments becomes simple & fast",
+    title: 'Create amazing <br> tournaments',
+    subtitle: 'Get started today for free<br>A better way to manage your own tournament<br>Invite your participants, generate your schedule and much more',
     beta:
-      "This app is still under development. So data will not be persisted permanently.",
+      'This app is still under development. So data will not be persisted permanently.',
   },
   notFound: {
-    title: "404",
-    subtitle: "This is not the Tournament your are looking for.",
+    title: '404',
+    subtitle: 'This is not the Tournament your are looking for.',
   },
   admin: {
     ranking: {
-      title: "Ranking",
+      title: 'Ranking',
     },
     start: {
-      title: "Let's start your Tournament",
-      message: "Starting your tournament will close the team registration. After that you can enter the results of the games.",
-      action: "Start Tournament",
+      title: 'Let\'s start your Tournament',
+      message: 'Starting your tournament will close the team registration. After that you can enter the results of the games.',
+      action: 'Start Tournament',
     },
     invite: {
-      title: "Invite participants",
+      title: 'Invite participants',
       message:
-        "Everyone with the link can create a team – no account required.",
-      copy: "copy",
-      action: "Invite participants",
+        'Everyone with the link can create a team – no account required.',
+      copy: 'copy',
+      action: 'Invite participants',
     },
     fixtures: {
-      title: "Fixtures",
-      subtitle: "Define your tournament mode & generate fixtures",
-      generate: "Generate Schedule",
+      title: 'Fixtures',
+      subtitle: 'Define your tournament mode & generate fixtures',
+      generate: 'Generate Schedule',
     },
     settings: {
-      title: "Settings",
-      subtitle: "Update your tournament options here",
+      title: 'Settings',
+      subtitle: 'Update your tournament options here',
     },
     teams: {
-      title: "Teams",
-      subtitle: "Add, update & remove your teams here",
+      title: 'Teams',
+      subtitle: 'Add, update & remove your teams here',
     },
   },
   createTournament: {
-    title: "Create Your Tournament",
+    title: 'Create Your Tournament',
+    subtitle: 'It\'s quick and easy',
     name: {
-      label: "What is the name of your tournament?",
-      placeholder: "Enter title",
-      message: "This field cannot be left blank",
+      label: 'What is the name of your tournament?',
+      placeholder: 'Enter name',
+      message: 'This field cannot be left blank',
     },
     owner: {
-      label: "Let your participant know, who created this tournament.",
-      placeholder: "Enter your name",
-      message: "This field cannot be left blank",
+      label: 'Tell your participants who you are.',
+      placeholder: 'Enter your name',
+      message: 'This field cannot be left blank',
     },
     email: {
       label:
-        "Tell us your email so we can sent you a mail with the confirmation and the admin link.",
-      placeholder: "Enter your email",
-      message: "This is not a valid email",
+        'The email will only be used to send you a confirmation with the admin link.',
+      placeholder: 'Enter your email',
+      message: 'This is not a valid email',
     },
-    submitButton: "Create Tournament",
-    inValidForm: "Form is not valid! Please check the fields.",
+    submitButton: 'Create Tournament',
+    inValidForm: 'Form is not valid! Please check the fields.',
     submitFailed:
-      "We are sorry, that we could not create your tournament. Please check your inputs and retry it.",
+      'We are sorry, that we could not create your tournament. Please check your inputs and retry it.',
   },
   privacy: {
-    title: "Privacy",
+    title: 'Privacy',
   },
   footer: {
-    app: "App:",
-    server: "Server:",
+    app: 'App:',
+    server: 'Server:',
   },
 }
diff --git a/src/plugins/fontawesome.plugin.ts b/src/plugins/fontawesome.plugin.ts
index 9c6ca7c..e3c3679 100644
--- a/src/plugins/fontawesome.plugin.ts
+++ b/src/plugins/fontawesome.plugin.ts
@@ -1,5 +1,5 @@
-import Vue from "vue"
-import {library} from "@fortawesome/fontawesome-svg-core"
+import Vue from 'vue'
+import {library} from '@fortawesome/fontawesome-svg-core'
 import {
   faCheck,
   faUser,
@@ -15,8 +15,11 @@ import {
   faNetworkWired,
   faHardHat,
   faListOl,
-} from "@fortawesome/free-solid-svg-icons"
-import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome"
+  faExclamationTriangle,
+  faExclamation,
+  faVolleyballBall,
+} from '@fortawesome/free-solid-svg-icons'
+import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
 
 library.add(
   faUser,
@@ -24,6 +27,7 @@ library.add(
   faEnvelope,
   faLink,
   faExclamationCircle,
+  faExclamation,
   faCheck,
   faCogs,
   faUsers,
@@ -33,6 +37,8 @@ library.add(
   faNetworkWired,
   faHardHat,
   faListOl,
+  faExclamationTriangle,
+  faVolleyballBall,
 )
 
-Vue.component("font-awesome-icon", FontAwesomeIcon)
+Vue.component('font-awesome-icon', FontAwesomeIcon)
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 097a84d..6fb0fd3 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -1,10 +1,9 @@
 @charset "UTF-8";
 
 @import url('https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap');
-@import 'variables.scss';
+@import 'utilities/all';
 @import '~bulma';
 @import '~buefy/src/scss/buefy';
-@import 'animations.scss';
 
 .container.is-spaced {
   padding-top: 60px;
@@ -14,3 +13,7 @@
 .hidden {
   opacity: 0;
 }
+
+button.button {
+  font-weight: $weight-medium;
+}
diff --git a/src/styles/utilities/_all.scss b/src/styles/utilities/_all.scss
new file mode 100644
index 0000000..9097a32
--- /dev/null
+++ b/src/styles/utilities/_all.scss
@@ -0,0 +1,2 @@
+@import 'variables';
+@import 'animations';
diff --git a/src/styles/animations.scss b/src/styles/utilities/animations.scss
similarity index 99%
rename from src/styles/animations.scss
rename to src/styles/utilities/animations.scss
index dbb1eca..ff2f9b4 100644
--- a/src/styles/animations.scss
+++ b/src/styles/utilities/animations.scss
@@ -3612,3 +3612,40 @@
     animation-iteration-count: 1 !important;
   }
 }
+
+
+@keyframes loading {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes rotating {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: all .5s ease;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.slide-enter-active, .slide-leave-active {
+  transition: all .5s ease;
+}
+
+.slide-enter, .slide-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
diff --git a/src/styles/utilities/variables.scss b/src/styles/utilities/variables.scss
new file mode 100644
index 0000000..deea0d0
--- /dev/null
+++ b/src/styles/utilities/variables.scss
@@ -0,0 +1,72 @@
+@import '~bulma/sass/utilities/all';
+/**
+/**
+ * Colors
+ */
+$black: #212529;
+$black-bis: #343a40;
+$black-ter: #343a40;
+
+$grey-darker: #495057;
+$grey-dark: #868e96;
+$grey: #adb5bd;
+$grey-light: #ced4da;
+$grey-lighter: #dee2e6;
+$grey-lightest: #e9ecef;
+
+$white-ter: #f1f3f5;
+$white-bis: #f8f9fa;
+$white: #ffffff;
+
+$orange: #ff922b;
+$yellow: #fab005;
+$green: #0ca678;
+$turquoise: #38D9C0;
+$cyan: #1098ad;
+$blue: #3b5bdb;
+$purple: #5F3DC4;
+$red: #d6336c;
+
+$dark: $purple;
+$light: $turquoise;
+
+$primary: $light;
+$info: $dark;
+$warning: $yellow;
+$danger: $red;
+$success: $green;
+/**
+ * Font
+ */
+$family-sans-serif: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+$weight-bold: 800;
+$text: $black;
+$text-light: $black-ter;
+/**
+ * Responsiveness
+ */
+// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
+$gap: 32px;
+$tablet: 769px;
+$desktop: 960px + (2 * $gap);
+$widescreen: 960px + (2 * $gap);
+$widescreen-enabled: true;
+$fullhd: 960px + (2 * $gap);
+$fullhd-enabled: true;
+
+$navbar-height: 4rem;
+
+/**
+ * From
+ */
+$control-height: 3rem;
+$input-shadow: none;
+$input-background-color: $grey-lightest;
+$input-placeholder-color: $grey-dark;
+$input-icon-color: $grey;
+$input-border-color: $grey-lightest;
+$input-focus-border-color: $grey-lightest;
+$input-hover-border-color: $grey-lightest;
+$input-disabled-background-color: $input-background-color;
+$label-color: $text-strong;
+$label-weight: $weight-medium;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
deleted file mode 100644
index e719850..0000000
--- a/src/styles/variables.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Colors
- */
-$dark: #5F3DC4;
-$light: #38D9C0;
-$primary: #38D9C0;
-$warning: #ffb600;
-$danger: #eb0006;
-$success: #00d500;
-$info: #5F3DC4;
-$black: #222;
-$white: #fff;
-/**
- * Font
- */
-$family-sans-serif: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
-$weight-bold: 800;
-/**
- * Responsiveness
- */
-// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
-$gap: 32px;
-$tablet: 769px;
-$desktop: 960px + (2 * $gap);
-$widescreen: 960px + (2 * $gap);
-$widescreen-enabled: true;
-$fullhd: 960px + (2 * $gap);
-$fullhd-enabled: true;
-
-$navbar-height: 4rem;
diff --git a/src/types/vue.d.ts b/src/types/vue.d.ts
index f3b3b21..2edf5f2 100644
--- a/src/types/vue.d.ts
+++ b/src/types/vue.d.ts
@@ -1,5 +1,5 @@
 declare module '*.vue' {
 }
 
-declare module 'vuelidate' {
+declare module 'validator' {
 }
diff --git a/yarn.lock b/yarn.lock
index e55d022..c03d3fd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -412,6 +412,11 @@
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
   integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
 
+"@types/validator@^12.0.1":
+  version "12.0.1"
+  resolved "https://registry.yarnpkg.com/@types/validator/-/validator-12.0.1.tgz#73dbc7f5f730ff7131754bca682824eb3c260b79"
+  integrity sha512-l57fIANZLMe8DArz+SDb+7ATXnDm15P7u2wHBw5mb0aSMd+UuvmvhouBF2hdLgQPDMJ39sh9g2MJO4GkZ0VAdQ==
+
 "@types/webpack-env@^1.15.1":
   version "1.15.1"
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.15.1.tgz#c8e84705e08eed430b5e15b39c65b0944e4d1422"
@@ -10158,6 +10163,11 @@ validate-npm-package-name@^3.0.0, validate-npm-package-name@~3.0.0:
   dependencies:
     builtins "^1.0.3"
 
+validator@^12.2.0:
+  version "12.2.0"
+  resolved "https://registry.yarnpkg.com/validator/-/validator-12.2.0.tgz#660d47e96267033fd070096c3b1a6f2db4380a0a"
+  integrity sha512-jJfE/DW6tIK1Ek8nCfNFqt8Wb3nzMoAbocBF6/Icgg1ZFSBpObdnwVY2jQj6qUqzhx5jc71fpvBWyLGO7Xl+nQ==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"