Skip to content

Commit

Permalink
msal2 multi-account UI (#1041)
Browse files Browse the repository at this point in the history 
* Added electron app

* delete

* Added electron sample folder

* Added electron sample folder

* Added electron sample folder

* added electron provider

* Electron provider

* Electron provider

* Electron provider

* Electron provider

* Electron provider

* Electron provider

* Update README.md

* Added license

* Cleaned up license

* Update packages/providers/mgt-electron-provider/README.md

Co-authored-by: Nikola Metulev <nmetulev@users.noreply.github.com>

* Update packages/providers/mgt-electron-provider/README.md

Co-authored-by: Nikola Metulev <nmetulev@users.noreply.github.com>

* Update samples/electron-app/package.json

Co-authored-by: Nikola Metulev <nmetulev@users.noreply.github.com>

* Update packages/providers/mgt-electron-provider/README.md

Co-authored-by: Nikola Metulev <nmetulev@users.noreply.github.com>

* Review comments & removed cache plugin

* Update packages/providers/mgt-electron-provider/src/Authenticator/CustomFileProtocol.ts

Co-authored-by: Nikola Metulev <nmetulev@users.noreply.github.com>

* Changed initialization of ElectronAuthenticator

* updated sample readme

* Update README.md

* Removed all evidence of incremental consent support :P

* Warning

* MSAL2.0

* msal2 silent

* Added msal2 custom element and sso

* SSO fix

* Added event on account switch

* Fixed issue with setActiveAccount related to latest msal-browser package

* Bumped up package version

* temp fix

* Single account

* Added new test file

* Update msal2-provider-test.html

* Single account changes

* Comments

* Added msal2.0 provider to index.html

* Added msal2.0 provider to index.html

* enabled multi account

* handle account changes in providers namespace

* Comments

* Revert "enabled multi account"

This reverts commit 7f94528.

* fixed binding issue

* cleanup

* fixed when unsubscribing

* Added docs and removed account object

* fixed bugs and enabled multi login

* swapped provider and disabled cache

* updated login ui using fluent listbox

* ui and svg

* arrow selection

* fix hover for first selected item

* profile size, spacing

* fix package.json

* hover state css

* adds max-width, overflow for names

* fixing spacing

* Changes to mgt-login to store person image (#1046)

Co-authored-by: Amrutha Srinivasan <amsrin@microsoft.com>

* Changes to mgt-login part 2 (#1047)

* Changes to mgt-login to store person image

* PR comments

Co-authored-by: Amrutha Srinivasan <amsrin@microsoft.com>

* additional handling for overflow

* tab indexing too

* Update packages/mgt-components/src/components/mgt-login/mgt-login.ts

Co-authored-by: Nikola Metulev <nmetulev@users.noreply.github.com>

* Addressed PR comments  (#1048)

* Changes to mgt-login to store person image

* PR comments

* PR comments

Co-authored-by: Amrutha Srinivasan <amsrin@microsoft.com>

* Update packages/mgt-components/src/components/mgt-login/mgt-login.ts

* handling for single user login and one user signed in multiuser

* updating avatar-direction to person-flex-direction

Co-authored-by: Amrutha Srinivasan <amsrin@microsoft.com>
Co-authored-by: Nikola Metulev <nmetulev@users.noreply.github.com>
Co-authored-by: Shane Weaver <shweaver@microsoft.com>
Co-authored-by: amrutha95 <amrutha.srinivasan95@gmail.com>
Co-authored-by: Nikola Metulev <nikolame@microsoft.com>
  • Loading branch information
@vogtn @nmetulev
@shweaver-MSFT @amrutha95 @Mnickii
6 people authored and Mnickii committed Sep 8, 2022
1 parent 652a6cc commit bb71730
Show file tree
Hide file tree
Showing 9 changed files with 420 additions and 88 deletions.
65 changes: 32 additions & 33 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Microsoft Graph Toolkit Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Microsoft Graph Toolkit Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" />
<!-- <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script> -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" />
<!-- <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script> -->
<script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>

<script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
<!-- <script src="./packages/mgt/dist/bundle/mgt-loader.js"></script> -->

<!-- <script src="./packages/mgt/dist/bundle/mgt-loader.js"></script> -->
<script type="module" src="./packages/mgt/dist/es6/index.js"></script>
</head>

<script type="module" src="./packages/mgt/dist/es6/index.js"></script>
</head>

<body>
<!-- <mgt-teams-provider
<body>
<!-- <mgt-teams-provider
client-id="a974dfa0-9f57-49b9-95db-90f04ce2111a"
auth-popup-url="auth.html"
></mgt-teams-provider> -->

<!-- <mgt-teams-msal2-provider
<!-- <mgt-teams-msal2-provider
client-id="72482bff-ecae-44f5-8fdc-513b7f5602e7"
scopes="user.read,user.read.all,mail.readBasic,people.read,people.read.all,sites.read.all,user.readbasic.all,contacts.read,presence.read,presence.read.all,tasks.readwrite,tasks.read,calendars.read,group.read.all"
auth-popup-url="auth.html"
></mgt-teams-msal2-provider> -->

<!-- Teams Msal2 provider in SSO mode (see "teams-sso-node" sample) -->
<!-- <mgt-teams-msal2-provider
<!-- Teams Msal2 provider in SSO mode (see "teams-sso-node" sample) -->
<!-- <mgt-teams-msal2-provider
client-id="72482bff-ecae-44f5-8fdc-513b7f5602e7"
scopes="user.read,user.read.all,mail.readBasic,people.read,people.read.all,sites.read.all,user.readbasic.all,contacts.read,presence.read,presence.read.all,tasks.readwrite,tasks.read,calendars.read,group.read.all"
auth-popup-url="auth.html"
sso-url="http://localhost:5000/api/token"
http-method="POST"
></mgt-teams-msal2-provider> -->

<!-- <mgt-msal-provider
<!-- <mgt-msal-provider
client-id="a974dfa0-9f57-49b9-95db-90f04ce2111a"
scopes="user.read,user.read.all,mail.readBasic,people.read,people.read.all,sites.read.all,user.readbasic.all,contacts.read,presence.read,presence.read.all,tasks.readwrite,tasks.read,calendars.read,group.read.all"
redirect-uri="http://localhost:3000"
depends-on="mgt-teams-provider"
></mgt-msal-provider> -->

<!-- <mgt-msal2-provider
<!-- <mgt-msal2-provider
client-id="2dfea037-938a-4ed8-9b35-c05708a1b241"
redirect-uri="http://localhost:3000"
scopes="user.read,user.read.all,mail.readBasic,people.read,people.read.all,sites.read.all,user.readbasic.all,contacts.read,presence.read,presence.read.all,tasks.readwrite,tasks.read,calendars.read,group.read.all"
></mgt-msal2-provider> -->

<mgt-mock-provider></mgt-mock-provider>
></mgt-msal2-provider>
-->

<mgt-login></mgt-login>
<mgt-person person-query="me" view="twoLines" person-card="click" show-presence></mgt-person>
<mgt-people-picker></mgt-people-picker>
<mgt-teams-channel-picker></mgt-teams-channel-picker>
<mgt-tasks></mgt-tasks>
<mgt-agenda group-by-day></mgt-agenda>
<mgt-people show-presence></mgt-people>
<mgt-todo></mgt-todo>
<mgt-file-list></mgt-file-list>
</body>
<mgt-mock-provider></mgt-mock-provider>

</html>
<mgt-login></mgt-login>
<mgt-person person-query="me" view="twoLines" person-card="click" show-presence></mgt-person>
<mgt-people-picker></mgt-people-picker>
<mgt-teams-channel-picker></mgt-teams-channel-picker>
<mgt-tasks></mgt-tasks>
<mgt-agenda group-by-day></mgt-agenda>
<mgt-people show-presence></mgt-people>
<mgt-todo></mgt-todo>
<mgt-file-list></mgt-file-list>
</body>
</html>
137 changes: 132 additions & 5 deletions packages/mgt-components/src/components/mgt-login/mgt-login.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ mgt-login {
--height: '100%';
--margin: 0;
--padding: 12px 20px;
--popup-command-font-size: #{$ms-font-size-s};
--popup-command-font-size: 14px;
--popup-command-margin: 16px 0 0;
--popup-padding: 24px 48px 16px 24px;
--popup-padding: 10px 4px 16px 4px;
}

:host .root,
Expand Down Expand Up @@ -85,7 +85,8 @@ mgt-login .login-icon {
mgt-login .popup {
font-family: $font-family;
background-color: $popup__background-color;
min-width: 240px;
width: 300px;
max-width: 300px;
z-index: 1;
color: set-var(popup__color, $theme-default, $login);
border-radius: 8px;
Expand All @@ -101,31 +102,157 @@ mgt-login .popup-content {
flex-direction: column;
padding: var(--popup-padding);
border-radius: 8px;
background-color: $popup__background-color;
.inside-content {
overflow-y: auto;
overflow-x: clip;
max-height: 400px;

.list-box {
margin-bottom: 25px;
background-color: $popup__background-color;
--accent-fill-hover: $popup__background-color;
--accent-fill-active: $popup__background-color;
--accent-foreground-cut-rest: black;
color: black !important;
.list-box-option {
margin-bottom: 4px;
mgt-person {
max-width: 270px;
width: 270px;
margin-left: 18px;
--details-spacing: 9px;
--avatar-size: 40px;
position: relative;
--line1-color: rgba(0, 0, 0, 0.83);
--line2-color: rgba(0, 0, 0, 0.55);
&:after {
content: '';
position: absolute;
z-index: 1;
top: 0;
right: 8px;
bottom: 0px;
pointer-events: none;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), $popup__background-color 100%);
width: 50%;
}
}
&:hover {
border-radius: 4px;
background: rgba(0, 0, 0, 0.1);
mgt-person {
&:after {
background-image: none;
}
}
}
}
&:focus {
.list-box-option {
&.selected {
border-radius: 4px;
background: rgba(0, 0, 0, 0.1);
}
}
mgt-person {
&:after {
background-image: none;
}
}
}
}
&:after {
content: '';
position: absolute;
bottom: 0;
background: linear-gradient(to bottom, transparent, $popup__background-color);
height: 25%;
width: 100%;
}
&::-webkit-scrollbar {
height: 4em;
width: 4px;
border-radius: 11px;
}
&::-webkit-scrollbar-button {
background: white;
}
&::-webkit-scrollbar-track {
background: white;
border-radius: 10px;
}
&::-webkit-scrollbar-track-piece {
background: white;
}
&::-webkit-scrollbar-thumb {
background: grey;
border-radius: 10px;
height: 4px;
}
}
.add-account {
.add-account-button {
position: relative;
color: #{$commblue_primary};
border: none;
background-color: $popup__background-color;
cursor: pointer;
margin: 0px 0px 10px 19px;
padding: 0;
border: 1px solid transparent;
&:hover {
color: #{$commblue_shade20};
text-shadow: 0 0 0.01px #{$commblue_shade20};
}
.account-switch-icon {
vertical-align: middle;
display: inline-block;
}
}
}

.main-profile {
margin-bottom: 35px;
text-align: center;
mgt-person {
--avatar-size: 72px;
--person-flex-direction: column;
--details-spacing: 0px;
--line1-color: rgba(0, 0, 0, 0.83);
--line2-color: rgba(0, 0, 0, 0.55);
}
}
}

:host .popup-commands ul,
mgt-login .popup-commands ul {
list-style-type: none;
margin: var(--popup-command-margin);
padding: 0;
margin-bottom: 10px;
margin-top: 6px;
text-align: right;
padding-right: 16px;
}

:host .popup-command,
mgt-login .popup-command {
font-family: $font-family;
font-size: var(--popup-command-font-size);
font-weight: var(--font-weight);
color: #{$commblue_primary};
background-color: $popup__background-color;
border: none;
padding: 0;
padding: 0 0 1px 0;
cursor: pointer;
transition: color 0.3s;
word-spacing: inherit;
text-indent: inherit;
letter-spacing: inherit;
border: 1px solid transparent;

&:hover {
text-shadow: 0 0 0.01px #{$commblue_shade20};
color: #{$commblue_shade20};
}
}
Expand Down
Loading

0 comments on commit bb71730

Please sign in to comment.