feature/47/settings-page

package.json

@@ -1,6 +1,6 @@
 {
     "name": "workgroup",
-    "version": "0.4.2",
+    "version": "0.4.3",
     "private": true,
     "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^1.2.34",

src/App.jsx

@@ -290,7 +290,7 @@ class App extends React.Component {
                                 <Route exact path="/logout">
                                     <LogOut />
                                 </Route>
-                                <Route path="/*">
+                                <Route path="*">
                                     <SignIn />
                                 </Route>
                             </React.Fragment>

src/components/Header/style.scss

@@ -8,25 +8,29 @@ body {
 
 .skip-to-content {
     font-size: 18px;
-    background: black;
+    background: #2c85d0;
     color: white;
     padding: 10px 19px;
     display: inline-block;
-    outline: 2px solid #2c85d0;
-    outline-offset: -6px;
     cursor: pointer;
     border: none;
-    width: 100%;
     text-align: center;
     text-decoration: underline;
     font-weight: 500;
     position: absolute;
-    top: -100%;
-    left: 0;
+    border-radius: 7px;
+    top: 5px;
+    left: calc((100% - 1200px) / 2);
+    z-index: 10;
+    line-height: 20px;
+    box-shadow: 0 1px 3px 0 #d4d4d5;
+    opacity: 1;
+    outline: 0;
 
-    &:focus {
-        position: inherit;
-        visibility: visible;
+    &:not(:focus) {
+        top: -1000px;
+        left: -1000px;
+        opacity: 0;
     }
     &:focus,
     &:hover,

src/components/HeaderDropdown/index.jsx

@@ -23,7 +23,7 @@ const HeaderDropdown = (props) => {
         <div className="header__dropdown">
             {localStorage.getItem('user_admin') !== undefined && localStorage.getItem('user_admin') == '1' && (
                 <NavLink exact className="header__dropdown-item" activeClassName="header__dropdown-item--active" to="/app/settings">
-                    App Settings
+                    Manage WorkGroup
                 </NavLink>
             )}
             <a className="header__dropdown-item" href="https://github.com/BerkeAras/WorkGroup#contact" target="_blank" rel="noreferrer">

src/views/Settings/Users/index.jsx

@@ -0,0 +1,122 @@
+/* eslint-disable no-useless-constructor */
+import React, { useState, useEffect, useRef } from 'react'
+import { List, Loader, Pagination } from 'semantic-ui-react'
+import './style.scss'
+import unknownAvatar from '../../../static/unknown.png'
+
+import { Monitor, Server, AtSign, BarChart2, Home, Zap } from 'react-feather'
+
+function SettingsUsers() {
+    const [isLoading, setIsLoading] = useState(false)
+    const [paginationPage, setPaginationPage] = useState(1)
+    const [totalPaginationPages, setTotalPagionationPages] = useState(1)
+    const [users, setUsers] = useState([])
+
+    useEffect(() => {
+        document.title = 'Users – WorkGroup'
+
+        loadUsers(1)
+    }, [])
+
+    const loadUsers = (page) => {
+        setPaginationPage(page)
+        setIsLoading(true)
+        var tokenHeaders = new Headers()
+        tokenHeaders.append('Authorization', 'Bearer ' + localStorage.getItem('token'))
+
+        var requestOptions = {
+            method: 'GET',
+            headers: tokenHeaders,
+            redirect: 'follow',
+        }
+
+        fetch(process.env.REACT_APP_API_URL + '/api/settings/users?page=' + page, requestOptions)
+            .then((response) => response.json())
+            .then((result) => {
+                setIsLoading(false)
+                setTotalPagionationPages(result.total_pages)
+                setUsers(result.users)
+                console.log('res', result)
+            })
+            .catch((error) => {
+                console.error(error)
+            })
+    }
+
+    const handlePaginationChange = (event) => {
+        loadUsers(Number.parseInt(event.target.getAttribute('value')))
+    }
+
+    const getDate = (date) => {
+        var newDate = new Date(date)
+
+        const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
+
+        var todaysDate = new Date()
+
+        let dateString = ''
+
+        if (newDate.setHours(0, 0, 0, 0) == todaysDate.setHours(0, 0, 0, 0)) {
+            todaysDate = new Date()
+            newDate = new Date(date)
+            let currentHours = newDate.getHours()
+            currentHours = ('0' + currentHours).slice(-2)
+
+            dateString = 'Today, ' + currentHours + ':' + (newDate.getMinutes() < 10 ? '0' : '') + newDate.getMinutes()
+        } else {
+            dateString = newDate.toLocaleDateString(process.env.REACT_APP_LOCALE, options)
+        }
+
+        return dateString
+    }
+
+    return (
+        <>
+            <div className="settings_content">
+                {isLoading ? (
+                    <center className="settings_content_loader">
+                        <Loader active>Loading Users...</Loader>
+                    </center>
+                ) : (
+                    <>
+                        {users ? (
+                            <>
+                                {users.map((member, index) => {
+                                    return (
+                                        <List key={index} divided relaxed>
+                                            <List.Item href={`/app/user/${member.email}`}>
+                                                <List.Content>
+                                                    <div className="settings_user-avatar">
+                                                        <img
+                                                            src={process.env.REACT_APP_API_URL + '/' + member.avatar.replace('./', '')}
+                                                            alt=""
+                                                            onError={(e) => {
+                                                                e.target.src = unknownAvatar
+                                                            }}
+                                                        />
+                                                    </div>
+                                                    <List.Header as="a">{member.name}</List.Header>
+                                                    <List.Description as="a">{getDate(member.created_at)}</List.Description>
+                                                </List.Content>
+                                            </List.Item>
+                                        </List>
+                                    )
+                                })}
+                                <Pagination onPageChange={(event) => handlePaginationChange(event)} defaultActivePage={paginationPage} totalPages={totalPaginationPages} />
+                            </>
+                        ) : (
+                            <center>
+                                <Zap size={35} strokeWidth={2} />
+                                <br />
+                                <span>There are no Members in this group.</span>
+                            </center>
+                        )}
+                        <br />
+                    </>
+                )}
+            </div>
+        </>
+    )
+}
+
+export default SettingsUsers

src/views/Settings/Users/style.scss

@@ -0,0 +1,37 @@
+.settings_content {
+    .settings_image_upload {
+        border: 1px solid rgba(34, 36, 38, 0.15);
+        border-radius: 10px;
+        width: 100%;
+        height: 70px;
+        padding: 5px;
+        object-fit: contain;
+        cursor: pointer;
+    }
+    .item[role='listitem'] {
+        padding: 10px !important;
+        background: transparent;
+        transition: all 0.15s;
+
+        div.settings_user-avatar {
+            width: 32px;
+            height: 32px;
+            float: left;
+            border-radius: 100px;
+            background: #ebebeb;
+            margin-right: 10px;
+
+            img {
+                width: 100%;
+                height: 100%;
+                border-radius: 100px;
+                object-fit: cover;
+            }
+        }
+
+        &:hover,
+        &:focus {
+            background: #f2f4f5;
+        }
+    }
+}

src/views/Settings/index.jsx

@@ -3,11 +3,12 @@ import React, { useState, useEffect } from 'react'
 import { BrowserRouter as Router, Switch, Route, Link, NavLink, useParams } from 'react-router-dom'
 import './style.scss'
 
-import { Monitor, Server, AtSign, BarChart2, Home, Zap } from 'react-feather'
+import { Monitor, Server, AtSign, BarChart2, Home, Users } from 'react-feather'
 
 // Components
 import Header from '../../components/Header'
 import SettingsHome from './Home'
+import SettingsUsers from './Users'
 import SettingsFrontend from './Frontend'
 import SettingsServer from './Server'
 import SettingsMail from './Mail'
@@ -24,6 +25,9 @@ function Settings() {
                     <NavLink key="settings-home" className="settings_sidebar-item" activeClassName="settings_sidebar-item--active" to="/app/settings/overview">
                         <Home size={18} strokeWidth={2.7} /> Home
                     </NavLink>
+                    <NavLink key="settings-users" className="settings_sidebar-item" activeClassName="settings_sidebar-item--active" to="/app/settings/users">
+                        <Users size={18} strokeWidth={2.7} /> Users
+                    </NavLink>
                     <NavLink key="settings-app" className="settings_sidebar-item" activeClassName="settings_sidebar-item--active" to="/app/settings/app">
                         <Monitor size={18} strokeWidth={2.7} /> Frontend
                     </NavLink>
@@ -41,6 +45,8 @@ function Settings() {
                     <SettingsHome />
                 ) : category == 'overview' ? (
                     <SettingsHome />
+                ) : category == 'users' ? (
+                    <SettingsUsers />
                 ) : category == 'app' ? (
                     <SettingsFrontend />
                 ) : category == 'server' ? (

src/views/auth/SignUp/index.jsx

@@ -144,6 +144,8 @@ const SignUp = (props) => {
                             <Input autoFocus fluid onChange={(e) => setName(e.target.value)} type="text" placeholder="Name" id="userName" />
                             <br />
                             <Input fluid onChange={(e) => setEmail(e.target.value)} type="email" placeholder="E-Mail" id="userEmail" />
+                            <small>Please enter your real e-mail address. You will need to confirm it in the next step.</small>
+                            <br />
                             <br />
                             <Input fluid onChange={(e) => setPassword(e.target.value)} type="password" placeholder="Password" id="userPassword" />
                             <br />