viithiisys / School-Management-dashboard

1

1

2

<v-app id="login">

2

<v-app id="login">

3

<v-container fluid fill-height>

3

<v-container fluid fill-height>

4

<v-layout>

4

<v-layout>

5

<v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3 class="mt-5">

5

<v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3 class="mt-5">

6

<v-toolbar class="fixcolors mt-5" dark>

6

<v-toolbar class="fixcolors mt-5" dark>

7

<v-spacer></v-spacer>

7

<v-spacer></v-spacer>

8

<v-toolbar-title>Reset Password</v-toolbar-title>

8

<v-toolbar-title>Reset Password</v-toolbar-title>

9

<v-spacer></v-spacer>

9

<v-spacer></v-spacer>

10

</v-toolbar>

10

</v-toolbar>

11

<v-card class="elevation-1 pa-3" id="form">

11

<v-card class="elevation-1 pa-3" id="form">

12

<v-card-text>

12

<v-card-text>

13

<v-flex xs12 sm8 md8 lg8 offset-sm2>

13

<v-flex xs12 sm8 md8 lg8 offset-sm2>

14

<v-form class="mt-3" ref="form" v-model="valid" lazy-validation>

14

<v-form class="mt-3" ref="form" v-model="valid" lazy-validation>

15

<v-select

15

<v-select

16

:rules="userRule"

16

:rules="userRule"

17

label="Select User"

17

label="Select User"

18

:items="getRoles"

18

:items="getRoles"

19

item-text="name"

19

item-text="name"

20

item-value="name"

20

item-value="name"

21

v-model="resetPassword.name"

21

v-model="resetPassword.name"

22

@change="getUsers(resetPassword.name)"

22

@change="getUsers(resetPassword.name)"

23

></v-select>

23

></v-select>

24

<v-select

24

<v-select

25

:rules="userNameRule"

25

:rules="userNameRule"

26

label="Select User Name"

26

label="Select User Name"

27

:items="getUsersName"

27

:items="getUsersName"

28

item-text="email"

28

item-text="email"

29

item-value="email"

29

item-value="email"

30

v-model="resetPassword.email"

30

v-model="resetPassword.email"

31

></v-select>

31

></v-select>

32

<v-text-field

32

<v-text-field

33

:rules="newPasswordRule"

33

:rules="newPasswordRule"

34

v-model="resetPassword.newPassword"

34

v-model="resetPassword.newPassword"

35

:error-messages="errors.collect('resetPassword.newPassword')"

35

:error-messages="errors.collect('resetPassword.newPassword')"

36

v-validate="'required'"

36

v-validate="'required'"

37

data-vv-name="resetPassword.newPassword"

37

data-vv-name="resetPassword.newPassword"

38

label="New Password"

38

label="New Password"

39

></v-text-field>

39

></v-text-field>

40

<v-text-field

40

<v-text-field

41

v-model="resetPassword.confirmPassword"

41

v-model="resetPassword.confirmPassword"

42

:rules="rePasswordRule"

42

:rules="rePasswordRule"

43

:error-messages="errors.collect('password2')"

43

:error-messages="errors.collect('password2')"

44

v-validate="{ required: true, is: resetPassword.newPassword }"

44

v-validate="{ required: false, is: resetPassword.newPassword }"

45

data-vv-name="password2"

45

data-vv-name="password2"

46

data-vv-as="password"

46

data-vv-as="password"

47

label="Re-Password"

47

label="Re-Password"

48

></v-text-field>

48

></v-text-field>

49

</v-form>

49

</v-form>

50

</v-flex>

50

</v-flex>

51

</v-card-text>

51

</v-card-text>

52

<v-card-actions>

52

<v-card-actions>

53

<v-flex text-xs-center>

53

<v-flex text-xs-center>

54

<v-btn

54

<v-btn

55

class="mt-3"

55

class="mt-3"

56

round

56

round

57

color="black"

57

color="black"

58

dark

58

dark

59

large

59

large

60

:loading="loading"

60

:loading="loading"

61

@click="reset"

61

@click="reset"

62

>Reset Password</v-btn>

62

>Reset Password</v-btn>

63

</v-flex>

63

</v-flex>

64

</v-card-actions>

64

</v-card-actions>

65

<v-snackbar

65

<v-snackbar

66

:timeout="timeout"

66

:timeout="timeout"

67

:top="y === 'top'"

67

:top="y === 'top'"

68

:right="x === 'right'"

68

:right="x === 'right'"

69

:vertical="mode === 'vertical'"

69

:vertical="mode === 'vertical'"

70

v-model="snackbar"

70

v-model="snackbar"

71

:color="color"

71

:color="color"

72

>{{ text }}</v-snackbar>

72

>{{ text }}</v-snackbar>

73

</v-card>

73

</v-card>

74

</v-flex>

74

</v-flex>

75

</v-layout>

75

</v-layout>

76

</v-container>

76

</v-container>

77

</v-app>

77

</v-app>

78

</template>

78

</template>

79

79

80

import http from "@/Services/http.js";

80

import http from "@/Services/http.js";

81

82

export default {

82

export default {

83

data() {

83

data() {

84

return {

84

return {

85

snackbar: false,

85

snackbar: false,

86

y: "top",

86

y: "top",

87

x: "right",

87

x: "right",

88

mode: "",

88

mode: "",

89

timeout: 4000,

89

timeout: 4000,

90

text: "",

90

text: "",

91

color: "",

91

color: "",

92

password2: "",

92

password2: "",

93

resetPassword: {},

93

resetPassword: {},

94

getUsersName: [],

94

getUsersName: [],

95

getRoles: [],

95

getRoles: [],

96

valid: true,

96

valid: true,

97

loading: false,

97

loading: false,

98

text: "Password Changed",

98

text: "Password Changed",

99

newPassword: "",

99

newPassword: "",

100

userRule: [v => !!v || "User is required"],

100

userRule: [v => !!v || "User is required"],

101

userNameRule: [v => !!v || "User Name is required"],

101

userNameRule: [v => !!v || "User Name is required"],

102

newPasswordRule: [v => !!v || "New Password is required"],

102

newPasswordRule: [v => !!v || "New Password is required"],

103

rePasswordRule: [v => !!v || "Re-Password is required"]

103

rePasswordRule: [v => !!v || "Re-Password is required"]

104

};

104

};

105

},

105

},

106

mounted() {

106

mounted() {

107

this.token = this.$store.state.token;

107

this.token = this.$store.state.token;

108

this.getRole();

108

this.getRole();

109

},

109

},

110

methods: {

110

methods: {

111

reset() {

111

reset() {

112

if (this.$refs.form.validate()) {

112

if (

113

this.$refs.form.validate() &&

114

this.resetPassword.confirmPassword === resetPassword.newPassword

115

) {

113

this.loading = true;

116

this.loading = true;

114

this.resetPassword.roleName = this.resetPassword.name;

117

this.resetPassword.roleName = this.resetPassword.name;

115

http()

118

http()

116

.put("/resetPasswordOfUsers", this.resetPassword, {

119

.put("/resetPasswordOfUsers", this.resetPassword, {

117

headers: { Authorization: "Bearer " + this.token }

120

headers: { Authorization: "Bearer " + this.token }

118

})

121

})

119

.then(response => {

122

.then(response => {

120

this.loading = false;

123

this.loading = false;

121

this.snackbar = true;

124

this.snackbar = true;

122

this.text = "Successfully Restet password !!";

125

this.text = "Successfully Restet password !!";

123

this.color = "green";

126

this.color = "green";

124

this.clear();

127

this.clear();

125

})

128

})

126

.catch(error => {

129

.catch(error => {

127

// console.log("err====>",err);

130

// console.log("err====>",err);

128

this.snackbar = true;

131

this.snackbar = true;

129

this.text = "User Not Found or Incorrect currentPassword";

132

this.text = "User Not Found or Incorrect currentPassword";

130

this.color = "error";

133

this.color = "error";

131

this.loading = false;

134

this.loading = false;

132

});

135

});

133

}

136

}

134

},

137

},

135

getRole() {

138

getRole() {

136

this.showLoader = true;

139

this.showLoader = true;

137

http()

140

http()

138

.get("/getRolesList", {

141

.get("/getRolesList", {

139

headers: { Authorization: "Bearer " + this.token }

142

headers: { Authorization: "Bearer " + this.token }

140

})

143

})

141

.then(response => {

144

.then(response => {

142

for (let i = 0; i < response.data.data.length; i++) {

145

for (let i = 0; i < response.data.data.length; i++) {

143

if (

146

if (

144

response.data.data[i].name != "SUPERADMIN" &&

147

response.data.data[i].name != "SUPERADMIN" &&

145

response.data.data[i].name != "ADMIN"

148

response.data.data[i].name != "ADMIN"

146

) {

149

) {

147

this.getRoles.push(response.data.data[i]);

150

this.getRoles.push(response.data.data[i]);

148

this.showLoader = false;

151

this.showLoader = false;

149

}

152

}

150

}

153

}

151

})

154

})

152

.catch(error => {

155

.catch(error => {

153

this.showLoader = false;

156

this.showLoader = false;

154

if (error.response.status === 401) {

157

if (error.response.status === 401) {

155

this.$router.replace({ path: "/" });

158

this.$router.replace({ path: "/" });

156

this.$store.dispatch("setToken", null);

159

this.$store.dispatch("setToken", null);

157

this.$store.dispatch("Id", null);

160

this.$store.dispatch("Id", null);

158

}

161

}

159

});

162

});

160

},

163

},

161

clear() {

164

clear() {

162

this.$refs.form.reset();

165

this.$refs.form.reset();

163

},

166

},

164

getUsers(roles) {

167

getUsers(roles) {

165

this.showLoader = true;

168

this.showLoader = true;

166

http()

169

http()

167

.get("/getUserWithRole", {

170

.get("/getUserWithRole", {

168

params: {

171

params: {

169

name: roles

172

name: roles

170

},

173

},

171

headers: { Authorization: "Bearer " + this.token }

174

headers: { Authorization: "Bearer " + this.token }

172

})

175

})

173

.then(response => {

176

.then(response => {

174

this.getUsersName = response.data.data;

177

this.getUsersName = response.data.data;

175

})

178

})

176

.catch(error => {

179

.catch(error => {

177

this.showLoader = false;

180

this.showLoader = false;

178

if (error.response.status === 401) {

181

if (error.response.status === 401) {

179

this.$router.replace({ path: "/" });

182

this.$router.replace({ path: "/" });

180

this.$store.dispatch("setToken", null);

183

this.$store.dispatch("setToken", null);

181

this.$store.dispatch("Id", null);

184

this.$store.dispatch("Id", null);

182

}

185

}

183

});

186

});

184

}

187

}

185

}

188

}

186

};

189

};

187

</script>

190

</script>

188

191

189

img {

192

img {

190

position: absolute;

193

position: absolute;

191

top: 13px;

194

top: 13px;

192

left: 50px;

195

left: 50px;

193

}

196

}

194

.v-btn--large {

197

.v-btn--large {

195

padding: 0px 74px;

198

padding: 0px 74px;

196

}

199

}

197

@media screen and (max-width: 769px) {

200

@media screen and (max-width: 769px) {

198

.v-btn--large {

201

.v-btn--large {

199

font-size: 14px;

202

font-size: 14px;

200

height: 44px;

203

height: 44px;

201

padding: 0 32px;

204

padding: 0 32px;

202

}

205

}

203

}

206

}

204

</style>

207

</style>

205

208

GITLAB

viithiisys / School-Management-dashboard

fixed validation in

 <template>
   <v-app id="login">
     <v-container fluid fill-height>
       <v-layout>
         <v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3 class="mt-5">
           <v-toolbar class="fixcolors mt-5" dark>
             <v-spacer></v-spacer>
             <v-toolbar-title>Reset Password</v-toolbar-title>
             <v-spacer></v-spacer>
           </v-toolbar>
           <v-card class="elevation-1 pa-3" id="form">
             <v-card-text>
               <v-flex xs12 sm8 md8 lg8 offset-sm2>
                 <v-form class="mt-3" ref="form" v-model="valid" lazy-validation>
                   <v-select
                     :rules="userRule"
                     label="Select User"
                     :items="getRoles"
                     item-text="name"
                     item-value="name"
                     v-model="resetPassword.name"
                     @change="getUsers(resetPassword.name)"
                   ></v-select>
                   <v-select
                     :rules="userNameRule"
                     label="Select User Name"
                     :items="getUsersName"
                     item-text="email"
                     item-value="email"
                     v-model="resetPassword.email"
                   ></v-select>
                   <v-text-field
                     :rules="newPasswordRule"
                     v-model="resetPassword.newPassword"
                     :error-messages="errors.collect('resetPassword.newPassword')"
                     v-validate="'required'"
                     data-vv-name="resetPassword.newPassword"
                     label="New Password"
                   ></v-text-field>
                   <v-text-field
                     v-model="resetPassword.confirmPassword"
                     :rules="rePasswordRule"
                     :error-messages="errors.collect('password2')"
-                    v-validate="{ required: true, is: resetPassword.newPassword }"
+                    v-validate="{ required: false, is: resetPassword.newPassword }"
                     data-vv-name="password2"
                     data-vv-as="password"
                     label="Re-Password"
                   ></v-text-field>
                 </v-form>
               </v-flex>
             </v-card-text>
             <v-card-actions>
               <v-flex text-xs-center>
                 <v-btn
                   class="mt-3"
                   round
                   color="black"
                   dark
                   large
                   :loading="loading"
                   @click="reset"
                 >Reset Password</v-btn>
               </v-flex>
             </v-card-actions>
             <v-snackbar
               :timeout="timeout"
               :top="y === 'top'"
               :right="x === 'right'"
               :vertical="mode === 'vertical'"
               v-model="snackbar"
               :color="color"
             >{{ text }}</v-snackbar>
           </v-card>
         </v-flex>
       </v-layout>
     </v-container>
   </v-app>
 </template>
 <script>
 import http from "@/Services/http.js";
 export default {
   data() {
     return {
       snackbar: false,
       y: "top",
       x: "right",
       mode: "",
       timeout: 4000,
       text: "",
       color: "",
       password2: "",
       resetPassword: {},
       getUsersName: [],
       getRoles: [],
       valid: true,
       loading: false,
       text: "Password Changed",
       newPassword: "",
       userRule: [v => !!v || "User is required"],
       userNameRule: [v => !!v || "User Name is required"],
       newPasswordRule: [v => !!v || "New Password is required"],
       rePasswordRule: [v => !!v || "Re-Password is required"]
     };
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getRole();
   },
   methods: {
     reset() {
-      if (this.$refs.form.validate()) {
+      if (
+        this.$refs.form.validate() &&
+        this.resetPassword.confirmPassword === resetPassword.newPassword
+      ) {
         this.loading = true;
         this.resetPassword.roleName = this.resetPassword.name;
         http()
           .put("/resetPasswordOfUsers", this.resetPassword, {
             headers: { Authorization: "Bearer " + this.token }
           })
           .then(response => {
             this.loading = false;
             this.snackbar = true;
             this.text = "Successfully Restet password !!";
             this.color = "green";
             this.clear();
           })
           .catch(error => {
             // console.log("err====>",err);
             this.snackbar = true;
             this.text = "User Not Found or Incorrect currentPassword";
             this.color = "error";
             this.loading = false;
           });
       }
     },
     getRole() {
       this.showLoader = true;
       http()
         .get("/getRolesList", {
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           for (let i = 0; i < response.data.data.length; i++) {
             if (
               response.data.data[i].name != "SUPERADMIN" &&
               response.data.data[i].name != "ADMIN"
             ) {
               this.getRoles.push(response.data.data[i]);
               this.showLoader = false;
             }
           }
         })
         .catch(error => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     clear() {
       this.$refs.form.reset();
     },
     getUsers(roles) {
       this.showLoader = true;
       http()
         .get("/getUserWithRole", {
           params: {
             name: roles
           },
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.getUsersName = response.data.data;
         })
         .catch(error => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     }
   }
 };
 </script>
 <style scoped>
 img {
   position: absolute;
   top: 13px;
   left: 50px;
 }
 .v-btn--large {
   padding: 0px 74px;
 }
 @media screen and (max-width: 769px) {
   .v-btn--large {
     font-size: 14px;
     height: 44px;
     padding: 0 32px;
   }
 }
 </style>