Merge branch 'Settings-and-userinfo' into 'master'

Settings and Userinfo pages

See merge request me00531/group23_com2027!5

src/pages/Settings.vue

+<template lang='pug'>
+.q-pa-md.row.justify-center.full-width
+  div(style='max-width: 1000px')
+    q-title.text-h4 Settings
+    q-list(bordered, padding)
+      q-item-label(header) User Controls
+      q-item(clickable, v-ripple)
+        q-item-section
+          q-item-label Password
+          q-item-label(caption) Change your Password
+      q-separator(spaced)
+      q-item-label(header) General
+      q-item(tag='label', v-ripple)
+        q-item-section(side, top)
+          q-checkbox(v-model='check1')
+        q-item-section
+          q-item-label Notifications
+          q-item-label(caption) Notify me about updates
+      q-item(tag='label', v-ripple)
+        q-item-section(side, top)
+          q-checkbox(v-model='check2')
+        q-item-section
+          q-item-label Dark Mode
+          q-item-label(caption) Turn on Darkmode
+      q-separator(spaced)
+        q-item-label(header) Notifications
+        q-item(tag='label', v-ripple)
+        q-item-section
+          q-item-label Battery too low
+        q-item-section(side)
+          q-toggle(color='blue', v-model='notif1', val='battery')
+      q-item(tag='label', v-ripple)
+        q-item-section
+          q-item-label Friend request
+          q-item-label(caption) Allow notification
+        q-item-section(side, top)
+          q-toggle(color='green', v-model='notif2', val='friend')
+      q-separator(spaced)
+      q-item-label(header) Other settings
+      q-item
+        q-item-section(side)
+          q-icon(color='deep-orange', name='brightness_medium')
+        q-item-section
+          q-slider(v-model='brightness', :min='0', :max='10', label, color='deep-orange')
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      check1: true,
+      check2: false,
+      notif2: true,
+      brightness: 3
+    }
+  }
+}
+</script>
\ No newline at end of file

src/pages/UserInfo.vue

+<template lang='pug'>
+.q-pa-lg(style='max-width: 1024px')
+  .row.justify-center.q-pb-md
+    q-btn.bg-grey-2.fixed-top-left.q-ma-sm(@click='$router.go(-1)', icon='arrow_back', label='Back')
+    q-avatar(size='9em')
+      img(
+        src='https://avataaars.io/?avatarStyle=Circle&topType=Eyepatch&facialHairType=Blank&clotheType=ShirtVNeck&clotheColor=Pink&eyeType=Squint&eyebrowType=AngryNatural&mouthType=Default&skinColor=Light'
+      )
+  q-input.q-pb-md(v-model='name', label='Full Name', stack-label, :readonly='isEditing')
+  q-input.q-pb-md(v-model='username', label='Username', stack-label, :readonly='isEditing')
+  q-input.q-pb-md(v-model='password', label='Password', stack-label, :readonly='isEditing')
+  q-input.q-pb-md(v-model='email', label='Email', stack-label, :readonly='isEditing')
+  q-input.q-pb-md(v-model='phone', label='Phone Number', stack-label, :readonly='isEditing')
+  q-input.q-pb-lg(v-model='date', mask='date', :rules='["date"]', label='Date of Birth', :readonly='isEditing')
+    template(v-slot:append)
+      q-icon.cursor-pointer(name='event')
+        q-menu
+          q-date(v-model='date', :disable='isEditing')
+  .text-subtitle1.text-grey-9.q-pb-sm Gender:
+    q-radio.q-pr-sm.q-ml-md(v-model='gender', val='male', label='Male', color='cyan', :disable='isEditing')
+    q-radio.q-pr-sm(v-model='gender', val='female', label='Female', color='pink', :disable='isEditing')
+    q-radio.q-pr-sm(v-model='gender', val='other', label='Other', color='accent', :disable='isEditing')
+  q-input.q-pb-xl(
+    v-model='description',
+    label='Description',
+    stack-label='',
+    autogrow='',
+    :readonly='editing ? false : true'
+  )
+  div
+    q-btn(@click='editing = !editing', color='blue', icon='mode_edit', label='Edit')
+    q-btn.float-right(icon='save', color='green', label='save')
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      name: 'Eric Sauce',
+      username: 'Er1csauce',
+      password: 'Er1csauce14',
+      email: 'ek00722@surrey.ac.uk',
+      phone: '0123456789',
+      date: '2019/02/01',
+      gender: 'Male',
+      description: 'Very hot lad',
+      editing: false
+    }
+  },
+
+  computed: {
+    isEditing() {
+      return this.editing ? false : true
+    }
+  }
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file

src/router/routes.js

@@ -16,6 +16,7 @@ const routes = [
   },
   { path: '/auth', component: () => import( 'pages/Auth.vue')},
   { path: '/userinfo', component: () => import( 'pages/UserInfo.vue')},
+  { path: '/settings', component: () => import( 'pages/Settings.vue')},
   // Always leave this as last one,
   // but you can also remove it
   {