viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit af414ec9cf29d6993d9c7dd77aa2a5a35dfd1e54

Authored by Shikha Mishra
1 parent e8965626ff
Exists in master and in 3 other branches amber-development, development, ui-design

set style in text field of email and password

Showing 1 changed file with 3 additions and 1 deletions   Show diff stats
src/pages/Authentication/Login.vue
Diff comments   View file @af414ec
1 <template> 1 <template>
2 <v-app id="login"> 2 <v-app id="login">
3 <v-content> 3 <v-content>
4 <v-container fluid fill-height> 4 <v-container fluid fill-height>
5 <v-snackbar 5 <v-snackbar
6 :timeout="timeout" 6 :timeout="timeout"
7 :top="y === 'top'" 7 :top="y === 'top'"
8 :right="x === 'right'" 8 :right="x === 'right'"
9 :vertical="mode === 'vertical'" 9 :vertical="mode === 'vertical'"
10 v-model="snackbar" 10 v-model="snackbar"
11 :color="color" 11 :color="color"
12 >{{ text }}</v-snackbar> 12 >{{ text }}</v-snackbar>
13 <v-layout align-center justify-center> 13 <v-layout align-center justify-center>
14 <v-flex xs12 sm10 md6 lg4> 14 <v-flex xs12 sm10 md6 lg4>
15 <!-- <v-toolbar dense flat class="transparent mb-4"> 15 <!-- <v-toolbar dense flat class="transparent mb-4">
16 <v-toolbar-items class="mx-auto"> 16 <v-toolbar-items class="mx-auto">
17 <img src="/static/icon.png" height="40" width="140" alt="logo" class="logo" /> 17 <img src="/static/icon.png" height="40" width="140" alt="logo" class="logo" />
18 <h3 class="white--text my-3 ml-5 logoSchool">School-Management</h3> 18 <h3 class="white--text my-3 ml-5 logoSchool">School-Management</h3>
19 </v-toolbar-items> 19 </v-toolbar-items>
20 </v-toolbar> --> 20 </v-toolbar>-->
21 21
22 <v-card class="elevation-1 pa-1 card" style="background-color: #7852cc" dark> 22 <v-card class="elevation-1 pa-1 card" style="background-color: #7852cc" dark>
23 <img 23 <img
24 src="/static/intrackIllustration.png" 24 src="/static/intrackIllustration.png"
25 class="mx-auto logoSchool" 25 class="mx-auto logoSchool"
26 style="display:block" 26 style="display:block"
27 width="300" 27 width="300"
28 /> 28 />
29 <v-card-text align-center justify-center> 29 <v-card-text align-center justify-center>
30 <v-toolbar-title class="text-xs-center subheadline">SCHOOL LOGIN</v-toolbar-title> 30 <v-toolbar-title class="text-xs-center subheadline">SCHOOL LOGIN</v-toolbar-title>
31 <v-flex xs12 sm12 md12 lg12> 31 <v-flex xs12 sm12 md12 lg12>
32 <v-form ref="form" v-model="valid" lazy-validation> 32 <v-form ref="form" v-model="valid" lazy-validation>
33 <label class="title">Email</label> 33 <label class="title">Email</label>
34 <v-text-field 34 <v-text-field
35 style="padding: 0px; margin: 0px;"
35 v-model.trim="userLogincredentials.email" 36 v-model.trim="userLogincredentials.email"
36 :rules="nameRules" 37 :rules="nameRules"
37 placeholder="Enter your email" 38 placeholder="Enter your email"
38 required 39 required
39 ></v-text-field> 40 ></v-text-field>
40 <label class="title">Password</label> 41 <label class="title">Password</label>
41 <v-text-field 42 <v-text-field
43 style="padding: 0px; margin: 0px;"
42 :rules="[rules.required]" 44 :rules="[rules.required]"
43 v-model.trim="userLogincredentials.password" 45 v-model.trim="userLogincredentials.password"
44 :append-icon="e1 ? 'visibility_off' : 'visibility'" 46 :append-icon="e1 ? 'visibility_off' : 'visibility'"
45 :append-icon-cb="() => (e1 = !e1)" 47 :append-icon-cb="() => (e1 = !e1)"
46 :type="e1 ? 'password' : 'text'" 48 :type="e1 ? 'password' : 'text'"
47 name="input-10-1" 49 name="input-10-1"
48 placeholder="Enter Your password" 50 placeholder="Enter Your password"
49 @keyup.enter="login" 51 @keyup.enter="login"
50 counter 52 counter
51 ></v-text-field> 53 ></v-text-field>
52 </v-form> 54 </v-form>
53 <v-layout row wrap> 55 <v-layout row wrap>
54 <v-flex xs6> 56 <v-flex xs6>
55 <!-- <v-checkbox :label="`Remember me`" v-model="remember"></v-checkbox> --> 57 <!-- <v-checkbox :label="`Remember me`" v-model="remember"></v-checkbox> -->
56 </v-flex> 58 </v-flex>
57 <v-flex xs6> 59 <v-flex xs6>
58 <h5 class="right mt-4"> 60 <h5 class="right mt-4">
59 <router-link class="link" to="/forgetpassword">Forgot password</router-link> 61 <router-link class="link" to="/forgetpassword">Forgot password</router-link>
60 </h5> 62 </h5>
61 </v-flex> 63 </v-flex>
62 </v-layout> 64 </v-layout>
63 </v-flex> 65 </v-flex>
64 </v-card-text> 66 </v-card-text>
65 <v-layout> 67 <v-layout>
66 <v-flex sm12 class="my-3"> 68 <v-flex sm12 class="my-3">
67 <v-btn 69 <v-btn
68 style="margin: auto;display: block;background-color: #71d9ea; color: #0c0754;" 70 style="margin: auto;display: block;background-color: #71d9ea; color: #0c0754;"
69 dark 71 dark
70 flat 72 flat
71 @click="login" 73 @click="login"
72 :loading="loading" 74 :loading="loading"
73 >Login</v-btn> 75 >Login</v-btn>
74 </v-flex> 76 </v-flex>
75 </v-layout> 77 </v-layout>
76 <v-layout></v-layout> 78 <v-layout></v-layout>
77 </v-card> 79 </v-card>
78 </v-flex> 80 </v-flex>
79 </v-layout> 81 </v-layout>
80 </v-container> 82 </v-container>
81 </v-content> 83 </v-content>
82 </v-app> 84 </v-app>
83 </template> 85 </template>
84 86
85 <script> 87 <script>
86 import http from "@/Services/http.js"; 88 import http from "@/Services/http.js";
87 export default { 89 export default {
88 data() { 90 data() {
89 return { 91 return {
90 snackbar: false, 92 snackbar: false,
91 y: "top", 93 y: "top",
92 x: "right", 94 x: "right",
93 mode: "", 95 mode: "",
94 timeout: 3000, 96 timeout: 3000,
95 text: "", 97 text: "",
96 append: "", 98 append: "",
97 e1: true, 99 e1: true,
98 loading: false, 100 loading: false,
99 remember: false, 101 remember: false,
100 valid: false, 102 valid: false,
101 userLogincredentials: {}, 103 userLogincredentials: {},
102 nameRules: [v => !!v || "Username is required"], 104 nameRules: [v => !!v || "Username is required"],
103 password: "", 105 password: "",
104 email: "", 106 email: "",
105 rules: { 107 rules: {
106 required: value => !!value || "password is Required." 108 required: value => !!value || "password is Required."
107 } 109 }
108 }; 110 };
109 }, 111 },
110 methods: { 112 methods: {
111 login() { 113 login() {
112 this.loading = true; 114 this.loading = true;
113 var userdata = { 115 var userdata = {
114 email: this.userLogincredentials.email, 116 email: this.userLogincredentials.email,
115 password: this.userLogincredentials.password 117 password: this.userLogincredentials.password
116 }; 118 };
117 http() 119 http()
118 .post("/schoolLogin", userdata) 120 .post("/schoolLogin", userdata)
119 .then(response => { 121 .then(response => {
120 // console.log("token",response.data.data); 122 // console.log("token",response.data.data);
121 this.loading = false; 123 this.loading = false;
122 if (response.data.data.role === "ADMIN") { 124 if (response.data.data.role === "ADMIN") {
123 this.$store.dispatch("setToken", response.data.data.token); 125 this.$store.dispatch("setToken", response.data.data.token);
124 this.$store.dispatch("Id", response.data.data.id); 126 this.$store.dispatch("Id", response.data.data.id);
125 this.$store.dispatch("Role", response.data.data.role); 127 this.$store.dispatch("Role", response.data.data.role);
126 this.$router.push("/dashboard"); 128 this.$router.push("/dashboard");
127 } else if (response.data.data.role === "SUPERADMIN") { 129 } else if (response.data.data.role === "SUPERADMIN") {
128 this.$store.dispatch("setSchoolRole", response.data.data.role); 130 this.$store.dispatch("setSchoolRole", response.data.data.role);
129 this.$store.dispatch("setSchoolToken", response.data.data.token); 131 this.$store.dispatch("setSchoolToken", response.data.data.token);
130 this.$router.push("/schooldashboard"); 132 this.$router.push("/schooldashboard");
131 } else if (response.data.data.role === "TEACHER") { 133 } else if (response.data.data.role === "TEACHER") {
132 // console.log("teacher", response.data.data.role); 134 // console.log("teacher", response.data.data.role);
133 this.$store.dispatch("setToken", response.data.data.token); 135 this.$store.dispatch("setToken", response.data.data.token);
134 this.$store.dispatch("Id", response.data.data.id); 136 this.$store.dispatch("Id", response.data.data.id);
135 this.$store.dispatch("Role", response.data.data.role); 137 this.$store.dispatch("Role", response.data.data.role);
136 this.$router.push("/dashboard"); 138 this.$router.push("/dashboard");
137 } else if (response.data.data.role === "LIBRARIAN") { 139 } else if (response.data.data.role === "LIBRARIAN") {
138 this.$store.dispatch("setToken", response.data.data.token); 140 this.$store.dispatch("setToken", response.data.data.token);
139 this.$store.dispatch("Id", response.data.data.id); 141 this.$store.dispatch("Id", response.data.data.id);
140 this.$store.dispatch("Role", response.data.data.role); 142 this.$store.dispatch("Role", response.data.data.role);
141 this.$router.push("/dashboard"); 143 this.$router.push("/dashboard");
142 } else if (response.data.data.role === "ACCOUNTANT") { 144 } else if (response.data.data.role === "ACCOUNTANT") {
143 this.$store.dispatch("setToken", response.data.data.token); 145 this.$store.dispatch("setToken", response.data.data.token);
144 this.$store.dispatch("Id", response.data.data.id); 146 this.$store.dispatch("Id", response.data.data.id);
145 this.$store.dispatch("Role", response.data.data.role); 147 this.$store.dispatch("Role", response.data.data.role);
146 this.$router.push("/dashboard"); 148 this.$router.push("/dashboard");
147 } 149 }
148 }) 150 })
149 .catch(error => { 151 .catch(error => {
150 if (error) { 152 if (error) {
151 this.text = "Server appears to be offline"; 153 this.text = "Server appears to be offline";
152 this.snackbar = true; 154 this.snackbar = true;
153 this.loading = false; 155 this.loading = false;
154 } 156 }
155 if (error.response.data.message) { 157 if (error.response.data.message) {
156 this.text = error.response.data.message; 158 this.text = error.response.data.message;
157 this.snackbar = true; 159 this.snackbar = true;
158 } 160 }
159 this.loading = false; 161 this.loading = false;
160 }); 162 });
161 } 163 }
162 }, 164 },
163 mounted() { 165 mounted() {
164 // if (this.$store.state.isUserLoggedIn == true) { 166 // if (this.$store.state.isUserLoggedIn == true) {
165 // this.$router.push("/dashboard"); 167 // this.$router.push("/dashboard");
166 // } 168 // }
167 // else if (this.$store.state.isSchoolLoggedIn == true) { 169 // else if (this.$store.state.isSchoolLoggedIn == true) {
168 // this.$router.push("/dashboard"); 170 // this.$router.push("/dashboard");
169 // } 171 // }
170 }, 172 },
171 computed: { 173 computed: {
172 color() { 174 color() {
173 return this.loading ? "success" : "error"; 175 return this.loading ? "success" : "error";
174 } 176 }
175 } 177 }
176 }; 178 };
177 </script> 179 </script>
178 180
179 <style scoped lang="css"> 181 <style scoped lang="css">
180 #login { 182 #login {
181 width: 100%; 183 width: 100%;
182 position: absolute; 184 position: absolute;
183 top: 0; 185 top: 0;
184 left: 0; 186 left: 0;
185 content: ""; 187 content: "";
186 z-index: 0; 188 z-index: 0;
187 } 189 }
188 </style> 190 </style>
189 <style scoped> 191 <style scoped>
190 .schoolLogo { 192 .schoolLogo {
191 height: 60%; 193 height: 60%;
192 padding-left: 31%; 194 padding-left: 31%;
193 } 195 }
194 /* img { 196 /* img {
195 position: absolute; 197 position: absolute;
196 top: 13px; 198 top: 13px;
197 left: 8px; 199 left: 8px;
198 } */ 200 } */
199 .v-btn--large { 201 .v-btn--large {
200 padding: 0px 84px; 202 padding: 0px 84px;
201 } 203 }
202 .link { 204 .link {
203 text-decoration: none; 205 text-decoration: none;
204 } 206 }
205 a { 207 a {
206 color: #fff; 208 color: #fff;
207 } 209 }
208 .mt-4 { 210 .mt-4 {
209 margin-top: 21px !important; 211 margin-top: 21px !important;
210 } 212 }
211 @media screen and (max-width: 600px) { 213 @media screen and (max-width: 600px) {
212 img { 214 img {
213 left: 10px; 215 left: 10px;
214 height: 34px; 216 height: 34px;
215 width: 120px; 217 width: 120px;
216 } 218 }
217 .logo { 219 .logo {
218 height: 56px; 220 height: 56px;
219 left: 10px; 221 left: 10px;
220 width: 120px; 222 width: 120px;
221 } 223 }
222 .logoSchool { 224 .logoSchool {
223 height: 87px; 225 height: 87px;
224 left: 10px; 226 left: 10px;
225 width: 120px; 227 width: 120px;
226 } 228 }
227 } 229 }
228 </style> 230 </style>