Login with GitHub (WIP) #825

auxves · 2019-04-04T05:31:56Z

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. (#506)

Changes proposed in this pull request:

Login to GitHub using OAuth
Create a GUI for Settings and Welcome page

Improvements: 2

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. (may need review)

Status:

Make a settings map so settings can be displayed on the page Add functions to open settings and accept changes Import text from html file

* Fix auto upload! * Properly stop watching * Add synchronous functions * Move watcher to a new service * Make a new service for watcher * Add general ignored items setting for chokidar * Use globalCommons's autoUploadService instance * Reset * Add local settings to ignored files * Asynchronously get ignored items * Remove unused import * Use autoUploadService * Use the globalCommonService everywhere Since the autoUploadService is an instance in Commons, using a global Commons instance will allow everything to use the same instance. * Stop spamming with extension paths * Fix to work with async functions * Add global state to ignored files * Add .DS_Store and sync.lock * Start watcher only after downloading has finished * Inform user that auto upload has started

OAuth < Settings UI

This is unnecessary because there is an oauth implementation that automatically gets token and gist id

auxves · 2019-04-05T06:34:56Z

I have updated the screenshots in the initial comment. If you want me to change anything, please tell me.

shanalikhan · 2019-04-05T07:23:20Z

I had posted an target image. Okay Let me give you detail when needs to be done for the page welcome page.

Goal: It should use same font and styling like the image i posted. I would request you to make a similar UI - exacltly the same.

Title should be same color, size and font with the logo. You can make a white cloud logo with the transparent background ( revert the current logo like in marketplace ) - Save as another file. - The title needs to be in the center of logo like th Bookmark ribbon logo and title place.
Description should be "Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist" - Same color, size and font.
Below to description you can add "by @shanalikhan" same size, color and font as description.

Two columns - Same style, font and size as reference image.
Scroll bar should be supported in both column - Check the reference image.

Left Column - Scrollable

Use same green button for "New" , light red button for "Fix" - Same size, button and color. Currently new and fix doesnt match - Please refer the reference document.
There is some difference in new and fix buttons and text
See link for PR , color size and font.

Right Column - Scrollable

Title Configuration - Same properties like "show your support"
Some description like "Please login via github to setup the Settings Sync or change configurations manually"
There should be two buttons after description
a. Login with a Github
b. Edit Configuration - ( Sorry initially i asked for two buttons) - Will further explain its work after this.
Title "Show Your Support" - Same properties like above.
a. Same description for Settings Sync
b. Same two buttons, PayPal button links to the URL in paypal button in readme.

Links - same properties.

Write a Review
Star Or Fork me on Github
Follow me on Twitter
Title "Sponsors"
Description - "Settings Sync Looking for sponsors to display here. Contact me on twitter or github."

Below to columns
Need Help ? Same as in image.
Same 2 links.

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.

It should be two columns - Scrollable.
Left Columns - Title - "Environment Settings"
Add text boxes and checkboxes for each of the Settings Sync config present in settings.json.
Below to each of the configuration textbox, put settings description present in localization files.

Right Column - Scrollable
"Title - Global Settings"
All the custom json settings should be available like in above picture.

After these two columns.
There will be "Save" button in right side- When user clicks on save. Text should appear on left to the button that settings has been saved.

Goal: It should use same font and styling like the image i posted.
Please make sure, the font size and page layout should be responsive and must align with the screen size keep font ratio with screen size intact.

Once the welcome and configuration page layout is completed, i will move to code review and github sync process.

Thanks

Remove unused configuration item

Add extensionConfiguration Support extConfig in Settings page

auxves · 2019-04-06T02:31:19Z

This is what I have so far:

Welcome:

Settings:

Gist selection:

Also:

I removed the "Save" button from the settings page because it was causing issues with the save process. ~~Currently, it just displays some text saying "Saved!" whenever you make changes.~~ I have added a check mark that indicates when settings have been saved, and there is a spinner when they are saving.
~~I haven't yet gotten to displaying the localized descriptions for the individual settings.~~ Localized tooltips are done.

shanalikhan · 2019-04-07T20:46:29Z

Nice, let me know when you will complete the checklist i have shared, I will provide you a detailed review then.
Just for settings page, please add scroll bar with height allowed only vscode browser window viewport size.

auxves · 2019-04-07T21:50:53Z

Ok, I'll make those changes and let you know when I'm ready for review.

auxves · 2019-04-09T01:54:52Z

@shanalikhan Ok, I'm pretty sure I completed your checklist.

Here is the updated settings page:

auxves · 2019-04-16T22:52:47Z

@shanalikhan I'm going to create a fresh PR to resolve these conflicts and clean up the commit timeline.

knyhle and others added 30 commits April 1, 2019 15:59

#806

75ceddd

prettify custom setting json (#812)

d96bb51

Install lodash and html-loader

c0951dc

Add option to open settings

8f9643e

Implement settings page

ed3b9fd

Make a settings map so settings can be displayed on the page Add functions to open settings and accept changes Import text from html file

Add option to open settings page

43fe4e5

Add settings html

f68a26e

#805

1e87058

#820

4aeca8a

#820

91b6f55

#821

691c229

#805

57b4bae

Add OAuth and landing page

2d2043f

Add express

9200ceb

Add landing page

e57f067

--

77b0075

Merge branch 'github-oauth' into settings-ui

277aba2

Merge OAuth < Settings UI

c4ccbda

OAuth < Settings UI

Move to new location

9669118

Remove asking for token part

2e75b2f

This is unnecessary because there is an oauth implementation that automatically gets token and gist id

Open landing page if token is not configured

47e066f

Save token and gist id

dc0dee3

Change bg color

6460030

Remove docs button to make it look better

bd14091

Transfer from html file

680ffd1

Refactor css and js

2ad472f

Add scope to view user info

dc5f641

Get username to get gists

7acaa6b

Remove unnecessary functions

b1d5dd5

auxves added 3 commits April 4, 2019 23:19

Add package.json back after unsuccessful rebase :(

5173ca6

Revert accidental changes

889f804

Update settings page

9aeca11

auxves added 10 commits April 5, 2019 14:46

Switch to using FS to get html content

ffc1869

Remove unused configuration item

Use FS instead of html-loader

146cdd8

Add extensionConfiguration Support extConfig in Settings page

Update UI

21b3d0b

Update release notes

9389521

Update commons to work with new UI

86b8b11

Update UI

7dc8be6

Add extension path for oauth service

8fb37ba

Allow user to select the gist they want to use

4da5263

Update UI

7a1e7bc

Update name of tab

7a187e8

auxves added 4 commits April 5, 2019 20:54

Add tooltips with localized descriptions of each setting

cea9c5e

Update docs

50ea506

Improve tooltips

ceef236

Improve save indicator

2febba0

auxves added 2 commits April 8, 2019 18:51

Fix warning

de57283

Move header to reusable web component

bee53a1

shanalikhan changed the base branch from master to v3.2.9 April 16, 2019 08:46

auxves closed this Apr 16, 2019

shanalikhan mentioned this pull request May 8, 2019

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

Merged

8 tasks

auxves deleted the github-oauth branch June 19, 2019 11:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Login with GitHub (WIP) #825

Login with GitHub (WIP) #825

auxves commented Apr 4, 2019 •

edited

Loading

auxves commented Apr 5, 2019

shanalikhan commented Apr 5, 2019 •

edited

Loading

auxves commented Apr 6, 2019 •

edited

Loading

shanalikhan commented Apr 7, 2019 •

edited

Loading

auxves commented Apr 7, 2019

auxves commented Apr 9, 2019

auxves commented Apr 16, 2019

Login with GitHub (WIP) #825

Login with GitHub (WIP) #825

Conversation

auxves commented Apr 4, 2019 • edited Loading

Short description of what this resolves:

Changes proposed in this pull request:

How Has This Been Tested?

Screenshots (if appropriate):

Checklist:

Status:

auxves commented Apr 5, 2019

shanalikhan commented Apr 5, 2019 • edited Loading

auxves commented Apr 6, 2019 • edited Loading

shanalikhan commented Apr 7, 2019 • edited Loading

auxves commented Apr 7, 2019

auxves commented Apr 9, 2019

auxves commented Apr 16, 2019

auxves commented Apr 4, 2019 •

edited

Loading

shanalikhan commented Apr 5, 2019 •

edited

Loading

auxves commented Apr 6, 2019 •

edited

Loading

shanalikhan commented Apr 7, 2019 •

edited

Loading