make login registration in frontend

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>

frontend/components/Navbar.vue

@@ -0,0 +1,109 @@
+<template>
+  <nav class="navbar navbar-expand-lg navbar-light bg-white">
+    <div class="container">
+      <router-link :to="{ name: user ? 'home' : 'welcome' }" class="navbar-brand">
+        {{ appName }}
+      </router-link>
+
+      <button
+        :aria-label="$t('toggle_navigation')"
+        class="navbar-toggler"
+        type="button"
+        data-toggle="collapse"
+        data-target="#navbarToggler"
+        aria-controls="navbarToggler"
+        aria-expanded="false"
+      >
+        <span class="navbar-toggler-icon" />
+      </button>
+
+      <div id="navbarToggler" class="collapse navbar-collapse">
+        <ul class="navbar-nav">
+          <locale-dropdown />
+          <!-- <li class="nav-item">
+            <a class="nav-link" href="#">Link</a>
+          </li> -->
+        </ul>
+
+        <ul class="navbar-nav ml-auto">
+          <!-- Authenticated -->
+          <li v-if="user" class="nav-item dropdown">
+            <a
+              class="nav-link dropdown-toggle text-dark"
+              href="#"
+              role="button"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="false"
+            >
+              <img :src="user.photo_url" class="rounded-circle profile-photo mr-1">
+              {{ user.name }}
+            </a>
+            <div class="dropdown-menu">
+              <router-link :to="{ name: 'settings.profile' }" class="dropdown-item pl-3">
+                <fa icon="cog" fixed-width />
+                {{ $t('settings') }}
+              </router-link>
+
+              <div class="dropdown-divider" />
+              <a class="dropdown-item pl-3" href="#" @click.prevent="logout">
+                <fa icon="sign-out-alt" fixed-width />
+                {{ $t('logout') }}
+              </a>
+            </div>
+          </li>
+          <!-- Guest -->
+          <template v-else>
+            <li class="nav-item">
+              <router-link :to="{ name: 'login' }" class="nav-link" active-class="active">
+                {{ $t('login') }}
+              </router-link>
+            </li>
+            <li class="nav-item">
+              <router-link :to="{ name: 'register' }" class="nav-link" active-class="active">
+                {{ $t('register') }}
+              </router-link>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import LocaleDropdown from './LocaleDropdown'
+
+export default {
+  components: {
+    LocaleDropdown
+  },
+
+  data: () => ({
+    appName: process.env.appName
+  }),
+
+  computed: mapGetters({
+    user: 'auth/user'
+  }),
+
+  methods: {
+    async logout() {
+      // Log out the user.
+      await this.$store.dispatch('auth/logout')
+
+      // Redirect to login.
+      this.$router.push({ name: 'login' })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.profile-photo {
+  width: 2rem;
+  height: 2rem;
+  margin: -.375rem 0;
+}
+</style>