diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/actions/firebase.js | 18 | ||||
| -rw-r--r-- | src/components/mao-account.js | 79 | ||||
| -rw-r--r-- | src/reducers/firebase.js | 5 |
3 files changed, 79 insertions, 23 deletions
diff --git a/src/actions/firebase.js b/src/actions/firebase.js index becc62e..2d24908 100644 --- a/src/actions/firebase.js +++ b/src/actions/firebase.js @@ -42,10 +42,11 @@ export const authFail = (errorCode) => { export const authSuccess = (_user) => { alert('Sign In Success'); return { - type: AUTH_SUCCESS, - payload: true, - code: "Success", - uid: _user.uid + type: AUTH_SUCCESS, + payload: true, + code: "Success", + uid: _user.uid, + userEmail: _user.email } } @@ -57,10 +58,11 @@ export const signOut = () => (dispatch) => { export const authSignOut = () => { return { - type: AUTH_SIGN_OUT, - payload: false, - code: "Signed Out User", - uid: null + type: AUTH_SIGN_OUT, + payload: false, + code: "Signed Out User", + uid: "", + userEmail: "" } } //End Firebase Auth diff --git a/src/components/mao-account.js b/src/components/mao-account.js index 6fb1d3d..f6f32c6 100644 --- a/src/components/mao-account.js +++ b/src/components/mao-account.js @@ -32,14 +32,9 @@ import { ButtonSharedStyles } from './button-shared-styles.js' // Import paper elements import '@polymer/paper-input/paper-input.js'; import '@polymer/paper-card/paper-card.js'; -import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js'; -import '@polymer/paper-item/paper-item.js'; import '@polymer/paper-slider/paper-slider.js'; import '@polymer/paper-button/paper-button.js'; -// Import other customElements -import '@vaadin/vaadin-date-picker/vaadin-date-picker.js'; - class MaoAccount extends connect(store)(PageViewElement) { _render(props) { return html` @@ -48,7 +43,7 @@ class MaoAccount extends connect(store)(PageViewElement) { <style> - .sign-in-card { + .sign-in-card, .acc-info-card { display: block; } @@ -57,15 +52,23 @@ class MaoAccount extends connect(store)(PageViewElement) { margin-right: auto; display: block; width: 50%; - } } + + .account-email { + word-break: break-all; + } + + .center { + text-align: center; + } + </style> <section> - <paper-card class="sign-in-card" elevation="0"> + <paper-card class="sign-in-card" elevation="0" hidden="${props.signedIn}"> <div class="card-content"> <h2 class="underline">Sign In</h2> @@ -79,7 +82,32 @@ class MaoAccount extends connect(store)(PageViewElement) { <div class="card-actions"> <paper-button class="info" hidden="${props.signedIn}" raised on-tap="${() => this.logIn()}">Sign In</paper-button> - <paper-button class="info" hidden="${!props.signedIn}" raised on-tap="${() => store.dispatch(signOut())}">Sign Out</paper-button> + </div> + + </paper-card> + + <paper-card class="acc-info-card" elevation="0" hidden="${!props.signedIn}"> + + <div class="card-content"> + <h2 class="underline">Account</h2> + + <div class="center"> + <h3>Email</h3> + <p class="account-email">${props.userEmail}</p> + + <h3>Username</h3> + <p>${props.userEmail.replace("@communityschoolnaples.org", "")}</p> + + <h3>Divison</h3> + <p>Mu</p> + + <h3 hidden="${props.registeredComps.length<1}">Registered Competitions</h3> + <div id="competition-list"></div> + </div> + </div> + + <div class="card-actions"> + <paper-button class="info" raised on-tap="${() => store.dispatch(signOut())}">Sign Out</paper-button> </div> </paper-card> @@ -90,13 +118,19 @@ class MaoAccount extends connect(store)(PageViewElement) { static get properties() { return { // This is the data from the store. - signedIn: Boolean, - authMessage: String + signedIn: Boolean, + authMessage: String, + userEmail: String, + registeredComps: Array }} _stateChanged(state) { - this.signedIn = state.firebase.initialized; - this.authMessage = state.firebase.authMessage; + this.signedIn = state.firebase.initialized; + this.authMessage = state.firebase.authMessage; + this.userEmail = state.firebase.userEmail; + + this.registeredComps = state.firebase.registeredComps; + this.createCompetitionList( this.registeredComps); } logIn() { @@ -113,6 +147,25 @@ class MaoAccount extends connect(store)(PageViewElement) { passwordElement.value = ""; } + createCompetitionList(comps) { + if(this.shadowRoot) { + var listArea = this.shadowRoot.getElementById('competition-list'); + listArea.innerHTML = ""; + + var mainDiv = document.createElement('div'); + mainDiv.role = "listbox"; + + for(var i = 0; i < comps.length; i++) { + var competitionElement = document.createElement('p'); + competitionElement.innerHTML = comps[i]; + competitionElement.class = "center"; + mainDiv.appendChild( competitionElement); + } + + listArea.appendChild(mainDiv); + } + } + } window.customElements.define('mao-account', MaoAccount); diff --git a/src/reducers/firebase.js b/src/reducers/firebase.js index b708dbe..1721d31 100644 --- a/src/reducers/firebase.js +++ b/src/reducers/firebase.js @@ -17,14 +17,15 @@ import { } from '../actions/firebase.js'; -const firebase = (state = {initialized: false, authMessage: "", hours: -1, requestedHours: -1, uid: null, registeredComps: []}, action) => { +const firebase = (state = {initialized: false, authMessage: "", hours: -1, requestedHours: -1, uid: "", userEmail: "", registeredComps: []}, action) => { switch (action.type) { case AUTH_SUCCESS: return { ...state, initialized: action.payload, authMessage: action.code, - uid: action.uid + uid: action.uid, + userEmail: action.userEmail }; break; |