From f3289ba8810eab834c92317bc5db7ed0d1c10624 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Mon, 8 Apr 2019 17:11:08 +0200
Subject: [PATCH] add subnavigation, minor cleanup

---
 .../integration/change-password-spec.js       | 24 ++++++-------
 client/src/components/PasswordChange.vue      |  4 +--
 client/src/components/TopNavigation.vue       | 17 ---------
 client/src/components/UserWidget.vue          | 24 +++++++++----
 client/src/layouts/DefaultLayout.vue          |  7 ++--
 client/src/pages/passwordChange.vue           | 10 ------
 client/src/pages/profile.vue                  | 35 ++++++++++++++++++-
 client/src/router/index.js                    | 13 +++++--
 client/src/styles/_top-navigation.scss        | 15 ++++++++
 client/src/styles/main.scss                   |  1 +
 server/users/serializers.py                   |  3 --
 11 files changed, 98 insertions(+), 55 deletions(-)
 create mode 100644 client/src/styles/_top-navigation.scss

diff --git a/client/cypress/integration/change-password-spec.js b/client/cypress/integration/change-password-spec.js
index ff1f645e..e5b623dc 100644
--- a/client/cypress/integration/change-password-spec.js
+++ b/client/cypress/integration/change-password-spec.js
@@ -12,7 +12,7 @@ describe('Change Password Page', () => {
 
   it('shows an empty form', () => {
     cy.login('rahel.cueni', 'test');
-    cy.visit('/password-change');
+    cy.visit('/me/password-change');
 
     cy.get('[data-cy=password-change-success]').should('not.exist');
     cy.get('[data-cy=old-password]').should('have.value', '');
@@ -21,15 +21,15 @@ describe('Change Password Page', () => {
 
   it('shows errors if old password is not entered', () => {
     cy.login('rahel.cueni', 'test');
-    cy.visit('/password-change');
+    cy.visit('/me/password-change');
 
     cy.changePassword('', validNewPassword);
     cy.get('[data-cy=old-password-local-errors]').should('contain', 'Dein aktuelles Passwort fehlt')
   });
 
-  it('shows errors if old password is not entered', () => {
+  it('shows errors if new password is not entered', () => {
     cy.login('rahel.cueni', 'test');
-    cy.visit('/password-change');
+    cy.visit('/me/password-change');
 
     cy.changePassword(validOldPassword, '');
     cy.get('[data-cy=new-password-local-errors]').should('contain', 'Dein neues Passwort fehlt')
@@ -37,7 +37,7 @@ describe('Change Password Page', () => {
 
   it('shows errors if new password is too short', () => {
     cy.login('rahel.cueni', 'test');
-    cy.visit('/password-change');
+    cy.visit('/me/password-change');
 
     cy.changePassword(validOldPassword, 'Abc1!');
     cy.get('[data-cy=new-password-local-errors]').should('contain', validationTooShort)
@@ -45,7 +45,7 @@ describe('Change Password Page', () => {
 
   it('shows errors if new password has no uppercase letter', () => {
     cy.login('rahel.cueni', 'test');
-    cy.visit('/password-change');
+    cy.visit('/me/password-change');
 
     cy.changePassword(validOldPassword, 'aabdddedddbc1!');
     cy.get('[data-cy=new-password-local-errors]').should('contain', validationErrorMsg)
@@ -53,7 +53,7 @@ describe('Change Password Page', () => {
 
   it('shows errors if new password has no lowercase letter', () => {
     cy.login('rahel.cueni', 'test');
-    cy.visit('/password-change');
+    cy.visit('/me/password-change');
 
     cy.changePassword(validOldPassword, 'ABCDDD334551!');
     cy.get('[data-cy=new-password-local-errors]').should('contain', validationErrorMsg)
@@ -61,7 +61,7 @@ describe('Change Password Page', () => {
 
   it('shows errors if new password has no digit', () => {
     cy.login('rahel.cueni', 'test');
-    cy.visit('/password-change');
+    cy.visit('/me/password-change');
 
     cy.changePassword(validOldPassword, 'AbcdEEDE!');
     cy.get('[data-cy=new-password-local-errors]').should('contain', validationErrorMsg)
@@ -69,7 +69,7 @@ describe('Change Password Page', () => {
 
   it('shows errors if new password has no special character', () => {
     cy.login('rahel.cueni', 'test');
-    cy.visit('/password-change');
+    cy.visit('/me/password-change');
 
     cy.changePassword(validOldPassword, 'AbcdEEDE09877');
     cy.get('[data-cy=new-password-local-errors]').should('contain', validationErrorMsg)
@@ -77,7 +77,7 @@ describe('Change Password Page', () => {
 
   it('shows errors if old password does not match', () => {
     cy.login('rahel.cueni', 'test');
-    cy.visit('/password-change');
+    cy.visit('/me/password-change');
 
     cy.changePassword('test12345', validNewPassword);
     cy.get('[data-cy=old-password-remote-errors]').should('contain', validationOldWrongMsg)
@@ -85,9 +85,9 @@ describe('Change Password Page', () => {
 
   it('shows success if change was successful', () => {
     cy.login('rahel.cueni', 'test');
-    cy.visit('/password-change');
+    cy.visit('/me/password-change');
 
-    cy.changePassword('test', validNewPassword);
+    cy.changePassword(validOldPassword, validNewPassword);
     cy.get('[data-cy=password-change-success]').should('contain', 'Dein Password wurde erfolgreich geändert.');
     cy.get('[data-cy=old-password]').should('have.value', '');
     cy.get('[data-cy=new-password]').should('have.value', '');
diff --git a/client/src/components/PasswordChange.vue b/client/src/components/PasswordChange.vue
index c7c737af..808e98a2 100644
--- a/client/src/components/PasswordChange.vue
+++ b/client/src/components/PasswordChange.vue
@@ -2,7 +2,7 @@
   <div class="pw-change">
     <form class="pw-change__form change-form" novalidate @submit.prevent="validateBeforeSubmit">
       <div class="change-form__field sbform-input">
-        <label for="old-pw" class="sbform-input__label">Aktuells Passwort</label>
+        <label for="old-pw" class="sbform-input__label">Aktuelles Passwort</label>
         <input id="old-pw"
                name="oldPassword"
                type="text"
@@ -29,7 +29,7 @@
         <small v-if="errors.has('newPassword') && submitted" class=" sbform-input__error" data-cy="new-password-local-errors">{{ errors.first('newPassword') }}</small>
         <small v-for="error in newPasswordErrors" :key="error" class=" sbform-input__error" data-cy="new-password-remote-errors">{{ error }}</small>
       </div>
-      <button class="button button--primary change-form__submit" data-cy="change-password-button">Zurücksetzen</button>
+      <button class="button button--primary change-form__submit" data-cy="change-password-button">Speichern</button>
     </form>
   </div>
 </template>
diff --git a/client/src/components/TopNavigation.vue b/client/src/components/TopNavigation.vue
index 0d278098..b4b7ccaa 100644
--- a/client/src/components/TopNavigation.vue
+++ b/client/src/components/TopNavigation.vue
@@ -22,21 +22,4 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-
-  .top-navigation {
-    display: flex;
-
-    &__link {
-      font-size: 1.0625rem;
-      padding: 0 24px;
-      font-family: $sans-serif-font-family;
-      font-weight: $font-weight-regular;
-      color: $color-grey;
-
-      &--active {
-        color: $color-brand;
-      }
-    }
-  }
 </style>
diff --git a/client/src/components/UserWidget.vue b/client/src/components/UserWidget.vue
index 2d923914..1479d8ed 100644
--- a/client/src/components/UserWidget.vue
+++ b/client/src/components/UserWidget.vue
@@ -1,16 +1,18 @@
 <template>
-  <div class="user-widget">
-    <user-icon class="user-widget__avatar" :src="avatar"></user-icon>
-    <span class="user-widget__name">{{firstName}} {{lastName}}</span>
-    <span class="user-widget__date" v-if="date">{{date}}</span>
-  </div>
+  <router-link to="/me">
+    <div class="user-widget" :class="{'user-widget--is-profile': isProfile}">
+      <user-icon class="user-widget__avatar" :src="avatar"></user-icon>
+      <span class="user-widget__name">{{firstName}} {{lastName}}</span>
+      <span class="user-widget__date" v-if="date">{{date}}</span>
+    </div>
+  </router-link>
 </template>
 
 <script>
   import UserIcon from '@/components/icons/UserIcon';
 
   export default {
-    props: ['firstName', 'lastName', 'avatar', 'date'],
+    props: ['firstName', 'lastName', 'avatar', 'date', 'isProfile'],
 
     components: {
       UserIcon
@@ -42,5 +44,15 @@
       border-radius: 15px;
       fill: $color-grey;
     }
+
+    &--is-profile {
+      & > svg {
+        fill: $color-brand;
+      }
+
+      & > span {
+        color: $color-brand;
+      }
+    }
   }
 </style>
diff --git a/client/src/layouts/DefaultLayout.vue b/client/src/layouts/DefaultLayout.vue
index 02201f0b..40826587 100644
--- a/client/src/layouts/DefaultLayout.vue
+++ b/client/src/layouts/DefaultLayout.vue
@@ -4,7 +4,7 @@
       <top-navigation></top-navigation>
       <router-link to="/" class="skillbox__header-logo">skillbox</router-link>
       <div class="user-header">
-        <user-widget v-bind="me"></user-widget>
+        <user-widget v-bind="me" :isProfile="isProfile"></user-widget>
         <logout-widget></logout-widget>
       </div>
       <book-navigation v-if="showSubnavigation">
@@ -45,7 +45,10 @@
       specialContainerClass() {
         let cls = this.$store.state.specialContainerClass;
         return [cls ? `skillbox--${cls}` : '', {'skillbox--show-filter': this.showFilter}]
-      }
+      },
+      isProfile() {
+        return this.$route.meta.isProfile;
+      },
     },
 
     data() {
diff --git a/client/src/pages/passwordChange.vue b/client/src/pages/passwordChange.vue
index 5e271b1b..8c01b0e8 100644
--- a/client/src/pages/passwordChange.vue
+++ b/client/src/pages/passwordChange.vue
@@ -79,17 +79,7 @@
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
 
-  .password-reset {
-    padding: $medium-spacing;
-
-    @media screen and (max-width: 1024px) {
-      max-width: 640px;
-      margin: 0 auto;
-    }
-  }
-
   .success-message {
-
     margin-bottom: 20px;
 
     &__msg {
diff --git a/client/src/pages/profile.vue b/client/src/pages/profile.vue
index f211f348..edb8e205 100644
--- a/client/src/pages/profile.vue
+++ b/client/src/pages/profile.vue
@@ -1,6 +1,17 @@
 <template>
   <div class="profile">
-    <h1 class="profile__heading">Profile</h1>
+    <nav class="top-navigation profile-submenu profile__submenu">
+      <router-link to="/me/activity" active-class="top-navigation__link--active"
+                  class="top-navigation__link profile-submenu__item submenu-item">Aktivität
+      </router-link>
+      <router-link to="/me/classlist" active-class="top-navigation__link--active"
+                  class="top-navigation__link profile-submenu__item submenu-item">Klassenliste
+      </router-link>
+      <router-link to="password-change" active-class="top-navigation__link--active"
+                  class="top-navigation__link profile-submenu__item submenu-item">Passwort ändern
+      </router-link>
+    </nav>
+    <router-view></router-view>
   </div>
 </template>
 
@@ -20,5 +31,27 @@
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+
+  .profile {
+    padding: $medium-spacing;
+
+    @media screen and (max-width: 1024px) {
+      max-width: 640px;
+      margin: 0 auto;
+    }
+
+    &__submenu {
+      margin-bottom: $medium-spacing;
+      margin-left: -$medium-spacing;
+    }
+  }
+
+  .profile-submenu {
+    &__item {
+      font-family: $sans-serif-font-family;
+      font-size: toRem(14px);
+    }
+  }
 
 </style>
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 1f35450f..695b1e92 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -64,8 +64,17 @@ const routes = [
       {path: 'topic/:topicSlug', component: topic, meta: {subnavigation: true}}
     ]
   },
-  {path: '/me', name: 'profile', component: profilePage},
-  {path: '/password-change', name: 'pw-change', component: passwordChange},
+  {
+    path: '/me',
+    name: 'profile',
+    component: profilePage,
+    meta: {
+      isProfile: true
+    },
+    children: [
+      {path: 'password-change', name: 'pw-change', component: passwordChange, meta: {isProfile: true}}
+    ]
+  },
   {path: '*', component: p404}
 ];
 
diff --git a/client/src/styles/_top-navigation.scss b/client/src/styles/_top-navigation.scss
new file mode 100644
index 00000000..4c93a283
--- /dev/null
+++ b/client/src/styles/_top-navigation.scss
@@ -0,0 +1,15 @@
+.top-navigation {
+  display: flex;
+
+  &__link {
+    font-size: 1.0625rem;
+    padding: 0 24px;
+    font-family: $sans-serif-font-family;
+    font-weight: $font-weight-regular;
+    color: $color-grey;
+
+    &--active {
+      color: $color-brand;
+    }
+  }
+}
diff --git a/client/src/styles/main.scss b/client/src/styles/main.scss
index 0f8be63b..87f9760f 100644
--- a/client/src/styles/main.scss
+++ b/client/src/styles/main.scss
@@ -13,3 +13,4 @@
 @import "objective-group";
 @import "article";
 @import "actions";
+@import "top-navigation";
diff --git a/server/users/serializers.py b/server/users/serializers.py
index 4b424eff..9a9b0cee 100644
--- a/server/users/serializers.py
+++ b/server/users/serializers.py
@@ -40,9 +40,6 @@ def validate_old_new_password(value):
 
 def validate_strong_email(password):
 
-    if len(password) == 0:
-        return password
-
     has_number = re.search('\d', password)
     has_upper = re.search('[A-Z]', password)
     has_lower = re.search('[a-z]', password)