login signup flow working

backend/app/api/user.py

@@ -109,8 +109,11 @@ def login(cred: UserLogin, response: Response, db: Session = Depends(get_db)):
         value=access_token,
         httponly=True,
         max_age=time_expires.total_seconds(),
+        expires=time_expires.total_seconds(),
+        samesite='lax',
+        secure=False
     )
-
+    
     return payload
 
 

frontend/package.json

@@ -16,10 +16,13 @@
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "postcss": "^7",
+    "secure-ls": "^1.2.6",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
     "tldts": "^5.7.40",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
+    "vuex": "^4.0.2",
+    "vuex-persistedstate": "^4.0.0",
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {

frontend/src/App.vue

@@ -3,6 +3,22 @@
     <router-link to="/">Login</router-link> | <router-link to="/home">Home</router-link> |
     <router-link to="/about">About</router-link>
   </div> -->
-
-  <router-view />
+  <router-view v-slot="{ Component }">
+    <transition name="router-fade">
+      <component :is="Component" />
+    </transition>
+  </router-view>
 </template>
+
+
+<style scoped lang="postcss">
+.router-fade-enter-active,
+.router-fade-leave-active {
+  transition: opacity 0.4s ease-in-out;
+}
+
+.router-fade-enter-from,
+.router-fade-leave-to {
+  opacity: 0;
+}
+</style>

frontend/src/main.js

@@ -1,6 +1,6 @@
 import { createApp } from "vue";
 import axios from "axios";
-
+import store from "./store";
 import App from "./App.vue";
 import router from "./router";
 
@@ -13,7 +13,8 @@ axios.defaults.baseURL = "http://localhost:8000/api/";
 import "./assets/tailwind.css";
 
 const app = createApp(App);
-
+app.use(store);
 app.use(router).mount("#app");
 
 window.user = user;
+window.store = store;

frontend/src/router/index.js

@@ -4,11 +4,16 @@ import Signup from "../views/Signup.vue";
 
 import Home from "../views/Home.vue";
 import Test from "../views/Test.vue";
-
+import Root from "../views/Root.vue";
 const routes = [
+  {
+    path: "/",
+    name: "root",
+    component: Root,
+  },
   {
     path: "/login",
-    name: "Login",
+    name: "login",
     component: Login,
   },
   {

frontend/src/store/index.js

@@ -0,0 +1,14 @@
+import { createStore } from "vuex";
+import createPersistedState from "vuex-persistedstate";
+import users from "./modules/users";
+// import SecureLS from "secure-ls";
+
+// const ls = new SecureLS({ isCompression: false });
+
+export default createStore({
+  modules: {
+    users,
+    // passwords,
+  },
+  plugins: [createPersistedState()],
+});

frontend/src/views/Home.vue

@@ -222,6 +222,15 @@ export default {
         return this.entries.filter((entry) => entry.site.toLowerCase().includes(this.searchItem.toLowerCase()));
       }
     },
+
+    isLoggedIn() {
+      return this.$store.getters.isAuthenticated;
+    },
+  },
+  created() {
+    if (!this.$store.getters.isAuthenticated) {
+      this.$router.push("/login");
+    }
   },
   mounted() {
     document.addEventListener("click", (e) => {

frontend/src/views/Login.vue

@@ -17,6 +17,7 @@
           >
             <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M13.8 12H3" />
           </svg>
+          <span class="m-auto p-auto text-lg text-red-500">{{ serverError }}</span>
         </h1>
         <form action="" class="mt-6">
           <div class="my-7 text-sm">
@@ -96,6 +97,8 @@
 </template>
 
 <script>
+import { mapActions } from "vuex";
+
 import useVuelidate from "@vuelidate/core";
 import { required, email } from "@vuelidate/validators";
 
@@ -110,6 +113,8 @@ export default {
       email: "",
       password: "",
       showPass: false,
+
+      serverError: "",
     };
   },
   validations() {
@@ -119,10 +124,22 @@ export default {
     };
   },
   methods: {
+    ...mapActions(["logIn"]),
     async submitLogin() {
       await this.v$.$validate();
       if (this.v$.$invalid) {
         console.log(this.v$.$errors);
+      } else {
+        // submit the form
+
+        try {
+          let res = await this.logIn({ email: this.email, master_pwd: this.password });
+          console.log(res);
+          this.$router.push("/home");
+        } catch (error) {
+          this.serverError = error.response.data.detail;
+          console.log(error.response.data);
+        }
       }
     },
   },

frontend/src/views/Signup.vue

@@ -20,6 +20,7 @@
             <line x1="20" y1="8" x2="20" y2="14"></line>
             <line x1="23" y1="11" x2="17" y2="11"></line>
           </svg>
+          <span class="m-auto p-auto text-lg text-red-500">{{ serverError }}</span>
         </h1>
         <form action="" class="mt-6">
           <div class="my-7 text-sm">
@@ -135,7 +136,7 @@
 
 <script>
 // @ is an alias to /src
-
+import axios from "axios";
 import zxcvbn from "zxcvbn";
 
 import useVuelidate from "@vuelidate/core";
@@ -162,6 +163,8 @@ export default {
       },
       showPass: false,
       passwordStrength: -1,
+
+      serverError: "",
     };
   },
   validations() {
@@ -186,18 +189,18 @@ export default {
   },
 
   methods: {
-    // toggleSignup() {
-    //   // login / signup toogle
-    //   this.isLogin = !this.isLogin;
-    //   this.email = "";
-    //   this.password.password = "";
-    //   this.password.confirm = "";
-    //   this.v$.$reset(); // reset form entries on toggle
-    // },
     async submitSignup() {
       await this.v$.$validate();
       if (this.v$.$invalid) {
         console.log(this.v$.$errors);
+      } else {
+        try {
+          await axios.post("register", { email: this.email, master_pwd: this.password.password });
+          this.$router.push("/login");
+        } catch (error) {
+          console.log(error.response.data.detail);
+          this.serverError = error.response.data.detail;
+        }
       }
     },
   },