feat(login): email and password option

components/login-form/login-form.sass

@@ -0,0 +1,21 @@
+.login-form
+  @apply text-ps-white
+  @apply flex flex-col w-full
+
+  .header
+    @apply text-ps-green text-2xl
+    @apply self-center
+    @apply mb-4
+
+  button
+    @apply text-ps-primary
+    @apply bg-ps-white #{!important}
+
+    &.shrink
+      @apply py-0 #{!important}
+
+    .blank
+      content: ''
+      width: 24px
+      height: 24px
+

components/login-form/login-form.vue

@@ -0,0 +1,120 @@
+<template lang="pug">
+.login-form
+  span.header Přihlášení
+  ps-btn.microsoft-btn(text, @click='loginWithMicrosoft', :disabled='awaitingLogin', :class='{ shrink: awaitingLogin }')
+    template(#default)
+      span.microsoft-btn microsoft login
+    template(#icon-left)
+      microsoft-logo(v-if='!awaitingLogin')/
+      ps-microsoft-loader.mt-2(v-else)
+    template(#icon-right)
+      .blank
+  span.mt-8.self-center nebo
+  ps-text-field.mt-8(v-model='email', label='Email', name='email')
+  ps-text-field.mt-8(v-model='password', type='password', label='Heslo', name='password')
+  ps-btn.mt-8.self-end(@click='loginWithEmail', :disabled='awaitingLogin', :loading='awaitingLogin') přihlásit
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'nuxt-composition-api';
+
+import firebase from 'firebase/app';
+import 'firebase/auth';
+
+import axios from 'axios';
+import { useMainStore } from '@/store';
+
+import microsoftLogo from 'vue-material-design-icons/Microsoft.vue';
+
+export default defineComponent({
+  components: {
+    microsoftLogo,
+  },
+  setup() {
+    const mainStore = useMainStore();
+
+    const awaitingLogin = ref(false);
+
+    const loginWithMicrosoft = async () => {
+      try {
+        awaitingLogin.value = true;
+
+        const provider = new firebase.auth.OAuthProvider('microsoft.com');
+
+        provider.setCustomParameters({
+          prompt: 'select_account',
+          tenant: process.env.TENANT,
+        });
+
+        const authUser = await firebase.auth().signInWithPopup(provider);
+
+        const userData = (
+          await axios.request({
+            url: '/api/user/create',
+            method: 'POST',
+            headers: {
+              authorization: `Bearer ${await authUser.user?.getIdToken()}`,
+            },
+
+            data: {
+              // @ts-ignore
+              accessToken: authUser.credential?.toJSON().oauthAccessToken,
+            },
+          })
+        ).data;
+
+        if (userData.user) {
+          userData.user.loggedIn = true;
+
+          mainStore.patch(userData);
+        }
+      } catch (e) {
+        // TODO Error handling
+        console.error(e);
+      }
+      awaitingLogin.value = false;
+    };
+
+    const email = ref('');
+    const password = ref('');
+
+    const loginWithEmail = async () => {
+      awaitingLogin.value = true;
+
+      try {
+        const authUser = await firebase.auth().signInWithEmailAndPassword(email.value, password.value);
+
+        const userData = (
+          await axios.request({
+            url: '/api/user/create',
+            method: 'POST',
+            headers: {
+              authorization: `Bearer ${await authUser.user?.getIdToken()}`,
+            },
+          })
+        ).data;
+
+        if (userData.user) {
+          userData.user.loggedIn = true;
+
+          mainStore.patch(userData);
+        }
+      } catch (e) {
+        console.error(e);
+      }
+
+      awaitingLogin.value = false;
+    };
+
+    return {
+      loginWithMicrosoft,
+      awaitingLogin,
+      email,
+      password,
+      loginWithEmail,
+    };
+  },
+});
+</script>
+
+<style lang="sass" src="./login-form.sass" scoped />

components/modal/modal.sass

@@ -14,7 +14,7 @@
     max-width: 70%
 
   @screen lg
-    max-width: 40%
+    max-width: 25%
 
 .popup-enter-active, .popup-leave-active 
   transition: all .15s ease-in-out

components/navbar/navbar.sass

@@ -1,3 +1,15 @@
+.drop
+  @apply ml-2 cursor-pointer
+
+  transition: all .3s ease-in-out
+
+  @screen md
+    @apply px-3
+
+
+  &.active-drop
+    transform: rotate(180deg)
+
 .navbar
   @apply h-20 w-full bg-ps-linear-gradient shadow flex items-center text-ps-primary
   @apply fixed z-999 px-3
@@ -8,18 +20,6 @@
     border-bottom-right-radius: 2rem
     padding: 0 1.35rem
 
-  .drop
-    @apply ml-2 cursor-pointer
-
-    transition: all .3s ease-in-out
-
-    @screen md
-      @apply px-3
-
-
-    &.active-drop
-      transform: rotate(180deg)
-
   .menu-btn
     @apply relative flex justify-center items-center
     @apply w-24 h-24

components/navbar/navbar.vue

@@ -10,16 +10,21 @@
           span.user-role(v-if='mainStore.isTeacher && !mainStore.isAdmin') Učitel
           span.user-role(v-else-if='mainStore.isAdmin && !mainStore.isTeacher') Admin
           span.user-role(v-else-if='mainStore.isTeacher && mainStore.isAdmin') Admin/Učitel
-        div(v-else)
-          ps-btn(text, @click='loginWithMicrosoft', :disabled='awaitingLogin')
-            template(#default)
-              span.microsoft-btn microsoft login
-            template(#icon-left)
-              microsoft-logo(v-if='!awaitingLogin')/
-              ps-microsoft-loader.mt-2(v-else)
+        .flex.items-center(v-else)
+          //- ps-btn(text, @click='loginWithMicrosoft', :disabled='awaitingLogin')
+          //-   template(#default)
+          //-     span.microsoft-btn microsoft login
+          //-   template(#icon-left)
+          //-     microsoft-logo(v-if='!awaitingLogin')/
+          //-     ps-microsoft-loader.mt-2(v-else)
+          ps-btn(text, @click='loginModal = !loginModal') Přihlášení
+            template(#icon-right)
+              arrow-right/
+          ps-modal(v-model='loginModal')
+            .flex.justify-center 
+              ps-login-form
       .flex.justify-center.items-center.relative(v-if='mainStore.isLoggedIn', v-on-clickaway='closeSettings')
         drop-down.drop(:class='{ "active-drop": displaySettings }', @click='toggleSettings')/
-
         ps-dropdown(:value='displaySettings')
           ps-btn.text-ps-red(block, text, @click='logOut') Odhlásit
             template(#icon-left)
@@ -38,11 +43,13 @@ import { defineComponent, ref, onMounted, computed, watchEffect } from 'nuxt-com
 import axios from 'axios';
 
 import { useMainStore } from '@/store';
+
 import dropDown from 'vue-material-design-icons/ChevronDown.vue';
 import bell from 'vue-material-design-icons/BellOutline.vue';
 import user from 'vue-material-design-icons/Account.vue';
 import logout from 'vue-material-design-icons/Logout.vue';
 import microsoftLogo from 'vue-material-design-icons/Microsoft.vue';
+import arrowRight from 'vue-material-design-icons/ChevronRight.vue';
 
 import { directive as onClickaway } from 'vue-clickaway';
 
@@ -59,6 +66,7 @@ export default defineComponent({
     user,
     logout,
     microsoftLogo,
+    arrowRight,
   },
 
   props: {
@@ -149,7 +157,6 @@ export default defineComponent({
           mainStore.patch(userData);
         }
       } catch (e) {
-        // TODO Error handling
         console.error(e);
       }
       awaitingLogin.value = false;
@@ -167,6 +174,8 @@ export default defineComponent({
       } catch (e) {}
     };
 
+    const loginModal = ref(false);
+
     return {
       burger,
       toggleBurger,
@@ -181,6 +190,7 @@ export default defineComponent({
       logOut,
       awaitingLogin,
       mainStore,
+      loginModal,
     };
   },
 });

components/ui/dropdown/dropdown.vue

@@ -1,8 +1,8 @@
 <template lang="pug">
-  transition(name="dropdown")
-    .dropdown(v-if="display")
-      .dropdown-content
-        slot
+transition(name='dropdown')
+  .dropdown(v-if='display')
+    .dropdown-content
+      slot
 </template>
 
 <script lang="ts">