├── .gitignore
├── README.md
├── babel.config.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
    ├── .htaccess
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── Avatar.png
    │   ├── LoginBackground.jpeg
    │   ├── a.png
    │   ├── about.png
    │   ├── chat.png
    │   ├── h.png
    │   ├── logo.png
    │   ├── sara.png
    │   └── team-1.png
    ├── components
    │   ├── PostDetailsDialog.vue
    │   ├── SideBar.vue
    │   └── search
    │   │   └── SearchFilters.vue
    ├── main.js
    ├── plugins
    │   ├── event-bus.js
    │   ├── store.js
    │   ├── vue-axios.js
    │   ├── vue-moment.js
    │   └── vuetify.js
    ├── router
    │   └── index.js
    └── views
    │   ├── Boards.vue
    │   ├── ChatRoom.vue
    │   ├── Community.vue
    │   ├── Login.vue
    │   ├── Profile.vue
    │   ├── Search.vue
    │   └── Settings.vue
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # usm
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ## TODO
24 | - ~~Boards (Mohammad & Nour)~~
25 | - ~~Profile (Wajd)~~
26 | - ~~Settings (Raneem & Katy)~~
27 | - Chat (Taiseer & Solieman)
28 | - Search (Firas & Khaled)
29 | - Login/Signup (Ahmad & Abdallah)
30 | 
31 | ### Customize configuration
32 | See [Configuration Reference](https://cli.vuejs.org/config/).
33 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |     "compilerOptions": {
3 |       "baseUrl": ".",
4 |       "paths": {
5 |         "@/*": ["./src/*"],
6 |       }
7 |     },
8 |     "exclude": ["node_modules", "dist"]
9 |   }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "usm",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.21.1",
12 |     "core-js": "^3.6.5",
13 |     "pluralize": "^8.0.0",
14 |     "vue": "^2.6.11",
15 |     "vue-axios": "^3.2.2",
16 |     "vue-moment": "^4.1.0",
17 |     "vue-router": "^3.2.0",
18 |     "vue-scroll-loader": "^2.2.0",
19 |     "vuetify": "^2.2.11",
20 |     "vuex": "^3.6.0"
21 |   },
22 |   "devDependencies": {
23 |     "@vue/cli-plugin-babel": "~4.5.0",
24 |     "@vue/cli-plugin-eslint": "~4.5.0",
25 |     "@vue/cli-plugin-router": "^4.5.9",
26 |     "@vue/cli-service": "~4.5.0",
27 |     "babel-eslint": "^10.1.0",
28 |     "eslint": "^6.7.2",
29 |     "eslint-plugin-vue": "^6.2.2",
30 |     "sass": "^1.19.0",
31 |     "sass-loader": "^8.0.0",
32 |     "vue-cli-plugin-vuetify": "~2.0.9",
33 |     "vue-template-compiler": "^2.6.11",
34 |     "vuetify-loader": "^1.3.0"
35 |   },
36 |   "eslintConfig": {
37 |     "root": true,
38 |     "env": {
39 |       "node": true
40 |     },
41 |     "extends": [
42 |       "plugin:vue/essential",
43 |       "eslint:recommended"
44 |     ],
45 |     "parserOptions": {
46 |       "parser": "babel-eslint"
47 |     },
48 |     "rules": {}
49 |   },
50 |   "browserslist": [
51 |     "> 1%",
52 |     "last 2 versions",
53 |     "not dead"
54 |   ]
55 | }
56 | 


--------------------------------------------------------------------------------
/public/.htaccess:
--------------------------------------------------------------------------------
1 | <IfModule mod_rewrite.c>
2 |   RewriteEngine On
3 |   RewriteBase /
4 |   RewriteRule ^index\.html$ - [L]
5 |   RewriteCond %{REQUEST_FILENAME} !-f
6 |   RewriteCond %{REQUEST_FILENAME} !-d
7 |   RewriteRule . /index.html [L]
8 | </IfModule>


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RoduanKD/Frontend-05-USM-project/704ed6fd28a857cb0b8da839d806217168f2036d/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 8 |     <title>USM - University Social Media</title>
 9 |     <link
10 |       rel="stylesheet"
11 |       href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
12 |     />
13 |     <link
14 |       rel="stylesheet"
15 |       href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"
16 |     />
17 |   </head>
18 |   <body>
19 |     <noscript>
20 |       <strong
21 |         >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
22 |         properly without JavaScript enabled. Please enable it to
23 |         continue.</strong
24 |       >
25 |     </noscript>
26 |     <div id="app"></div>
27 |     <!-- built files will be auto injected -->
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <v-app-bar
 4 |       color="primary"
 5 |       dark
 6 |       app
 7 |       v-if="mini"
 8 |     >
 9 |       <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
10 |       <v-app-bar-title>USM - University Social Media</v-app-bar-title>
11 |     </v-app-bar>
12 |     <side-bar :drawer="drawer"></side-bar>
13 |     <v-main>
14 |       <router-view></router-view>
15 |     </v-main>
16 |   </v-app>
17 | </template>
18 | 
19 | <script>
20 | import SideBar from "@/components/SideBar";
21 | 
22 | export default {
23 |   name: "App",
24 | 
25 |   components: {
26 |     SideBar,
27 |   },
28 | 
29 |   data () {
30 |     return {
31 |       drawer: !this.mini
32 |     }
33 |   },
34 | 
35 |   computed: {
36 |     mini () {
37 |       return this.$vuetify.breakpoint.mdAndDown;
38 |     }
39 |   }
40 | };
41 | </script>
42 | 


--------------------------------------------------------------------------------
/src/assets/Avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RoduanKD/Frontend-05-USM-project/704ed6fd28a857cb0b8da839d806217168f2036d/src/assets/Avatar.png


--------------------------------------------------------------------------------
/src/assets/LoginBackground.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RoduanKD/Frontend-05-USM-project/704ed6fd28a857cb0b8da839d806217168f2036d/src/assets/LoginBackground.jpeg


--------------------------------------------------------------------------------
/src/assets/a.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RoduanKD/Frontend-05-USM-project/704ed6fd28a857cb0b8da839d806217168f2036d/src/assets/a.png


--------------------------------------------------------------------------------
/src/assets/about.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RoduanKD/Frontend-05-USM-project/704ed6fd28a857cb0b8da839d806217168f2036d/src/assets/about.png


--------------------------------------------------------------------------------
/src/assets/chat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RoduanKD/Frontend-05-USM-project/704ed6fd28a857cb0b8da839d806217168f2036d/src/assets/chat.png


--------------------------------------------------------------------------------
/src/assets/h.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RoduanKD/Frontend-05-USM-project/704ed6fd28a857cb0b8da839d806217168f2036d/src/assets/h.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RoduanKD/Frontend-05-USM-project/704ed6fd28a857cb0b8da839d806217168f2036d/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/sara.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RoduanKD/Frontend-05-USM-project/704ed6fd28a857cb0b8da839d806217168f2036d/src/assets/sara.png


--------------------------------------------------------------------------------
/src/assets/team-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RoduanKD/Frontend-05-USM-project/704ed6fd28a857cb0b8da839d806217168f2036d/src/assets/team-1.png


--------------------------------------------------------------------------------
/src/components/PostDetailsDialog.vue:
--------------------------------------------------------------------------------
 1 | <template>	
 2 |   <v-dialog v-model="dialog" transition="dialog-bottom-transition" max-width="80%">	
 3 |     <v-card	
 4 |       class="mx-auto"	
 5 |     >	
 6 |       <v-img	
 7 |         class="white--text align-end"	
 8 |         height="200px"	
 9 |         :src="item.attach"	
10 |       >	
11 |       </v-img>	
12 |       <v-row class="ma-0">	
13 |         <v-col cols="8" class="pa-0">	
14 |           <v-card-title>{{ item.title }}</v-card-title>	
15 |           <v-card-subtitle class="pb-0">	
16 |             {{ item.created_at | moment("from", "now") }}	
17 |           </v-card-subtitle>	
18 |         </v-col>	
19 |         <v-col cols="2" class="pa-0" max-width="98px">	
20 |           <v-avatar size="98" class="community-card-avatar">	
21 |           <img	
22 |             alt="user"	
23 |             :src="item.userImage"	
24 |           >	
25 |         </v-avatar>	
26 |         </v-col>	
27 |       </v-row>	
28 | 
29 |       <v-card-text class="text--primary">	
30 |         <div>	
31 |           {{ item.value }}	
32 |         </div>	
33 |         <v-icon color="red" class="mr-1">	
34 |           mdi-heart	
35 |         </v-icon>	
36 |         <span class="subheading mr-2">{{ item.likeCount }}</span>	
37 |         <v-icon color="primary" class="mr-1">	
38 |           mdi-comment	
39 |         </v-icon>	
40 |         <span class="subheading">{{ item.commentCount }}</span>	
41 |         <v-list three-line>	
42 |           <template v-for="i in item.commentsInfo">	
43 |             <v-list-item	
44 |               :key="i.userName"	
45 |             >	
46 |               <!-- Backend should add avatar link -->	
47 |               <!-- <v-list-item-avatar>	
48 |                 <v-img :src="item.avatar"></v-img>	
49 |               </v-list-item-avatar> -->	
50 | 
51 |               <v-list-item-content>	
52 |                 <v-list-item-title v-html="i.userName"></v-list-item-title>	
53 |                 <v-list-item-subtitle v-html="i.value"></v-list-item-subtitle>	
54 |               </v-list-item-content>	
55 |             </v-list-item>	
56 |           </template>	
57 |         </v-list>	
58 |       </v-card-text>	
59 | 
60 |     </v-card>	
61 |   </v-dialog>	
62 | </template>	
63 | 
64 | <script>	
65 |   export default {	
66 |     props: [	
67 |       'post'	
68 |     ],	
69 |     data: () => ({	
70 |       item: {},	
71 |       dialog: false,	
72 |     }),	
73 |     mounted () {	
74 |       const self = this	
75 |       self.$eventBus.$on('TOGGLE_DIALOG', function () {	
76 |         self.dialog = !self.dialog	
77 |       })	
78 |       self.item = self.post	
79 |     },	
80 |     watch: {	
81 |       post (v) {	
82 |         this.item = v	
83 |       },	
84 |     }	
85 |   }	
86 | </script>


--------------------------------------------------------------------------------
/src/components/SideBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-navigation-drawer  
 3 |        color="primary" :value="drawer" dark app>
 4 |       <template v-slot:prepend>
 5 |         <v-list-item two-line>
 6 |           <v-list-item-avatar>
 7 |             <img src="@/assets/logo.png">
 8 |           </v-list-item-avatar>
 9 | 
10 |           <v-list-item-content>
11 |             <v-list-item-title>USM University</v-list-item-title>
12 |           </v-list-item-content>
13 |         </v-list-item>
14 |       </template>
15 | 
16 |       <v-divider></v-divider>
17 | 
18 |       <v-list
19 |         dense
20 |         nav
21 |       >
22 |         <v-list-item-group
23 |         >
24 |         <v-list-item
25 |           v-for="item in items"
26 |           :key="item.title"
27 |           :to="item.link"
28 |           link
29 |           exact
30 |         >
31 |           <v-list-item-icon>
32 |             <v-icon>{{ item.icon }}</v-icon>
33 |           </v-list-item-icon>
34 | 
35 |           <v-list-item-content>
36 |             <v-list-item-title>{{ item.title }}</v-list-item-title>
37 |           </v-list-item-content>
38 |         </v-list-item>
39 |         <v-list-item v-if="!$store.getters.authenticated" :to="{ name:'Login' }">
40 |           <v-list-item-icon>
41 |             <v-icon>mdi-earth</v-icon>
42 |           </v-list-item-icon>
43 | 
44 |           <v-list-item-content>
45 |             <v-list-item-title>Login / Sign up</v-list-item-title>
46 |           </v-list-item-content>
47 |         </v-list-item>
48 |         <v-list-item v-else @click="$store.commit('logout')">
49 |           <v-list-item-icon>
50 |             <v-icon>mdi-logout</v-icon>
51 |           </v-list-item-icon>
52 | 
53 |           <v-list-item-content>
54 |             <v-list-item-title>Logout</v-list-item-title>
55 |           </v-list-item-content>
56 |         </v-list-item>
57 |         <v-list-item v-if="!$vuetify.theme.dark" @click="$vuetify.theme.dark = !$vuetify.theme.dark">
58 |           <v-list-item-icon>
59 |             <v-icon>mdi-moon-waxing-crescent</v-icon>
60 |           </v-list-item-icon>
61 | 
62 |           <v-list-item-content>
63 |             <v-list-item-title>Turn Off The Light</v-list-item-title>
64 |           </v-list-item-content>
65 |         </v-list-item>
66 |         <v-list-item v-else @click="$vuetify.theme.dark = !$vuetify.theme.dark">
67 |           <v-list-item-icon>
68 |             <v-icon color="yellow">mdi-white-balance-sunny</v-icon>
69 |           </v-list-item-icon>
70 | 
71 |           <v-list-item-content>
72 |             <v-list-item-title>Turn On The Light</v-list-item-title>
73 |           </v-list-item-content>
74 |         </v-list-item>
75 |         </v-list-item-group>
76 |       </v-list>
77 |     </v-navigation-drawer>
78 |   
79 | </template>
80 | 
81 | <script>
82 | export default {
83 |   props: {
84 |     drawer: Boolean
85 |   },
86 |   data: () => ({
87 |     items: [
88 |       { title: 'Community', icon: 'mdi-home', link: { name: 'Community' } },
89 |       { title: 'Boards', icon: 'mdi-chart-bar', link: { name: 'Boards' } },
90 |       { title: 'Chat Room', icon: 'mdi-chat' , link:{name:'ChatRoom'} },
91 |       { title: 'Profile', icon: 'mdi-account' , link: {name:'Profile'} },
92 |       { title: 'Search', icon: 'mdi-magnify' ,link: {name:'Search'} },
93 |       { title: 'Settings', icon: 'mdi-cog' ,link: {name:'Settings'} },
94 |     ],
95 |   }),
96 | }
97 | </script>


--------------------------------------------------------------------------------
/src/components/search/SearchFilters.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <v-chip
 4 |       class="ma-2"
 5 |       :input-value="getFilter('user')"
 6 |       @click="$store.commit('toggle', 'user')"
 7 |       filter
 8 |     >
 9 |       People</v-chip
10 |     >
11 |     <v-chip
12 |       class="ma-2"
13 |       :input-value="getFilter('post')"
14 |       @click="$store.commit('toggle', 'post')"
15 |       filter
16 |     >
17 |       Post</v-chip
18 |     >
19 |     <v-chip
20 |       class="ma-2"
21 |       :input-value="getFilter('board')"
22 |       @click="$store.commit('toggle', 'board')"
23 |       filter
24 |     >
25 |       Community</v-chip
26 |     >
27 |     <v-chip
28 |       class="ma-2"
29 |       :input-value="getFilter('community')"
30 |       @click="$store.commit('toggle', 'community')"
31 |       filter
32 |     >
33 |       Board</v-chip
34 |     >
35 |   </div>
36 | </template>
37 | 
38 | <script>
39 | export default {
40 |   methods: {
41 |     getFilter (target) {
42 |       return this.$store.getters.searchPage(target)
43 |     }
44 |   }
45 | }
46 | </script>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import vuetify from './plugins/vuetify'
 5 | import './plugins/vue-axios'
 6 | import './plugins/vue-moment'
 7 | import EventBus from './plugins/event-bus'	
 8 | import store from './plugins/store'	
 9 | 
10 | 
11 | Vue.use(EventBus)
12 | 
13 | Vue.config.productionTip = false
14 | 
15 | new Vue({
16 |   router,
17 |   vuetify,
18 |   store,
19 |   render: h => h(App)
20 | }).$mount('#app')
21 | 
22 | 
23 | 
24 | 
25 | 


--------------------------------------------------------------------------------
/src/plugins/event-bus.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'	
 2 | 
 3 | const EventBus = new Vue()	
 4 | 
 5 | export default {	
 6 | 
 7 |   install (Vue) {	
 8 |     Vue.prototype.$eventBus = EventBus	
 9 |   }	
10 | }


--------------------------------------------------------------------------------
/src/plugins/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | const store = new Vuex.Store({
 7 |   state: {
 8 |     loggedIn: false,
 9 |     user: null,
10 |     search: {
11 |       user: true,
12 |       post: true,
13 |       board: true,
14 |       community: true,
15 |     }
16 |   },
17 |   getters: {
18 |     searchPage: (state) => (target) => {
19 |       return state.search[target]
20 |     },
21 |     authenticated: (state) => state.user
22 |   },
23 |   mutations: {
24 |     login(state, user) {
25 |       state.user = user
26 |     },
27 |     logout(state) {
28 |       state.user = null
29 |     },
30 |     toggle(state, target) {
31 |       state.search[target] = !state.search[target]
32 |     }
33 | 
34 |   }
35 | })
36 | 
37 | export default store


--------------------------------------------------------------------------------
/src/plugins/vue-axios.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import axios from 'axios'
 3 | import VueAxios from 'vue-axios'
 4 | 
 5 | const instance = axios.create({
 6 |   baseURL: 'http://syberctf.hadara-group.com:8080',
 7 |   // baseURL: 'http://192.168.43.187:8080'
 8 | })
 9 | 
10 | Vue.use(VueAxios, instance)


--------------------------------------------------------------------------------
/src/plugins/vue-moment.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueMoment from 'vue-moment'
3 | 
4 | Vue.use(VueMoment)


--------------------------------------------------------------------------------
/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Vuetify from 'vuetify/lib/framework';
 3 | 
 4 | Vue.use(Vuetify);
 5 | 
 6 | export default new Vuetify({
 7 |   theme: {
 8 |     themes: {
 9 |       light: {
10 |         primary: '#3c3b54',
11 |         secondary: '#a3a0fb',
12 |         accent: '#a5a4bf',
13 |       },
14 |       dark: {
15 |         primary: '#3c3b54',
16 |         background: 'colors.indigo.base',
17 |         
18 |       },
19 |     },
20 |   },
21 | });


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import Community from '../views/Community.vue'
 4 | import store from '../plugins/store'
 5 | 
 6 | 
 7 | 
 8 | Vue.use(VueRouter)
 9 | 
10 | const routes = [
11 |   {
12 |     // w
13 |     path: '/',
14 |     name: 'Community',
15 |     component: Community
16 |   },
17 | 
18 |   {
19 |     path: '/boards',
20 |     name: 'Boards',
21 |     component: () => import('../views/Boards.vue')
22 |   },
23 |   {
24 |     path: '/profile',
25 |     name: 'Profile',
26 |     component: () => import('../views/Profile.vue')
27 |   },
28 |   {
29 |     path: '/chatroom',
30 |     name: 'ChatRoom',
31 |     component: () => import('../views/ChatRoom.vue')
32 |   },
33 |   {
34 |     path: '/login',
35 |     name: 'Login',
36 |     component: () => import('../views/Login.vue')
37 |   },
38 |   {
39 |     path: '/settings',
40 |     name: 'Settings',
41 |     component: () => import('../views/Settings.vue')
42 |   },
43 |   {
44 |     path: '/search',
45 |     name: 'Search',
46 |     component: () => import('../views/Search.vue')
47 |   }
48 | ]
49 | 
50 | const router = new VueRouter({
51 |   mode: 'history',
52 |   base: process.env.BASE_URL,
53 |   routes
54 | })
55 | 
56 | router.beforeEach((to, from, next) => {
57 |   if (to.name !== 'Login' && !store.state.user) {
58 |     to = ({ name: 'Login', query: { redirect: to.path } })
59 |     next(to)
60 |   }
61 |   else next()
62 | })
63 | 
64 | export default router
65 | 
66 | 


--------------------------------------------------------------------------------
/src/views/Boards.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-card :color="$vuetify.theme.dark ? 'lightblack' : 'primary'">
  3 |     <!-- start in toolbar -->
  4 |     <v-toolbar color="primary" dark>
  5 |       <v-toolbar-title>Boards</v-toolbar-title>
  6 |       <v-spacer></v-spacer>
  7 |       <v-btn  @click="$router.push({ name: 'Search' })">
  8 |         <v-icon>mdi-magnify</v-icon>
  9 |       </v-btn>
 10 | 
 11 |       <template v-slot:extension>
 12 |         <v-tabs v-model="model" centered color="white" slider-color="white">
 13 |           <v-tab dark v-for="(item, i) in items" :key="item.id" :href="`#tab-${i}`">
 14 |             {{ item.name }}
 15 |           </v-tab>
 16 |         </v-tabs>
 17 |       </template>
 18 |     </v-toolbar>
 19 |     <!-- end in toolbar -->
 20 | 
 21 |     <!-- srart in board tap -->
 22 |     <v-tabs-items v-model="model">
 23 |       <v-tab-item v-for="(item, i) in items" :key="i" :value="`tab-${i}`">
 24 |         <!-- start in hero -->
 25 |         <v-container  :color="$vuetify.theme.dark ? 'lightblack' : ' #EEE9F6'" :class="$vuetify.theme.dark ? '' : 'photo'">
 26 |           <div>
 27 |             <v-row align="center">
 28 |               <v-col cols="6">
 29 |                 <v-img mt="-10" height="388px" src="../assets/about.png">
 30 |                 </v-img>
 31 |               </v-col>
 32 |               <v-col cols="6"  >
 33 |                 <h1   class="text-center text-primary">{{ item.description }}</h1>
 34 |                 <h6  class="text-center">
 35 |                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
 36 |                   do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 37 |                   Ut enim ad minim veniam, quis nostrud exercitation ullamco
 38 |                   laboris nisi ut aliquip ex ea commodo consequatLorem ipsum
 39 |                   dolor sit amet, consectetur adipiscing elit, sed do eiusmod
 40 |                   tempor incididunt ut labore et dolore magna aliquaLorem ipsum
 41 |                   dolor sit amet, consectetur adipiscing elit, sed do eiusmod
 42 |                   tempor incididunt ut labore et dolore magna aliquaLorem ipsum
 43 |                   dolor sit amet, consectetur adipiscing elit, sed do eiusmod
 44 |                   tempor incididunt ut labore et dolore magna aliqua.
 45 |                 </h6>
 46 |               </v-col>
 47 |             </v-row>
 48 |           </div>
 49 |         </v-container>
 50 |         <!-- end in hero -->
 51 | 
 52 |         <!-- start in title -->
 53 |         <v-container>
 54 |           <h1   class="text-center">
 55 |             University LeaderShips
 56 |           </h1>
 57 |           <v-divider id="divi"></v-divider>
 58 |         </v-container>
 59 |         <!-- end in title -->
 60 | 
 61 |         <!-- start in slider -->
 62 |         <v-container>
 63 |           <v-carousel
 64 |             cycle
 65 |             height="300"
 66 |             hide-delimiter-background
 67 |             hide-delimiters
 68 |             show-arrows-on-hover
 69 |           >
 70 |             <v-carousel-item
 71 |               v-for="s in Math.ceil(leaders.length / slideSize)"
 72 |               :key="s"
 73 |             >
 74 |               <v-col cols="12">
 75 |                 <v-row class="fill-height">
 76 |                   <v-col
 77 |                     v-for="leader in giveMeTheSlicedArray(s)"
 78 |                     :key="leader"
 79 |                     :cols="mini ? 6 : 3"
 80 |                   >
 81 |                     <v-hover v-slot="{ hover }">
 82 |                       <v-card color="secondary" class="mx-auto" max-width="360">
 83 |                         <v-img
 84 |                           :aspect-ratio="16 / 9"
 85 |                           src="~@/assets/team-1.png"
 86 |                           height="200px"
 87 |                         >
 88 |                           <v-expand-transition>
 89 |                             <div
 90 |                               v-if="hover"
 91 |                               class="d-flex transition-fast-in-fast-out black darken-2 v-card--reveal display-3 white--text"
 92 |                               style="height: 100%"
 93 |                             >
 94 |                               <v-btn dark color="primary"  @click="$router.push({ name: 'ChatRoom' })"> Chat </v-btn>
 95 |                             </div>
 96 |                           </v-expand-transition></v-img
 97 |                         >
 98 | 
 99 |                         <v-card-title> NOOUR </v-card-title>
100 | 
101 |                         <v-card-subtitle> COMPUTER ENG </v-card-subtitle>
102 |                       </v-card>
103 |                     </v-hover>
104 |                   </v-col>
105 |                 </v-row>
106 |               </v-col>
107 |             </v-carousel-item>
108 |           </v-carousel>
109 |         </v-container>
110 |         <!-- end in slider -->
111 | 
112 |         <!-- start in box -->
113 |         <v-container v-if="item.scholarship ? item.scholarship.length : false">
114 |           <!-- start in title2 -->
115 |           <h1   class="text-center">
116 |             Scholar <span style="color: #836ea9"> Ships</span>
117 |           </h1>
118 |           <v-divider id="divi"></v-divider>
119 |           <!-- start in title2 -->
120 |           <v-col cols="12">
121 |             <v-row>
122 |               <v-col v-for="(scholar, i) in item.scholarship" :key="i" cols="6">
123 |                 <v-hover close-delay="6" v-slot="{ hover }">
124 |                   <v-sheet
125 |                     :color="hover ? '#D4C8EB' : ''"
126 |                     class="pa-4 hover-in-sheet"
127 |                     :elevation="hover ? 14 : 2"
128 |                     :class="{ 'on-hover': hover }"
129 |                     height="400"
130 |                     shaped
131 |                   >
132 |                     <h1 class="text-center">{{ scholar.title }}</h1>
133 |                     <h3>
134 |                       expiration date:
135 |                       {{ scholar.expiredDate | moment("from", "now") }}
136 |                     </h3>
137 |                     <p>
138 |                       Lorem, ipsum dolor sit amet consectetur adipisicing elit.
139 |                       Ad nam natus culpa debitis voluptate ab sequi iste rem
140 |                       consequatur aperiam praesentium consequuntur illo, aliquam
141 |                       saepe tenetur dolorem quo distinctio perspiciatis?
142 |                     </p>
143 |                     <v-img src="~@/assets/a.png"></v-img>
144 |                   </v-sheet>
145 |                 </v-hover>
146 |               </v-col>
147 |               <!-- <v-col cols="6">
148 |                 <v-hover close-delay="6" v-slot="{ hover }">
149 |                   <v-sheet
150 |                     :color="hover ? '#FFCCCC' : ''"
151 |                     class="pa-4 hover-in-sheet"
152 |                     :elevation="hover ? 14 : 2"
153 |                     :class="{ 'on-hover': hover }"
154 |                     height="400"
155 |                     shaped
156 |                   >
157 |                     <h1 class="text-center">hooland school</h1>
158 |                     <p>
159 |                       Lorem ipsum dolor sit amet consectetur adipisicing elit.
160 |                       Odit voluptatibus iste totam officia? Delectus incidunt
161 |                       nemo dolores fuga, est, ea quisquam facilis ut animi
162 |                       iusto, adipisci quibusdam quae at vitae!
163 |                     </p>
164 |                     <v-img src="~@/assets/h.png"></v-img>
165 |                   </v-sheet>
166 |                 </v-hover>
167 |               </v-col> -->
168 |             </v-row>
169 |           </v-col>
170 |         </v-container>
171 |         <!-- end in box -->
172 | 
173 |         <!-- start in title3 -->
174 |         <v-container>
175 |           <h1  class="text-center">University Elites</h1>
176 |           <v-divider id="divi"></v-divider>
177 |         </v-container>
178 |         <!-- end in title3 -->
179 | 
180 |         <!-- start in card in people -->
181 |         <v-container>
182 |           <v-hover close-delay="6" v-slot="{ hover }">
183 |             <v-card
184 |               class="mx-auto pa-4 hover-in-sheet"
185 |               :elevation="hover ? 14 : 2"
186 |               :class="{ 'on-hover': hover }"
187 |               max-width="344"
188 |             >
189 |               <v-img src="~@/assets/sara.png" height="200px"></v-img>
190 | 
191 |               <v-card-title   class="justify-center">
192 |                 sara jack
193 |               </v-card-title>
194 | 
195 |               <v-card-subtitle class="text-center"> GBA:100% </v-card-subtitle>
196 | 
197 |               <v-card-actions>
198 |                 <v-btn class="mx-auto" icon @click="show = !show">
199 |                   <v-icon>{{
200 |                     show ? "mdi-chevron-up" : "mdi-chevron-down"
201 |                   }}</v-icon>
202 |                 </v-btn>
203 |               </v-card-actions>
204 | 
205 |               <v-expand-transition>
206 |                 <div v-show="show">
207 |                   <v-card-text> graduated from damas university </v-card-text>
208 |                 </div>
209 |               </v-expand-transition>
210 |             </v-card>
211 |           </v-hover>
212 |         </v-container>
213 |         <!-- end in card in people -->
214 | 
215 |         <!-- start in fotters -->
216 |         <v-container>
217 |           <v-footer padless>
218 |             <v-col class="text-center" cols="12">
219 |               {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
220 |             </v-col>
221 |           </v-footer>
222 |           <!-- end in fotters -->
223 |         </v-container>
224 |       </v-tab-item>
225 |     </v-tabs-items>
226 |   </v-card>
227 | </template>
228 | 
229 | <style  scoped>
230 | .photo {
231 |   background-color: #EEE9F6 !important;
232 | }
233 | #divi {
234 |   max-height: 200px !important;
235 |   height: 3px;
236 |   width: 150px !important;
237 |   background-color: #b39ddb !important;
238 |   margin: 0 auto !important;
239 | }
240 | 
241 | .v-card--reveal {
242 |   align-items: center;
243 |   bottom: 0;
244 |   justify-content: center;
245 |   opacity: 0.5;
246 |   position: absolute;
247 |   width: 100%;
248 | }
249 | </style>
250 | 
251 | 
252 | <script>
253 | export default {
254 |   data() {
255 |     return {
256 |       items: [],
257 |       icons: ["mdi-facebook", "mdi-twitter", "mdi-linkedin", "mdi-instagram"],
258 |       show: false,
259 |       model: "tab-0",
260 |       message:
261 |         '<h1 style="color:#8D79B4;">"the place we call home inspires us to discover whats is next"</h1>',
262 |       slides: [1, 2, 3, 4],
263 |       leaders: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], // 10
264 |     };
265 |   },
266 |   computed: {
267 |     mini () {
268 |       return this.$vuetify.breakpoint.mdAndDown;
269 |     },
270 |     slideSize () {
271 |       return this.mini ? 2 : 4
272 |     }
273 |   },
274 |   methods: {
275 |     giveMeTheSlicedArray(s) {
276 |       return this.leaders.slice((s - 1) * this.slideSize, (s - 1) * this.slideSize + this.slideSize);
277 |     },
278 |   },
279 |   mounted() {
280 |     const self = this;
281 |     self.axios
282 |       .get(`/boards/boardbyuserid/${self.$store.getters.authenticated.id}`)
283 |       .then((res) => {
284 |         self.items = res.data;
285 |       });
286 |   },
287 | };
288 | </script>


--------------------------------------------------------------------------------
/src/views/ChatRoom.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="chatroom">
3 |     <h1>This is a chatroom page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/views/Community.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-container>
  3 |     <v-row>
  4 |       <v-col cols="12" sm="6" md="4" v-for="(item, i) in items" :key="item.id">
  5 |         <v-card class="mx-auto">
  6 |           <v-img
  7 |             class="white--text align-end"
  8 |             height="200px"
  9 |             :src="item.attach"
 10 |           >
 11 |           </v-img>
 12 |           <v-row class="ma-0">
 13 |             <v-col cols="8" class="pa-0">
 14 |               <v-card-title>{{ item.title }}</v-card-title>
 15 |               <v-card-subtitle class="pb-0">
 16 |                 {{ item.created_at | moment("from", "now") }}
 17 |               </v-card-subtitle>
 18 |             </v-col>
 19 |             <v-col cols="2" class="pa-0" max-width="98px">
 20 |               <v-avatar size="98" class="community-card-avatar">
 21 |                 <img alt="user" :src="item.userImage" />
 22 |               </v-avatar>
 23 |             </v-col>
 24 |           </v-row>
 25 | 
 26 |           <v-card-text class="text--primary">
 27 |             <div>
 28 |               {{
 29 |                 item.value ? 
 30 |                 (item.value.length > 40
 31 |                   ? item.value.substr(0, 40) + " ..."
 32 |                   : item.value) : ''
 33 |               }}
 34 |             </div>
 35 |           </v-card-text>
 36 | 
 37 |           <v-card-actions>
 38 |             <v-btn color="orange" text @click="openDialog(i)">
 39 |               Read More
 40 |             </v-btn>
 41 |             <v-row align="center" justify="end">
 42 |               <v-col cols="6">
 43 |                 <v-icon color="red" class="mr-1"> mdi-heart </v-icon>
 44 |                 <span class="subheading mr-2">{{ item.likeCount }}</span>
 45 |                 <v-icon color="primary" class="mr-1"> mdi-comment </v-icon>
 46 |                 <span class="subheading">{{ item.commentCount }}</span>
 47 |               </v-col>
 48 |             </v-row>
 49 |           </v-card-actions>
 50 |         </v-card>
 51 |       </v-col>
 52 |       <post-details-dialog :post="item"></post-details-dialog>
 53 |       <v-dialog
 54 |       v-model="addDialog"
 55 |       persistent
 56 |       max-width="600px"
 57 |     >
 58 |       <template v-slot:activator="{ on, attrs }">
 59 |         <v-btn
 60 |         color="primary"
 61 |         elevation="2"
 62 |         fab
 63 |         fixed
 64 |         bottom
 65 |         right
 66 |         v-bind="attrs"
 67 |         v-on="on"
 68 |       >
 69 |         <v-icon>mdi-plus</v-icon>
 70 |       </v-btn>
 71 |       </template>
 72 |       <v-card>
 73 |         <v-card-title>
 74 |           <span class="headline">Add New Post</span>
 75 |         </v-card-title>
 76 |         <v-card-text>
 77 |           <v-container>
 78 |             <v-row>
 79 |               <v-col
 80 |                 cols="12"
 81 |                 sm="6"
 82 |                 md="5"
 83 |               >
 84 |                 <v-text-field
 85 |                   label="Post Title*"
 86 |                   v-model="post.title"
 87 |                   required
 88 |                 ></v-text-field>
 89 |               </v-col>
 90 |               <v-col
 91 |                 cols="12"
 92 |                 sm="6"
 93 |                 md="7"
 94 |               >
 95 |                 <v-text-field
 96 |                   v-model="post.attach"
 97 |                   label="Post Image"
 98 |                 ></v-text-field>
 99 |               </v-col>
100 |               <v-col cols="12">
101 |                 <v-textarea
102 |                   v-model="post.value"
103 |                   label="Post Content*"
104 |                   required
105 |                 ></v-textarea>
106 |               </v-col>
107 |             </v-row>
108 |           </v-container>
109 |           <small>*indicates required field</small>
110 |         </v-card-text>
111 |         <v-card-actions>
112 |           <v-spacer></v-spacer>
113 |           <v-btn
114 |             color="primary darken-1"
115 |             text
116 |             @click="addDialog = false"
117 |           >
118 |             Close
119 |           </v-btn>
120 |           <v-btn
121 |             color="orange darken-1"
122 |             text
123 |             @click="savePost"
124 |           >
125 |             Save
126 |           </v-btn>
127 |         </v-card-actions>
128 |       </v-card>
129 |     </v-dialog>
130 |     </v-row>
131 |   </v-container>
132 | </template>
133 | 
134 | <script>
135 | // @ is an alias to /src
136 | import PostDetailsDialog from '@/components/PostDetailsDialog.vue'
137 | 
138 | export default {
139 |   name: "Home",
140 |   components: {
141 |     PostDetailsDialog
142 |   },
143 |   data: () => ({
144 |     items: [],
145 |     item: {},
146 |     dialog: false,
147 |     addDialog: false,
148 |     post: {}
149 |   }),
150 |   mounted() {
151 |     const self = this
152 |     
153 |     self.fetchPosts()
154 |   },
155 |   methods: {
156 |     fetchPosts () {
157 |       const self = this
158 |       self.axios.get(`/posts/getallposts/${self.$store.getters.authenticated.id}`).then((res) => {
159 |         self.items = res.data
160 |       })
161 |     },
162 |     openDialog (index) {
163 |       this.item = this.items[index]
164 |       this.$eventBus.$emit('TOGGLE_DIALOG')
165 |     },
166 |     savePost () {
167 |       const self = this
168 | 
169 |       self.axios.post(`/posts/add/${self.$store.getters.authenticated.id}`, self.post).then(() => {
170 |         self.addDialog = false
171 |         self.fetchPosts()
172 |       })
173 |       .catch(() => {
174 |         alert('something went wrong')
175 |       })
176 |     }
177 |   }
178 | }
179 | </script>
180 | 
181 | <style>
182 | .community-card-avatar {
183 |   position: relative;
184 |   top: -49px;
185 |   border: solid 3px #ffffff;
186 |   background: #ffffff;
187 | }
188 | </style>


--------------------------------------------------------------------------------
/src/views/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="back fill-height">
  3 |     <v-container justify-center fluid fill-height>
  4 |       <v-row justify="center">
  5 |         <v-col cols="12" md="4">
  6 |           <v-card>
  7 |             <v-tabs
  8 |               color="deep-purple accent-4"
  9 |               background-color="primary"
 10 |               left
 11 |             >
 12 |               <v-tab class="white--text">SIGN IN</v-tab>
 13 |               <v-tab class="white--text">SIGN UP</v-tab>
 14 |               <v-tab-item>
 15 |                 <v-card class="mx-auto elevation-12 midcard">
 16 |                   <v-card-text class="blured">
 17 |                     <v-form
 18 |                       v-model="valid"
 19 |                       lazy-validation
 20 |                       ref="form"
 21 |                       class="py-16 px-7"
 22 |                     >
 23 |                       <v-text-field
 24 |                         name="nameemail"
 25 |                         label="Email / Username"
 26 |                         type="text"
 27 |                         v-model="user.nameemail"
 28 |                         :rules="nameemailRules"
 29 |                         required
 30 |                       ></v-text-field>
 31 |                       <v-text-field
 32 |                         name="password"
 33 |                         label="Password"
 34 |                         id="password"
 35 |                         type="password"
 36 |                         required
 37 |                         v-model="user.password"
 38 |                         :rules="passwordRules"
 39 |                       ></v-text-field>
 40 |                     </v-form>
 41 |                   </v-card-text>
 42 |                   <v-card-actions class="flex-column">
 43 |                     <v-spacer></v-spacer>
 44 |                     <v-btn color="primary" @click="loginUserInfo"
 45 |                       >Login</v-btn
 46 |                     >
 47 |                     <router-link ref="redirect" :to="$route.query.redirect ? $route.query.redirect : '/'"></router-link>
 48 |                   </v-card-actions>
 49 |                 </v-card>
 50 |               </v-tab-item>
 51 |               <v-tab-item>
 52 |                 <v-card class="mx-auto elevation-12 midcard Blured">
 53 |                   <v-card-text class="pa-12">
 54 |                     <v-form ref="form" class="py-2 pb-6">
 55 |                       <v-text-field
 56 |                         name="name"
 57 |                         label="Username"
 58 |                         type="text"
 59 |                         v-model="user.name"
 60 |                         :counter="20"
 61 |                         :rules="nameRules"
 62 |                         required
 63 |                       ></v-text-field>
 64 |                       <v-text-field
 65 |                         name="email"
 66 |                         label="Email"
 67 |                         type="email"
 68 |                         required
 69 |                         v-model="user.email"
 70 |                         :rules="emailRules"
 71 |                       ></v-text-field>
 72 |                       <v-text-field
 73 |                         class="pb-4"
 74 |                         name="password"
 75 |                         label="Password"
 76 |                         id="password"
 77 |                         type="password"
 78 |                         required
 79 |                         v-model="user.password"
 80 |                         :rules="passwordRules"
 81 |                       ></v-text-field>
 82 |                       <v-select
 83 |                         :items="specialization"
 84 |                         name="specialization"
 85 |                         label="Specialization"
 86 |                         dense
 87 |                         required
 88 |                         v-model="user.spec"
 89 |                         :rules="[(v) => !!v || 'Specialization is required']"
 90 |                       ></v-select>
 91 |                       <v-menu
 92 |                         ref="menu"
 93 |                         v-model="menu"
 94 |                         :close-on-content-click="false"
 95 |                         :return-value.sync="date"
 96 |                         transition="scale-transition"
 97 |                         offset-y
 98 |                         min-width="auto"
 99 |                       >
100 |                         <template v-slot:activator="{ on, attrs }">
101 |                           <v-text-field
102 |                             v-model="date"
103 |                             label="Choose your birthdate"
104 |                             prepend-icon="mdi-calendar"
105 |                             readonly
106 |                             v-bind="attrs"
107 |                             v-on="on"
108 |                           ></v-text-field>
109 |                         </template>
110 |                         <v-date-picker v-model="date" no-title scrollable>
111 |                           <v-spacer></v-spacer>
112 |                           <v-btn text color="primary" @click="menu = false">
113 |                             Cancel
114 |                           </v-btn>
115 |                           <v-btn
116 |                             text
117 |                             color="primary"
118 |                             @click="$refs.menu.save(date)"
119 |                           >
120 |                             OK
121 |                           </v-btn>
122 |                         </v-date-picker>
123 |                       </v-menu>
124 |                       <v-spacer></v-spacer>
125 |                       <v-menu
126 |                         ref="menu2"
127 |                         v-model="menu2"
128 |                         :close-on-content-click="false"
129 |                         :return-value.sync="date2"
130 |                         transition="scale-transition"
131 |                         offset-y
132 |                         min-width="auto"
133 |                       >
134 |                         <template v-slot:activator="{ on, attrs }">
135 |                           <v-text-field
136 |                             v-model="date2"
137 |                             label="Choose your registreation year"
138 |                             prepend-icon="mdi-calendar"
139 |                             readonly
140 |                             v-bind="attrs"
141 |                             v-on="on"
142 |                           ></v-text-field>
143 |                         </template>
144 |                         <v-date-picker v-model="date2" no-title scrollable>
145 |                           <v-spacer></v-spacer>
146 |                           <v-btn text color="primary" @click="menu2 = false">
147 |                             Cancel
148 |                           </v-btn>
149 |                           <v-btn
150 |                             text
151 |                             color="primary"
152 |                             @click="$refs.menu2.save(date2)"
153 |                           >
154 |                             OK
155 |                           </v-btn>
156 |                         </v-date-picker>
157 |                       </v-menu>
158 |                       <v-checkbox
159 |                         v-model="checkbox"
160 |                         style="margin: 0px; max-height: 50px"
161 |                         :rules="[(v) => !!v || 'You must agree to continue!']"
162 |                         label="Do you agree?"
163 |                         required
164 |                       >
165 |                         <template v-slot:label>
166 |                           <div>I agree to terms and condition</div>
167 |                         </template>
168 |                       </v-checkbox>
169 |                     </v-form>
170 |                     <v-btn
171 |                       :disabled="!valid"
172 |                       color="success"
173 |                       class="mr-4"
174 |                       @click="registerUserInfo"
175 |                     >
176 |                       Sign Up
177 |                     </v-btn>
178 | 
179 |                     <v-btn color="error" class="mr-4" @click="reset">
180 |                       Reset Form
181 |                     </v-btn>
182 |                   </v-card-text>
183 |                   <v-card-actions class="flex-column pt-0">
184 |                     <v-spacer></v-spacer>
185 |                   </v-card-actions>
186 |                 </v-card>
187 |               </v-tab-item>
188 |             </v-tabs>
189 |           </v-card>
190 |         </v-col>
191 |       </v-row>
192 |     </v-container>
193 |   </div>
194 | </template>
195 | <script>
196 | export default {
197 |   name: "Home",
198 |   components: {},
199 |   data: () => ({
200 |     user: {
201 |       email: '',
202 |       password: '',
203 |     },
204 |     valid: false,
205 |     nameemail: "",
206 |     nameemailRules: [
207 |       (v) => !!v || "Username/Email is required",
208 |       (v) => (v && v.length <= 50) || "Name must be less than 50 characters",
209 |     ],
210 |     name: "",
211 |     nameRules: [
212 |       (v) => !!v || "Name is required",
213 |       (v) => (v && v.length <= 20) || "Name must be less than 10 characters",
214 |     ],
215 |     password: "",
216 |     passwordRules: [
217 |       (v) => !!v || "Password is required",
218 |       (v) => !(v && v.length <= 8) || "Password Must be 8 Charechters or More",
219 |     ],
220 |     specialization: ["ITE", "DU"],
221 | 
222 |     email: "",
223 |     emailRules: [
224 |       (v) => !!v || "E-mail is required",
225 |       (v) => /.+@.+\..+/.test(v) || "E-mail must be valid",
226 |     ],
227 |     checkbox: false,
228 |     date: new Date().toISOString().substr(0, 10),
229 |     date2: new Date().toISOString().substr(0, 10),
230 |     menu: false,
231 |     menu2: false,
232 |   }),
233 |   mounted () {
234 |     const self = this
235 | 
236 |     self.getCommunities()
237 |   },
238 |   methods: {
239 |     validate() {
240 |       this.$refs.form.validate();
241 |     },
242 |     reset() {
243 |       this.$refs.form.reset();
244 |     },
245 |     loginUserInfo() {
246 |       const self = this;
247 |       self.validate()
248 |       self.axios
249 |         .get(
250 |           `/users/signin/${self.user.nameemail}/${self.user.password}`
251 |         )
252 |         .then((res)  => {
253 |           self.user = res.data;
254 |           if (self.user.id == -1) {
255 |             alert('wong credentials')
256 |             self.$store.commit('logout')
257 |           } else {
258 |             // Logged In Successfully
259 |             self.$store.commit('login', res.data)
260 |             self.$refs.redirect.$el.click()
261 |           }
262 |         }).catch((e) => {
263 |           alert('something went wrong')
264 |           self.$store.commit('logout')
265 |           console.log(e)
266 |         })
267 |     },
268 |     registerUserInfo() {
269 |       const self = this;
270 |       self.validate()
271 |       
272 |       const info = {
273 |         name: self.user.name,
274 |         email: self.user.email,
275 |         password: self.user.password,
276 |         university: self.user.university,
277 |         img: self.user.img,
278 |         community_name: self.user.spec,
279 |         study_year: self.user.study_year,
280 |         start_year: self.user.start_year,
281 |         age: self.user.age,
282 |       };
283 | 
284 |       self.axios
285 |         .post("/users/register", info)
286 |         .then(async (res) => {
287 |           if (self.user.id == -1) {
288 |             alert('wong credentials')
289 |             self.$store.commit('logout')
290 |           } else {
291 |             // Logged In Successfully
292 |             self.$store.commit('login', res.data)
293 |             self.$refs.redirect.$el.click()
294 | 
295 |           }
296 |         });
297 |     },
298 |     getCommunities () {
299 |       const self = this
300 | 
301 |       self.axios.get('/community/getCommunities').then((res) => {
302 |         self.specialization = res.data.map((t) => t.name)
303 |       })
304 |     }
305 |   },
306 | };
307 | </script>
308 | 
309 | <style scoped>
310 | .colortab {
311 |   color: #43425d !important ;
312 | }
313 | .midcard {
314 |   min-height: 400px;
315 | }
316 | .back {
317 |   background-image: url("~@/assets/LoginBackground.jpeg");
318 |   background-size: cover;
319 |   width: 100%;
320 |   position: relative;
321 | }
322 | .back::before {
323 |   content: '';
324 |   display: block;
325 |   position: absolute;
326 |   width: 100%;
327 |   height: 100%;
328 |   background: rgba(255, 255, 255, 0);
329 |   backdrop-filter: blur(10px);
330 | }
331 | </style>


--------------------------------------------------------------------------------
/src/views/Profile.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-container>
  3 |     <div>
  4 |       <v-btn
  5 |         @click="$router.push({ name: 'Search' })"
  6 |         class="ma-2"
  7 |         color="primary"
  8 |       >
  9 |         Click To Go Search
 10 |         <v-icon dark right> mdi-magnify </v-icon>
 11 |       </v-btn>
 12 |     </div>
 13 |     <div class="app primary lighten-4">
 14 |       <v-container class="push">
 15 |         <v-img
 16 |           class="avatar"
 17 |           :src="user.img"
 18 |           width="150"
 19 |           height="150"
 20 |         ></v-img>
 21 |         <div id="online"></div>
 22 |         <br />
 23 |         <v-form class="with">
 24 |           <v-text-field
 25 |             class="bor"
 26 |             solo
 27 |             readonly
 28 |             label="User Name"
 29 |             :value="user.name"
 30 |           ></v-text-field>
 31 |         </v-form>
 32 |         <v-form class="with">
 33 |           <v-text-field
 34 |             class="bor"
 35 |             solo
 36 |             readonly
 37 |             label="Age"
 38 |             :value="user.age | moment('from', 'now', true)"
 39 |           ></v-text-field>
 40 |         </v-form>
 41 |         <v-form class="with">
 42 |           <v-text-field
 43 |             class="bor"
 44 |             solo
 45 |             readonly
 46 |             label="Email"
 47 |             :value="user.email"
 48 |           ></v-text-field>
 49 |         </v-form>
 50 |       </v-container>
 51 |     </div>
 52 |     <div class="right">
 53 |       <v-img class="pic" src="@/assets/chat.png" width="522" height="355">
 54 |       </v-img>
 55 |       <br />
 56 |       <v-btn
 57 |         class="on"
 58 |         outlined
 59 |         color="white"
 60 |         @click="$router.push({ name: 'ChatRoom' })"
 61 |       >
 62 |         Chat
 63 |       </v-btn>
 64 |     </div>
 65 |   </v-container>
 66 | </template>
 67 | 
 68 | <script>
 69 | export default {
 70 |   computed: {
 71 |     user () {
 72 |       return this.$store.getters.authenticated
 73 |     },
 74 |   }
 75 | };
 76 | </script>
 77 | 
 78 | <style scoped>
 79 | .app {
 80 |   border-radius: 8% 8% 8% 8% / 10% 10% 10% 10%;
 81 | }
 82 | .with {
 83 |   width: 400px;
 84 | }
 85 | #online {
 86 |   width: 27px;
 87 |   height: 27px;
 88 |   background: rgb(103, 224, 103);
 89 |   border-radius: 50%;
 90 |   position: relative;
 91 |   left: 137px;
 92 |   top: -25px;
 93 | }
 94 | .on {
 95 |   width: 300px;
 96 |   height: 55px;
 97 |   background-color: #43425d;
 98 |   border: none;
 99 |   border-radius: 5% 5% 5% 5% / 50% 50% 50% 50%;
100 | }
101 | .right {
102 |   position: relative;
103 |   left: 500px;
104 |   top: -350px;
105 | }
106 | .avatar {
107 |   left: 120px;
108 | }
109 | .push {
110 |   position: relative;
111 |   left: 20px;
112 |   /* top: 90px; */
113 | }
114 | </style>


--------------------------------------------------------------------------------
/src/views/Search.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-card flat>
  3 |     <!-- Light Mode / Dark Mode Section -->
  4 |     <div class="ma-4">
  5 |       <v-card class="d-flex justify-end mb-6" flat tile>
  6 |         <v-tooltip v-if="!$vuetify.theme.dark" bottom>
  7 |           <template v-slot:activator="{ on }">
  8 |             <v-btn v-on="on" color="primary" small fab @click="darkMode">
  9 |               <v-icon class="mr-1">mdi-moon-waxing-crescent</v-icon>
 10 |             </v-btn>
 11 |           </template>
 12 |           <span>Dark Mode On</span>
 13 |         </v-tooltip>
 14 | 
 15 |         <v-tooltip v-else bottom>
 16 |           <template v-slot:activator="{ on }">
 17 |             <v-btn v-on="on" color="primary" small fab @click="darkMode">
 18 |               <v-icon color="yellow">mdi-white-balance-sunny</v-icon>
 19 |             </v-btn>
 20 |           </template>
 21 |           <span>Dark Mode Off</span>
 22 |         </v-tooltip>
 23 |       </v-card>
 24 |     </div>
 25 |     <!-- Back to Top button -->
 26 |     <v-btn
 27 |       v-scroll="onScroll"
 28 |       v-show="fab"
 29 |       fab
 30 |       dark
 31 |       fixed
 32 |       bottom
 33 |       right
 34 |       color="primary"
 35 |       @click="toTop"
 36 |     >
 37 |       <v-icon>mdi-arrow-up</v-icon>
 38 |     </v-btn>
 39 |     <v-card class="mx-auto" max-width="80%" :style="act">
 40 |       <!-- Seach Section -->
 41 |       <!------------------------------------------------------------------------- How to know how access the item input-43----------------------------------------------------->
 42 |       <v-toolbar flat color="primary" class="text-white">
 43 |         <v-text-field
 44 |           single-line
 45 |           label="search"
 46 |           v-model="keyword"
 47 |           color="white"
 48 |           v-on:keyup.enter="activateSearch"
 49 |           dark
 50 |         ></v-text-field>
 51 |         <v-btn icon>
 52 |           <v-icon color="white" @click.prevent="activateSearch"
 53 |             >mdi-magnify</v-icon
 54 |           >
 55 |         </v-btn>
 56 |         <v-btn elevation="2" @click="loadMore">Show More</v-btn>
 57 |       </v-toolbar>
 58 | 
 59 |       <!-- Filter Section -->
 60 |       <search-filters></search-filters>
 61 | 
 62 |       <!-- Show Section -->
 63 | 
 64 |       <div>
 65 |         <div class="text-center d-flex pa-3 justify-center">
 66 |           <v-btn color="primary" class="mr-2" @click="all"> all </v-btn>
 67 |           <v-btn color="primary" @click="none"> none </v-btn>
 68 |         </div>
 69 | 
 70 |         <!--User Section -->
 71 |         <div class="text-center ma-2" v-if="loading['user']">
 72 |           <v-progress-circular
 73 |             indeterminate
 74 |             color="primary"
 75 |           ></v-progress-circular>
 76 |         </div>
 77 |         <v-container
 78 |           class="grey lighten-5"
 79 |           v-if="items.user.length || items.post.length || items.community.length || items.board.length"
 80 |         >
 81 |           <v-row no-gutters>
 82 |             <!----------------------------------------------------------------------------How to justify center------------------------------------------------------------------------------------->
 83 |             <v-col cols="11" justify-center sm="11">
 84 |               <v-expansion-panels class="Panel" v-model="panel" multiple>
 85 |                 <!-- People Section -->
 86 |                 <v-expansion-panel v-if="items.user.length">
 87 |                   <v-expansion-panel-header>People</v-expansion-panel-header>
 88 |                   <v-expansion-panel-content>
 89 |                     <v-card
 90 |                       v-for="item in items.user.slice(x, y)"
 91 |                       :key="item.id"
 92 |                       width="90%"
 93 |                       class="mx-auto mt-3"
 94 |                     >
 95 |                       <v-list-item three-line>
 96 |                         <v-list-item-avatar color="primary">
 97 |                           <v-img :src="item.attach"></v-img>
 98 |                         </v-list-item-avatar>
 99 |                         <v-list-item-content>
100 |                           <v-list-item-title class="pointer">
101 |                             {{ item.name }}</v-list-item-title
102 |                           >
103 |                           <v-list-item-subtitle>{{
104 |                             item.university
105 |                           }}</v-list-item-subtitle>
106 |                         </v-list-item-content>
107 |                       </v-list-item>
108 |                     </v-card>
109 |                   </v-expansion-panel-content>
110 |                 </v-expansion-panel>
111 |                 <!-- Post Section -->
112 |                 <v-expansion-panel v-if="items.post.length">
113 |                   <v-expansion-panel-header>Post</v-expansion-panel-header>
114 |                   <v-expansion-panel-content>
115 |                     <v-card
116 |                       v-for="item in items.post.slice(x, y)"
117 |                       :key="item.id"
118 |                       width="90%"
119 |                       class="mx-auto mt-3"
120 |                     >
121 |                       <v-card-actions class="pa-5">
122 |                         <v-list-item three-line>
123 |                           <v-list-item-avatar color="primary">
124 |                             <v-img
125 |                               class="elevation-6"
126 |                               alt=""
127 |                               :src="item.userImage"
128 |                             ></v-img>
129 |                           </v-list-item-avatar>
130 |                           <v-list-item-content>
131 |                             <v-list-item-title
132 |                               @click="$router.push({ name: 'Profile' })"
133 |                               class="pointer"
134 |                             >
135 |                               {{ item.title }}</v-list-item-title
136 |                             >
137 |                             <v-list-item-subtitle>{{
138 |                               item.created_at | moment("from", "now")
139 |                             }}</v-list-item-subtitle>
140 |                             <v-card-text class="text--primary">
141 |                               <div>
142 |                                 {{
143 |                                   item.value.length > 40
144 |                                     ? item.value.substr(0, 40) + " ..."
145 |                                     : item.value
146 |                                 }}
147 |                               </div>
148 |                             </v-card-text>
149 |                             <v-card-actions>
150 |                               <v-row align="center" justify="end">
151 |                                 <v-col cols="3">
152 |                                   <v-icon color="red" class="mr-1">
153 |                                     mdi-heart
154 |                                   </v-icon>
155 |                                   <span class="subheading mr-2">{{
156 |                                     item.likeCount
157 |                                   }}</span>
158 |                                   <v-icon color="primary" class="mr-1">
159 |                                     mdi-comment
160 |                                   </v-icon>
161 |                                   <span class="subheading">{{
162 |                                     item.commentCount
163 |                                   }}</span>
164 |                                 </v-col>
165 |                               </v-row>
166 |                             </v-card-actions>
167 |                           </v-list-item-content>
168 |                         </v-list-item>
169 |                       </v-card-actions>
170 |                     </v-card>
171 |                   </v-expansion-panel-content>
172 |                 </v-expansion-panel>
173 |                 <!-- Board Section -->
174 |                 <v-expansion-panel v-if="items.board.length">
175 |                   <v-expansion-panel-header>Boards</v-expansion-panel-header>
176 |                   <v-expansion-panel-content>
177 |                     <v-card
178 |                       v-for="item in items.board.slice(x, y)"
179 |                       :key="item.id"
180 |                       width="90%"
181 |                       class="mx-auto mt-3"
182 |                     >
183 |                       <v-list-item three-line>
184 |                         <v-list-item-avatar color="primary">
185 |                           <v-img :src="item.image"></v-img>
186 |                         </v-list-item-avatar>
187 |                         <v-list-item-content>
188 |                           <v-list-item-title
189 |                             @click="$router.push({ name: 'Boards' })"
190 |                             class="pointer"
191 |                           >
192 |                             {{ item.name }}</v-list-item-title
193 |                           >
194 |                           <v-list-item-subtitle>{{
195 |                             item.description
196 |                           }}</v-list-item-subtitle>
197 |                         </v-list-item-content>
198 |                       </v-list-item>
199 |                     </v-card>
200 |                   </v-expansion-panel-content>
201 |                 </v-expansion-panel>
202 |                 <!-- Community Section -->
203 |                 <v-expansion-panel v-if="items.community.length">
204 |                   <v-expansion-panel-header>Community</v-expansion-panel-header>
205 |                   <v-expansion-panel-content>
206 |                     <v-card
207 |                       v-for="item in items.community.slice(x, y)"
208 |                       :key="item.id"
209 |                       width="90%"
210 |                       class="mx-auto mt-3"
211 |                     >
212 |                       <v-list-item three-line>
213 |                         <v-list-item-avatar color="primary">
214 |                           <v-img :src="item.img"></v-img>
215 |                         </v-list-item-avatar>
216 |                         <v-list-item-content>
217 |                           <v-list-item-title
218 |                             @click="$router.push({ name: 'Community' })"
219 |                             class="pointer"
220 |                           >
221 |                             {{ item.name }}</v-list-item-title
222 |                           >
223 |                           <v-list-item-subtitle>{{
224 |                             item.description
225 |                           }}</v-list-item-subtitle>
226 |                           <v-list-item-subtitle>
227 |                             <v-icon>mdi-account-outline</v-icon
228 |                             >{{
229 |                               item.users.length
230 |                             }}
231 |                             followers</v-list-item-subtitle
232 |                           >
233 |                         </v-list-item-content>
234 |                       </v-list-item>
235 |                     </v-card>
236 |                   </v-expansion-panel-content>
237 |                 </v-expansion-panel>
238 |               </v-expansion-panels>
239 |             </v-col>
240 |           </v-row>
241 |         </v-container>
242 |       </div>
243 |     </v-card>
244 |   </v-card>
245 | </template>
246 | 
247 | 
248 | 
249 | 
250 | 
251 | <script>
252 | import SearchFilters from '@/components/search/SearchFilters.vue'
253 | import pl from 'pluralize'
254 | 
255 | export default {
256 |   name: "Home",
257 |   components: {
258 |     SearchFilters,
259 |   },
260 | 
261 |   data: () => ({
262 |     fab: false,
263 | 
264 |     keyword: "",
265 | 
266 |     colo: "",
267 |     act: "margin-top: 200px",
268 |     divColor: "red",
269 | 
270 |     x: "0",
271 |     y: "5",
272 | 
273 |     panel: [],
274 |     itemsCount: 4,
275 | 
276 |     loading: {
277 |       user: false,
278 |       post: false,
279 |       board: false,
280 |       community: false,
281 |     },
282 |     items: {
283 |       user: [],
284 |       post: [],
285 |       board: [],
286 |       community: [],
287 |     },
288 |   }),
289 | 
290 |   methods: {
291 |     //////////Start of test Section
292 |     darkMode() {
293 |       this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
294 |     },
295 |     ////////////////////////////End Of test Section
296 | 
297 |     //Back To top if scrolled
298 |     onScroll(e) {
299 |       if (typeof window === "undefined") return;
300 |       const top = window.pageYOffset || e.target.scrollTop || 0;
301 |       this.fab = top > 20;
302 |     },
303 |     toTop() {
304 |       this.$vuetify.goTo(0);
305 |     },
306 | 
307 |     //Open all panel
308 |     all() {
309 |       this.panel = [...Array(this.itemsCount).keys()].map((k, i) => i);
310 |     },
311 |     // Colapse all panel
312 |     none() {
313 |       this.panel = [];
314 |     },
315 | 
316 |     activateSearch() {
317 |       const self = this
318 |       this.colo = "grey";
319 |       this.act = "margin-top: 10px";
320 |       const filters = ['user', 'board', 'community']
321 | 
322 |       filters.forEach(filter => {
323 |         if (this.getFilter(filter) && this.keyword != "") {
324 |           self.loading[filter] = true
325 |           this.search(filter);
326 |         }
327 |       })
328 |     },
329 |     getFilter (target) {
330 |       return this.$store.getters.searchPage(target)
331 |     },
332 |     // Fetching Data from The Server
333 |     search (target) {
334 |       const self = this
335 | 
336 |       self.axios
337 |         .get(
338 |           `/${target != 'community' ? pl(target) : target}/search/` + this.keyword
339 |         )
340 |         .then((res) => {
341 |           self.items[target] = res.data
342 |           self.loading[target] = false
343 |         })
344 |         .catch((error) => console.log(error));
345 |     },
346 |     loadMore() {
347 |       this.y = this.y + 4;
348 |     },
349 |   },
350 | };
351 | </script>
352 | 
353 | <style >
354 | .accent {
355 |   position: relative;
356 |   left: 40%;
357 | }
358 | .move {
359 |   top: -238px;
360 |   left: 480px;
361 | }
362 | .caps {
363 |   color: white;
364 |   border-color: 2px solid white;
365 | }
366 | #input-36 {
367 |   color: white !important;
368 | }
369 | /* .Panel {
370 |   width: 90% !important;
371 | } */
372 | .pointer {
373 |   cursor: pointer;
374 | }
375 | </style>


--------------------------------------------------------------------------------
/src/views/Settings.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-container>
  3 |     <div>
  4 |     <v-btn
  5 |       @click="$router.push({ name: 'Search' })"
  6 |       class="ma-2"
  7 |       color="primary"
  8 |     >
  9 |       Click To Go Search
 10 |       <v-icon dark right> mdi-magnify </v-icon>
 11 |     </v-btn>
 12 |     </div>
 13 |     <v-app style="background-color: #7dabe7; color: white" class="app">
 14 |       <div>
 15 |         <br /><br />
 16 |         <b class="ma-15 font"> Settings </b>
 17 |         <div>
 18 |           <v-img class="avatar" :src="user.img" width="150" height="150">
 19 |           </v-img>
 20 |           <div style="background-color: #f0f0f0" class="move">
 21 |             <v-icon> mdi-camera-plus </v-icon>
 22 |           </div>
 23 |         </div>
 24 |         <v-container>
 25 |           <v-form class="under">
 26 |             <v-row>
 27 |               <v-col cols="12" sm="4">
 28 |                 <v-text-field
 29 |                   class="bor"
 30 |                   solo
 31 |                   label="First Name"
 32 |                   v-model="fname"
 33 |                 ></v-text-field>
 34 |               </v-col>
 35 |               <v-col cols="12" sm="4">
 36 |                 <v-text-field
 37 |                   class="bor"
 38 |                   solo
 39 |                   label="Last Name"
 40 |                   v-model="lname"
 41 |                 ></v-text-field>
 42 |               </v-col>
 43 |               <v-col cols="12" sm="4">
 44 |                 <v-text-field
 45 |                   class="bor"
 46 |                   solo
 47 |                   label="Specilaization"
 48 |                   v-model="user.spec"
 49 |                 ></v-text-field>
 50 |               </v-col>
 51 |               <v-col cols="12" sm="4">
 52 |                 <v-text-field
 53 |                   class="bor"
 54 |                   solo
 55 |                   label="Password"
 56 |                   v-model="user.password"
 57 |                 ></v-text-field>
 58 |               </v-col>
 59 |               <v-col cols="12" sm="4">
 60 |                 <v-text-field
 61 |                   class="bor"
 62 |                   solo
 63 |                   label="Email"
 64 |                   v-model="user.email"
 65 |                 ></v-text-field>
 66 |               </v-col>
 67 |               <v-col cols="12" sm="4">
 68 |                 <v-text-field
 69 |                   class="bor"
 70 |                   solo
 71 |                   label="Birthday"
 72 |                   v-model="user.age"
 73 |                 ></v-text-field>
 74 |               </v-col>
 75 |               <v-col cols="12" sm="4">
 76 |                 <v-text-field
 77 |                   class="bor"
 78 |                   solo
 79 |                   label="Registeration"
 80 |                   v-model="user.start_year"
 81 |                 ></v-text-field>
 82 |               </v-col>
 83 |               <v-col cols="12" sm="4">
 84 |                 <v-text-field
 85 |                   class="bor"
 86 |                   solo
 87 |                   label="Current Year"
 88 |                   v-model="user.study_year"
 89 |                 ></v-text-field>
 90 |                 <v-btn @click="updateUserInfo" outlined color="white" class="butn"> Update </v-btn>
 91 |               </v-col>
 92 |             </v-row>
 93 |           </v-form>
 94 |         </v-container>
 95 |       </div>
 96 |     </v-app>
 97 |   </v-container>
 98 | </template>
 99 | 
100 | <script>
101 | export default {
102 |   data: () => ({
103 |     user: {
104 |       name: "",
105 |     },
106 |     last: "",
107 |     first: "",
108 |   }),
109 |   mounted() {
110 |     const self = this;
111 | 
112 |     self.getUserInfo();
113 |   },
114 |   methods: {
115 |     updateUserInfo() {
116 |       const self = this;
117 | 
118 |       const info = {
119 |         id: self.user.id,
120 |         name: `${self.first || self.fname} ${self.last || self.lname}`,
121 |         email: self.user.email,
122 |         password: self.user.password,
123 |         spec: self.user.spec,
124 |         university: self.user.university,
125 |         img: self.user.img,
126 |         community_name: self.user.community_name,
127 |         study_year: self.user.study_year,
128 |         start_year: self.user.start_year,
129 |         age: self.user.age,
130 |       };
131 | 
132 |       self.axios
133 |         .post("/users/update", info)
134 |         .then((res) => {
135 |           alert("done");
136 |           console.log(res);
137 |         });
138 |     },
139 |     getUserInfo() {
140 |       const self = this;
141 | 
142 |       self.user = this.$store.getters.authenticated
143 |       // self.axios
144 |       //   .get("/users/search/a")
145 |       //   .then((res) => {
146 |       //     self.user = res.data[0];
147 |       //   });
148 |     },
149 |   },
150 |   computed: {
151 |     fname: {
152 |       get() {
153 |         return this.user.name.split(" ")[0];
154 |       },
155 |       set(v) {
156 |         this.first = v;
157 |       },
158 |     },
159 |     lname: {
160 |       get() {
161 |         return this.user.name.split(" ")[1];
162 |       },
163 |       set(v) {
164 |         this.last = v;
165 |       },
166 |     },
167 |   },
168 | };
169 | </script>
170 |   
171 | <style scoped>
172 | .app {
173 |   border-radius: 6% 6% 6% 6% / 10% 10% 10% 10%;
174 | }
175 | .font {
176 |   font-size: 1.8em;
177 | }
178 | .bor {
179 |   border-radius: 7% 7% 7% 7% / 50% 50% 50% 50%;
180 | }
181 | .avatar {
182 |   left: 500px;
183 | }
184 | .move {
185 |   padding: 12px;
186 |   width: 50px;
187 |   height: 50px;
188 |   border-radius: 50%;
189 |   position: relative;
190 |   left: 500px;
191 |   top: -40px;
192 | }
193 | .butn {
194 |   background: #43425D;
195 |   width: 200px;
196 |   border: none;
197 | }
198 | </style>


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   "transpileDependencies": [
3 |     "vuetify"
4 |   ]
5 | }


--------------------------------------------------------------------------------