RocketChat PWA with Angular, Service Worker, Apollo and GraphQL

.angular-cli.json

@@ -1,27 +1,34 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
-    "name": "rocket-chat"
+    "name": "rocketchat-pwa"
   },
   "apps": [
     {
       "root": "src",
       "outDir": "dist",
       "assets": [
         "assets",
-        "favicon.ico"
+        "favicon.ico",
+        "manifest.json"
       ],
       "index": "index.html",
       "main": "main.ts",
       "polyfills": "polyfills.ts",
       "test": "test.ts",
       "tsconfig": "tsconfig.app.json",
       "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
+      "prefix": "",
+      "serviceWorker": true,
       "styles": [
-        "styles.css"
+        "theme/variables.scss",
+        "styles.scss",
+        "assets/offline/offline-language-english.css",
+        "assets/offline/offline-theme-dark.css"
+      ],
+      "scripts": [
+        "assets/offline/offline.min.js"
       ],
-      "scripts": [],
       "environmentSource": "environments/environment.ts",
       "environments": {
         "dev": "environments/environment.ts",
@@ -51,7 +58,8 @@
     }
   },
   "defaults": {
-    "styleExt": "css",
-    "component": {}
+    "styleExt": "scss",
+    "component": {
+    }
   }
 }

README.md

@@ -1,33 +1,19 @@
-# Rocket.Chat PWA
-## Progressive Web App GSoC Project
-Web FTW! 🙂 **PWA** is a web app that make use of new Web and JavaScript API to deliver a new whole experience similar to an native app on the web.
+# Rocketchat Pwa
 
-To achieve this experience this app needs to meet some requirements:
+Rocketchat progressive web app built on Angular and apollo graphql stack using angular CLI.
 
-* **Safety** - must be served via HTTPS to ensure that the real content has not been tampered.
-* **Responsive** - can fit all resolutions like desktop, tablet and mobile.
-* **Progressive**- work in all modern browsers because they use progressive enhancement concepts.
-* **Connectivity independent** - need to work on any type of connection, including offline.
-* **Engageable** - using push notifications, “add to home” feature to be more app-like.
+* mock server requires mongo for the accounts 
+* mock users to login with: 
+  * username: eitan pass: eitan
+  * username: tomer pass: tomer
+* run client & mock server:
+```bash
+yarn start
+```
 
-You can find more specific requirements at Google Documentation
+* build production ready PWA with service worker support:
+```bash
+yarn build 
+```
 
-To build this app we will use a specific framework - Angular and tools like WebSocket and Service Worker
-
-## Communication
-
-For help in preparing your winning proposal, you can email me at [karl.prieb@rocket.chat](mailto:karl.prieb@rocket.chat) or DM me at the [demo server](https://demo.rocket.chat/direct/karl.prieb).
-
-After (if) your proposal is selected, the communication between mentor and students should be daily.
-For public conversations Github issues must be used and for more private subjects you can use Rocket.Chat direct messages on [demo server](https://demo.rocket.chat/direct/karl.prieb).
-
-## Milestones
-
-To start the project we created a few milestones:
-* **Project Architecture** - All architect decision for our future app.
-* **Realtime API Implementation** - Implementation of the Rocket.Chat Realtime API with WebSocket
-* **Basic features** - Some basic as user registration and login system, channels and users lists, working channels with messages.
-
-Others milestones will be created with the student when we start to work on the project.
-
-**NOTE**: Please check back frequently. We will keep this document updated all the time.
+* additional scripts in `package.json`

bs-config.json

@@ -0,0 +1,3 @@
+{
+  "port": 4200
+}

e2e/app.e2e-spec.ts

@@ -1,10 +1,10 @@
-import { RocketChatPage } from './app.po';
+import { RocketchatPwaPage } from './app.po';
 
-describe('rocket-chat App', () => {
-  let page: RocketChatPage;
+describe('rocketchat-pwa App', () => {
+  let page: RocketchatPwaPage;
 
   beforeEach(() => {
-    page = new RocketChatPage();
+    page = new RocketchatPwaPage();
   });
 
   it('should display message saying app works', () => {

e2e/app.po.ts

@@ -1,6 +1,6 @@
 import { browser, by, element } from 'protractor';
 
-export class RocketChatPage {
+export class RocketchatPwaPage {
   navigateTo() {
     return browser.get('/');
   }

graphql.config.json

@@ -0,0 +1,36 @@
+{
+
+  "README_schema" : "Specifies how to load the GraphQL schema that completion, error highlighting, and documentation is based on in the IDE",
+  "schema": {
+
+    "README_file" : "Remove 'file' to use request url below. A relative or absolute path to the JSON from a schema introspection query, e.g. '{ data: ... }'. Changes to the file are watched.",
+    "README_request" : "To request the schema from a url instead, remove the 'file' JSON property above (and optionally delete the default graphql.schema.json file).",
+    "request": {
+      "url" : "http://localhost:3000/graphql",
+      "method" : "POST",
+      "README_postIntrospectionQuery" : "Whether to POST an introspectionQuery to the url. If the url always returns the schema JSON, set to false and consider using GET",
+      "postIntrospectionQuery" : true,
+      "README_options" : "See the 'Options' section at https://github.com/then/then-request",
+      "options" : {
+        "headers": {
+          "user-agent" : "JS GraphQL"
+        }
+      }
+    }
+
+  },
+
+  "README_endpoints": "A list of GraphQL endpoints that can be queried from '.graphql' files in the IDE",
+  "endpoints" : [
+    {
+      "name": "Default (http://localhost:3000/graphql)",
+      "url": "http://localhost:3000/graphql",
+      "options" : {
+        "headers": {
+          "user-agent" : "JS GraphQL"
+        }
+      }
+    }
+  ]
+
+}

mock-server/accounts.ts

@@ -0,0 +1,52 @@
+import AccountsServer from '@accounts/server';
+import MongoAdapter from '@accounts/mongo';
+import * as faker from 'faker';
+import { getMongoClient } from './db';
+
+
+const initUsers = () => {
+  const users = [{ username: 'eitan', password: 'eitan' }, {
+    username: 'Eitan',
+    password: 'Eitan'
+  }, { username: 'tomer', password: 'tomer' }];
+
+  users.map(async (userData) => {
+    const { username, password } = userData;
+    const user = await AccountsServer.findUserByUsername(username);
+    if (!user) {
+      AccountsServer.createUser({
+        username,
+        password,
+        profile: {
+          avatar: faker.image.avatar(),
+          name: username + ' ' + username,
+        }
+      });
+    }
+  });
+};
+
+export const initAccounts = async () => {
+  let mongoAdapter = null;
+  try {
+    mongoAdapter = await getMongoClient().then(db => new MongoAdapter(db));
+  }
+  catch (e) {
+    console.error('Failed connecting to the mongoDb ', e);
+    return;
+  }
+  AccountsServer.config({
+    tokenConfigs: {
+      accessToken: {
+        expiresIn: '3d',
+      },
+      refreshToken: {
+        expiresIn: '30d',
+      },
+    }
+  }, mongoAdapter);
+
+  initUsers();
+
+  return AccountsServer;
+};

mock-server/db.ts

@@ -0,0 +1,24 @@
+import { MongoClient } from 'mongodb';
+
+let mongoDB;
+
+const MONGO_URL = 'mongodb://localhost:27017/rocketchatMock';
+
+const initMongoClient = async () => {
+  try {
+    mongoDB = await MongoClient.connect(MONGO_URL);
+  }
+  catch (e) {
+    console.error('cannot connect to db', e);
+  }
+  return mongoDB;
+};
+
+
+export const getMongoClient = async () => {
+  if (!mongoDB) {
+    await initMongoClient();
+  }
+  return mongoDB;
+};
+

mock-server/index.ts

@@ -0,0 +1,83 @@
+import 'babel-polyfill';
+import * as express from 'express';
+import * as session from 'express-session';
+import * as Grant from 'grant-express';
+import * as bodyParser from 'body-parser';
+import * as cors from 'cors';
+import { graphiqlExpress, graphqlExpress } from 'graphql-server-express';
+import { createSchemeWithAccounts } from './schema';
+import { JSAccountsContext } from '@accounts/graphql-api';
+import { SubscriptionServer } from 'subscriptions-transport-ws';
+import { execute, subscribe } from 'graphql';
+import { createServer } from 'http';
+import { initAccounts } from './accounts';
+import { initializeOAuthResolver } from './oauth/oauth-service';
+import { GRANT_PATH, grantConfig } from './oauth/grant-config';
+import AccountsServer from '@accounts/server';
+
+const PORT = 3000;
+const WS_GQL_PATH = '/subscriptions';
+const STATIC_SERVER = 'http://localhost:4200';
+
+async function main() {
+  const app = express();
+  app.use(cors());
+
+  await initAccounts();
+
+  app.use(session({
+    secret: 'grant',
+    resave: true,
+    saveUninitialized: true,
+  }));
+
+  app.use(bodyParser.urlencoded({ extended: true }));
+
+  const grant = new Grant(grantConfig);
+
+  app.use(GRANT_PATH, grant);
+
+  app.get(`${GRANT_PATH}/handle_facebook_callback`, function (req, res) {
+    const accessToken = req.query.access_token;
+    res.redirect(`${STATIC_SERVER}/login?service=facebook&access_token=${accessToken}`);
+  });
+
+  app.get(`${GRANT_PATH}/handle_google_callback`, function (req, res) {
+    const accessToken = req.query.access_token;
+    res.redirect(`${STATIC_SERVER}/login?service=google&access_token=${accessToken}`);
+  });
+
+  initializeOAuthResolver();
+
+  const schema = createSchemeWithAccounts(AccountsServer);
+
+  app.use('/graphql', bodyParser.json(), graphqlExpress(request => ({
+    schema,
+    context: JSAccountsContext(request),
+    debug: true,
+  })));
+
+  app.use('/graphiql', graphiqlExpress({
+    endpointURL: '/graphql',
+  }));
+
+  const server = createServer(app);
+
+  new SubscriptionServer(
+    {
+      schema,
+      execute,
+      subscribe,
+    },
+    {
+      path: WS_GQL_PATH,
+      server,
+    }
+  );
+
+  server.listen(PORT, () => {
+    console.log('Mock server running on: ' + PORT);
+  });
+}
+
+main().catch((e) => console.error('Failed to start mock server', e));