@fishawack/lab-velocity 2.0.0-beta.8 → 2.0.0-beta.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/README.md +15 -4
  2. package/_Build/vue/modules/AuthModule/adminRoutes/PCompanies/Children/create.vue +1 -1
  3. package/_Build/vue/modules/AuthModule/adminRoutes/PCompanies/Children/edit.vue +1 -1
  4. package/_Build/vue/modules/AuthModule/adminRoutes/PCompanies/Children/show.vue +3 -2
  5. package/_Build/vue/modules/AuthModule/adminRoutes/PUsers/Children/create.vue +3 -2
  6. package/_Build/vue/modules/AuthModule/adminRoutes/PUsers/Children/edit.vue +2 -4
  7. package/_Build/vue/modules/AuthModule/components/VTableSorter.vue +1 -1
  8. package/_Build/vue/modules/AuthModule/js/axios.js +19 -0
  9. package/_Build/vue/modules/AuthModule/js/store.js +2 -2
  10. package/_Build/vue/modules/AuthModule/routes/account-exists.vue +2 -2
  11. package/_Build/vue/modules/AuthModule/routes/change-password.vue +9 -15
  12. package/_Build/vue/modules/AuthModule/routes/expired-reset.vue +4 -4
  13. package/_Build/vue/modules/AuthModule/routes/expired-verification.vue +9 -8
  14. package/_Build/vue/modules/AuthModule/routes/force-reset.vue +9 -15
  15. package/_Build/vue/modules/AuthModule/routes/forgot.vue +4 -4
  16. package/_Build/vue/modules/AuthModule/routes/login.vue +7 -11
  17. package/_Build/vue/modules/AuthModule/routes/logincallback.vue +1 -3
  18. package/_Build/vue/modules/AuthModule/routes/loginsso.vue +7 -9
  19. package/_Build/vue/modules/AuthModule/routes/logout.vue +1 -3
  20. package/_Build/vue/modules/AuthModule/routes/logoutheadless.vue +1 -3
  21. package/_Build/vue/modules/AuthModule/routes/register.vue +10 -13
  22. package/_Build/vue/modules/AuthModule/routes/reset.vue +5 -5
  23. package/_Build/vue/modules/AuthModule/routes/success-forgot.vue +8 -7
  24. package/_Build/vue/modules/AuthModule/routes/success-reset.vue +2 -2
  25. package/_Build/vue/modules/AuthModule/routes/success-verify.vue +1 -3
  26. package/_Build/vue/modules/AuthModule/routes/verify.vue +11 -14
  27. package/components/_auth.scss +19 -61
  28. package/package.json +1 -1
package/README.md CHANGED
@@ -51,6 +51,8 @@ Auth.Axios.setAxiosDefaults(process.env.APP_URL, router);
51
51
  import { Auth } from "@fishawack/lab-velocity";
52
52
  import store from "./store.js";
53
53
 
54
+ // ... initialize router
55
+
54
56
  Auth.Router.beforeEach(router, store);
55
57
  ```
56
58
 
@@ -100,9 +102,9 @@ import { Auth } from "@fishawack/lab-velocity";
100
102
  }
101
103
  ```
102
104
 
103
- ### Base Styles (admin)
105
+ ### Base Styles
104
106
 
105
- For the **admin only** you should replace the two references to variables & defaults with @fishawack/lab-velocity ones.
107
+ @fishawack/lab-velocity extends @fishawack/lab-ui, for this reason you should replace the two references to variables & defaults with @fishawack/lab-velocity ones.
106
108
 
107
109
  #### \_variables.scss
108
110
 
@@ -130,9 +132,18 @@ There are two different set of sass imports for the admin and the frontend route
130
132
  #### Frontend
131
133
 
132
134
  ```sass
133
- // vendor.scss
135
+ // Vendor imports / Lab-ui imports
136
+ @import "@fishawack/lab-ui/typography";
137
+ @import "@fishawack/lab-ui/grid";
138
+ @import "@fishawack/lab-ui/utilities";
139
+ @import "@fishawack/lab-ui/icon";
134
140
 
135
- @import
141
+ // Lab velocity
142
+ @import "@fishawack/lab-velocity/base";
143
+ @import "@fishawack/lab-velocity/components/basic";
144
+ @import "@fishawack/lab-velocity/components/button";
145
+ @import "@fishawack/lab-velocity/components/form";
146
+ @import "@fishawack/lab-velocity/components/auth";
136
147
  ```
137
148
 
138
149
  #### Admin
@@ -54,7 +54,7 @@ export default {
54
54
  params: { id: res.data.id },
55
55
  });
56
56
  } catch (e) {
57
- this.$root.errors(e);
57
+ console.log(e);
58
58
  }
59
59
  },
60
60
  },
@@ -90,7 +90,7 @@ export default {
90
90
  params: { id: res.data.id },
91
91
  });
92
92
  } catch (e) {
93
- this.$root.errors(e);
93
+ console.log(e);
94
94
  }
95
95
  },
96
96
  },
@@ -143,6 +143,7 @@
143
143
  import axios from "axios";
144
144
  import VelButton from "../../../../../components/basic/Button.vue";
145
145
  import VelSpinner from "../../../../../components/form/Spinner.vue";
146
+ import { ElNotification } from "element-plus";
146
147
 
147
148
  export default {
148
149
  name: "PShow",
@@ -246,7 +247,7 @@ export default {
246
247
  const res = await axios.post(
247
248
  `/api/companies/${this.id}/welcome`,
248
249
  );
249
- this.$notify({
250
+ ElNotification({
250
251
  title: "Success",
251
252
  message: res.data.message,
252
253
  type: "success",
@@ -254,7 +255,7 @@ export default {
254
255
 
255
256
  this.company.primary_contact_contacted = true;
256
257
  } catch (e) {
257
- this.$notify({
258
+ ElNotification({
258
259
  title: "Warning",
259
260
  message: e.response?.data?.message || e.message,
260
261
  type: "warning",
@@ -16,6 +16,7 @@
16
16
  <script>
17
17
  import { ElMessageBox } from "element-plus";
18
18
  import Form from "form-backend-validation";
19
+ import { ElNotification } from "element-plus";
19
20
 
20
21
  export default {
21
22
  name: "PCreate",
@@ -75,7 +76,7 @@ export default {
75
76
  if (!this.form.set_password) {
76
77
  this.open(res.data.id);
77
78
  } else {
78
- this.$notify({
79
+ ElNotification({
79
80
  title: "Success",
80
81
  message: "User created a notified of their new account",
81
82
  type: "success",
@@ -87,7 +88,7 @@ export default {
87
88
  });
88
89
  }
89
90
  } catch (e) {
90
- this.$root.errors(e);
91
+ console.log(e);
91
92
  }
92
93
  },
93
94
  open(id) {
@@ -85,9 +85,7 @@ export default {
85
85
 
86
86
  // if changing ourselves, re-fetch user data
87
87
  if (res.data.id === this.$store.state.auth.user.id) {
88
- await this.$store.dispatch("getUser", {
89
- errors: this.$root.errors,
90
- });
88
+ await this.$store.dispatch("getUser");
91
89
  }
92
90
 
93
91
  this.$router.replace({
@@ -95,7 +93,7 @@ export default {
95
93
  params: { id: res.data.id },
96
94
  });
97
95
  } catch (e) {
98
- this.$root.errors(e);
96
+ console.log(e);
99
97
  }
100
98
  },
101
99
  },
@@ -209,7 +209,7 @@ export default {
209
209
  .then((res) => {
210
210
  return res.data;
211
211
  })
212
- .catch(this.$root.errors);
212
+ .catch(console.log);
213
213
  },
214
214
 
215
215
  getStatusLabel(status) {
@@ -1,4 +1,21 @@
1
1
  import axios from "axios";
2
+ import debounce from "lodash/debounce";
3
+
4
+ import { ElNotification } from "element-plus";
5
+
6
+ const displayErrorNotification = debounce(async function errors(e) {
7
+ if (e.response && !e.response.data.errors) {
8
+ ElNotification.error({
9
+ title: "Error",
10
+ message:
11
+ e.response.data.message ||
12
+ `${e.response.status}: ${
13
+ e.response.statusText || "Please try again later!"
14
+ }`,
15
+ duration: 10000,
16
+ });
17
+ }
18
+ }, 250);
2
19
 
3
20
  function setAxiosDefaults(baseUrl, router) {
4
21
  axios.defaults.baseURL = baseUrl;
@@ -25,6 +42,8 @@ function setAxiosDefaults(baseUrl, router) {
25
42
  }
26
43
  }
27
44
 
45
+ displayErrorNotification(error);
46
+
28
47
  return Promise.reject(error);
29
48
  });
30
49
 
@@ -38,7 +38,7 @@ const store = {
38
38
  },
39
39
 
40
40
  actions: {
41
- getUser({ commit }, { errors, query = "", params }) {
41
+ getUser({ commit }, { errors = console.log, query = "", params } = {}) {
42
42
  return axios
43
43
  .get(`/api/users/self${query}`, {
44
44
  params,
@@ -51,7 +51,7 @@ const store = {
51
51
  .catch(errors);
52
52
  },
53
53
 
54
- logout({ commit }, { errors }) {
54
+ logout({ commit }) {
55
55
  commit("setUser", null);
56
56
 
57
57
  return axios.post("/logout");
@@ -3,10 +3,10 @@
3
3
  <section id="resetPasswordForm">
4
4
  <h1 class="h2">Account already exists</h1>
5
5
 
6
- <p class="mt AM-mb-0 color-21">
6
+ <p class="mt mb-0 color-21">
7
7
  <strong class="">Company: {{ $route.query.company }}</strong>
8
8
  </p>
9
- <p class="AM-mt-0.5">Your company already has an active account.</p>
9
+ <p class="mt-0.5">Your company already has an active account.</p>
10
10
 
11
11
  <elButton
12
12
  tag="router-link"
@@ -7,13 +7,13 @@
7
7
  />
8
8
  <form class="form" @submit.prevent="submit">
9
9
  <div v-if="!form.successful">
10
- <p class="AM-mt-2 AM-mb-0">
10
+ <p class="mt-2 mb-0">
11
11
  Please complete the fields below to change your
12
12
  password.
13
13
  </p>
14
14
 
15
15
  <el-input
16
- class="AM-mt-3"
16
+ class="mt-3"
17
17
  label="Current password"
18
18
  placeholder="Enter your current password"
19
19
  name="current_password"
@@ -25,7 +25,7 @@
25
25
  />
26
26
  <el-input
27
27
  v-model="form.password"
28
- class="AM-mt-2 AM-mb-2"
28
+ class="mt-2 mb-2"
29
29
  label="New Password"
30
30
  placeholder="Enter your new password"
31
31
  name="password"
@@ -40,7 +40,7 @@
40
40
  :password="form.password"
41
41
  @passwordValid="updatePasswordValidity"
42
42
  />
43
- <div class="flex AM-mt-3">
43
+ <div class="flex mt-3">
44
44
  <elButton
45
45
  native-type="submit"
46
46
  class=""
@@ -94,9 +94,7 @@ export default {
94
94
  },
95
95
 
96
96
  mounted() {
97
- this.$store.dispatch("getUser", {
98
- errors: this.$root.errors,
99
- });
97
+ this.$store.dispatch("getUser");
100
98
  },
101
99
 
102
100
  methods: {
@@ -107,7 +105,7 @@ export default {
107
105
  await this.form.put("/user/password");
108
106
  await this.login();
109
107
  } catch (e) {
110
- this.$root.errors(e);
108
+ console.log(e);
111
109
  } finally {
112
110
  this.loading = false;
113
111
  }
@@ -120,15 +118,13 @@ export default {
120
118
 
121
119
  if (res["logged-in"]) {
122
120
  try {
123
- await this.$store.dispatch("logout", {
124
- // errors: this.$root.errors,
125
- });
121
+ await this.$store.dispatch("logout");
126
122
  } catch (e) {}
127
123
 
128
124
  await this.form.post("/login");
129
125
  }
130
126
  } catch (e) {
131
- this.$root.errors(e);
127
+ console.log(e);
132
128
  } finally {
133
129
  this.loading = false;
134
130
  this.postLogin();
@@ -143,9 +139,7 @@ export default {
143
139
  },
144
140
 
145
141
  async postLogin() {
146
- const { data: user } = await this.$store.dispatch("getUser", {
147
- errors: this.$root.errors,
148
- });
142
+ const { data: user } = await this.$store.dispatch("getUser");
149
143
  },
150
144
  },
151
145
 
@@ -1,10 +1,10 @@
1
1
  <template>
2
2
  <h1 class="h2 h2--small">Sorry, your password reset has expired</h1>
3
3
 
4
- <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
4
+ <p class="mt-2 mb-0 color-highlight">
5
5
  <strong class="">Email: {{ form?.email }}</strong>
6
6
  </p>
7
- <p class="AM-mt-0.5">
7
+ <p class="mt-0.5">
8
8
  For security, password reset requests are only
9
9
  <strong>active for 1&nbsp;hour</strong>. If you still want to reset your
10
10
  password, please request a new password reset-link.
@@ -31,7 +31,7 @@
31
31
  Request new reset-link
32
32
  </elButton>
33
33
 
34
- <p class="disclaimer AM-mt-3">
34
+ <p class="disclaimer mt-3">
35
35
  <router-link class="color-1 underline" :to="{ name: 'auth.login' }">
36
36
  Back to Sign in
37
37
  </router-link>
@@ -66,7 +66,7 @@ export default {
66
66
  query: { email: this.form.email },
67
67
  });
68
68
  } catch (e) {
69
- this.$root.errors(e);
69
+ console.log(e);
70
70
  }
71
71
  },
72
72
  },
@@ -2,16 +2,16 @@
2
2
  <h1 class="h2 h2--small">Verification link expired</h1>
3
3
 
4
4
  <form class="form" @submit.prevent="submit">
5
- <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
5
+ <p class="mt-2 mb-0 color-highlight">
6
6
  <strong class="">Email: {{ form?.email }}</strong>
7
7
  </p>
8
- <p class="AM-mt-0.5">
8
+ <p class="mt-0.5">
9
9
  This email verification link has expired. Not to worry, we can email
10
10
  you a new one.
11
11
  </p>
12
12
 
13
13
  <el-input
14
- class="AM-mt-2 AM-mb-2.5 hidden"
14
+ class="mt-2 mb-2.5 hidden"
15
15
  v-model="form.email"
16
16
  label="Email address"
17
17
  name="email"
@@ -32,7 +32,7 @@
32
32
  </elButton>
33
33
  </form>
34
34
 
35
- <p class="disclaimer AM-mt-3">
35
+ <p class="disclaimer mt-3">
36
36
  Having trouble singing in?
37
37
  <a :href="$store.state.auth.contact" class="underline">Contact us</a>
38
38
  </p>
@@ -40,6 +40,7 @@
40
40
 
41
41
  <script>
42
42
  import Form from "form-backend-validation";
43
+ import { ElNotification } from "element-plus";
43
44
 
44
45
  export default {
45
46
  components: {
@@ -66,28 +67,28 @@ export default {
66
67
 
67
68
  await this.form.post("/email/verification-notification");
68
69
 
69
- this.$notify.success({
70
+ ElNotification.success({
70
71
  message: "Email has been re-sent",
71
72
  duration: 10000,
72
73
  class: "el-notification--success el-notification--right-override",
73
74
  });
74
75
  } catch (e) {
75
76
  if (e.response && e.response.status === 429) {
76
- this.notification = this.$notify({
77
+ this.notification = ElNotification({
77
78
  type: "warning",
78
79
  message: "Please allow 10 minutes before re-requesting",
79
80
  duration: 0,
80
81
  class: "el-notification--warning el-notification--right-override",
81
82
  });
82
83
  } else if (e.response && e.response.status === 422) {
83
- this.notification = this.$notify({
84
+ this.notification = ElNotification({
84
85
  type: "error",
85
86
  message: e.response.data.message,
86
87
  duration: 0,
87
88
  class: "el-notification--error el-notification--right-override",
88
89
  });
89
90
  } else {
90
- this.$root.errors(e);
91
+ console.log(e);
91
92
  }
92
93
  }
93
94
  },
@@ -7,13 +7,13 @@
7
7
  />
8
8
  <form class="form" @submit.prevent="submit">
9
9
  <div v-if="!form.successful">
10
- <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
10
+ <p class="mt-2 mb-0 color-highlight">
11
11
  <strong class=""
12
12
  >Email:
13
13
  {{ $store.state?.auth?.user?.email }}</strong
14
14
  >
15
15
  </p>
16
- <p class="AM-mt-0.5">
16
+ <p class="mt-0.5">
17
17
  <strong
18
18
  >Hello {{ $store.state?.auth?.user?.name }}</strong
19
19
  >, and welcome to {{ $root.appName }}. To maintain
@@ -23,7 +23,7 @@
23
23
  </p>
24
24
  <el-input
25
25
  v-model="form.password"
26
- class="AM-mt-2"
26
+ class="mt-2"
27
27
  label="New Password"
28
28
  placeholder="Enter new password"
29
29
  name="password"
@@ -40,7 +40,7 @@
40
40
 
41
41
  <elButton
42
42
  native-type="submit"
43
- class="AM-mt-3"
43
+ class="mt-3"
44
44
  type="primary"
45
45
  :disabled="form.processing || !isPasswordValid"
46
46
  :loading="form.processing"
@@ -81,9 +81,7 @@ export default {
81
81
  },
82
82
 
83
83
  mounted() {
84
- this.$store.dispatch("getUser", {
85
- errors: this.$root.errors,
86
- });
84
+ this.$store.dispatch("getUser");
87
85
  },
88
86
 
89
87
  methods: {
@@ -94,7 +92,7 @@ export default {
94
92
  await this.form.put("/user/password");
95
93
  await this.login();
96
94
  } catch (e) {
97
- this.$root.errors(e);
95
+ console.log(e);
98
96
  } finally {
99
97
  this.loading = false;
100
98
  }
@@ -107,15 +105,13 @@ export default {
107
105
 
108
106
  if (res["logged-in"]) {
109
107
  try {
110
- await this.$store.dispatch("logout", {
111
- errors: this.$root.errors,
112
- });
108
+ await this.$store.dispatch("logout");
113
109
  } catch (e) {}
114
110
 
115
111
  await this.form.post("/login");
116
112
  }
117
113
  } catch (e) {
118
- this.$root.errors(e);
114
+ console.log(e);
119
115
  } finally {
120
116
  this.loading = false;
121
117
  await this.postLogin();
@@ -123,9 +119,7 @@ export default {
123
119
  },
124
120
 
125
121
  async postLogin() {
126
- const { data: user } = await this.$store.dispatch("getUser", {
127
- errors: this.$root.errors,
128
- });
122
+ const { data: user } = await this.$store.dispatch("getUser");
129
123
  },
130
124
 
131
125
  updatePasswordValidity(isValid) {
@@ -3,14 +3,14 @@
3
3
  <section id="forgotPasswordForm">
4
4
  <h1 class="h2 h2--small">Reset password</h1>
5
5
  <form class="form" @submit.prevent="submit">
6
- <p class="AM-mt-2">
6
+ <p class="mt-2">
7
7
  Enter the email address associated with your account to
8
8
  continue.
9
9
  </p>
10
10
 
11
11
  <el-input
12
12
  v-if="!form.successful"
13
- class="AM-mt-3 AM-mb-3"
13
+ class="mt-3 mb-3"
14
14
  v-model="form.email"
15
15
  label="Email "
16
16
  placeholder="Enter email address"
@@ -32,7 +32,7 @@
32
32
  Continue
33
33
  </elButton>
34
34
 
35
- <p class="disclaimer AM-mt-3">
35
+ <p class="disclaimer mt-3">
36
36
  <router-link
37
37
  class="color-1 underline"
38
38
  :to="{ name: 'auth.login' }"
@@ -73,7 +73,7 @@ export default {
73
73
  query: { email: this.form.email },
74
74
  });
75
75
  } catch (e) {
76
- this.$root.errors(e);
76
+ console.log(e);
77
77
  }
78
78
  },
79
79
  },
@@ -1,10 +1,10 @@
1
1
  <template>
2
2
  <h1 class="h2 h2--small">Sign in</h1>
3
- <p class="AM-mb-3 AM-mt-2">Enter your password to continue.</p>
3
+ <p class="mb-3 mt-2">Enter your password to continue.</p>
4
4
 
5
5
  <form @submit.prevent="submit" class="form" id="memberLoginForm">
6
6
  <el-input
7
- class="AM-mb-3"
7
+ class="mb-3"
8
8
  label="Email"
9
9
  placeholder="Enter your email address"
10
10
  name="email"
@@ -15,7 +15,7 @@
15
15
  />
16
16
 
17
17
  <el-input
18
- class="AM-mb-3"
18
+ class="mb-3"
19
19
  label="Password"
20
20
  placeholder="Enter your password"
21
21
  name="password"
@@ -47,7 +47,7 @@
47
47
  Continue
48
48
  </el-button>
49
49
 
50
- <p class="disclaimer AM-mt-3">
50
+ <p class="disclaimer mt-3">
51
51
  Having trouble signing in?
52
52
  <router-link
53
53
  class="color-1 underline"
@@ -97,9 +97,7 @@ export default {
97
97
 
98
98
  if (res["logged-in"]) {
99
99
  try {
100
- await this.$store.dispatch("logout", {
101
- errors: this.$root.errors,
102
- });
100
+ await this.$store.dispatch("logout");
103
101
  } catch (e) {}
104
102
 
105
103
  await this.form.post("/login");
@@ -107,16 +105,14 @@ export default {
107
105
 
108
106
  await this.postLogin();
109
107
  } catch (e) {
110
- this.$root.errors(e);
108
+ console.log(e);
111
109
  } finally {
112
110
  this.loading = false;
113
111
  }
114
112
  },
115
113
 
116
114
  async postLogin() {
117
- const { data: user } = await this.$store.dispatch("getUser", {
118
- errors: this.$root.errors,
119
- });
115
+ const { data: user } = await this.$store.dispatch("getUser");
120
116
 
121
117
  if (window.dataLayer) {
122
118
  window.dataLayer.push({ event: "login", user });
@@ -16,9 +16,7 @@ export default {
16
16
 
17
17
  methods: {
18
18
  async postLogin() {
19
- const { data: user } = await this.$store.dispatch("getUser", {
20
- errors: this.$root.errors,
21
- });
19
+ const { data: user } = await this.$store.dispatch("getUser");
22
20
 
23
21
  if (window.dataLayer) {
24
22
  window.dataLayer.push({ event: "login", user });
@@ -1,11 +1,11 @@
1
1
  <template>
2
2
  <template v-if="stage === 1">
3
3
  <h1 class="h2 h2--small">Sign in</h1>
4
- <p class="AM-mb-3 AM-mt-2">Enter your email address to continue.</p>
4
+ <p class="mb-3 mt-2">Enter your email address to continue.</p>
5
5
 
6
6
  <form @submit.prevent="submit" class="form" id="memberLoginForm">
7
7
  <el-input
8
- class="AM-mb-3"
8
+ class="mb-3"
9
9
  label="Email"
10
10
  placeholder="Enter your email address"
11
11
  name="email"
@@ -35,7 +35,7 @@
35
35
  Continue
36
36
  </el-button>
37
37
 
38
- <p class="disclaimer AM-mt-3">
38
+ <p class="disclaimer mt-3">
39
39
  Having trouble signing in?
40
40
  <a :href="$store.state.auth.contact" class="underline"
41
41
  >Contact us</a
@@ -45,13 +45,11 @@
45
45
  </template>
46
46
  <template v-else>
47
47
  <h1 class="h2 h2--small">Sign in with SSO</h1>
48
- <p class="AM-mt-2">
48
+ <p class="mt-2">
49
49
  Redirecting you to your organisation’s Single Sign-On (SSO) gateway
50
- <span class="AM-color-highlight"
51
- >in {{ countdown }} seconds...</span
52
- >
50
+ <span class="color-highlight">in {{ countdown }} seconds...</span>
53
51
  </p>
54
- <p class="disclaimer AM-mt-3">
52
+ <p class="disclaimer mt-3">
55
53
  <a :href="redirect_url" class="underline">Go to SSO gateway</a>
56
54
  </p>
57
55
  </template>
@@ -100,7 +98,7 @@ export default {
100
98
  });
101
99
  }
102
100
  } catch (e) {
103
- this.$root.errors(e);
101
+ console.log(e);
104
102
  } finally {
105
103
  this.loading = false;
106
104
  }
@@ -8,9 +8,7 @@ export default {
8
8
 
9
9
  async mounted() {
10
10
  try {
11
- await this.$store.dispatch("logout", {
12
- errors: this.$root.errors,
13
- });
11
+ await this.$store.dispatch("logout");
14
12
  } catch {
15
13
  /* empty */
16
14
  } finally {
@@ -16,9 +16,7 @@ export default {
16
16
 
17
17
  async mounted() {
18
18
  try {
19
- await this.$store.dispatch("logout", {
20
- errors: this.$root.errors,
21
- });
19
+ await this.$store.dispatch("logout");
22
20
  } finally {
23
21
  this.done = true;
24
22
  }
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <h1 class="h2 h2--small">Register</h1>
3
- <p class="AM-mb-3 AM-mt-2">
3
+ <p class="mb-3 mt-2">
4
4
  Please enter your personal details to complete your registration.
5
5
  </p>
6
6
 
@@ -10,7 +10,7 @@
10
10
  id="memberLoginForm"
11
11
  >
12
12
  <el-input
13
- class="AM-mb-2"
13
+ class="mb-2"
14
14
  label="Full name"
15
15
  placeholder="Enter your full name"
16
16
  name="name"
@@ -20,7 +20,7 @@
20
20
  />
21
21
 
22
22
  <el-input
23
- class="AM-mb-2"
23
+ class="mb-2"
24
24
  label="Email"
25
25
  placeholder="Enter your email address"
26
26
  name="email"
@@ -31,7 +31,7 @@
31
31
  />
32
32
 
33
33
  <el-input
34
- class="AM-mb-2"
34
+ class="mb-2"
35
35
  label="Password"
36
36
  name="password"
37
37
  placeholder="Create a unique password"
@@ -72,7 +72,7 @@
72
72
  Register
73
73
  </elButton>
74
74
 
75
- <p class="disclaimer AM-mt-3">
75
+ <p class="disclaimer mt-3">
76
76
  Having trouble registering?
77
77
  <a :href="$store.state.auth.contact" class="underline"
78
78
  >Contact us</a
@@ -83,6 +83,7 @@
83
83
 
84
84
  <script>
85
85
  import Form from "form-backend-validation";
86
+ import { ElNotification } from "element-plus";
86
87
 
87
88
  export default {
88
89
  data() {
@@ -111,9 +112,7 @@ export default {
111
112
 
112
113
  if (res["logged-in"]) {
113
114
  try {
114
- await this.$store.dispatch("logout", {
115
- errors: this.$root.errors,
116
- });
115
+ await this.$store.dispatch("logout");
117
116
  } catch (e) {}
118
117
 
119
118
  await this.form.post("/register");
@@ -124,7 +123,7 @@ export default {
124
123
  name: `auth.login`,
125
124
  query: { company: res["company"] },
126
125
  });
127
- this.$notify.error({
126
+ ElNotification.error({
128
127
  title: "Domain is SSO enabled",
129
128
  message: "Sign in with your company email address",
130
129
  duration: 10000,
@@ -133,16 +132,14 @@ export default {
133
132
  await this.postLogin();
134
133
  }
135
134
  } catch (e) {
136
- this.$root.errors(e);
135
+ console.log(e);
137
136
  } finally {
138
137
  this.loading = false;
139
138
  }
140
139
  },
141
140
 
142
141
  async postLogin() {
143
- const { data: user } = await this.$store.dispatch("getUser", {
144
- errors: this.$root.errors,
145
- });
142
+ const { data: user } = await this.$store.dispatch("getUser");
146
143
 
147
144
  if (window.dataLayer) {
148
145
  window.dataLayer.push({ event: "login", user });
@@ -4,16 +4,16 @@
4
4
  <h1 class="h2 h2--small">Reset password</h1>
5
5
  <form class="form" @submit.prevent="submit">
6
6
  <div v-if="!form.successful">
7
- <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
7
+ <p class="mt-2 mb-0 color-highlight">
8
8
  <strong class="">Email: {{ form?.email }}</strong>
9
9
  </p>
10
- <p class="AM-mt-0.5">
10
+ <p class="mt-0.5">
11
11
  Please create a new password. Passwords you have used
12
12
  previously aren’t permitted.
13
13
  </p>
14
14
  <el-input
15
15
  v-model="form.password"
16
- class="AM-mt-3"
16
+ class="mt-3"
17
17
  label="New Password"
18
18
  placeholder="Enter new password"
19
19
  name="password"
@@ -51,7 +51,7 @@
51
51
  <h4 class="mt" v-text="`Success!`" />
52
52
  <p v-text="`Your password has been reset.`" />
53
53
  </div>
54
- <p class="disclaimer AM-mt-3">
54
+ <p class="disclaimer mt-3">
55
55
  <router-link
56
56
  class="color-1 underline"
57
57
  :to="{ name: 'auth.login' }"
@@ -108,7 +108,7 @@ export default {
108
108
  query: { email: this.form.email },
109
109
  });
110
110
  }
111
- this.$root.errors(e);
111
+ console.log(e);
112
112
  }
113
113
  },
114
114
 
@@ -4,15 +4,15 @@
4
4
  <h1 class="h2 h2--small">Reset password</h1>
5
5
 
6
6
  <form class="form" @submit.prevent="submit">
7
- <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
7
+ <p class="mt-2 mb-0 color-highlight">
8
8
  <strong class="">Email: {{ form?.email }}</strong>
9
9
  </p>
10
- <p class="AM-mt">
10
+ <p class="mt">
11
11
  If this account exists we have sent an email containing
12
12
  instructions for resetting the password.
13
13
  <strong>Please check your inbox.</strong>
14
14
  </p>
15
- <p class="AM-mt-3 AM-mb">
15
+ <p class="mt-3 mb">
16
16
  Haven’t received the email after 10 minutes?
17
17
  </p>
18
18
 
@@ -37,7 +37,7 @@
37
37
  Re-send instructions
38
38
  </elButton>
39
39
 
40
- <p class="disclaimer AM-mt-3">
40
+ <p class="disclaimer mt-3">
41
41
  <router-link
42
42
  class="color-1 underline"
43
43
  :to="{ name: `auth.login` }"
@@ -52,6 +52,7 @@
52
52
 
53
53
  <script>
54
54
  import Form from "form-backend-validation";
55
+ import { ElNotification } from "element-plus";
55
56
 
56
57
  export default {
57
58
  components: {
@@ -78,7 +79,7 @@ export default {
78
79
 
79
80
  await this.form.post("/forgot-password");
80
81
 
81
- this.$notify({
82
+ ElNotification({
82
83
  type: "success",
83
84
  message: "Email has been re-sent",
84
85
  duration: 10000,
@@ -86,14 +87,14 @@ export default {
86
87
  });
87
88
  } catch (e) {
88
89
  if (e.response && e.response.status === 422) {
89
- this.notification = this.$notify({
90
+ this.notification = ElNotification({
90
91
  type: "warning",
91
92
  message: "Please allow 10 minutes before re-requesting",
92
93
  duration: 0,
93
94
  class: "el-notification--warning el-notification--right-override",
94
95
  });
95
96
  } else {
96
- this.$root.errors(e);
97
+ console.log(e);
97
98
  }
98
99
  }
99
100
  },
@@ -3,10 +3,10 @@
3
3
  <section id="resetPasswordForm">
4
4
  <h1 class="h2 h2--small">Success</h1>
5
5
 
6
- <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
6
+ <p class="mt-2 mb-0 color-highlight">
7
7
  <strong class="">Email: {{ $route.query.email }}</strong>
8
8
  </p>
9
- <p class="AM-mt">
9
+ <p class="mt">
10
10
  Your password has been reset. Please sign in to continue.
11
11
  </p>
12
12
 
@@ -20,9 +20,7 @@
20
20
  <script>
21
21
  export default {
22
22
  mounted() {
23
- this.$store.dispatch("getUser", {
24
- errors: this.$root.errors,
25
- });
23
+ this.$store.dispatch("getUser");
26
24
  },
27
25
  components: {
28
26
  elButton: require("../../../components/basic/Button.vue").default,
@@ -2,17 +2,15 @@
2
2
  <h1 class="h2 h2--small">Verify your email address</h1>
3
3
 
4
4
  <form class="form" @submit.prevent="submit">
5
- <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
5
+ <p class="mt-2 mb-0 color-highlight">
6
6
  <strong class="">Email: {{ user?.email }}</strong>
7
7
  </p>
8
- <p class="AM-mt-0.5">
8
+ <p class="mt-0.5">
9
9
  <strong>Please check your inbox</strong> for a Verification email
10
10
  from {{ $root.appName }}. Click the link in that email to verify
11
11
  your email address and complete your registration.
12
12
  </p>
13
- <p class="AM-mt-0.5 AM-mb-0">
14
- Haven’t received the email after 10 minutes?
15
- </p>
13
+ <p class="mt-0.5 mb-0">Haven’t received the email after 10 minutes?</p>
16
14
 
17
15
  <el-input
18
16
  class="hidden"
@@ -26,7 +24,7 @@
26
24
  />
27
25
 
28
26
  <elButton
29
- class="AM-mt AM-mb-3"
27
+ class="mt mb-3"
30
28
  native-type="submit"
31
29
  type="primary"
32
30
  :disabled="form.processing"
@@ -36,7 +34,7 @@
36
34
  Re-send verification link
37
35
  </elButton>
38
36
 
39
- <p class="disclaimer AM-mt-1.5">
37
+ <p class="disclaimer mt-1.5">
40
38
  Having trouble singing in?
41
39
  <a :href="$store.state.auth.contact" class="underline"
42
40
  >Contact us</a
@@ -47,6 +45,7 @@
47
45
 
48
46
  <script>
49
47
  import Form from "form-backend-validation";
48
+ import { ElNotification } from "element-plus";
50
49
 
51
50
  export default {
52
51
  components: {
@@ -74,7 +73,7 @@ export default {
74
73
 
75
74
  await this.form.post("/email/verification-notification");
76
75
 
77
- this.$notify({
76
+ ElNotification({
78
77
  type: "success",
79
78
  message: "Email has been re-sent",
80
79
  duration: 10000,
@@ -82,30 +81,28 @@ export default {
82
81
  });
83
82
  } catch (e) {
84
83
  if (e.response && e.response.status === 429) {
85
- this.notification = this.$notify({
84
+ this.notification = ElNotification({
86
85
  type: "warning",
87
86
  message: "Please allow 10 minutes before re-requesting",
88
87
  duration: 0,
89
88
  class: "el-notification--warning el-notification--right-override",
90
89
  });
91
90
  } else if (e.response && e.response.status === 422) {
92
- this.notification = this.$notify({
91
+ this.notification = ElNotification({
93
92
  type: "error",
94
93
  message: e.response.data.message,
95
94
  duration: 0,
96
95
  class: "el-notification--error el-notification--right-override",
97
96
  });
98
97
  } else {
99
- this.$root.errors(e);
98
+ console.log(e);
100
99
  }
101
100
  }
102
101
  },
103
102
  },
104
103
 
105
104
  async mounted() {
106
- this.user = await this.$store.dispatch("getUser", {
107
- errors: this.$root.errors,
108
- });
105
+ this.user = await this.$store.dispatch("getUser");
109
106
 
110
107
  this.form.email = this.user.email;
111
108
  },
@@ -1,4 +1,3 @@
1
- // AuthModule
2
1
  .AuthModule {
3
2
  position: fixed;
4
3
  background-color: black;
@@ -13,10 +12,12 @@
13
12
  width: 13.3rem;
14
13
  z-index: 99;
15
14
  }
15
+
16
16
  @include breakpoint(max-width $tabletMax) {
17
17
  background: url("../media/content/images/hero-auth-background-tablet.jpg")
18
18
  center top no-repeat;
19
19
  }
20
+
20
21
  @include breakpoint(max-width $mobileMax) {
21
22
  background: url("../media/content/images/hero-auth-background-mobile.jpg")
22
23
  center top no-repeat;
@@ -39,6 +40,7 @@
39
40
  transform: translate(-50%, 0);
40
41
  padding: 24px;
41
42
  width: calc(100% - 80px);
43
+
42
44
  h2 .h2 {
43
45
  font-size: 24px;
44
46
  line-height: 32px;
@@ -50,6 +52,7 @@
50
52
  line-height: 50px;
51
53
  font-size: 48px;
52
54
  }
55
+
53
56
  .h2--small {
54
57
  font-size: 36px;
55
58
  line-height: 44px;
@@ -60,14 +63,17 @@
60
63
  line-height: 20px;
61
64
  margin-bottom: 24px;
62
65
  letter-spacing: -0.1px;
66
+
63
67
  &.disclaimer {
64
68
  font-size: 12px;
65
69
  color: rgba($color1, 0.5);
66
70
  margin: 0;
67
71
  }
72
+
68
73
  a {
69
74
  color: $color1;
70
75
  }
76
+
71
77
  &.form__error {
72
78
  font-size: 12px;
73
79
  line-height: 18px;
@@ -79,6 +85,7 @@
79
85
  width: 200px;
80
86
  padding: 9px 23.5px;
81
87
  font-size: 14px;
88
+
82
89
  @include breakpoint(max-width $mobileMax) {
83
90
  max-width: unset;
84
91
  width: 100%;
@@ -92,43 +99,38 @@
92
99
  border: 0.4px solid red;
93
100
  }
94
101
  }
102
+
95
103
  .form__input.error {
96
104
  border: none;
105
+
97
106
  .el-input__wrapper {
98
107
  border: 0.4px solid red;
99
108
  }
100
109
  }
101
110
  }
102
- // &__icon-container{
103
- // position: absolute;
104
- // top: 50%;
105
- // right: $spacing * 1.5;
106
- // transform: translateY(-50%);
107
- // display: flex;
108
- // }
109
- // &__action-icon {
110
- // margin-left: $spacing * 0.5;
111
- // cursor: pointer;
112
- // }
113
111
  }
112
+
114
113
  .vel-basic__label {
115
114
  font-size: 12px;
116
115
  color: rgba($color1, 0.5);
117
116
  }
117
+
118
118
  .vel-basic__textbox {
119
119
  --el-border-color: #cfd8dd;
120
120
  --el-input-text-color: #666666;
121
121
  --el-input-focus-border-color: #cfd8dd;
122
122
  --el-input-hover-border-color: #cfd8dd;
123
123
  font-size: 14px;
124
- padding-bottom: $am-spacing * 2.5;
124
+
125
125
  .el-input__inner {
126
126
  --el-input-inner-height: 38px;
127
127
  }
128
128
  }
129
+
129
130
  .el-button--primary {
130
131
  --el-button-text-color: #ffffff;
131
132
  }
133
+
132
134
  input,
133
135
  input:focus {
134
136
  @extend .el-input__inner;
@@ -140,9 +142,11 @@
140
142
  top: 48px;
141
143
  left: 0%;
142
144
  }
145
+
143
146
  .AuthModule__logo {
144
147
  position: relative;
145
148
  }
149
+
146
150
  .AuthModule__Content {
147
151
  position: absolute;
148
152
  z-index: 1;
@@ -154,52 +158,6 @@
154
158
  height: 100%;
155
159
  }
156
160
 
157
- .AM-mb {
158
- margin-bottom: $am-spacing !important;
159
- }
160
- .AM-mt {
161
- margin-top: $am-spacing !important;
162
- }
163
- .AM-pb {
164
- padding-bottom: $am-spacing !important;
165
- }
166
- .AM-pt {
167
- padding-top: $am-spacing !important;
168
- }
169
- @for $i from 1 through 5 {
170
- .AM-mb-#{$i - 1} {
171
- margin-bottom: ($i - 1) * $am-spacing !important;
172
- }
173
-
174
- .AM-mb-#{$i - 1}\.5 {
175
- margin-bottom: ($i - 0.5) * $am-spacing !important;
176
- }
177
-
178
- .AM-mt-#{$i - 1} {
179
- margin-top: ($i - 1) * $am-spacing !important;
180
- }
181
-
182
- .AM-mt-#{$i - 1}\.5 {
183
- margin-top: ($i - 0.5) * $am-spacing !important;
184
- }
185
-
186
- .AM-pt-#{$i - 1} {
187
- padding-top: ($i - 1) * $am-spacing !important;
188
- }
189
-
190
- .AM-pt-#{$i - 1}\.5 {
191
- padding-top: ($i - 0.5) * $am-spacing !important;
192
- }
193
-
194
- .AM-pb-#{$i - 1} {
195
- padding-bottom: ($i - 1) * $am-spacing !important;
196
- }
197
-
198
- .AM-pb-#{$i - 1}\.5 {
199
- padding-bottom: ($i - 0.5) * $am-spacing !important;
200
- }
201
- }
202
-
203
- .AM-color-highlight {
204
- color: $am-highlight;
161
+ .color-highlight {
162
+ color: green;
205
163
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fishawack/lab-velocity",
3
- "version": "2.0.0-beta.8",
3
+ "version": "2.0.0-beta.9",
4
4
  "description": "Avalere Health branded style system",
5
5
  "scripts": {
6
6
  "setup": "npm ci || npm i && npm run content",