sign in dialog refresh (microsoft#8373)

eanders-ms · ganicke · web-flow · commit 09fc025f0141 · 2021-08-09T19:51:11.000-07:00
* sign in dialog refresh

* 7.1.17

* Add sign-in and cloud-sync docs

* A few small edits

* Some more small edits

* prepositional changes

* left-justify modal actions (the new ones)

* Update sign-in.md

* Update sign-in.md

Co-authored-by: Galen Nickel &lt;gnickel@aquent.com&gt;
diff --git a/common-docs/identity/cloud-sync.md b/common-docs/identity/cloud-sync.md
@@ -0,0 +1,40 @@
+# Cloud Synchronization in MakeCode
+
+**Note**: This feature only available in [**MakeCode Arcade**](https://arcade.makecode.com).
+
+## What is Cloud Sync?
+
+Cloud Synchronization, or Cloud Sync, is a feature available to signed in users that lets MakeCode save your projects in the cloud, where they're available anywhere you can sign in to MakeCode.
+
+## How do I enable Cloud Sync?
+
+All you need to do is sign in to MakeCode with your Microsoft Account and Cloud Sync is automatically enabled. Learn more about signing in to MakeCode [here](/identity/sign-in).
+
+## Does it cost money?
+
+Nope! Cloud Sync completely is free.
+
+## What are the limits?
+
+Individual projects must be less than 512K bytes in size to be synced to cloud. You may store up to 1000 projects in the cloud.
+
+## When is a project saved to the cloud?
+
+Projects are transferred to the cloud the next time they're opened for editing. When you first sign in, your local projects remain local. To transfer a project to the cloud, just open it in the editor. The rest is automatic.
+
+## When is a project updated from the cloud?
+
+Your project list is refreshed when you navigate to the home screen. When a project is opened, a quick cloud check is done to make sure you're opening the latest version.
+
+## How can I tell if a project is stored in the cloud?
+
+In your project list, look for a little cloud icon on the project card. If it's there, your project is backed up to the cloud. In the editor, look for the cloud status indicator in the lower left. You should notice it automatically saving to cloud as you edit your project.
+
+## What if I edit the project in two places?
+
+If you're editing a project in two places at the same time, you may make changes that conflict. When this happens, the editor that detected the conflict will resolve it by making a copy of the project and applying the conflicting change to the new one. At this point the two browsers will be editing different projects.
+
+## Is anything else saved to cloud?
+
+If you've set your High Contrast or Language settings, they will be cloud-synchronized too.
+
diff --git a/common-docs/identity/sign-in.md b/common-docs/identity/sign-in.md
@@ -0,0 +1,35 @@
+# Microsoft Accounts and MakeCode
+
+**Note**: This feature only available in [**MakeCode Arcade**](https://arcade.makecode.com).
+
+## What is a Microsoft Account?
+
+A Microsoft Account, or MSA, is the personal user account you create when you want to sign into Microsoft services like outlook.com, Xbox, Skype, etc. Read more [here](https://aka.ms/AAdd6f8).
+
+## How does it work in MakeCode?
+
+A number of new features are coming that will only be available to signed-in users. These features need to know your identity so they can do things for you like store data in the cloud, and connect you to other users. The first of these features is one we're calling [Cloud Sync](/identity/cloud-sync). With Cloud Sync, when you're signed into MakeCode, we'll store your projects in the cloud where they're accessible from anywhere.
+
+## Is it required?
+
+No. Sign in only if you want to take advantage of features like Cloud Sync.
+
+## Does it cost money?
+
+Nope! Creating an MSA account is free. Using MakeCode is also free. As a reminder, MSA accounts work across a range of Microsoft products and services, so you can use it outside MakeCode. Some of these products and services may not be free (Minecraft Marketplace content, for example), but this is outside the MakeCode ecosystem.
+
+## What will other users see?
+
+Your signed in status is visible only to you. In the future we may add features that allow others to see your presence. When that time comes, we would ask you to create a MakeCode Profile so that your name and picture are decoupled from your MSA profile.
+
+## Do I already have a Microsoft Account?
+
+It is possible! Do you play Minecraft, game on an Xbox, subscribe to Office 365, or use any other Microsoft products or services? If so, you probably already have a Microsoft Account.
+
+## Does this mean I have to create a new email address?
+
+No. You can create an MSA using your current email address if it is not hosted by Microsoft (e.g.: Gmail, Yahoo Mail, and others). When creating your MSA account, just enter your existing email address.
+
+## Can I use my school or work account?
+
+If your school or employer's email system is managed by Microsoft Azure Active Directory, then generally it should work in MakeCode subject to restrictions put in place by your IT dept.
diff --git a/theme/common.less b/theme/common.less
@@ -1217,6 +1217,10 @@ p.ui.font.small {
     margin-left: 4px;
 }
 
+.ui.modal .actions .left-action {
+    float: left;
+}
+
 .download-callout {
     background-color: #EAE7FF;
     color: #4C309D;
@@ -1922,46 +1926,6 @@ div.simframe.ui.embed {
     -ms-interpolation-mode: nearest-neighbor;
 }
 
-/* Sign in dialog */
-.ui.modal.signindialog {
-    .content {
-        padding: 24px 20px;
-    }
-
-    div.description {
-        margin-bottom: 20px;
-    }
-
-    div.warning {
-        background-color: #F5BC5F;
-        padding: 6px;
-        margin-bottom: 20px;
-    }
-
-    div.container {
-        display: grid;
-        row-gap: 10px;
-        grid-template-rows: 36px auto;
-        grid-template-columns: auto;
-        justify-content: center;
-
-        button {
-            margin: 0;
-        }
-
-        div.prompt {
-            justify-self: center;
-        }
-
-        div.providers {
-            display: grid;
-            row-gap: 20px;
-            grid-template-rows: auto;
-            justify-content: center;
-        }
-    }
-}
-
 .ui.menu .item.sign-in-dropdown {
     padding-left: 0rem;
     padding-right: .3rem;
diff --git a/webapp/src/identity.tsx b/webapp/src/identity.tsx
@@ -41,62 +41,42 @@ export class LoginDialog extends auth.Component<LoginDialogProps, LoginDialogSta
         this.setState({ visible: false });
     }
 
+    private async signInAsync(provider: pxt.AppCloudProvider): Promise<void> {
+        pxt.tickEvent(`identity.loginClick`, { provider: provider.name, rememberMe: this.state.rememberMe.toString() });
+        await auth.loginAsync(provider.id, this.state.rememberMe, {
+            hash: this.state.continuationHash
+        });
+    }
+
     renderCore() {
         const { visible } = this.state;
-        const providers = pxt.auth.identityProviders();
+        const msft = pxt.auth.identityProvider("microsoft");
+
+        const buttons: sui.ModalButton[] = [];
+        buttons.push({
+            label: lf("Sign in"),
+            onclick: async () => await this.signInAsync(msft),
+            icon: "checkmark",
+            approveButton: true,
+            className: "positive"
+        });
+
+        const actions: JSX.Element[] = [];
+        actions.push(<sui.PlainCheckbox label={lf("Remember me")} onChange={this.handleRememberMeChanged} />);
 
         return (
             <sui.Modal isOpen={visible} className="signindialog" size="tiny"
-                onClose={this.hide} dimmer={true}
-                closeIcon={true} header={lf("Sign in or Signup")}
+                onClose={this.hide} dimmer={true} buttons={buttons} actions={actions}
+                closeIcon={true} header={lf("Sign into {0}", pxt.appTarget.appTheme.organizationText)}
                 closeOnDimmerClick closeOnDocumentClick closeOnEscape>
-                <div className="description">
-                    <p>{lf("Connect an existing account in order to sign in or signup for the first time.")} <sui.Link className="ui" text={lf("Learn more")} icon="external alternate" ariaLabel={lf("Learn more")} href="https://aka.ms/cloudsave" target="_blank" onKeyDown={sui.fireClickOnEnter} /></p>
-                </div>
-                <div className="container">
-                    <div className="prompt">
-                        <p>Choose an account to connect:</p>
-                    </div>
-                    <div className="providers">
-                        <div className="provider">
-                            {providers.map((p, key) => (
-                                <ProviderButton key={key} provider={p} rememberMe={this.state.rememberMe} continuationHash={this.state.continuationHash} />
-                            ))}
-                        </div>
-                        <div className="remember-me">
-                            <sui.PlainCheckbox label={lf("Remember me")} onChange={this.handleRememberMeChanged} />
-                        </div>
-                    </div>
-                </div>
+                <p>{lf("Sign in with your Microsoft Account. We'll save your projects to the cloud, where they're accessible from anywhere.")}</p>
+                <p>{lf("Don't have a Microsoft Account? Start signing in to create one!")}</p>
+                <sui.Link className="ui" text={lf("Learn more")} icon="external alternate" ariaLabel={lf("Learn more")} href="/identity/sign-in" target="_blank" onKeyDown={sui.fireClickOnEnter} />
             </sui.Modal>
         );
     }
 }
 
-type ProviderButtonProps = {
-    provider: pxt.AppCloudProvider;
-    rememberMe: boolean;
-    continuationHash: string;
-};
-
-class ProviderButton extends data.PureComponent<ProviderButtonProps, {}> {
-
-    handleLoginClicked = async () => {
-        const { provider, rememberMe } = this.props;
-        pxt.tickEvent(`identity.loginClick`, { provider: provider.name, rememberMe: rememberMe.toString() });
-        await auth.loginAsync(provider.id, rememberMe, {
-            hash: this.props.continuationHash
-        });
-    }
-
-    renderCore() {
-        const { provider } = this.props;
-        return (
-            <sui.Button icon={`xicon ${provider.id}`} text={provider.name} onClick={this.handleLoginClicked} />
-        );
-    }
-}
-
 export type UserMenuProps = ISettingsProps & {
     continuationHash?: string;
 };
@@ -192,7 +172,7 @@ export class UserMenu extends auth.Component<UserMenuProps, UserMenuState> {
                     </sui.Item>
                     : undefined}
                 {showGhUnlink ? <div className="ui divider"></div> : undefined}
-                {!loggedIn ? <sui.Item role="menuitem" text={lf("Sign in")} onClick={this.handleLoginClicked}/> : undefined}
+                {!loggedIn ? <sui.Item role="menuitem" text={lf("Sign in")} onClick={this.handleLoginClicked} /> : undefined}
                 {loggedIn ? <sui.Item role="menuitem" text={lf("Sign out")} onClick={this.handleLogoutClicked} /> : undefined}
             </sui.DropdownMenu>
         );
diff --git a/webapp/src/sui.tsx b/webapp/src/sui.tsx
@@ -1167,6 +1167,7 @@ export interface ModalProps extends ReactModal.Props {
 
     helpUrl?: string;
     headerActions?: JSX.Element[];
+    actions?: JSX.Element[];
     buttons?: ModalButton[];
     onPositionChanged?: Function;
     allowResetFocus?: boolean;
@@ -1333,9 +1334,10 @@ export class Modal extends data.Component<ModalProps, ModalState> {
             <div id={this.id + 'desc'} className={`${longer ? 'scrolling' : ''} ${headerActions ? 'has-actions' : ''} content`}>
                 {children}
             </div>
-            {!isFullscreen && this.props.buttons && this.props.buttons.length > 0 ?
+            {!isFullscreen && (this.props.actions && this.props.actions.length || this.props.buttons && this.props.buttons.length) ?
                 <div className="actions">
-                    {this.props.buttons.map(action =>
+                    {this.props.actions?.map(action => <div className="left-action">{action}</div>)}
+                    {this.props.buttons?.map(action =>
                         action.url ?
                             <Link
                                 key={`action_${action.label}`}
