Login Fixes #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

WillQizza wants to merge 30 commits into main from login-fixes

.gitignore

-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,9 @@ @@
     **/yarn-error.log
     **/.DS_Store
     **/dist/
-    server/data/
+    server/data/assets/*
+    server/data/tmp/*
+    server/data/yjs/*
     screenshot-server/data/
     deploy/
     **/.env
@@ Expand Down @@

client/public/jwt-signin.html

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -58,7 +58,7 @@ <h1>JWT Sign In</h1>
  
          function login(username, relm, secret = defaultSecret) {

            const jwt = makeToken(username, { [relm]: "ae" });

            window.location = "/?relm=" + relm + "&jwt=" + jwt;

            window.location = "/" + relm + "?jwt=" + jwt;

          }

          // Example Payload:

client/src/main/RelmRestAPI.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -10,6 +10,10 @@ export type LoginCredentials = { @@
       password: string
     };
+    export type RegisterCredentials = LoginCredentials & {
+      identity: SavedIdentityData
+    };
     export class RelmRestAPI {
       url: string;
       relmName: string;
@@ Expand Down Expand Up / @@ -303,7 +307,7 @@ export class RelmRestAPI { @@
         }
       }
-      async registerParticipant(credentials: LoginCredentials): Promise<AuthenticationResponse> {
+      async registerParticipant(credentials: RegisterCredentials): Promise<AuthenticationResponse> {
         const result: AuthenticationResponse = await this.post("/auth/connect/local/signup", {
           ...credentials
         });
@@ Expand Down @@

client/src/ui/ButtonControls/ConnectionButton/SignInWindow.svelte

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -6,6 +6,7 @@
  
      import { showCenterButtons } from "~/stores/showCenterButtons";

      import { getNotificationsContext } from "svelte-notifications";

      import { _ } from "~/i18n";

      import ConnectionSubmitInput from "./components/ConnectionSubmitInput.svelte";

      export let enabled;

      export let dispatch: Dispatch;

    @@ -14,6 +15,7 @@
  
      let showingSignin = true;

      // Handles login via social oAuths

      async function onSocialClick({ target }) {

        const socialId = target.getAttribute("data-login");

    @@ -31,20 +33,21 @@
  
            text: $_(response.reason, {

              default: response.details

            }),

            position: "top-left",

            position: "bottom-center",

            removeAfter: 3000

          });

        }

      }

      async function onUsernamePasswordAction(action: "signin"|"register") {

      async function onEmailPasswordAction() {

        const email = (document.querySelector('input[name="email"]') as HTMLInputElement).value;

        const password = (document.querySelector('input[name="password"]') as HTMLInputElement).value;

        const identity = worldManager.participants.local.identityData;

        const response = action === "register"

          ? await worldManager.register({ email, password }) 

          : await worldManager.login({ email, password });

        const response = showingSignin

          ? await worldManager.login({ email, password }) 

          : await worldManager.register({ email, password, identity });

        if (response.status === "success") {

          // Username/password was successfully registered.

    @@ -55,7 +58,7 @@
  
            text: $_(response.reason, {

              default: response.details

            }),

            position: "top-left",

            position: "bottom-center",

            removeAfter: 3000

          });

        }

    @@ -107,84 +110,91 @@
  
    <Fullwindow zIndex={100}>

      <r-background></r-background>

      <r-exit on:click={exitScreen}>

      <r-exit on:click={exitScreen} id="top-right-exit">

        <img src="/ESC_button.png" style="width: 48px;" alt="Signout" />

      </r-exit>

      <r-window>

        <!-- SIGNIN WINDOW -->

        {#if showingSignin}

          <r-content>

            <!-- Email/password/toggles -->

            <r-group>

              <r-section class="add-padding-if-tall-enough medium">

        <form on:submit|preventDefault={onEmailPasswordAction}>

          {#if showingSignin}

            <r-content>

              <!-- Email/password/toggles -->

              <r-group>

                <r-section class="add-padding-if-tall-enough medium">

                  <SignInTextInput name="email" type="email" label="EMAIL" />

                </r-section>

                <r-section>

                  <SignInTextInput name="password" type="password" label="PASS CODE" />

                </r-section>

                <!-- <r-section id="forget-section">

                  <div style="float: left;">

                    <r-forget-passcode-link class="fake-link">Forgot Pass Code</r-forget-passcode-link>

                  </div>

                </r-section> -->

              </r-group>

              <!-- SIGN IN/Socials -->

              <r-group>

                <div class="submit">

                  <ConnectionSubmitInput label="SIGN IN" />

                </div>

                <div class="socials add-padding-if-tall-enough small">

                  <span>or enter via:</span><br />

                  <r-connections>

                    <img src="/social/facebook.png" data-login="facebook" alt="Facebook" on:click={onSocialClick} />

                    <img src="/social/twitter.png" data-login="twitter" alt="Twitter" on:click={onSocialClick} />

                    <img src="/social/google.png" data-login="google" alt="Google" on:click={onSocialClick} />

                    <img src="/social/linkedin.png" data-login="linkedin" alt="Linkedin" on:click={onSocialClick} />

                  </r-connections>

                </div>

              </r-group>

              <!-- Sign up text -->

              <r-group class="switch-screen-text" style="padding-top: 10%;" on:click={switchScreen}>

                <div class="fake-link">

                  <span>New here? Create Identity</span>

                  <br />

                  <span>START FOR FREE</span>

                </div>

                <div id="bottom-center-exit">

                  <r-exit on:click={exitScreen}>

                    <img src="/ESC_button.png" style="width: 48px;" alt="Signout" />

                  </r-exit>

                </div>

              </r-group>

            </r-content>

          {:else}

            <!-- REGISTER WINDOW -->

            <r-content style="position: relative;" id="register">

              <r-section class="add-padding-if-tall-enough large">

                <SignInTextInput name="email" type="email" label="EMAIL" />

              </r-section>

              <r-section>

                <SignInTextInput name="password" type="password" label="PASS CODE" />

              </r-section>

              <!-- <r-section id="forget-section">

                <div style="float: left;">

                  <r-forget-passcode-link class="fake-link">Forgot Pass Code</r-forget-passcode-link>

                </div>

              </r-section> -->

            </r-group>

            <!-- SIGN IN/Socials -->

            <r-group>

              <div class="submit">

                <span class="fake-link" on:click={() => onUsernamePasswordAction("signin")} >SIGN IN</span>

              </div>

              <div class="socials add-padding-if-tall-enough small">

                <span>or enter via:</span><br />

              <r-section class="socials">

                <r-connections>

                  <img src="/social/facebook.png" data-login="facebook" alt="Facebook" on:click={onSocialClick} />

                  <img src="/social/twitter.png" data-login="twitter" alt="Twitter" on:click={onSocialClick} />

                  <img src="/social/google.png" data-login="google" alt="Google" on:click={onSocialClick} />

                  <img src="/social/linkedin.png" data-login="linkedin" alt="Linkedin" on:click={onSocialClick} />

                </r-connections>

              </div>

            </r-group>

            <!-- Sign up text -->

            <r-group class="switch-screen-text" style="padding-top: 10%;" on:click={switchScreen}>

              <div class="fake-link">

                <span>New here? Create Identity</span>

                <br />

                <span>START FOR FREE</span>

              </div>

            </r-group>

          </r-content>

        {:else}

          <!-- REGISTER WINDOW -->

          <r-content style="position: relative;" id="register">

            <r-section class="add-padding-if-tall-enough large">

              <SignInTextInput name="email" type="email" label="EMAIL" />

            </r-section>

            <r-section>

              <SignInTextInput name="password" type="password" label="PASS CODE" />

            </r-section>

            <r-section class="socials">

              <r-connections>

                <img src="/social/facebook.png" data-login="facebook" alt="Facebook" on:click={onSocialClick} />

                <img src="/social/twitter.png" data-login="twitter" alt="Twitter" on:click={onSocialClick} />

                <img src="/social/google.png" data-login="google" alt="Google" on:click={onSocialClick} />

                <img src="/social/linkedin.png" data-login="linkedin" alt="Linkedin" on:click={onSocialClick} />

              </r-connections>

            </r-section>

            <r-section style="position: absolute; transform: translateX(-15%); width: 150%;">

              <div class="submit">

                <span class="fake-link" on:click={() => onUsernamePasswordAction("register")} >CREATE ACCOUNT</span>

              </div>

              <r-group class="switch-screen-text" on:click={switchScreen}>

                <span class="fake-link">Already have an account? Sign in</span>

              </r-group>

            </r-section>

          </r-content>

        {/if}

              </r-section>

              <r-section style="position: absolute; transform: translateX(-15%); width: 150%;">

                <div class="submit">

                  <ConnectionSubmitInput label="CREATE ACCOUNT" />

                </div>

                <r-group class="switch-screen-text" on:click={switchScreen}>

                  <span class="fake-link">Already have an account? Sign in</span>

                </r-group>

              </r-section>

            </r-content>

          {/if}

        </form>

      </r-window>

    </Fullwindow>

    @@ -202,9 +212,15 @@
  
      //   font-size: 1.1em;

      // }

      .submit span {

        color: #7f7f7f;

        font-size: 4em;

      #bottom-center-exit {

        margin-top: 1em;

        display: none;

      }

      #top-right-exit {

        position: absolute;

        top: 5px;

        right: 5px;

      }

      .switch-screen-text {

    @@ -253,15 +269,7 @@
  
        opacity: 0.7;

      }

      r-exit {

        display: block;

        position: absolute;

        top: 5px;

        right: 5px;

        cursor: pointer;

      }

      r-window {

      r-window form {

        display: flex;

        justify-content: center;

        align-items: center;

    @@ -279,13 +287,18 @@
  
      r-group {

        display: block;

        height: 33%;

        min-height: 5em;

      }

      r-section {

        display: block;

        margin-top: 0.5em;

      }

      r-exit {

        cursor: pointer;

      }

      // r-forget-passcode-link {

      //   color: #a77822;

      //   cursor: pointer;

    @@ -316,13 +329,19 @@
  
      }

      // If on Mobile, make the submit text smaller

      @media only screen and (max-width: 450px) {

        .submit span {

          font-size: 2.5em;

        }

      @media only screen and (min-width: 520px) {

        r-group {

          height: 25%;

        }

      }

      @media only screen and (max-width: 520px) {

        #bottom-center-exit {

          display: block;

        }

        #top-right-exit {

          display: none;

        }

      }

    </style>

client/src/ui/ButtonControls/ConnectionButton/components/ConnectionSubmitInput.svelte

-Original file line number
+Diff line change
@@ -0,0 +1,22 @@
+    <script lang="ts">
+      export let label = "";
+    </script>
+    <r-connection-submit-input>
+      <input type="submit" value={label} />
+    </r-connection-submit-input>
+    <style>
+        input[type="submit"] {
+        color: #7f7f7f;
+        font-size: 4em;
+        background: none;
+        border: none;
+        outline: none;
+      }
+      input[type="submit"]:hover, input[type="submit"]:focus {
+        text-decoration: underline;
+        cursor: pointer;
+      }
+    </style>

client/src/ui/Overlay/Overlay.svelte

-Original file line number
+Diff line change
@@ Expand Up / @@ -7,7 +7,7 @@ @@
       import VideoButton from "~/ui/ButtonControls/VideoButton";
       import AvatarSetupButton from "~/ui/ButtonControls/AvatarSetupButton";
       import ShareScreenButton from "~/ui/ButtonControls/ShareScreenButton";
-      import { SignInButton } from "~/ui/ButtonControls/ConnectionButton";
+      import { SignInButton, LogoutButton } from "~/ui/ButtonControls/ConnectionButton";
       import InviteButton from "~/ui/ButtonControls/InviteButton";
       import ChatButton from "~/ui/Chat/ChatButton.svelte";
@@ Expand All / @@ -34,7 +34,6 @@ @@
       import { permits } from "~/stores/permits";
       import SignInWindow from "../ButtonControls/ConnectionButton/SignInWindow.svelte";
-      import LogoutButton from "../ButtonControls/ConnectionButton/LogoutButton.svelte";
       export let dispatch;
       export let state: State;
@@ Expand Down @@

client/src/world/WorldManager.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -83,7 +83,7 @@ import { Participant } from "~/types/identity";
  
    import { ParticipantManager } from "~/identity/ParticipantManager";

    import { ParticipantYBroker } from "~/identity/ParticipantYBroker";

    import { delay } from "~/utils/delay";

    import { LoginCredentials, RelmRestAPI } from "~/main/RelmRestAPI";

    import { LoginCredentials, RegisterCredentials, RelmRestAPI } from "~/main/RelmRestAPI";

    import { PhotoBooth } from "./PhotoBooth";

    import { audioMode, AudioMode } from "~/stores/audioMode";

    import { Outline } from "~/ecs/plugins/outline";

    @@ -835,7 +835,7 @@ export class WorldManager {
  
      }

      async register(

        credentials: LoginCredentials

        credentials: RegisterCredentials

      ): Promise<AuthenticationResponse> {

        const data = await this.api.registerParticipant(credentials);

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Login Fixes #21

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Login Fixes #21

Are you sure you want to change the base?

Uh oh!

Login Fixes #21

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!