signup pages

frontend/src/components/Admin/ManageUsers/TheGroupTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card outlined>
+  <v-card outlined class="mt-n1">
     <Confirmation
       ref="deleteUserDialog"
       title="Confirm User Deletion"

frontend/src/components/Admin/ManageUsers/TheSignUpTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card outlined>
+  <v-card outlined class="mt-n1">
     <Confirmation
       ref="deleteUserDialog"
       title="Confirm User Deletion"
@@ -64,13 +64,13 @@
     <v-card-text>
       <v-data-table :headers="headers" :items="links" sort-by="calories">
         <template v-slot:item.token="{ item }">
-          {{ `${baseURL}/user/sign-up/${item.token}` }}
+          {{ `${baseURL}/sign-up/${item.token}` }}
           <v-btn
             icon
             class="mr-1"
             small
             color="accent"
-            @click="updateClipboard(`${baseURL}/user/sign-up/${item.token}`)"
+            @click="updateClipboard(`${baseURL}/sign-up/${item.token}`)"
           >
             <v-icon>
               mdi-content-copy

frontend/src/components/Admin/ManageUsers/TheUserTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card outlined>
+  <v-card outlined class="mt-n1">
     <Confirmation
       ref="deleteUserDialog"
       title="Confirm User Deletion"

frontend/src/components/Login/LoginForm.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card width="500px">
     <v-divider></v-divider>
-    <v-app-bar dark color="primary" class="mt-n1 mb-4">
+    <v-app-bar dark color="primary" class="mt-n1 mb-2">
       <v-icon large left v-if="!loading">
         mdi-account
       </v-icon>
@@ -14,10 +14,8 @@
       >
       </v-progress-circular>
       <v-toolbar-title class="headline"> Login </v-toolbar-title>
-
       <v-spacer></v-spacer>
     </v-app-bar>
-
     <v-card-text>
       <v-form>
         <v-text-field
@@ -45,6 +43,8 @@
           :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
           @click:append="showPassword = !showPassword"
         ></v-text-field>
+      </v-form>
+      <v-card-actions>
         <v-btn
           v-if="options.isLoggingIn"
           @click.prevent="login"
@@ -54,7 +54,7 @@
           type="submit"
           >{{ $t("login.sign-in") }}</v-btn
         >
-      </v-form>
+      </v-card-actions>
       <v-alert v-if="error" outlined class="mt-3 mb-0" type="error">
         Could Not Validate Credentials
       </v-alert>

frontend/src/components/Login/SignUpForm.vue

@@ -0,0 +1,139 @@
+<template>
+  <v-card width="500px">
+    <v-divider></v-divider>
+    <v-app-bar dark color="primary" class="mt-n1">
+      <v-icon large left v-if="!loading">
+        mdi-account
+      </v-icon>
+      <v-progress-circular
+        v-else
+        indeterminate
+        color="white"
+        large
+        class="mr-2"
+      >
+      </v-progress-circular>
+      <v-toolbar-title class="headline"> Sign Up </v-toolbar-title>
+      <v-spacer></v-spacer>
+    </v-app-bar>
+    <v-card-text>
+      Welcome to Mealie! To become a user of this instance you are required to
+      have a valid invitation link. If you haven't recieved an invitation you
+      are unable to sign-up. To recieve a link, contact the sites administrator.
+      <v-divider class="mt-3"></v-divider>
+      <v-form>
+        <v-text-field
+          v-model="user.name"
+          light="light"
+          prepend-icon="mdi-account"
+          validate-on-blur
+          label="Display Name"
+          type="email"
+        ></v-text-field>
+        <v-text-field
+          v-model="user.email"
+          light="light"
+          prepend-icon="mdi-email"
+          validate-on-blur
+          :label="$t('login.email')"
+          type="email"
+        ></v-text-field>
+        <v-text-field
+          v-model="user.password"
+          light="light"
+          class="mb-2s"
+          prepend-icon="mdi-lock"
+          :label="$t('login.password')"
+          :type="showPassword ? 'text' : 'password'"
+          :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
+          @click:append="showPassword = !showPassword"
+        ></v-text-field>
+        <v-text-field
+          v-model="user.passwordConfirm"
+          light="light"
+          class="mb-2s"
+          prepend-icon="mdi-lock"
+          :label="$t('login.password')"
+          :type="showPassword ? 'text' : 'password'"
+          :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
+          @click:append="showPassword = !showPassword"
+        ></v-text-field>
+      </v-form>
+      <v-card-actions>
+        <v-btn
+          v-if="options.isLoggingIn"
+          @click.prevent="signUp"
+          dark
+          color="primary"
+          block="block"
+          type="submit"
+        >
+          Sign Up
+        </v-btn>
+      </v-card-actions>
+      <v-alert dense v-if="error" outlined class="mt-3 mb-0" type="error">
+        Error Signing Up
+      </v-alert>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import api from "@/api";
+export default {
+  data() {
+    return {
+      loading: false,
+      error: false,
+      showPassword: false,
+      user: {
+        name: "",
+        email: "",
+        password: "",
+        passwordConfirm: "",
+      },
+      options: {
+        isLoggingIn: true,
+      },
+    };
+  },
+  mounted() {
+    this.clear();
+  },
+  computed: {
+    token() {
+      return this.$route.params.token;
+    },
+  },
+  methods: {
+    clear() {
+      this.user = {
+        name: "",
+        email: "",
+        password: "",
+        passwordConfirm: "",
+      };
+    },
+    async signUp() {
+      this.loading = true;
+      this.error = false;
+
+      const userData = {
+        fullName: this.user.name,
+        email: this.user.email,
+        family: "public",
+        password: this.user.password,
+        admin: false,
+      };
+
+      await api.signUps.createUser(this.token, userData);
+      this.$emit("user-created");
+
+      this.loading = false;
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/pages/Admin/ManageUsers/index.vue

@@ -26,7 +26,7 @@
         </v-tab>
       </v-tabs>
 
-      <v-tabs-items v-model="tab">
+      <v-tabs-items v-model="tab" >
         <v-tab-item>
           <TheUserTable />
         </v-tab-item>

frontend/src/pages/SignUpPage.vue

@@ -0,0 +1,41 @@
+<template>
+  <v-container fill-height class="text-center">
+    <v-row>
+      <v-flex class="d-flex justify-center" width="500px">
+        <SignUpForm @logged-in="redirectMe" class="ma-1" />
+      </v-flex>
+    </v-row>
+    <v-row></v-row>
+  </v-container>
+</template>
+
+<script>
+import SignUpForm from "../components/Login/SignUpForm";
+export default {
+  components: {
+    SignUpForm,
+  },
+  computed: {
+    viewScale() {
+      switch (this.$vuetify.breakpoint.name) {
+        case "xs":
+          return true;
+        case "sm":
+          return true;
+        default:
+          return false;
+      }
+    },
+  },
+  methods: {
+    redirectMe() {
+      if (this.$route.query.redirect) {
+        this.$router.push(this.$route.query.redirect);
+      } else this.$router.push({ path: "/" });
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/routes/index.js

@@ -8,6 +8,7 @@ import CategoryPage from "../pages/CategoryPage";
 import MeaplPlanPage from "../pages/MealPlanPage";
 import Debug from "../pages/Debug";
 import LoginPage from "../pages/LoginPage";
+import SignUpPage from "../pages/SignUpPage";
 import MealPlanThisWeekPage from "../pages/MealPlanThisWeekPage";
 import api from "@/api";
 import Admin from "./admin";
@@ -25,6 +26,8 @@ export const routes = [
   },
   { path: "/mealie", component: HomePage },
   { path: "/login", component: LoginPage },
+  { path: "/sign-up", redirect: "/" },
+  { path: "/sign-up/:token", component: SignUpPage },
   { path: "/debug", component: Debug },
   { path: "/search", component: SearchPage },
   { path: "/recipes/all", component: AllRecipesPage },