Implement auth

Author: dxvladislavvolkov

src/auth.js

@@ -1,12 +1,106 @@
-let authenticated = true;
+const defaultPath = '/';
+const defaultUser = {
+ email: 'sandra@example.com',
+ avatarUrl: 'https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/06.png'
+};
+
 export default {
- authenticated() {
- return authenticated;
+ _user: defaultUser,
+ loggedIn() {
+ return !!this._user;
+ },
+ _lastAuthenticatedPath: defaultPath,
+ lastAuthenticatedPath(value) {
+ this._lastAuthenticatedPath = value;
+ },
+
+ async logIn(email, password) {
+ try {
+ // Send request
+ console.log(email, password);
+ this._user = { ...defaultUser, email };
+
+ return {
+ isOk: true,
+ data: this._user
+ };
+ }
+ catch {
+ return {
+ isOk: false,
+ message: "Authentication failed"
+ };
+ }
+ },
+
+ async logOut() {
+ this._user = null;
+ },
+
+ async getUser() {
+ try {
+ // Send request
+
+ return {
+ isOk: true,
+ data: this._user
+ };
+ }
+ catch {
+ return {
+ isOk: false
+ };
+ }
+ },
+
+ async resetPassword(email) {
+ try {
+ // Send request
+ console.log(email);
+
+ return {
+ isOk: true
+ };
+ }
+ catch {
+ return {
+ isOk: false,
+ message: "Failed to reset password"
+ };
+ }
  },
- logIn() {
- authenticated = true;
+
+ async changePassword(email, recoveryCode) {
+ try {
+ // Send request
+ console.log(email, recoveryCode);
+
+ return {
+ isOk: true
+ };
+ }
+ catch {
+ return {
+ isOk: false,
+ message: "Failed to change password"
+ }
+ }
  },
- logOut() {
- authenticated = false;
+
+ async createAccount(email, password) {
+ try {
+ // Send request
+ console.log(email, password);
+
+ return {
+ isOk: true
+ };
+ }
+ catch {
+ return {
+ isOk: false,
+ message: "Failed to create account"
+ };
+ }
  }
 };

src/components/header-toolbar.vue

@@ -40,12 +40,13 @@
  height="100%"
  styling-mode="text"
  >
- <user-panel :menu-items="userMenuItems" menu-mode="context" />
+ <user-panel :user="user" :menu-items="userMenuItems" menu-mode="context" />
  </dx-button>
  </div>
  </dx-item>
  <!-- eslint-disable vue/no-unused-vars -->
  <user-panel
+ :user="user"
  :menu-items="userMenuItems"
  menu-mode="list"
  slot-scope="_"
@@ -68,10 +69,15 @@ export default {
  menuToggleEnabled: Boolean,
  title: String,
  toggleMenuFunc: Function,
- logOutFunc: Function
+ logOutFunc: Function,
+ },
+ /* eslint-disable no-debugger */
+ created() {
+ auth.getUser().then((e) => this.user = e.data);
  },
  data() {
  return {
+ user: { },
  userMenuItems: [
  {
  text: "Profile",

src/components/user-panel.vue

@@ -4,7 +4,7 @@
  <div class="image-container">
  <div class="user-image" />
  </div>
- <div class="user-name">sandra@example.com</div>
+ <div class="user-name">{{user.email}}</div>
  </div>
 
  <dx-context-menu
@@ -33,7 +33,8 @@ import DxList from "devextreme-vue/list";
 export default {
  props: {
  menuMode: String,
- menuItems: Array
+ menuItems: Array,
+ user: Object
  },
  components: {
  DxContextMenu,

src/layouts/single-card.vue

@@ -1,6 +1,12 @@
 <template>
  <dx-scroll-view height="100%" width="100%" class="with-footer single-card">
- <div class="dx-card"><slot /></div>
+ <div class="dx-card content">
+ <div class="header">
+ <div class="title">{{title}}</div>
+ <div class="description">{{description}}</div>
+ </div>
+ <slot />
+ </div>
  </dx-scroll-view>
 </template>
 
@@ -10,17 +16,26 @@ import DxScrollView from "devextreme-vue/scroll-view";
 export default {
  components: {
  DxScrollView
+ },
+ props: {
+ title: String,
+ description: String
  }
 };
 </script>
 
 <style lang="scss">
+@import "../themes/generated/variables.base.scss";
+
 .single-card {
+ width: 100%;
+ height: 100%;
 
  .dx-card {
  width: 330px;
  margin: auto auto;
  padding: 40px;
+ flex-grow: 0;
 
  .screen-x-small & {
  width: 100%;
@@ -31,6 +46,22 @@ export default {
  border: 0;
  flex-grow: 1;
  }
+
+ .header {
+ margin-bottom: 30px;
+
+ .title {
+ color: $base-text-color;
+ line-height: 28px;
+ font-weight: 500;
+ font-size: 24px;
+ }
+
+ .description {
+ color: rgba($base-text-color, alpha($base-text-color) * 0.7);
+ line-height: 18px;
+ }
+ }
  }
 }
 

src/router.js

@@ -46,11 +46,59 @@ const router = new Router({
  meta: { requiresAuth: false },
  components: {
  layout: simpleLayout,
- // route level code-splitting
- // this generates a separate chunk (login.[hash].js) for this route
- // which is lazy-loaded when the route is visited.
  content: () =>
  import(/* webpackChunkName: "login" */ "./views/login-form")
+ },
+ props: {
+ layout: {
+ title: "Sign In"
+ }
+ }
+ },
+ {
+ path: "/reset-password",
+ name: "reset-password",
+ meta: { requiresAuth: false },
+ components: {
+ layout: simpleLayout,
+ content: () =>
+ import(/* webpackChunkName: "login" */ "./views/reset-password-form")
+ },
+ props: {
+ layout: {
+ title: "Reset Password",
+ description: "Please enter the email address that you used to register, and we will send you a link to reset your password via Email."
+ }
+ }
+ },
+ {
+ path: "/create-account",
+ name: "create-account",
+ meta: { requiresAuth: false },
+ components: {
+ layout: simpleLayout,
+ content: () =>
+ import(/* webpackChunkName: "login" */ "./views/create-account-form")
+ },
+ props: {
+ layout: {
+ title: "Sign Up"
+ }
+ }
+ },
+ {
+ path: "/change-password/:recoveryCode",
+ name: "change-password",
+ meta: { requiresAuth: false },
+ components: {
+ layout: simpleLayout,
+ content: () =>
+ import(/* webpackChunkName: "login" */ "./views/change-password-form")
+ },
+ props: {
+ layout: {
+ title: "Change Password"
+ }
  }
  },
  {
@@ -70,12 +118,12 @@ const router = new Router({
 
 router.beforeEach((to, from, next) => {
 
- if (to.name === "login-form" && auth.authenticated()) {
+ if (to.name === "login-form" && auth.loggedIn()) {
  next({ name: "home" });
  }
 
  if (to.matched.some(record => record.meta.requiresAuth)) {
- if (!auth.authenticated()) {
+ if (!auth.loggedIn()) {
  next({
  name: "login-form",
  query: { redirect: to.fullPath }