See #872: moved signup and login form in separate components for reusability

front/src/components/auth/Login.vue → front/src/components/auth/LoginForm.vue

 <template>
-  <main class="main pusher" v-title="labels.title">
-    <section class="ui vertical stripe segment">
-      <div class="ui small text container">
-        <h2><translate translate-context="Content/Login/Title/Verb">Log in to your Funkwhale account</translate></h2>
   <form class="ui form" @submit.prevent="submit()">
+    <slot name="title"></slot>
     <div v-if="error" class="ui negative message">
       <div class="header"><translate translate-context="Content/Login/Error message.Title">We cannot log you in</translate></div>
       <ul class="list">
@@ -43,9 +40,6 @@
         <translate translate-context="*/Login/*/Verb">Login</translate>
     </button>
   </form>
-      </div>
-    </section>
-  </main>
 </template>
 
 <script>
@@ -81,10 +75,8 @@ export default {
   computed: {
     labels() {
       let usernamePlaceholder = this.$pgettext('Content/Login/Input.Placeholder', "Enter your username or email")
-      let title = this.$pgettext('Head/Login/Title', "Log In")
       return {
         usernamePlaceholder,
-        title
       }
     }
   },

front/src/components/auth/Signup.vue → front/src/components/auth/SignupForm.vue

 <template>
-  <main class="main pusher" v-title="labels.title">
-    <section class="ui vertical stripe segment">
-      <div class="ui small text container">
-        <h2><translate translate-context="Content/Signup/Title">Create a funkwhale account</translate></h2>
   <form
     :class="['ui', {'loading': isLoadingInstanceSetting}, 'form']"
     @submit.prevent="submit()">
+    <slot name="title"></slot>
     <p class="ui message" v-if="!$store.state.instance.settings.users.registration_enabled.value">
       <translate translate-context="Content/Signup/Form/Paragraph">Registration are closed on this instance, you will need an invitation code to signup.</translate>
     </p>
@@ -54,9 +51,6 @@
       <translate translate-context="Content/Signup/Button.Label">Create my account</translate>
     </button>
   </form>
-      </div>
-    </section>
-  </main>
 </template>
 
 <script>
@@ -94,7 +88,6 @@ export default {
   },
   computed: {
     labels() {
-      let title = this.$pgettext("*/Signup/Title", "Sign Up")
       let placeholder = this.$pgettext(
         "Content/Signup/Form/Placeholder",
         "Enter your invitation code (case insensitive)"
@@ -102,7 +95,6 @@ export default {
       let usernamePlaceholder = this.$pgettext("Content/Signup/Form/Placeholder", "Enter your username")
       let emailPlaceholder = this.$pgettext("Content/Signup/Form/Placeholder", "Enter your email")
       return {
-        title,
         usernamePlaceholder,
         emailPlaceholder,
         placeholder
@@ -140,7 +132,3 @@ export default {
   }
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>

front/src/router/index.js

@@ -30,7 +30,7 @@ export default new Router({
       path: '/login',
       name: 'login',
       component: () =>
-        import(/* webpackChunkName: "core" */ "@/components/auth/Login"),
+        import(/* webpackChunkName: "core" */ "@/views/auth/Login"),
       props: (route) => ({ next: route.query.next || '/library' })
     },
     {
@@ -85,7 +85,7 @@ export default new Router({
       path: '/signup',
       name: 'signup',
       component: () =>
-        import(/* webpackChunkName: "core" */ "@/components/auth/Signup"),
+        import(/* webpackChunkName: "core" */ "@/views/auth/Signup"),
       props: (route) => ({
         defaultInvitation: route.query.invitation
       })

front/src/views/auth/Login.vue

+<template>
+  <main class="main pusher" v-title="labels.title">
+    <section class="ui vertical stripe segment">
+      <div class="ui small text container">
+        <h2 slot="title"><translate translate-context="Content/Login/Title/Verb">Log in to your Funkwhale account</translate></h2>
+        <login-form :next="next"></login-form>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script>
+import LoginForm from "@/components/auth/LoginForm"
+import PasswordInput from "@/components/forms/PasswordInput"
+
+export default {
+  components: {
+    LoginForm
+  },
+  props: {
+    next: { type: String, default: "/library" }
+  },
+  computed: {
+    labels() {
+      let title = this.$pgettext('Head/Login/Title', "Log In")
+      return {
+        title
+      }
+    }
+  },
+}
+</script>

front/src/views/auth/Signup.vue

+<template>
+  <main class="main pusher" v-title="labels.title">
+    <section class="ui vertical stripe segment">
+      <div class="ui small text container">
+        <signup-form :default-invitation="defaultInvitation" :next="next">
+          <h2 slot="title"><translate translate-context="Content/Signup/Title">Create a funkwhale account</translate></h2>
+        </signup-form>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script>
+import axios from "axios"
+import logger from "@/logging"
+
+import SignupForm from "@/components/auth/SignupForm"
+
+export default {
+  components: {
+    SignupForm
+  },
+  props: {
+    defaultInvitation: { type: String, required: false, default: null },
+    next: { type: String, default: "/" }
+  },
+  computed: {
+    labels() {
+      let title = this.$pgettext("*/Signup/Title", "Sign Up")
+      return {
+        title,
+      }
+    }
+  }
+}
+</script>