Commit 269b2ef6442fb440c1c7fad2425db2a5328fa11c
1 parent
6566e8f291
Exists in
master
and in
3 other branches
modified and fix design or functionality in LogIn Page
Showing
1 changed file
with
0 additions
and
3 deletions
Show diff stats
src/pages/Authentication/Login.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-app id="login"> | 2 | <v-app id="login"> |
| 3 | <v-toolbar class="fixcolor"> | 3 | <v-toolbar class="fixcolor"> |
| 4 | <v-toolbar-items> | 4 | <v-toolbar-items> |
| 5 | <!-- <img src="/static/ana@2x.png" height="36" alt="ana"> --> | 5 | <!-- <img src="/static/ana@2x.png" height="36" alt="ana"> --> |
| 6 | <h3 class="white--text my-3 ml-4">School-Management</h3> | 6 | <h3 class="white--text my-3 ml-4">School-Management</h3> |
| 7 | </v-toolbar-items> | 7 | </v-toolbar-items> |
| 8 | </v-toolbar> | 8 | </v-toolbar> |
| 9 | <v-content> | 9 | <v-content> |
| 10 | <v-container fluid fill-height> | 10 | <v-container fluid fill-height> |
| 11 | <v-snackbar | 11 | <v-snackbar |
| 12 | :timeout="timeout" | 12 | :timeout="timeout" |
| 13 | :top="y === 'top'" | 13 | :top="y === 'top'" |
| 14 | :right="x === 'right'" | 14 | :right="x === 'right'" |
| 15 | :vertical="mode === 'vertical'" | 15 | :vertical="mode === 'vertical'" |
| 16 | v-model="snackbar" | 16 | v-model="snackbar" |
| 17 | :color="color" | 17 | :color="color" |
| 18 | >{{ text }}</v-snackbar> | 18 | >{{ text }}</v-snackbar> |
| 19 | <v-layout align-center justify-center> | 19 | <v-layout align-center justify-center> |
| 20 | <v-flex xs12 sm10 md6 lg4> | 20 | <v-flex xs12 sm10 md6 lg4> |
| 21 | <v-toolbar class="fixcolor" dark> | 21 | <v-toolbar class="fixcolor" dark> |
| 22 | <v-spacer></v-spacer> | 22 | <v-spacer></v-spacer> |
| 23 | <v-toolbar-title>School Login</v-toolbar-title> | 23 | <v-toolbar-title>School Login</v-toolbar-title> |
| 24 | <v-spacer></v-spacer> | 24 | <v-spacer></v-spacer> |
| 25 | </v-toolbar> | 25 | </v-toolbar> |
| 26 | 26 | ||
| 27 | <v-card class="elevation-1 pa-1"> | 27 | <v-card class="elevation-1 pa-1"> |
| 28 | <v-card-text> | 28 | <v-card-text> |
| 29 | <v-flex xs12 sm12 md12 lg12> | 29 | <v-flex xs12 sm12 md12 lg12> |
| 30 | <v-form ref="form" v-model="valid" lazy-validation> | 30 | <v-form ref="form" v-model="valid" lazy-validation> |
| 31 | <v-text-field | 31 | <v-text-field |
| 32 | v-model="userLogincredentials.email" | 32 | v-model="userLogincredentials.email" |
| 33 | :rules="nameRules" | 33 | :rules="nameRules" |
| 34 | label="Username" | 34 | label="Username" |
| 35 | required | 35 | required |
| 36 | ></v-text-field> | 36 | ></v-text-field> |
| 37 | <v-text-field | 37 | <v-text-field |
| 38 | :rules="[rules.required]" | 38 | :rules="[rules.required]" |
| 39 | v-model="userLogincredentials.password" | 39 | v-model="userLogincredentials.password" |
| 40 | :append-icon="e1 ? 'visibility_off' : 'visibility'" | 40 | :append-icon="e1 ? 'visibility_off' : 'visibility'" |
| 41 | :append-icon-cb="() => (e1 = !e1)" | 41 | :append-icon-cb="() => (e1 = !e1)" |
| 42 | :type="e1 ? 'password' : 'text'" | 42 | :type="e1 ? 'password' : 'text'" |
| 43 | name="input-10-1" | 43 | name="input-10-1" |
| 44 | label="Password" | 44 | label="Password" |
| 45 | counter | 45 | counter |
| 46 | ></v-text-field> | 46 | ></v-text-field> |
| 47 | </v-form> | 47 | </v-form> |
| 48 | <v-layout row wrap> | 48 | <v-layout row wrap> |
| 49 | <v-flex xs6> | 49 | <v-flex xs6> |
| 50 | <!-- <v-checkbox :label="`Remember me`" v-model="remember"></v-checkbox> --> | 50 | <!-- <v-checkbox :label="`Remember me`" v-model="remember"></v-checkbox> --> |
| 51 | </v-flex> | 51 | </v-flex> |
| 52 | <v-flex xs6> | 52 | <v-flex xs6> |
| 53 | <h5 class="right mt-4"> <router-link class="link" to="/forgetpassword" style="border-bottom: 2px solid #aaa;">Forgot Password</router-link></h5> | 53 | <h5 class="right mt-4"> <router-link class="link" to="/forgetpassword" style="border-bottom: 2px solid #aaa;">Forgot Password</router-link></h5> |
| 54 | </v-flex> | 54 | </v-flex> |
| 55 | </v-layout> | 55 | </v-layout> |
| 56 | </v-flex> | 56 | </v-flex> |
| 57 | </v-card-text> | 57 | </v-card-text> |
| 58 | <v-layout> | 58 | <v-layout> |
| 59 | <v-flex sm12 class="my-3"> | 59 | <v-flex sm12 class="my-3"> |
| 60 | <v-btn style="margin: auto;display: block;b" class="fixcolor" round dark large @click="login" :loading="loading">Login</v-btn> | 60 | <v-btn style="margin: auto;display: block;b" class="fixcolor" round dark large @click="login" :loading="loading">Login</v-btn> |
| 61 | </v-flex> | 61 | </v-flex> |
| 62 | </v-layout> | 62 | </v-layout> |
| 63 | <v-layout> | 63 | <v-layout> |
| 64 | </v-layout> | 64 | </v-layout> |
| 65 | </v-card> | 65 | </v-card> |
| 66 | </v-flex> | 66 | </v-flex> |
| 67 | </v-layout> | 67 | </v-layout> |
| 68 | </v-container> | 68 | </v-container> |
| 69 | </v-content> | 69 | </v-content> |
| 70 | <v-footer class="pa-4" style="background:linear-gradient(90deg,#f58753 30%,#f15e5f 110%)"></v-footer> | 70 | <v-footer class="pa-4" style="background:linear-gradient(90deg,#f58753 30%,#f15e5f 110%)"></v-footer> |
| 71 | </v-app> | 71 | </v-app> |
| 72 | </template> | 72 | </template> |
| 73 | 73 | ||
| 74 | <script> | 74 | <script> |
| 75 | import http from "@/Services/http.js"; | 75 | import http from "@/Services/http.js"; |
| 76 | export default { | 76 | export default { |
| 77 | data() { | 77 | data() { |
| 78 | return { | 78 | return { |
| 79 | snackbar: false, | 79 | snackbar: false, |
| 80 | y: "top", | 80 | y: "top", |
| 81 | x: "right", | 81 | x: "right", |
| 82 | mode: "", | 82 | mode: "", |
| 83 | timeout: 3000, | 83 | timeout: 3000, |
| 84 | text: "", | 84 | text: "", |
| 85 | e1: true, | 85 | e1: true, |
| 86 | loading: false, | 86 | loading: false, |
| 87 | remember: false, | 87 | remember: false, |
| 88 | valid: false, | 88 | valid: false, |
| 89 | userLogincredentials: {}, | 89 | userLogincredentials: {}, |
| 90 | nameRules: [ | 90 | nameRules: [ |
| 91 | v => !!v || "Username is required" | 91 | v => !!v || "Username is required" |
| 92 | 92 | ||
| 93 | ], | 93 | ], |
| 94 | password: "", | 94 | password: "", |
| 95 | email:"", | 95 | email:"", |
| 96 | rules: { | 96 | rules: { |
| 97 | required: value => !!value || "password is Required.", | 97 | required: value => !!value || "password is Required.", |
| 98 | // min: v => | 98 | // min: v => |
| 99 | // (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test( | 99 | // (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test( |
| 100 | // v | 100 | // v |
| 101 | // ) && | 101 | // ) && |
| 102 | // v.length >= 6) || | 102 | // v.length >= 6) || |
| 103 | // "Min 4 characters upper case lower case symbol required" | 103 | // "Min 4 characters upper case lower case symbol required" |
| 104 | } | 104 | } |
| 105 | }; | 105 | }; |
| 106 | }, | 106 | }, |
| 107 | methods: { | 107 | methods: { |
| 108 | login() { | 108 | login() { |
| 109 | var userdata = { | 109 | var userdata = { |
| 110 | email: this.userLogincredentials.email, | 110 | email: this.userLogincredentials.email, |
| 111 | password: this.userLogincredentials.password, | 111 | password: this.userLogincredentials.password, |
| 112 | role:"ADMIN" | 112 | role:"ADMIN" |
| 113 | 113 | ||
| 114 | }; | 114 | }; |
| 115 | http() | 115 | http() |
| 116 | .post("/schoolLogin", userdata) | 116 | .post("/schoolLogin", userdata) |
| 117 | .then(response => { | 117 | .then(response => { |
| 118 | this.$store.dispatch("setToken", response.data.data.token); | 118 | this.$store.dispatch("setToken", response.data.data.token); |
| 119 | this.$store.dispatch("Id", response.data.data.id); | 119 | this.$store.dispatch("Id", response.data.data.id); |
| 120 | this.loading = true; | 120 | this.loading = true; |
| 121 | if ((this.snackbar = true)) { | ||
| 122 | this.text = "Successfully Login"; | ||
| 123 | } | ||
| 124 | setTimeout(() => { | 121 | setTimeout(() => { |
| 125 | this.$router.push("/teachers"); | 122 | this.$router.push("/teachers"); |
| 126 | }, 2000); | 123 | }, 2000); |
| 127 | }) | 124 | }) |
| 128 | .catch(err => { | 125 | .catch(err => { |
| 129 | this.text = "Email or Password not matched !!"; | 126 | this.text = "Email or Password not matched !!"; |
| 130 | this.snackbar = true; | 127 | this.snackbar = true; |
| 131 | this.loading = false; | 128 | this.loading = false; |
| 132 | }); | 129 | }); |
| 133 | } | 130 | } |
| 134 | }, | 131 | }, |
| 135 | computed: { | 132 | computed: { |
| 136 | color() { | 133 | color() { |
| 137 | return this.loading ? "success" : "error"; | 134 | return this.loading ? "success" : "error"; |
| 138 | } | 135 | } |
| 139 | } | 136 | } |
| 140 | }; | 137 | }; |
| 141 | </script> | 138 | </script> |
| 142 | 139 | ||
| 143 | <style scoped lang="css"> | 140 | <style scoped lang="css"> |
| 144 | #login { | 141 | #login { |
| 145 | width: 100%; | 142 | width: 100%; |
| 146 | position: absolute; | 143 | position: absolute; |
| 147 | top: 0; | 144 | top: 0; |
| 148 | left: 0; | 145 | left: 0; |
| 149 | content: ""; | 146 | content: ""; |
| 150 | z-index: 0; | 147 | z-index: 0; |
| 151 | } | 148 | } |
| 152 | </style> | 149 | </style> |
| 153 | <style scoped> | 150 | <style scoped> |
| 154 | img { | 151 | img { |
| 155 | position: absolute; | 152 | position: absolute; |
| 156 | top: 13px; | 153 | top: 13px; |
| 157 | left: 50px; | 154 | left: 50px; |
| 158 | } | 155 | } |
| 159 | .v-btn--large { | 156 | .v-btn--large { |
| 160 | padding: 0px 84px; | 157 | padding: 0px 84px; |
| 161 | } | 158 | } |
| 162 | .link{ | 159 | .link{ |
| 163 | text-decoration:none; | 160 | text-decoration:none; |
| 164 | } | 161 | } |
| 165 | a { | 162 | a { |
| 166 | color: #696969; | 163 | color: #696969; |
| 167 | } | 164 | } |
| 168 | .forget{ | 165 | .forget{ |
| 169 | margin-top:20px; | 166 | margin-top:20px; |
| 170 | } | 167 | } |
| 171 | .mt-4 { | 168 | .mt-4 { |
| 172 | margin-top: 21px !important; | 169 | margin-top: 21px !important; |
| 173 | } | 170 | } |
| 174 | @media screen and (max-width: 600px) { | 171 | @media screen and (max-width: 600px) { |
| 175 | .forget{ | 172 | .forget{ |
| 176 | margin-top:none; | 173 | margin-top:none; |
| 177 | margin-left:18px; | 174 | margin-left:18px; |
| 178 | } | 175 | } |
| 179 | img{ | 176 | img{ |
| 180 | top:16px; | 177 | top:16px; |
| 181 | left:10px; | 178 | left:10px; |
| 182 | height: 24px; | 179 | height: 24px; |
| 183 | width: 66px;; | 180 | width: 66px;; |
| 184 | } | 181 | } |
| 185 | } | 182 | } |
| 186 | </style> | 183 | </style> |