viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 5c102c705111a81e4f63510520a1e71c50c36b3b

Authored by Neeraj Sharma
1 parent 736b03ee4b
Exists in master and in 3 other branches amber-development, development, ui-design

responsive logo in header

Showing 4 changed files with 28 additions and 22 deletions   Show diff stats
src/components/pageHeader/AppDrawer.vue
Diff comments   View file @5c102c7
1 <template> 1 <template>
2 <v-navigation-drawer 2 <v-navigation-drawer
3 id="appDrawer" 3 id="appDrawer"
4 :mini-variant.sync="mini" 4 :mini-variant.sync="mini"
5 fixed 5 fixed
6 :dark="$vuetify.dark" 6 :dark="$vuetify.dark"
7 app 7 app
8 v-model="drawer" 8 v-model="drawer"
9 width="260" 9 width="260"
10 > 10 >
11 <v-toolbar style="background:#39b982" > 11 <v-toolbar style="background:#39b982" >
12 <img v-bind:src="computeLogo" height="40" width="150" class="imgLogo" alt="ana"> 12 <img v-bind:src="computeLogo" height="40" width="150" class="imgLogo" alt="ana">
13 <v-toolbar-title class="ml-0 pl-3" > 13 <v-toolbar-title class="ml-0 pl-3" >
14 </v-toolbar-title> 14 </v-toolbar-title>
15 </v-toolbar> 15 </v-toolbar>
16 <vue-perfect-scrollbar class="drawer-menu--scroll" :settings="scrollSettings"> 16 <vue-perfect-scrollbar class="drawer-menu--scroll" :settings="scrollSettings">
17 <v-list dense expand> 17 <v-list dense expand>
18 <template v-for="(item, i) in menus"> 18 <template v-for="(item, i) in menus">
19 <!--group with subitems--> 19 <!--group with subitems-->
20 <v-list-group v-if="item.items" :key="item.name" :group="item.group" :prepend-icon="item.icon" no-action="no-action"> 20 <v-list-group v-if="item.items" :key="item.name" :group="item.group" :prepend-icon="item.icon" no-action="no-action">
21 <v-list-tile slot="activator" ripple="ripple"> 21 <v-list-tile slot="activator" ripple="ripple">
22 <v-list-tile-content> 22 <v-list-tile-content>
23 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 23 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
24 </v-list-tile-content> 24 </v-list-tile-content>
25 </v-list-tile> 25 </v-list-tile>
26 <template v-for="(subItem, i) in item.items"> 26 <template v-for="(subItem, i) in item.items">
27 <!--sub group--> 27 <!--sub group-->
28 <v-list-group v-if="subItem.items" :key="subItem.name" :group="subItem.group" sub-group="sub-group"> 28 <v-list-group v-if="subItem.items" :key="subItem.name" :group="subItem.group" sub-group="sub-group">
29 <v-list-tile slot="activator" ripple="ripple"> 29 <v-list-tile slot="activator" ripple="ripple">
30 <v-list-tile-content> 30 <v-list-tile-content>
31 <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> 31 <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
32 </v-list-tile-content> 32 </v-list-tile-content>
33 </v-list-tile> 33 </v-list-tile>
34 <v-list-tile v-for="(grand, i) in subItem.children" :key="i" :to="genChildTarget(item, grand)" :href="grand.href" ripple="ripple"> 34 <v-list-tile v-for="(grand, i) in subItem.children" :key="i" :to="genChildTarget(item, grand)" :href="grand.href" ripple="ripple">
35 <v-list-tile-content> 35 <v-list-tile-content>
36 <v-list-tile-title>{{ grand.title }}</v-list-tile-title> 36 <v-list-tile-title>{{ grand.title }}</v-list-tile-title>
37 </v-list-tile-content> 37 </v-list-tile-content>
38 </v-list-tile> 38 </v-list-tile>
39 </v-list-group> 39 </v-list-group>
40 <!--child item--> 40 <!--child item-->
41 <v-list-tile v-else :key="i" :to="genChildTarget(item, subItem)" :href="subItem.href" :disabled="subItem.disabled" :target="subItem.target" ripple="ripple"> 41 <v-list-tile v-else :key="i" :to="genChildTarget(item, subItem)" :href="subItem.href" :disabled="subItem.disabled" :target="subItem.target" ripple="ripple">
42 <v-list-tile-content> 42 <v-list-tile-content>
43 <v-list-tile-title><span>{{ subItem.title }}</span></v-list-tile-title> 43 <v-list-tile-title><span>{{ subItem.title }}</span></v-list-tile-title>
44 </v-list-tile-content> 44 </v-list-tile-content>
45 <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> --> 45 <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
46 <v-list-tile-action v-if="subItem.action"> 46 <v-list-tile-action v-if="subItem.action">
47 <v-icon :class="[subItem.actionClass || 'success--text']">{{ subItem.action }}</v-icon> 47 <v-icon :class="[subItem.actionClass || 'success--text']">{{ subItem.action }}</v-icon>
48 </v-list-tile-action> 48 </v-list-tile-action>
49 </v-list-tile> 49 </v-list-tile>
50 </template> 50 </template>
51 </v-list-group> 51 </v-list-group>
52 <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader> 52 <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
53 <v-divider v-else-if="item.divider" :key="i"></v-divider> 53 <v-divider v-else-if="item.divider" :key="i"></v-divider>
54 <!--top-level link--> 54 <!--top-level link-->
55 <v-list-tile v-else :to="!item.href ? { name: item.name } : null" :href="item.href" ripple="ripple" :disabled="item.disabled" :target="item.target" rel="noopener" :key="item.name"> 55 <v-list-tile v-else :to="!item.href ? { name: item.name } : null" :href="item.href" ripple="ripple" :disabled="item.disabled" :target="item.target" rel="noopener" :key="item.name">
56 <v-list-tile-action v-if="item.icon"> 56 <v-list-tile-action v-if="item.icon">
57 <v-icon>{{ item.icon }}</v-icon> 57 <v-icon>{{ item.icon }}</v-icon>
58 </v-list-tile-action> 58 </v-list-tile-action>
59 <v-list-tile-content> 59 <v-list-tile-content>
60 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 60 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
61 </v-list-tile-content> 61 </v-list-tile-content>
62 <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> --> 62 <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->
63 <v-list-tile-action v-if="item.subAction"> 63 <v-list-tile-action v-if="item.subAction">
64 <v-icon class="success--text">{{ item.subAction }}</v-icon> 64 <v-icon class="success--text">{{ item.subAction }}</v-icon>
65 </v-list-tile-action> 65 </v-list-tile-action>
66 <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> --> 66 <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->
67 </v-list-tile> 67 </v-list-tile>
68 </template> 68 </template>
69 </v-list> 69 </v-list>
70 </vue-perfect-scrollbar> 70 </vue-perfect-scrollbar>
71 </v-navigation-drawer> 71 </v-navigation-drawer>
72 </template> 72 </template>
73 <script> 73 <script>
74 import menu from '@/api/menu'; 74 import menu from '@/api/menu';
75 import VuePerfectScrollbar from 'vue-perfect-scrollbar'; 75 import VuePerfectScrollbar from 'vue-perfect-scrollbar';
76 export default { 76 export default {
77 name: 'app-drawer', 77 name: 'app-drawer',
78 components: { 78 components: {
79 VuePerfectScrollbar, 79 VuePerfectScrollbar,
80 }, 80 },
81 props: { 81 props: {
82 expanded: { 82 expanded: {
83 type: Boolean, 83 type: Boolean,
84 default: true 84 default: true
85 }, 85 },
86 }, 86 },
87 data: () => ({ 87 data: () => ({
88 mini: false, 88 mini: false,
89 drawer: true, 89 drawer: true,
90 menus: menu, 90 menus: menu,
91 scrollSettings: { 91 scrollSettings: {
92 maxScrollbarLength: 160 92 maxScrollbarLength: 160
93 } 93 }
94 }), 94 }),
95 computed: { 95 computed: {
96 computeGroupActive () { 96 computeGroupActive () {
97 return true; 97 return true;
98 }, 98 },
99 computeLogo () { 99 computeLogo () {
100 return '/static/icon.png'; 100 return '/static/icon.png';
101 }, 101 },
102 102
103 sideToolbarColor () { 103 sideToolbarColor () {
104 return this.$vuetify.options.extra.sideNav; 104 return this.$vuetify.options.extra.sideNav;
105 } 105 }
106 }, 106 },
107 created () { 107 created () {
108 window.getApp.$on('APP_DRAWER_TOGGLED', () => { 108 window.getApp.$on('APP_DRAWER_TOGGLED', () => {
109 this.drawer = (!this.drawer); 109 this.drawer = (!this.drawer);
110 }); 110 });
111 }, 111 },
112 112
113 113
114 methods: { 114 methods: {
115 genChildTarget (item, subItem) { 115 genChildTarget (item, subItem) {
116 if (subItem.href) return; 116 if (subItem.href) return;
117 if (subItem.component) { 117 if (subItem.component) {
118 return { 118 return {
119 name: subItem.component, 119 name: subItem.component,
120 }; 120 };
121 } 121 }
122 return { name: `${item.group}/${(subItem.name)}` }; 122 return { name: `${item.group}/${(subItem.name)}` };
123 }, 123 },
124 } 124 }
125 }; 125 };
126 </script> 126 </script>
127 127
128 128
129 <style lang="stylus"> 129 <style lang="stylus">
130 // @import '../../node_modules/vuetify/src/stylus/settings/_elevations.styl'; 130 // @import '../../node_modules/vuetify/src/stylus/settings/_elevations.styl';
131 131
132 #appDrawer 132 #appDrawer
133 overflow: hidden 133 overflow: hidden
134 .drawer-menu--scroll 134 .drawer-menu--scroll
135 height: calc(100vh - 48px) 135 height: calc(100vh - 48px)
136 overflow: auto 136 overflow: auto
137 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) { 137 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
138 height: 60px; 138 height: 60px;
139 font-size:17px; 139 font-size:17px;
140 } 140 }
141 .v-list__tile__action { 141 .v-list__tile__action {
142 min-width:36px; 142 min-width:36px;
143 } 143 }
144 .v-list__tile.primary--text { 144 .v-list__tile.primary--text {
145 color:black !important; 145 color:black !important;
146 border-left: 4px solid black; 146 border-left: 4px solid black;
147 border-radius: 4px; 147 border-radius: 4px;
148 } 148 }
149 @media screen and (max-width: 420px) { 149 @media screen and (max-width: 420px) {
150 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) { 150 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
151 font-size: 14px; 151 font-size: 14px;
152 } 152 }
153 .imgLogo{ 153 .imgLogo{
154 height: 22px; 154 height: 32px;
155 width: 20px;; 155 width: 120px;;
156 } 156 }
157 } 157 }
158 </style> 158 </style>
159 159
160 160
161 <style scoped> 161 <style scoped>
162 .theme--light .v-icon, .application .theme--light.v-icon { 162 .theme--light .v-icon, .application .theme--light.v-icon {
163 color: #39b982; 163 color: #39b982;
164 } 164 }
165 165
166 </style> 166 </style>
167 167
168 168
src/pages/Authentication/Login.vue
Diff comments   View file @5c102c7
1 <template> 1 <template>
2 <v-app id="login"> 2 <v-app id="login">
3 <v-toolbar class="fixcolors"> 3 <v-toolbar class="fixcolors">
4 <v-toolbar-items> 4 <v-toolbar-items>
5 <img src="/static/icon.png" height="40" width="140" alt="logo"> 5 <img src="/static/icon.png" height="40" width="140" alt="logo">
6 <!-- <h3 class="white--text my-3 ml-5 logoSchool">School-Management</h3> --> 6 <!-- <h3 class="white--text my-3 ml-5 logoSchool">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="fixcolors" dark> 21 <v-toolbar class="fixcolors" 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 @keyup.enter="login" 45 @keyup.enter="login"
46 counter 46 counter
47 ></v-text-field> 47 ></v-text-field>
48 </v-form> 48 </v-form>
49 <v-layout row wrap> 49 <v-layout row wrap>
50 <v-flex xs6> 50 <v-flex xs6>
51 <!-- <v-checkbox :label="`Remember me`" v-model="remember"></v-checkbox> --> 51 <!-- <v-checkbox :label="`Remember me`" v-model="remember"></v-checkbox> -->
52 </v-flex> 52 </v-flex>
53 <v-flex xs6> 53 <v-flex xs6>
54 <h5 class="right mt-4"> <router-link class="link" to="/forgetpassword" style="border-bottom: 2px solid #aaa;">Forgot Password</router-link></h5> 54 <h5 class="right mt-4"> <router-link class="link" to="/forgetpassword" style="border-bottom: 2px solid #aaa;">Forgot Password</router-link></h5>
55 </v-flex> 55 </v-flex>
56 </v-layout> 56 </v-layout>
57 </v-flex> 57 </v-flex>
58 </v-card-text> 58 </v-card-text>
59 <v-layout> 59 <v-layout>
60 <v-flex sm12 class="my-3"> 60 <v-flex sm12 class="my-3">
61 <v-btn style="margin: auto;display: block;b" class="fixcolors" round dark large @click="login" :loading="loading">Login</v-btn> 61 <v-btn style="margin: auto;display: block;b" class="fixcolors" round dark large @click="login" :loading="loading">Login</v-btn>
62 </v-flex> 62 </v-flex>
63 </v-layout> 63 </v-layout>
64 <v-layout> 64 <v-layout>
65 </v-layout> 65 </v-layout>
66 </v-card> 66 </v-card>
67 </v-flex> 67 </v-flex>
68 </v-layout> 68 </v-layout>
69 </v-container> 69 </v-container>
70 </v-content> 70 </v-content>
71 <v-footer class="pa-4 fixcolors"></v-footer> 71 <v-footer class="pa-4 fixcolors"></v-footer>
72 </v-app> 72 </v-app>
73 </template> 73 </template>
74 74
75 <script> 75 <script>
76 import http from "@/Services/http.js"; 76 import http from "@/Services/http.js";
77 export default { 77 export default {
78 data() { 78 data() {
79 return { 79 return {
80 snackbar: false, 80 snackbar: false,
81 y: "top", 81 y: "top",
82 x: "right", 82 x: "right",
83 mode: "", 83 mode: "",
84 timeout: 3000, 84 timeout: 3000,
85 text: "", 85 text: "",
86 e1: true, 86 e1: true,
87 loading: false, 87 loading: false,
88 remember: false, 88 remember: false,
89 valid: false, 89 valid: false,
90 userLogincredentials: {}, 90 userLogincredentials: {},
91 nameRules: [ 91 nameRules: [
92 v => !!v || "Username is required" 92 v => !!v || "Username is required"
93 93
94 ], 94 ],
95 password: "", 95 password: "",
96 email:"", 96 email:"",
97 rules: { 97 rules: {
98 required: value => !!value || "password is Required.", 98 required: value => !!value || "password is Required.",
99 // min: v => 99 // min: v =>
100 // (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test( 100 // (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test(
101 // v 101 // v
102 // ) && 102 // ) &&
103 // v.length >= 6) || 103 // v.length >= 6) ||
104 // "Min 4 characters upper case lower case symbol required" 104 // "Min 4 characters upper case lower case symbol required"
105 } 105 }
106 }; 106 };
107 }, 107 },
108 methods: { 108 methods: {
109 login() { 109 login() {
110 this.loading = true; 110 this.loading = true;
111 var userdata = { 111 var userdata = {
112 email: this.userLogincredentials.email, 112 email: this.userLogincredentials.email,
113 password: this.userLogincredentials.password, 113 password: this.userLogincredentials.password,
114 role:"ADMIN" 114 role:"ADMIN"
115 }; 115 };
116 http() 116 http()
117 .post("/schoolLogin", userdata) 117 .post("/schoolLogin", userdata)
118 .then(response => { 118 .then(response => {
119 this.$store.dispatch("setToken", response.data.data.token); 119 this.$store.dispatch("setToken", response.data.data.token);
120 this.$store.dispatch("Id", response.data.data.id); 120 this.$store.dispatch("Id", response.data.data.id);
121 this.loading = false; 121 this.loading = false;
122 this.$router.push("/teachers"); 122 this.$router.push("/teachers");
123 }) 123 })
124 .catch(error => { 124 .catch(error => {
125 this.text = error.response.data.message 125 this.text = error.response.data.message
126 this.snackbar = true; 126 this.snackbar = true;
127 this.loading = false; 127 this.loading = false;
128 }); 128 });
129 } 129 }
130 }, 130 },
131 computed: { 131 computed: {
132 color() { 132 color() {
133 return this.loading ? "success" : "error"; 133 return this.loading ? "success" : "error";
134 } 134 }
135 } 135 }
136 }; 136 };
137 </script> 137 </script>
138 138
139 <style scoped lang="css"> 139 <style scoped lang="css">
140 #login { 140 #login {
141 width: 100%; 141 width: 100%;
142 position: absolute; 142 position: absolute;
143 top: 0; 143 top: 0;
144 left: 0; 144 left: 0;
145 content: ""; 145 content: "";
146 z-index: 0; 146 z-index: 0;
147 } 147 }
148 </style> 148 </style>
149 <style scoped> 149 <style scoped>
150 img { 150 img {
151 position: absolute; 151 position: absolute;
152 top: 13px; 152 top: 13px;
153 left: 8px; 153 left: 8px;
154 } 154 }
155 .v-btn--large { 155 .v-btn--large {
156 padding: 0px 84px; 156 padding: 0px 84px;
157 } 157 }
158 .link{ 158 .link{
159 text-decoration:none; 159 text-decoration:none;
160 } 160 }
161 a { 161 a {
162 color: #696969; 162 color: #696969;
163 } 163 }
164 .forget{ 164 .forget{
165 margin-top:20px; 165 margin-top:20px;
166 } 166 }
167 .mt-4 { 167 .mt-4 {
168 margin-top: 21px !important; 168 margin-top: 21px !important;
169 } 169 }
170 @media screen and (max-width: 600px) { 170 @media screen and (max-width: 600px) {
171 .forget{ 171 .forget{
172 margin-top:none; 172 margin-top:none;
173 margin-left:18px; 173 margin-left:18px;
174 } 174 }
175 img{ 175 img{
176 top: 21px;
177 left: 10px; 176 left: 10px;
178 height: 24px; 177 height: 34px;
179 width: 33px; 178 width: 120px;
180 } 179 }
181 .logoSchool{ 180 .logoSchool{
182 font-size: 18px; 181 font-size: 18px;
183 margin-top: 20px !important; 182 margin-top: 20px !important;
184 } 183 }
185 h5 { 184 h5 {
186 font-size: 14px !important; 185 font-size: 14px !important;
187 } 186 }
188 } 187 }
189 </style> 188 </style>
src/pages/Authentication/forgetpassword.vue
Diff comments   View file @5c102c7
1 <template> 1 <template>
2 <v-app id="login"> 2 <v-app id="login">
3 <v-toolbar class="fixcolors"> 3 <v-toolbar class="fixcolors">
4 <v-toolbar-items> 4 <v-toolbar-items>
5 <img src="/static/icon.png" height="40" width="140" alt="logo"> 5 <img src="/static/icon.png" height="40" width="140" alt="logo">
6 </v-toolbar-items> 6 </v-toolbar-items>
7 </v-toolbar> 7 </v-toolbar>
8 <v-container fluid> 8 <v-container fluid>
9 <v-layout align-center justify-center fill-height> 9 <v-layout align-center justify-center fill-height>
10 <v-flex xs12 sm8 md7 lg8> 10 <v-flex xs12 sm8 md7 lg8>
11 <div> 11 <div>
12 <v-app> 12 <v-app>
13 <v-stepper v-model="e2"> 13 <v-stepper v-model="e2">
14 <v-stepper-header> 14 <v-stepper-header>
15 <v-stepper-step :complete="e2 > 1" step="1">Fill Your Email</v-stepper-step> 15 <v-stepper-step :complete="e2 > 1" step="1">Fill Your Email</v-stepper-step>
16 <v-divider></v-divider> 16 <v-divider></v-divider>
17 <v-stepper-step step="2">Last Step of Forget Password</v-stepper-step> 17 <v-stepper-step step="2">Last Step of Forget Password</v-stepper-step>
18 </v-stepper-header> 18 </v-stepper-header>
19 <v-stepper-items> 19 <v-stepper-items>
20 <v-stepper-content step="1"> 20 <v-stepper-content step="1">
21 <v-content> 21 <v-content>
22 <v-container fluid class="content"> 22 <v-container fluid class="content">
23 <v-layout align-center justify-center fill-height> 23 <v-layout align-center justify-center fill-height>
24 <v-flex xs12 sm8 md7 lg8> 24 <v-flex xs12 sm8 md7 lg8>
25 <v-toolbar class="fixcolors" dark> 25 <v-toolbar class="fixcolors" dark>
26 <v-spacer></v-spacer> 26 <v-spacer></v-spacer>
27 <v-toolbar-title>Forget Password</v-toolbar-title> 27 <v-toolbar-title>Forget Password</v-toolbar-title>
28 <v-spacer></v-spacer> 28 <v-spacer></v-spacer>
29 </v-toolbar> 29 </v-toolbar>
30 <v-card class="elevation-1 pa-1"> 30 <v-card class="elevation-1 pa-1">
31 <v-card-text> 31 <v-card-text>
32 <h5 class="text-xs-center"> Not to Worry! Enter to your registered Email ID. </h5> 32 <h5 class="text-xs-center"> Not to Worry! Enter to your registered Email ID. </h5>
33 <h5 class="text-xs-center"> We'll send you a reset.</h5> 33 <h5 class="text-xs-center"> We'll send you a reset.</h5>
34 <v-flex lg6 sm6 xs10 offset-sm3 offset-xs1 offset-lg3> 34 <v-flex lg6 sm6 xs10 offset-sm3 offset-xs1 offset-lg3>
35 <v-form ref="form" v-model="valid" lazy-validation> 35 <v-form ref="form" v-model="valid" lazy-validation>
36 <div class="custom-input-align"> 36 <div class="custom-input-align">
37 <v-text-field 37 <v-text-field
38 class="text-md-center" 38 class="text-md-center"
39 :rules="emailRules" 39 :rules="emailRules"
40 v-model="forgetemail" 40 v-model="forgetemail"
41 label="Enter Your email ID" 41 label="Enter Your email ID"
42 required></v-text-field> 42 required></v-text-field>
43 </div> 43 </div>
44 </v-form> 44 </v-form>
45 </v-flex> 45 </v-flex>
46 </v-card-text> 46 </v-card-text>
47 <v-card-actions> 47 <v-card-actions>
48 <v-flex text-xs-center> 48 <v-flex text-xs-center>
49 <v-btn round class="mt-1 button fixcolors" dark large @click="reset">Send Request</v-btn> 49 <v-btn round class="mt-1 button fixcolors" dark large @click="reset">Send Request</v-btn>
50 </v-flex> 50 </v-flex>
51 </v-card-actions> 51 </v-card-actions>
52 <v-snackbar 52 <v-snackbar
53 :timeout="timeout" 53 :timeout="timeout"
54 :top="y === 'top'" 54 :top="y === 'top'"
55 :right="x === 'right'" 55 :right="x === 'right'"
56 :vertical="mode === 'vertical'" 56 :vertical="mode === 'vertical'"
57 v-model="snackbar" 57 v-model="snackbar"
58 :color= color 58 :color= color
59 > 59 >
60 {{ text }} 60 {{ text }}
61 </v-snackbar> 61 </v-snackbar>
62 </v-snackbar> 62 </v-snackbar>
63 </v-card> 63 </v-card>
64 </v-flex> 64 </v-flex>
65 </v-layout> 65 </v-layout>
66 </v-container> 66 </v-container>
67 </v-content> 67 </v-content>
68 </v-stepper-content> 68 </v-stepper-content>
69 <v-stepper-content step="2"> 69 <v-stepper-content step="2">
70 <v-content> 70 <v-content>
71 <v-container fluid fill-height> 71 <v-container fluid fill-height>
72 <v-layout align-center justify-center> 72 <v-layout align-center justify-center>
73 <v-flex xs12 sm8 md7 lg8> 73 <v-flex xs12 sm8 md7 lg8>
74 <v-toolbar class="fixcolors" dark> 74 <v-toolbar class="fixcolors" dark>
75 <v-spacer></v-spacer> 75 <v-spacer></v-spacer>
76 <v-toolbar-title>Forget Password</v-toolbar-title> 76 <v-toolbar-title>Forget Password</v-toolbar-title>
77 <v-spacer></v-spacer> 77 <v-spacer></v-spacer>
78 </v-toolbar> 78 </v-toolbar>
79 <v-card class="elevation-1 pa-1"> 79 <v-card class="elevation-1 pa-1">
80 <v-card-text> 80 <v-card-text>
81 <h5 class="text-xs-center"> Not to Worry! Enter to your registered Email ID And New Password. </h5> 81 <h5 class="text-xs-center"> Not to Worry! Enter to your registered Email ID And New Password. </h5>
82 <h5 class="text-xs-center"> We'll send you a reset.</h5> 82 <h5 class="text-xs-center"> We'll send you a reset.</h5>
83 <v-flex lg6 sm6 xs10 offset-sm3 offset-xs1 offset-lg3> 83 <v-flex lg6 sm6 xs10 offset-sm3 offset-xs1 offset-lg3>
84 <v-form class="mt-4"> 84 <v-form class="mt-4">
85 <div class="custom-input-align"> 85 <div class="custom-input-align">
86 <v-text-field 86 <v-text-field
87 class="text-md-center" 87 class="text-md-center"
88 v-model="email" 88 v-model="email"
89 :rules="emailRules" 89 :rules="emailRules"
90 label="Enter Your email ID" 90 label="Enter Your email ID"
91 required></v-text-field> 91 required></v-text-field>
92 <v-text-field 92 <v-text-field
93 :rules="[rules.required,rules.min]" 93 :rules="[rules.required,rules.min]"
94 v-model="changepassword" 94 v-model="changepassword"
95 :append-icon="e1 ? 'visibility_off' : 'visibility'" 95 :append-icon="e1 ? 'visibility_off' : 'visibility'"
96 :append-icon-cb="() => (e1 = !e1)" 96 :append-icon-cb="() => (e1 = !e1)"
97 :type="e1 ? 'password' : 'text'" 97 :type="e1 ? 'password' : 'text'"
98 name="input-10-1" 98 name="input-10-1"
99 label="Password" 99 label="Password"
100 counter 100 counter
101 ></v-text-field> 101 ></v-text-field>
102 </div> 102 </div>
103 </v-form> 103 </v-form>
104 </v-flex> 104 </v-flex>
105 </v-card-text> 105 </v-card-text>
106 <v-card-actions> 106 <v-card-actions>
107 <v-flex text-xs-center> 107 <v-flex text-xs-center>
108 <v-btn round class="mt-1 button fixcolors" dark large @click="resetPassword">Send Request</v-btn> 108 <v-btn round class="mt-1 button fixcolors" dark large @click="resetPassword">Send Request</v-btn>
109 </v-flex> 109 </v-flex>
110 </v-card-actions> 110 </v-card-actions>
111 <v-snackbar 111 <v-snackbar
112 :timeout="timeout" 112 :timeout="timeout"
113 :top="y === 'top'" 113 :top="y === 'top'"
114 :right="x === 'right'" 114 :right="x === 'right'"
115 :vertical="mode === 'vertical'" 115 :vertical="mode === 'vertical'"
116 v-model="snackbar" 116 v-model="snackbar"
117 :color= color 117 :color= color
118 > 118 >
119 {{ text }} 119 {{ text }}
120 </v-snackbar> 120 </v-snackbar>
121 </v-snackbar> 121 </v-snackbar>
122 </v-card> 122 </v-card>
123 </v-flex> 123 </v-flex>
124 </v-layout> 124 </v-layout>
125 </v-container> 125 </v-container>
126 </v-content> 126 </v-content>
127 <v-btn 127 <v-btn
128 color="primary" 128 color="primary"
129 dark 129 dark
130 @click="e2 = 1" 130 @click="e2 = 1"
131 > 131 >
132 Back 132 Back
133 </v-btn> 133 </v-btn>
134 </v-stepper-content> 134 </v-stepper-content>
135 </v-stepper-items> 135 </v-stepper-items>
136 </v-stepper> 136 </v-stepper>
137 </v-app> 137 </v-app>
138 </div> 138 </div>
139 </v-flex> 139 </v-flex>
140 </v-layout> 140 </v-layout>
141 </v-container> 141 </v-container>
142 <v-footer class="pa-4 fixcolors"> 142 <v-footer class="pa-4 fixcolors">
143 </v-footer> 143 </v-footer>
144 </v-app> 144 </v-app>
145 </template> 145 </template>
146 146
147 147
148 148
149 <script> 149 <script>
150 import http from '@/Services/http.js'; 150 import http from '@/Services/http.js';
151 151
152 export default { 152 export default {
153 data: () => ({ 153 data: () => ({
154 e1: true, 154 e1: true,
155 e2:0, 155 e2:0,
156 snackbar: false, 156 snackbar: false,
157 y: 'top', 157 y: 'top',
158 x: 'right', 158 x: 'right',
159 mode: '', 159 mode: '',
160 timeout: 4000, 160 timeout: 4000,
161 text: '', 161 text: '',
162 loading: false, 162 loading: false,
163 email: '', 163 email: '',
164 forgetemail:'', 164 forgetemail:'',
165 password:'', 165 password:'',
166 changepassword:'', 166 changepassword:'',
167 valid: true, 167 valid: true,
168 emailRules: [ 168 emailRules: [
169 v => !!v || "E-mail is required", 169 v => !!v || "E-mail is required",
170 v => 170 v =>
171 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 171 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
172 "E-mail must be valid" 172 "E-mail must be valid"
173 ], 173 ],
174 rules: { 174 rules: {
175 required: value => !!value || "password is Required.", 175 required: value => !!value || "password is Required.",
176 min: v => 176 min: v =>
177 (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test( 177 (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test(
178 v 178 v
179 ) && 179 ) &&
180 v.length >= 6) || 180 v.length >= 6) ||
181 "Min 4 characters upper case lower case symbol required" 181 "Min 4 characters upper case lower case symbol required"
182 } 182 }
183 }), 183 }),
184 184
185 methods: { 185 methods: {
186 reset () { 186 reset () {
187 if (this.$refs.form.validate()) { 187 if (this.$refs.form.validate()) {
188 http().get('/schoolForgotPassword?email='+ this.forgetemail) 188 http().get('/schoolForgotPassword?email='+ this.forgetemail)
189 .then(response => { 189 .then(response => {
190 // console.log("response=====>",response.data.data.token); 190 // console.log("response=====>",response.data.data.token);
191 this.$store.dispatch("setToken", response.data.data.token); 191 this.$store.dispatch("setToken", response.data.data.token);
192 this.loading = true; 192 this.loading = true;
193 this.e2 = 2 ; 193 this.e2 = 2 ;
194 if(this.snackbar=true){ 194 if(this.snackbar=true){
195 this.text= "Please you Fill Last Step of Forget Password!" 195 this.text= "Please you Fill Last Step of Forget Password!"
196 } 196 }
197 }).catch(err => { 197 }).catch(err => {
198 this.text="User Not Found or Incorrect Email" 198 this.text="User Not Found or Incorrect Email"
199 this.snackbar= true; 199 this.snackbar= true;
200 this.loading = false; 200 this.loading = false;
201 }) 201 })
202 } 202 }
203 }, 203 },
204 resetPassword(){ 204 resetPassword(){
205 let forgotPassword = { 205 let forgotPassword = {
206 resetToken: this.$store.state.token, 206 resetToken: this.$store.state.token,
207 email: this.email, 207 email: this.email,
208 password: this.changepassword 208 password: this.changepassword
209 } 209 }
210 http().post('/schoolResetPassword',forgotPassword) 210 http().post('/schoolResetPassword',forgotPassword)
211 .then(response => { 211 .then(response => {
212 console.log("response=====>",response); 212 console.log("response=====>",response);
213 this.loading = true; 213 this.loading = true;
214 if(this.snackbar=true){ 214 if(this.snackbar=true){
215 this.text= "Successfully Change your Password" 215 this.text= "Successfully Change your Password"
216 } 216 }
217 setTimeout(() => { 217 setTimeout(() => {
218 this.$router.push('/'); 218 this.$router.push('/');
219 }, 1000); 219 }, 1000);
220 }).catch(err => { 220 }).catch(err => {
221 this.text="User Not Found or Incorrect Email" 221 this.text="User Not Found or Incorrect Email"
222 this.snackbar= true; 222 this.snackbar= true;
223 this.loading = false; 223 this.loading = false;
224 }) 224 })
225 } 225 }
226 }, 226 },
227 computed:{ 227 computed:{
228 color(){ 228 color(){
229 return this.loading ? 'success' : 'error' 229 return this.loading ? 'success' : 'error'
230 } 230 }
231 } 231 }
232 232
233 }; 233 };
234 </script> 234 </script>
235 <style scoped lang="css"> 235 <style scoped lang="css">
236 .content { 236 .content {
237 padding: 100px 0px 100px 0px !important; 237 padding: 100px 0px 100px 0px !important;
238 } 238 }
239 #login { 239 #login {
240 height: 50%; 240 height: 50%;
241 width: 100%; 241 width: 100%;
242 position: absolute; 242 position: absolute;
243 top: 0; 243 top: 0;
244 left: 0; 244 left: 0;
245 content: ""; 245 content: "";
246 z-index: 0; 246 z-index: 0;
247 } 247 }
248 img{ 248 img{
249 position:absolute; 249 position:absolute;
250 top:13px; 250 top:13px;
251 left:8px; 251 left:8px;
252 } 252 }
253 .v-btn--large { 253 .v-btn--large {
254 padding: 0px 74px; 254 padding: 0px 74px;
255 } 255 }
256 .button{ 256 .button{
257 text-transform: none; 257 text-transform: none;
258 } 258 }
259 @media screen and (max-width: 472px) { 259 @media screen and (max-width: 472px) {
260 .v-btn--large { 260 .v-btn--large {
261 padding:0px 20px !important; 261 padding:0px 20px !important;
262 font-size:13px; 262 font-size:13px;
263 } 263 }
264 h5 { 264 h5 {
265 font-size: 11px; 265 font-size: 11px;
266 } 266 }
267 } 267 }
268 @media screen and (max-width: 600px) { 268 @media screen and (max-width: 600px) {
269 .theme--light .v-btn, .application .theme--light.v-btn { 269 .theme--light .v-btn, .application .theme--light.v-btn {
270 color: white !important; 270 color: white !important;
271 } 271 }
272 img{
273 top: 21px;
274 left: 10px;
275 height: 24px;
276 width: 33px;
277 }
278 .logoSchool{ 272 .logoSchool{
279 font-size: 18px; 273 font-size: 18px;
280 margin-top: 20px !important; 274 margin-top: 20px !important;
281 } 275 }
282 .content { 276 .content {
283 padding: 0px 0px 0px 0px !important; 277 padding: 0px 0px 0px 0px !important;
284 } 278 }
285 } 279 }
286 </style> 280 </style>
static/css/custom.css
Diff comments   View file @5c102c7
1 .custom-input-align .v-label { 1 .custom-input-align .v-label {
2 text-align: center !important; 2 text-align: center !important;
3 width: 100% !important; 3 width: 100% !important;
4 } 4 }
5
5 .custom-input-align input { 6 .custom-input-align input {
6 text-align: center !important; 7 text-align: center !important;
7 } 8 }
9
8 .fixcolor { 10 .fixcolor {
9 background:linear-gradient(90deg,#f58753 30%,#f15e5f 110%) 11 background: linear-gradient(90deg, #f58753 30%, #f15e5f 110%)
10 } 12 }
11 .fixcolors{ 13
12 background:#39b982 !important; 14 .fixcolors {
15 background: #39b982 !important;
13 } 16 }
17
14 .loader { 18 .loader {
15 width: 100%; 19 width: 100%;
16 height: 100%; 20 height: 100%;
17 position: fixed; 21 position: fixed;
18 top: 0; 22 top: 0;
19 left: 0; 23 left: 0;
20 text-align: center; 24 text-align: center;
21 background-color: rgba(0, 0, 0, 0.5); 25 background-color: rgba(0, 0, 0, 0.5);
22 z-index: 999; 26 z-index: 999;
23 } 27 }
24 28
25 .loader>div { 29 .loader>div {
26 position: relative; 30 position: relative;
27 top: calc(50% - 16px); 31 top: calc(50% - 16px);
28 }
29
32 }
33
34 @media screen and (max-width: 600px) {
35 img {
36 position: absolute;
37 top: 13px;
38 left: 10px;
39 height: 34px;
40 width: 120px;