userland/src/views/Login.vue

<!--
  Copyright 2019 Hackware SpA <human@hackware.cl>
  This file is part of "Hackware Userland" and licensed under the terms
  of the GNU Affero General Public License version 3, or (at your option)
  a later version. You should have received a copy of this license along
  with the software. If not, see <https://www.gnu.org/licenses/>.
-->

<template>
  <div class="login">
    <router-view @login="$emit('login')" />
  </div>
</template>

<script>
export default {
  name: 'Login',
};
</script>

<style lang="scss">
@import "../assets/bootstrap/custom";

.login {
  @extend .pt-5;
  background: url('~@/assets/login-bg.unsplash.jpg') no-repeat center center fixed;
  background-size: cover;
  min-height: 100vh;

  > form {
    @extend .p-3;

    background-color: rgba(255, 255, 255, 0.7);
    max-width: 25rem;
    text-align: center;
    margin: 0 auto;

    > h1 {
      @extend .pb-2;
    }

    > input[type=text], > input[type=password] {
      @extend .form-control;
      @extend .mt-2;
    }

    > input[type=text] {
      @extend .mt-3;
    }

    > button[type=submit] {
      @extend .my-3;
      @extend .btn;
      @extend .btn-primary;
    }

    > .checkbox-container {
      @extend .mt-2;
      @extend .custom-control;
      @extend .custom-switch;
      > input[type=checkbox] {
        @extend .custom-control-input;
      }
      > label {
        @extend .custom-control-label;
        font-size: .9rem;
        vertical-align: baseline;
      }

      text-align: right;
    }

    > .login-error {
      @extend .pb-2;
      color: var(--danger);
    }

    > .login-success {
      @extend .pb-2;
      color: var(--success);
    }
  }
}
</style>