From 59ad5e68ccddb39cffcb97d995025f2532b0a91e Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Tue, 26 Apr 2022 14:17:40 +0200
Subject: [PATCH] New password tailwinded
---
src/components/NewPasswordForm.vue | 164 +++++++++++++++++++++--------
src/utils/apiutil.js | 10 ++
2 files changed, 129 insertions(+), 45 deletions(-)
diff --git a/src/components/NewPasswordForm.vue b/src/components/NewPasswordForm.vue
index c86145c..bff1248 100644
--- a/src/components/NewPasswordForm.vue
+++ b/src/components/NewPasswordForm.vue
@@ -1,52 +1,105 @@
<template>
- <div>
- <v-col align="center" justify="space-around" class="mt-16">
- <v-img
- max-width="45%"
- :src="require('../assets/logo3.svg')"
- align="center"
+ <div
+ class="w-full max-w-sm p-6 m-auto bg-white rounded-md shadow-md dark:bg-gray-800"
+ >
+ <div id="logoField" class="flex justify-center m-6">
+ <img src="../assets/logo3.svg" alt="BoCo logo" />
+ </div>
+
+ <div
+ id="firstPasswordField"
+ :class="{ error: v$.user.password.$errors.length }"
+ >
+ <label
+ for="password"
+ class="block text-sm text-gray-800 dark:text-gray-200"
+ >Nytt passord</label
+ >
+ <input
+ type="password"
+ v-model="v$.user.password.$model"
+ class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
/>
- </v-col>
+ <!-- error message -->
+ <div v-for="(error, index) of v$.user.password.$errors" :key="index">
+ <div
+ class="text-red-600 text-sm"
+ v-show="showError"
+ id="passwordErrorId"
+ >
+ {{ error.$message }}
+ </div>
+ </div>
+ </div>
- <v-form ref="form" v-model="valid" lazy-validation class="mt-8">
- <v-text-field
- v-model="user.password"
- :rules="[rules.required, rules.min]"
- :type="'password'"
- name="input-10-1"
- label="Passord"
- counter
- ></v-text-field>
+ <div
+ id="secondPasswordField"
+ class="mt-4"
+ :class="{ error: v$.user.rePassword.$errors.length }"
+ >
+ <div class="flex items-center justify-between">
+ <label
+ for="rePassword"
+ class="block text-sm text-gray-800 dark:text-gray-200"
+ >Gjenta nytt passord</label
+ >
+ </div>
- <v-text-field
- v-model="user.rePassword"
- :rules="[rules.required, rules.min, rules.passwordConfirmation]"
- :type="'password'"
- name="input-10-1"
- label="Confirm Password"
- counter
- ></v-text-field>
+ <input
+ type="password"
+ v-model="v$.user.rePassword.$model"
+ class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
+ />
+ <!-- error message -->
+ <div v-for="(error, index) of v$.user.rePassword.$errors" :key="index">
+ <div
+ class="text-red-600 text-sm"
+ v-show="showError"
+ id="rePasswordErrorId"
+ >
+ {{ error.$message }}
+ </div>
+ </div>
+ </div>
- <v-col justify="space-around" align="center">
- <v-btn
- :disabled="!valid"
- color="success"
- class="mb-4 mt-4"
- width="50%"
- height="40px"
+ <div id="buttonsField" class="mt-6">
+ <button
@click="setNewPassword"
- >
- Endre passord
- </v-btn>
- </v-col>
- </v-form>
+ class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600"
+ >
+ Endre passord
+ </button>
+ </div>
</div>
</template>
<script>
+import useVuelidate from "@vuelidate/core";
+import { required, minLength, sameAs } from "@vuelidate/validators";
+import { doNewPassword } from "@/utils/apiutil";
+import { mapState } from "vuex";
+
export default {
name: "NewPasswordForm.vue",
+ setup() {
+ return { v$: useVuelidate() };
+ },
+ validations() {
+ return {
+ user: {
+ password: {
+ required,
+ minLength: minLength(8),
+ },
+ rePassword: {
+ required,
+ minLength: minLength(8),
+ sameAs: sameAs(this.user.password),
+ },
+ },
+ };
+ },
data() {
return {
user: {
@@ -54,18 +107,39 @@ export default {
rePassword: "",
},
- valid: true,
- rules: {
- required: (value) => !!value || "Feltet er påkrevd",
- min: (v) => v.length >= 8 || "Minimum 8 tegn",
- passwordConfirmation: (v) =>
- v === this.user.password || "Passordene må være like",
- },
+ showError: false,
};
},
-
+ computed: mapState({
+ token: (state) => state.user.token,
+ }),
methods: {
- async setNewPassword() {},
+ async setNewPassword() {
+ this.showError = true;
+
+ this.v$.user.$touch();
+
+ if (this.v$.user.$invalid) {
+ console.log("Invalid, exiting...");
+ return;
+ }
+
+ const newPasswordInfo = {
+ token: this.token,
+ newPassword: this.password,
+ };
+
+ const newPasswordResponse = doNewPassword(newPasswordInfo);
+
+ if (newPasswordResponse.newPasswordSet === true) {
+ console.log("New password set");
+ await this.$router.push("/endre");
+ } else if (newPasswordResponse.newPasswordSet === false) {
+ console.log("Couldn't set new password");
+ } else {
+ console.log("Something went wrong");
+ }
+ },
validate() {
this.$refs.form.validate();
},
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index 94dee18..b31c432 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -71,3 +71,13 @@ export function getOwnerRating(userid) {
console.error(error);
});
}
+
+export function doNewPassword() { //m
+ //add newPasswordInfo to input
+ const auth = { newPasswordSet: false };
+ //return axios
+ //.post(API_URL + "newPassword", newPasswordInfo)
+ //.then((response) => {auth.newPasswordSet = true;return auth;})
+ //.catch((error) => {console.log(error);return auth;});
+ return auth; //remove after axios is added
+}
--
GitLab