diff --git a/README.md b/README.md index 587d766c8..f9c2e941e 100644 --- a/README.md +++ b/README.md @@ -1,96 +1,274 @@ -CONTENTS OF THIS FILE +# Customizing the PWA + +The Mentor PWA is developed using the Ionic framework. This document provides instructions on setting up the development environment. + +Contents --------------------- - * Dependencies - * Ionic-Android build Setup - * Cli setup - * Project setup - * Build apk - * Debug apk + * [Dependencies](#dependencies) + * [Setting up the CLI](#setting-up-the-cli) + * [Setting up the Project](#setting-up-the-project) + * [Building the Application](#building-the-application) + * [Debugging the Application](#debugging-the-application) + * [Setting up the HashiCorp® Vault](#setting-up-the-hashicorp-vault) + * [Creating a Jenkins® Job](#creating-a-jenkins-job) + * [Deploying the Application Using an Ansible® Script](#deploying-the-application-using-an-ansible-script) + * [Structure of Environment file, Server.js, and pm2.config.json](#structure-of-environment-file-serverjs-and-pm2configjson) +Dependencies +------------ -DEPENDENCIES ---------------------- -* Ionic: +| Requirement | Description | +|--------------|-----------| +| Ionic CLI|Version 7.1.1 (/usr/local/lib/node_modules/@ionic/cli)| +| Ionic Framework | | +| Capacitor | | +| Cordova | | +| Utility | +| System | | - Ionic CLI : 6.19.1 (/usr/local/lib/node_modules/@ionic/cli) - Ionic Framework : @ionic/angular 6.1.7 - @angular-devkit/build-angular : 13.2.6 - @angular-devkit/schematics : 13.2.6 - @angular/cli : 13.2.6 - @ionic/angular-toolkit : 6.1.0 +Setting up the CLI +------------------ -* Capacitor: +1. Install the Ionic framework. - Capacitor CLI : 3.5.1 - @capacitor/android : 3.5.0 - @capacitor/core : 3.5.1 - @capacitor/ios : 3.5.0 + ``` + npm install -g ionic + ``` -* Cordova: +2. Install the Ionic client. - Cordova CLI : 11.0.0 - Cordova Platforms : none - Cordova Plugins : no whitelisted plugins (0 plugins total) + ``` + npm install -g @ionic/cli + ``` -* Utility: +3. Install the Capacitor Core. - cordova-res : 0.15.4 - native-run : 1.6.0 + ``` + npm install @capacitor/core + ``` -* System: +4. Install the Capacitor runtime Client. - Android SDK Tools : 26.1.1 (/home/afnan/Android/Sdk) - NodeJS : v14.19.0 (/usr/local/bin/node) - npm : 6.14.16 - OS : Linux 5.13 + ``` + npm install @capacitor/cli --save-dev + ``` +Setting up the Project +---------------------- -IONIC-ANDROID BUILD SETUP ---------------------- +1. Clone the [repository](https://github.com/ELEVATE-Project/mentoring-mobile-app.git). +2. Change to the latest GitHub branch (**release-2.6.1**). +3. Add environment files into the src/environments folder. +4. Go to the project folder and run `npm i`. -- [Install java] (https://www.oracle.com/java/technologies/downloads/#java8) -- [Install Gradle] (https://gradle.org/install/) -- [Install Android Studio] (https://developer.android.com/studio) -- After Android studio installation, install SDK -- Open Android studio and goto settings/appearance and behavior/system settings/Android SDK -- Install appropriate Android sdk platform package. -- Add environment variables in ~/.bashrc or ~/.bash_profile as follows - export ANDROID_SDK_ROOT=path_to_sdk - export PATH=$PATH:$ANDROID_SDK_ROOT/tools/bin - export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools -- Reference: https://ionicframework.com/docs/installation/android +Building the Application +------------------------ +1. To add the Capacitor plugin, run the following command: -CLI SETUP ---------------------- + ``` + npx cap sync -- `npm install -g ionic` -- `npm install @capacitor/core` -- `npm install @capacitor/cli --save-dev` -- `npx cap init` + ``` +2. To run a development build, run the following command: -PROJECT SETUP ---------------------- + ``` + ionic build -- git clone the repo (https://github.com/ELEVATE-Prjoect/mentoring-mobile-app.git) -- Add environment files inside src/environments -- Go to project folder and run npm i + ``` -BUILD APK ---------------------- +3. To perform an Ionic build and update any Capacitor plugins or dependencies, run the capacitor sync command. -- To check attached devices do adb devices -- Run ionic build (Make sure you have attached device) -- Run ionic cap sync -- Run ionic capacitor run android --prod -- Apk location project_folder/platforms/android/app/build/outputs/apk/debug/apk_name.apk + ``` + ionic cap sync + ``` + +4. Run the project on your local system using the following command: + + ``` + ionic serve + + ``` + +Debugging the Application +------------------------- + +1. Open the running app in the browser. +2. Start inspecting using Chrome dev tools or any alternatives. + +Setting up the HashiCorp Vault +------------------------------ + +After setting up the HashiCorp Vault, you must add the Vault address to the Jenkins Pipeline script and Ansible deployment script. + +Creating a Jenkins Job +---------------------- +To automate your app deployment using Jenkins, do as follows: + +1. Create a Jenkins job each time you want a deployment. + +2. Add the pipeline script for the job inside the job’s **Configure** section. This pipeline will fetch the latest code from the given branch in the repository and run the [Ansible script](#deploying-the-application-using-an-ansible-script). + + ``` + pipeline { agent any + options { + disableConcurrentBuilds() + } + stages { + stage("git"){ + steps{ + + git branch: '', url: '' + } + + } + stage("ansible run"){ + steps{ + + ansiblePlaybook becomeUser: 'jenkins', + credentialsId:’your-cred-id’, + extras: "-e vaultAddress= -e gitBranch=", + installation: 'ansible', + inventory: '', + playbook: '' + } + + } + } + } + ``` + +Deploying the Application Using an Ansible Script +------------------------------------------------- + +To build and deploy the application using an Ansible script, do as follows: + +1. Add an Ansible script to the **deployment** folder in the root folder of your project. + + >**Note**: Update the script with details (such as paths) that are specific to your project. + + ``` + - hosts: + vars: + project_path: + root_path: + //Add variables here if needed. (Remove this line in your code) + tasks: + - name: Slurp host file + slurp: + src: "" + register: slurpfile + - name: Run the HashiCorp Vault credentials + shell: "curl --location --request GET '{{ vaultAddress }}mentored-portal' --header 'X-Vault-Token: {{ slurpfile['content'] | b64decode }}' | jq '.data' > '{{root_path}}/data2.json'" + register: vaultCurl + - name: Change directory + shell: cd {{project_path}} + - name: Fetch the latest code + git: + repo: https://github.com/ELEVATE-Project/mentoring-mobile-app + dest: "{{project_path}}" + version: "{{gitBranch}}" + force: yes + - name: Update npm + shell: cd {{project_path}} && npm i --force + - name: Set permission + shell: chmod 744 {{ project_path }}/src/scripts/json2env.sh + - name: Generate .env + shell: cat {{root_path}}/data2.json | jq '.data' > {{ project_path }}/src/environments/environment.ts && sed -i '1s/^/export const environment = \n/' {{ project_path }}/src/environments/environment.ts + register: envConfig + - debug: msg=" cred {{ envConfig }} " + - name: Change directory + shell: chdir {{project_path}} + - name: Fetch pm2 config file + shell: "curl --location --request GET '{{ vaultAddress }}portalPm2Config' --header 'X-Vault-Token: {{ slurpfile['content'] | b64decode }}' | jq '.data.data' > '{{ project_path }}/pm2.config.json'" + register: pm2 + - name: Change directory + shell: cd {{project_path}} + - name: Remove www folder + shell: rm -rf www + - name: Build pwa app + shell: cd {{project_path}} && ionic build --prod + - name: Start pm2 + shell: cd {{project_path}} && pm2 start pm2.config.json + ``` + +3. Add the script's path to the [Jenkins Pipeline script](#creating-a-jenkins-job). When you run the Jenkins job, the script is executed. + +4. To convert the JSON file that was fetched from the HashiCorp Vault to an env format, add the following script to ```/src/scripts/json2env.sh.```: + + ``` + #!/bin/sh + + tr -d '\n' | + grep -o '"[A-Za-z\_][A-Za-z_0-9]\+"\s*:\s*\("[^"]\+"\|[0-9\.]\+\|true\|false\|null\)' | + sed 's/"\(._\)"\s_:\s\*"\?\([^"]\+\)"\?/\1= "\2"/' + ``` + +Structure of Environment file, Server.js, and pm2.config.json +------------------------------------------------------------- + +For deploying your application, you need an Environment file, Server.js, and a pm2.config.json file. + +### Structure of environment.ts File + + ```jsx + export const environment = { + production: true / false, + name: "", + staging: true / false, + dev: true / false, + baseUrl: "", + sqliteDBName: " (if you have)", + deepLinkUrl: "", + privacyPolicyUrl: "", + termsOfServiceUrl: "", + }; +``` + +### Structure of pm2.config.json File + +```json + { + "apps": [ + { + "name": "", + "script": "server.js", + "args": [], + "instances": "1", + "exec_mode": "cluster", + "watch": false, + "merge_logs": true, + "env": { + "NODE_ENV": "production", + "PORT": + } + } + ] + } +``` + +### Structure of Server.js File + +```jsx + const express = require('express'); + const path = require('path'); + const app = express(); + const port = process.env.PORT || 7601; + + + app.use(express.static(path.join(__dirname, 'www'))); + + + app.get('*', (req, res) => { + res.sendFile(path.join(__dirname, 'www', 'index.html')); + }); -DEBUG APK ---------------------- -- Open chrome and enter chrome://inspect -- Select app \ No newline at end of file + app.listen(port, () => { + console.log(`Server is running on port ${port}`); + }); +``` diff --git a/src/app/pages/auth/otp/otp.page.html b/src/app/pages/auth/otp/otp.page.html index f28b4e4e1..77de6107e 100644 --- a/src/app/pages/auth/otp/otp.page.html +++ b/src/app/pages/auth/otp/otp.page.html @@ -15,7 +15,7 @@
- {{'GENERATE_OTP'|translate}} diff --git a/src/app/pages/auth/otp/otp.page.ts b/src/app/pages/auth/otp/otp.page.ts index 17a73417e..c0114df6f 100644 --- a/src/app/pages/auth/otp/otp.page.ts +++ b/src/app/pages/auth/otp/otp.page.ts @@ -49,6 +49,7 @@ export class OtpPage implements OnInit { captchaToken:any=""; recaptchaResolved: boolean = this.siteKey ? false : true; showOtp:any = false; + enableGeneratetOtp: boolean = false; constructor(private router: Router, private profileService: ProfileService,private location: Location, private activatedRoute: ActivatedRoute, private localStorage: LocalStorageService, private translateService: TranslateService, private authService: AuthService, private toast: ToastService, private menuCtrl: MenuController, private nav: NavController) { @@ -119,7 +120,8 @@ export class OtpPage implements OnInit { async resendOtp() { this.enableResendOtp = false; this.showOtp = false; - this.recaptchaResolved = false + this.recaptchaResolved = false; + this.enableGeneratetOtp = this.siteKey ? false : true; } async onSubmitGenerateOtp(){ diff --git a/src/app/pages/session-detail/session-detail.page.html b/src/app/pages/session-detail/session-detail.page.html index 46368bca2..ec9ef6255 100644 --- a/src/app/pages/session-detail/session-detail.page.html +++ b/src/app/pages/session-detail/session-detail.page.html @@ -22,8 +22,11 @@
{{detailData?.data?.title}}
{{"COMPLETED_ON"|translate}} {{endDate|date:'dd/MM/yyyy'}} {{"AT"|translate}} {{endDate|date:'shortTime'}}
- -

{{ sessionManagerText | translate}} {{detailData.data.manager_name}}

+
+ + {{ sessionManagerText | translate}} + {{detailData.data.manager_name}} +
diff --git a/src/app/pages/session-detail/session-detail.page.scss b/src/app/pages/session-detail/session-detail.page.scss index 97067384b..5f951405b 100644 --- a/src/app/pages/session-detail/session-detail.page.scss +++ b/src/app/pages/session-detail/session-detail.page.scss @@ -55,11 +55,7 @@ ion-item { height: 200px; } .person-container{ - font-size: 20px; - display: flex; - justify-content: center; - align-items: center; - padding-right: 10px; + font-size: 26px; } .manager-text-container{ @@ -70,5 +66,17 @@ ion-item { font-size: 16px; color: rgb(0, 0, 0); margin-left: 6px; - margin-bottom: 4px; + width: max-content; +} +.invite-container{ + display: flex; + align-items: center; + justify-content: center; +} +.label{ + width: 200px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding-left: 5px; } \ No newline at end of file diff --git a/src/app/shared/components/dynamic-form/dynamic-form.component.ts b/src/app/shared/components/dynamic-form/dynamic-form.component.ts index bad65ce4c..db761332b 100644 --- a/src/app/shared/components/dynamic-form/dynamic-form.component.ts +++ b/src/app/shared/components/dynamic-form/dynamic-form.component.ts @@ -209,8 +209,6 @@ export class DynamicFormComponent implements OnInit { return JSON.stringify(a) == JSON.stringify(b); } onSubmit() { - console.log('Form valid: ', this.myForm.valid); - console.log('Form values: ', this.myForm.value); this.isFormValid(); } reset() {