make login registration in frontend

Author: bakai-dev

backend/config/auth.php

@@ -14,7 +14,7 @@
     */
 
     'defaults' => [
-        'guard' => 'web',
+        'guard' => 'api',
         'passwords' => 'users',
     ],
 

backend/resources/views/oauth/callback.blade.php

@@ -3,7 +3,7 @@
   <meta charset="utf-8">
   <title>{{ config('app.name') }}</title>
   <script>
-    window.opener.postMessage({ token: "{{ $token }}" }, "{{ config('app.client_url') }}")
+    window.opener.postMessage({ token: "{{ $token }}" }, "{{ config('app.client_url') }}");
     window.close()
   </script>
 </head>

frontend/.eslintrc.js

@@ -12,4 +12,4 @@ module.exports = {
   ],
   // add your custom rules here
   rules: {}
-}
+};

frontend/assets/sass/_variables.scss

@@ -0,0 +1,16 @@
+// // Body
+$body-bg: #f7f9fb;
+
+// Cards
+$card-spacer-x: 0.9375rem;
+$card-spacer-y: 0.625rem;
+$card-cap-bg: #fbfbfb;
+$card-border-color: #e8eced;
+
+// Borders
+$border-radius: .125rem;
+$border-radius-lg: .2rem;
+$border-radius-sm: .15rem;
+
+// Nav Pills
+$nav-pills-border-radius: 0;

frontend/assets/sass/app.scss

@@ -0,0 +1,9 @@
+@import 'variables';
+@import '~bootstrap/scss/bootstrap';
+@import '~sweetalert2/src/sweetalert2';
+@import '@fortawesome/fontawesome/styles.css';
+
+@import 'elements/card';
+@import 'elements/navbar';
+@import 'elements/buttons';
+@import 'elements/transitions';

frontend/assets/sass/elements/_buttons.scss

@@ -0,0 +1,25 @@
+.btn-loading {
+  position: relative;
+  pointer-events: none;
+  color: transparent !important;
+
+  &:after {
+    animation: spinAround 500ms infinite linear;
+    border: 2px solid #dbdbdb;
+    border-radius: 50%;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    content: "";
+    display: block;
+    height: 1em;
+    width: 1em;
+    position: absolute;
+    left: calc(50% - (1em / 2));
+    top: calc(50% - (1em / 2));
+  }
+}
+
+@keyframes spinAround {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(359deg); }
+}

frontend/assets/sass/elements/_card.scss

@@ -0,0 +1,3 @@
+.card {
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+}

frontend/assets/sass/elements/_navbar.scss

@@ -0,0 +1,19 @@
+.navbar {
+  font-weight: 600;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+}
+
+.nav-item {
+  .dropdown-menu {
+    border: none;
+    margin-top: .5rem;
+    border-top: 1px solid #f2f2f2 !important;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08);
+  }
+}
+
+.nav-link {
+  .svg-inline--fa {
+    font-size: 1.4rem;
+  }
+}

frontend/assets/sass/elements/_transitions.scss

@@ -0,0 +1,17 @@
+.page-enter-active,
+.page-leave-active {
+  transition: opacity .2s;
+}
+.page-enter,
+.page-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity .15s
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0
+}

frontend/components/LocaleDropdown.vue

@@ -0,0 +1,47 @@
+<template>
+  <li class="nav-item dropdown">
+    <a
+      class="nav-link dropdown-toggle"
+      href="#"
+      role="button"
+      data-toggle="dropdown"
+      aria-haspopup="true"
+      aria-expanded="false"
+    >
+      {{ locales[locale] }}
+    </a>
+    <div class="dropdown-menu">
+      <a
+        v-for="(value, key) in locales"
+        :key="key"
+        class="dropdown-item"
+        href="#"
+        @click.prevent="setLocale(key)"
+      >
+        {{ value }}
+      </a>
+    </div>
+  </li>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { loadMessages } from '~/plugins/i18n'
+
+export default {
+  computed: mapGetters({
+    locale: 'lang/locale',
+    locales: 'lang/locales'
+  }),
+
+  methods: {
+    setLocale(locale) {
+      if (this.$i18n.locale !== locale) {
+        loadMessages(locale)
+
+        this.$store.dispatch('lang/setLocale', { locale })
+      }
+    }
+  }
+}
+</script>