Changes in sign in and sign up

app.vue

@@ -5,9 +5,6 @@
     <NavigationBar />
 
     <div class="flex flex-col w-full px-4 bg-base-300 md:px-8 lg:px-24">
-      <AuthenticationModal />
-      <RegistrationModal />
-
       <div class="flex flex-col my-6" style="max-width: 100vw;">
         <NuxtPage />
       </div>

components/authentication/AuthenticationForm.vue

@@ -21,16 +21,11 @@
           Sign In
         </button>
       </form>
-      <div class="relative mt-3">
-        <button class="w-full btn btn-secondary" @click="close">
-          Close
-        </button>
-      </div>
       <div class="relative mt-6">
         <div class="relative flex justify-center text-sm">
-          <button class="px-2 font-semibold duration-200 text-neutral-content/50 hover:text-neutral-content" @click="goToSignUp">
+          <NuxtLink to="/signup">
             Don't have an account? Sign Up
-          </button>
+          </NuxtLink>
         </div>
       </div>
     </div>
@@ -40,7 +35,7 @@
 <script setup lang="ts">
 import { Ref } from "vue";
 import { notify } from "notiwind-ts";
-import { loginUser, ref, useAuthenticationModal, useRegistrationModal } from "#imports";
+import { loginUser, ref } from "#imports";
 
 type Form = {
   username: string,
@@ -49,39 +44,23 @@ type Form = {
   confirm_password: string
 }
 
-const authModalOpen = useAuthenticationModal();
-const registrationModalOpen = useRegistrationModal();
-
 const form: Ref<Form> = ref({
   username: "",
   email: "",
   password: "",
   confirm_password: ""
 });
 
-function goToSignUp () {
-  close();
-  registrationModalOpen.value = true;
-}
-
-function close () {
-  authModalOpen.value = false;
-}
-
 function submit () {
   login();
 }
 
-function login () {
-  loginUser(form.value.username, form.value.password)
-    .then(() => {
-      notify({
-        group: "success",
-        title: "Success",
-        text: "You were signed in!"
-      }, 4000);
-
-      authModalOpen.value = false;
+async function login () {
+  await loginUser(form.value.username, form.value.password)
+    .then((authenticated) => {
+      if (authenticated) {
+        navigateTo("/torrents", { replace: true });
+      }
     })
     .catch((err) => {
       notify({

components/navigation/NavigationBar.vue

@@ -55,12 +55,12 @@
           </div>
         </template>
         <template v-else>
-          <button class="btn btn-primary" data-cy="goto-login" @click="login">
-            Login
-          </button>
-          <button class="btn btn-primary" data-cy="goto-signup" @click="signup">
+          <NuxtLink to="/signin">
+            Sign In
+          </NuxtLink>
+          <NuxtLink to="/signup">
             Sign Up
-          </button>
+          </NuxtLink>
         </template>
       </div>
     </div>
@@ -110,13 +110,11 @@ import { UserCircleIcon, Bars3Icon, MagnifyingGlassIcon } from "@heroicons/vue/2
 import { ChevronDownIcon } from "@heroicons/vue/20/solid";
 import { Ref } from "vue";
 import { useRouter } from "#app";
-import { ref, useAuthenticationModal, useRegistrationModal, useSettings, useUser, logoutUser } from "#imports";
+import { ref, useSettings, useUser, logoutUser } from "#imports";
 
 const router = useRouter();
 const settings = useSettings();
 const user = useUser();
-const authModalOpen = useAuthenticationModal();
-const registrationModalOpen = useRegistrationModal();
 
 const mobileCollapsed = ref(true);
 const searchQuery: Ref<string> = ref("");
@@ -131,13 +129,6 @@ function submitSearch () {
   });
 }
 
-function login () {
-  authModalOpen.value = true;
-}
-
-function signup () {
-  registrationModalOpen.value = true;
-}
 </script>
 
 <style scoped>

components/registration/RegistrationForm.vue

@@ -45,17 +45,12 @@
           Sign Up
         </button>
       </form>
-      <div class="relative mt-3">
-        <button class="w-full btn btn-secondary" @click="close">
-          Close
-        </button>
-      </div>
     </div>
     <div class="relative mt-6">
       <div class="relative flex justify-center text-sm">
-        <button class="px-2 font-semibold duration-200 text-neutral-content/50 hover:text-neutral-content" @click="goToLogin">
+        <NuxtLink to="/signin">
           Already have an account? Sign In
-        </button>
+        </NuxtLink>
       </div>
     </div>
   </div>
@@ -65,7 +60,7 @@
 import { Ref } from "vue";
 import { EmailOnSignup } from "torrust-index-types-lib";
 import { notify } from "notiwind-ts";
-import { ref, useAuthenticationModal, useRegistrationModal, useRestApi, useSettings } from "#imports";
+import { ref, useRestApi, useSettings } from "#imports";
 
 const revealPasswords: Ref<Boolean> = ref(false);
 
@@ -77,8 +72,6 @@ type Form = {
 }
 
 const rest = useRestApi();
-const authenticationModalOpen = useAuthenticationModal();
-const registrationModalOpen = useRegistrationModal();
 const settings = useSettings();
 
 const form: Ref<Form> = ref({
@@ -96,15 +89,6 @@ function toggleState () {
   }
 }
 
-function goToLogin () {
-  close();
-  authenticationModalOpen.value = true;
-}
-
-function close () {
-  registrationModalOpen.value = false;
-}
-
 function submit () {
   signup();
 }
@@ -117,6 +101,7 @@ function signup () {
     confirm_password: form.value.confirm_password
   })
     .then(() => {
+      navigateTo("/signin", { replace: true });
       notify({
         group: "success",
         title: "Success",

composables/states.ts

@@ -3,9 +3,6 @@ import { Rest } from "torrust-index-api-lib";
 import { useRuntimeConfig, useState } from "#app";
 import { notify } from "notiwind-ts";
 
-export const useAuthenticationModal = () => useState<boolean>("authentication-modal", () => false);
-export const useRegistrationModal = () => useState<boolean>("registration-modal", () => false);
-
 export const useRestApi = () => useState<Rest>("rest-api", () => new Rest(useRuntimeConfig().public.apiBase));
 export const useCategories = () => useState<Array<Category>>("categories", () => new Array<Category>());
 export const useTags = () => useState<Array<TorrentTag>>("tags", () => new Array<TorrentTag>());
@@ -54,13 +51,15 @@ export function getTags () {
     });
 }
 
-export async function loginUser (login: string, password: string) {
-  return await useRestApi().value.user.loginUser({
+export async function loginUser (login: string, password: string): Promise<boolean> {
+  let authenticated = false;
+  await useRestApi().value.user.loginUser({
     login,
     password
   })
     .then((user) => {
       useUser().value = user;
+      authenticated = true;
     })
     .catch((err) => {
       notify({
@@ -69,6 +68,7 @@ export async function loginUser (login: string, password: string) {
         text: `Trying to login. ${err.message}.`
       }, 10000);
     });
+  return authenticated;
 }
 
 export function logoutUser () {

cypress/e2e/contexts/user/registration.cy.ts

@@ -24,7 +24,7 @@ describe("A guest", () => {
   });
 
   it("should be able to sign up", () => {
-    cy.get("button[data-cy=\"goto-signup\"]").click();
+    cy.visit("/signup");
 
     const registration_form = random_user_registration_form();
 

pages/upload.vue

@@ -67,12 +67,11 @@
         />
       </template>
       <template v-else>
-        <button
-          class="w-full h-12 px-4 font-semibold duration-1000 shadow-lg bg-gradient-to-bl from-primary to-primary-dark disabled:from-gray-500 disabled:to-gray-500 text-neutral-content rounded-2xl disabled:shadow-none shadow-transparent hover:shadow-primary-dark/50"
-          @click="login"
-        >
-          <span>Please sign in to upload</span>
-        </button>
+        <div class="relative flex justify-center text-sm">
+          <NuxtLink to="/signin">
+            Please sign in to upload
+          </NuxtLink>
+        </div>
       </template>
     </div>
   </div>
@@ -92,7 +91,7 @@ import {
   useTags,
   useUser
 } from "#imports";
-import { useAuthenticationModal, useCategories } from "~/composables/states";
+import { useCategories } from "~/composables/states";
 
 type FormUploadTorrent = {
   title: string;
@@ -105,7 +104,6 @@ type FormUploadTorrent = {
 const categories = useCategories();
 const tags = useTags();
 const user = useUser();
-const authModalOpen = useAuthenticationModal();
 const rest = useRestApi();
 
 const uploading: Ref<boolean> = ref(false);
@@ -171,9 +169,6 @@ function submitForm () {
     });
 }
 
-function login () {
-  authModalOpen.value = true;
-}
 </script>
 
 <style scoped>

project-words.txt

@@ -4,4 +4,5 @@ notiwind
 Nuxt
 nuxtjs
 proxied
+signin
 vuex