[Ready for Review] GUI - Login with GitHub #876

auxves · 2019-05-04T23:48:46Z

Short description of what this resolves:

This PR allows the user to log in to GitHub using a button, and the extension will automatically generate a token with the correct scopes and find the gist id.

Changes proposed in this pull request:

Login to GitHub using OAuth
Create a GUI for Settings and Welcome page
Allow user to choose from a list of available gists

Fixes: #506

How Has This Been Tested?

I have tested this by logging in to GitHub and checking if the token and gist id has been saved properly.

Screenshots (if appropriate):

Checklist:

I have read the contribution guidelines.
My change requires a change to the documentation and GitHub Wiki.
I have updated the documentation and Wiki accordingly.

Status:

Fixes #870. See that issue for details

auxves · 2019-05-05T21:04:53Z

@shanalikhan As you can see by the title, this PR is ready for extensive review. I just wanted to bring this to your attention because it has been a while since the release of v3.2.9.

shanalikhan · 2019-05-06T10:32:09Z

Yes i know, give me some time. I will provide a review in detail.

* Utilized pragmaUtil Functions for kb.json file * Typo fix * Added universalKeybindings setting

* Cleaned up toggling commented settings * Updated to include fix by @ioprotium

shanalikhan · 2019-05-08T08:19:41Z

Here is the original UI layout:
#825 (comment)
I am using the check box to make sure the the status.
You can copy this checklist and post in later posts to show the status.

Overall:

It should be the same font / style the image i posted. Reference : Image

Title

Title as same color, size and font with the logo.
The Image in Title should be large like the Bookmark's ribbon logo and should be on middle.
Settings Sync text size should be small compared to cloud image but should be placed in the middle of the cloud - See the image ribbon and Bookmarks place over there.
Transparent logo should be placed on repo as another file ( we dont want to use the external link )
The Text contrast should be aligned with the background e.g Black or Grey Text on White Background , White Text on black background or any other color to achieve the contrast ratio.

Description:

Description should be "Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist"
Below to description , please add "By @shanalikhan"
Description should be same color, size and font as above image.

Two Columns

There should be two columns.
Both columns should be scroll able.
Height of those columns should be dynamic and then apply scroll bar when more content is available. Height should be till bottom while keeping the space for 'HelpandSponsor` section.
Both columns should have white text or any text while keeping the contrast with the background.
Links can be blue , prominent

Left Column

"Whats new in Settings Sync" should be on center on left column. It should have same font size, color as in the reference image for bookmarks.
Use same green button for "New", light red for "Fix"

Right Column

"Configurations" needs to have same size and style as reference image.
Some description like "Login via github to setup the Settings Sync or change configurations manually"
There should be two buttons after description
Buttons should be in one row , left and right
Title "Show Your Support"
Description
Two buttons Payment and sponsor
Two buttons should be one row, left and right.
Add Link
- Write a Review
- Star on Github
- Follow me on Twitter

Below to columns
Left

"Need Help ?"
It should have same color and style

Right

Add Sponsors section
Description for Sponsors "Settings Sync Looking for sponsors to display here. Contact me on twitter or github."

Edit Configuration Page

It will a two columns, the title, description and all things will be the stay on same location.
Only welcome page 2 columns and below it should be replaced with configuration page.
Please fix the description section to show that same title and description
Are these two columns are scroll able.

Left Column

Title "Environment Settings"
Center Aligned and same font name and color, size as above reference.
Add textboxes and checkbox for each configuration present in settings.json
Put some padding in the checkboxes as currently they are all merged.

Right Column

Title - Global Settings
All the custom json settings should be available like in above picture.
Saving automatically.

Conclusion:

We need to make sure the font color, style should be the same as reference image.
Page background is transparent, can be changed by theme settings.
Once the welcome and configuration page layout is completed, i will move to code review and github sync process.

Thanks

93Akkord · 2019-05-08T12:35:02Z

I built this as well to check it out. I agree with @shanalikhan about the style. It should flow with other other popular extensions that use a webview. I have a couple of notes from my experience so far:

Login to my Github account via OAuth worked just fine.
Creating the token worked as well, but there is no indication that it did. I had to check out the syncLocalSettings.json file to see that it was there. Some indication that it worked and that it was created should be added.

I haven't had a chance to go over the other stuff yet. Will post more feedback when I get a chance.

auxves · 2019-05-10T04:09:48Z

Overall:

It should be the same font / style the image i posted. Reference : Image

Title

Title as same color, size and font with the logo.
The Image in Title should be large like the Bookmark's ribbon logo and should be on middle.
Settings Sync text size should be small compared to cloud image but should be placed in the middle of the cloud - See the image ribbon and Bookmarks place over there.
Transparent logo should be placed on repo as another file ( we dont want to use the external link )
The Text contrast should be aligned with the background e.g Black or Grey Text on White Background , White Text on black background or any other color to achieve the contrast ratio.

Description:

Description should be "Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist"
Below to description , please add "By @shanalikhan"
Description should be same color, size and font as above image.

Two Columns

There should be two columns.
Both columns should be scroll able.
Height of those columns should be dynamic and then apply scroll bar when more content is available. Height should be till bottom while keeping the space for 'HelpandSponsor` section.
Both columns should have white text or any text while keeping the contrast with the background.
Links can be blue , prominent

Left Column

"Whats new in Settings Sync" should be on center on left column. It should have same font size, color as in the reference image for bookmarks.
Use same green button for "New", light red for "Fix"

Right Column

"Configurations" needs to have same size and style as reference image.
Some description like "Login via github to setup the Settings Sync or change configurations manually"
There should be two buttons after description
Buttons should be in one row , left and right
Title "Show Your Support"
Description
Two buttons Payment and sponsor
Two buttons should be one row, left and right.
Add Link
- Write a Review
- Star on Github
- Follow me on Twitter

Below to columns
Left

"Need Help ?"
It should have same color and style

Right

Add Sponsors section
Description for Sponsors "Settings Sync Looking for sponsors to display here. Contact me on twitter or github."

Edit Configuration Page

It will a two columns, the title, description and all things will be the stay on same location.
Only welcome page 2 columns and below it should be replaced with configuration page.
Please fix the description section to show that same title and description
Are these two columns are scroll able.

Left Column

Title "Environment Settings"
Center Aligned and same font name and color, size as above reference.
Add textboxes and checkbox for each configuration present in settings.json
Put some padding in the checkboxes as currently they are all merged.

Right Column

Title - Global Settings
All the custom json settings should be available like in above picture.
Saving automatically.

Gist Selection:

Fix layout

Conclusion:

We need to make sure the font color, style should be the same as reference image.
Page background is transparent, can be changed by theme settings.
Once the welcome and configuration page layout is completed, i will move to code review and github sync process.

Preview:

shanalikhan · 2019-05-17T09:09:51Z

Let me know once you complete all the checklist so i will start the UI review.

…-sync into gui-login

auxves · 2019-05-22T00:01:26Z

@shanalikhan I have completed your checklist.

shanalikhan · 2019-06-26T10:28:19Z

Some contrast config are changed.

The page doesnt match with the theme background now.

Comparing with image
#876 (comment)

Also check the contrast ratio of font

auxves · 2019-06-26T13:51:51Z

@shanalikhan

The page doesn't match with the theme background now.

Are you sure we should match the theme background? It would be much harder to guarantee good contrast. A great example of this is the screenshot of the Bookmarks extension that you attached. The links, buttons, and images all have very low contrast and are hard to see.

Therefore I suggest we leave it like it currently is (dark on dark themes, light on light themes). However, if it's absolutely necessary, I can update it to match the background (with the potential side effect of bad contrast). What are your thoughts?

shanalikhan

These are the high level reviews. I will look into it more.

README.md

src/service/github.oauth.service.ts

src/service/webview.service.ts

package.nls.*.json ---- Add localizations for setting names and placeholders. github.oauth.service.ts ---- Handle errors in a more user-facing way Support GitHub enterprise Show message to user after success webview.service.ts ---- Use new localizations for names and placeholders

release-notes.json

src/commons.ts

README.md

ui/landing-page/landing-page.html

ui/settings/settings.html

shanalikhan · 2019-06-28T16:01:13Z

Does webpack minify the html, js and css and all other new files UI for production modes?

auxves · 2019-06-28T16:08:37Z

@shanalikhan The css and js files are already minified, while the fonts can't be because they're binaries. Only the HTML files are left without minification, but it's probably fine because they are pretty small and minification wouldn't have a big difference on their file size.

shanalikhan · 2019-07-01T09:52:48Z

I have merged the changes.
It works on debug mode
When i tried creating package using vsce package and install the file by command line and run the code.

Following error occurred when clicked on Advance Settings

Can you test your scenarios by creating the package file also and send me PR ?

auxves · 2019-07-01T11:17:32Z

@shanalikhan I have figured out the problem, but only a temporary solution. This is caused by webpack-node-externals, which I added to remove the warning in webpack. However, this is preventing a lot of dependencies from being bundled. After an hour of searching, the only way I could come up with was to stop using webpack-node-externals and just disable warnings. What do you think?

PR: #934

shanalikhan · 2019-07-02T11:46:41Z

Currently the process to download the Public Gist has become very hard.

Can you add a button below to Login with Github as "Download Public Gist" - Style should be like hyperlinks (not buttons). When user click that button.
Same code execution like the Download Public Gist command in Advance Menu.
And run the download process in old way that will ask Just GIST ID to configure as public gist.

njkevlani and others added 3 commits April 21, 2019 12:37

Updated to task api 2.0.0 and fixed tests

00dfd46

Set "extensionKind": "ui" to support remote development #61

4e1d08d

Fixes #870. See that issue for details

Clean up previous commits into one

774bcce

njkevlani and others added 4 commits May 6, 2019 15:37

#800 #515 #854

a387c23

* Utilized pragmaUtil Functions for kb.json file * Typo fix * Added universalKeybindings setting

chore(package): update @types/node to version 12.0.0 (#873)

d946e47

Cleaned up toggling commented settings (#877)

711c4de

* Cleaned up toggling commented settings * Updated to include fix by @ioprotium

Merge branch 'v3.3.0' into gui-login

3ff8dfe

auxves added 3 commits May 9, 2019 18:19

Fix warning with webpack

fdc550d

Update UI

e2680e4

Change height to max-height

8d0b035

auxves and others added 8 commits May 9, 2019 21:48

Add image locally and move it to the top

6cb9383

Added documentation for tests in CONTRIBUTING.md (#881)

8e08532

fix(package): update fs-extra to version 8.0.0 (#882)

6938f5f

chore(package): update @types/fs-extra to version 7.0.0 (#885)

0866449

chore(package): update @types/node to version 12.0.1 (#883)

4a0e55b

fix(package): update fs-extra to version 8.0.1 (#884)

8515cff

Update UI to fit guidelines

afafd9d

Merge branch 'v3.3.0' into gui-login

7924e93

shanalikhan mentioned this pull request May 20, 2019

Use webviews to show the errors. #864

Open

greenkeeper bot and others added 4 commits May 21, 2019 13:07

chore(package): update @types/node to version 12.0.2 (#887)

47d7155

Improve UI and functionality

917d228

Merge branch 'gui-login' of github.com:arnohovhannisyan/code-settings…

1b15f18

…-sync into gui-login

Match BG of theme and properly contrast text

19b031d

shanalikhan requested changes Jun 26, 2019

View reviewed changes

auxves added 3 commits June 26, 2019 18:15

Increase contrast

92d10fb

Bug fix and upload images

1285ee1

shanalikhan reviewed Jun 26, 2019

View reviewed changes

release-notes.json Outdated Show resolved Hide resolved

auxves and others added 10 commits June 26, 2019 20:53

Add support for commits to master (release notes)

957f60e

Fix issue

a45bfdc

Fix another issue with release notes

1668668

Update release note template

4d647fc

Update release notes

6119c06

Don't open gist selection if there aren't any gists

15aca7f

Allow user to view gist

ab30eb6

Revert accidental change

63d894a

Merge branch 'v3.4.0' into gui-login

7d0b924

Merge branch 'v3.4.0' into gui-login

1bc9f19

shanalikhan reviewed Jun 28, 2019

View reviewed changes

src/commons.ts Outdated Show resolved Hide resolved

src/commons.ts Show resolved Hide resolved

README.md Show resolved Hide resolved

ui/landing-page/landing-page.html Outdated Show resolved Hide resolved

ui/settings/settings.html Outdated Show resolved Hide resolved

auxves added 4 commits June 28, 2019 19:22

Support public gist

8af0ca1

Add css, js, and fonts to repo

f328ee2

Improve font injection

9ca639c

Revert accidental change

3b23bed

shanalikhan merged commit 7257166 into shanalikhan:v3.4.0 Jul 1, 2019

auxves deleted the gui-login branch July 2, 2019 10:51

auxves mentioned this pull request Jul 2, 2019

Add Button to Download Public Gist #941

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Ready for Review] GUI - Login with GitHub #876

[Ready for Review] GUI - Login with GitHub #876

auxves commented May 4, 2019

auxves commented May 5, 2019

shanalikhan commented May 6, 2019

shanalikhan commented May 8, 2019 •

edited

Loading

93Akkord commented May 8, 2019

auxves commented May 10, 2019 •

edited

Loading

shanalikhan commented May 17, 2019

auxves commented May 22, 2019

shanalikhan commented Jun 26, 2019

auxves commented Jun 26, 2019

shanalikhan left a comment

shanalikhan commented Jun 28, 2019 •

edited

Loading

auxves commented Jun 28, 2019

shanalikhan commented Jul 1, 2019

auxves commented Jul 1, 2019 •

edited

Loading

shanalikhan commented Jul 2, 2019 •

edited

Loading

[Ready for Review] GUI - Login with GitHub #876

[Ready for Review] GUI - Login with GitHub #876

Conversation

auxves commented May 4, 2019

Short description of what this resolves:

Changes proposed in this pull request:

How Has This Been Tested?

Screenshots (if appropriate):

Checklist:

Status:

auxves commented May 5, 2019

shanalikhan commented May 6, 2019

shanalikhan commented May 8, 2019 • edited Loading

93Akkord commented May 8, 2019

auxves commented May 10, 2019 • edited Loading

shanalikhan commented May 17, 2019

auxves commented May 22, 2019

shanalikhan commented Jun 26, 2019

auxves commented Jun 26, 2019

shanalikhan left a comment

Choose a reason for hiding this comment

shanalikhan commented Jun 28, 2019 • edited Loading

auxves commented Jun 28, 2019

shanalikhan commented Jul 1, 2019

auxves commented Jul 1, 2019 • edited Loading

shanalikhan commented Jul 2, 2019 • edited Loading

shanalikhan commented May 8, 2019 •

edited

Loading

auxves commented May 10, 2019 •

edited

Loading

shanalikhan commented Jun 28, 2019 •

edited

Loading

auxves commented Jul 1, 2019 •

edited

Loading

shanalikhan commented Jul 2, 2019 •

edited

Loading