ui-for-firebase-authentication
Version:
UI for Firebase Authentication (Firebase UI alternative supporting v9+)
49 lines (48 loc) • 6.98 kB
JavaScript
const Apple_Icon_Src = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI4MTQiIGhlaWdodD0iMTAwMCI+CiAgPHBhdGggZD0iTTc4OC4xIDM0MC45Yy01LjggNC41LTEwOC4yIDYyLjItMTA4LjIgMTkwLjUgMCAxNDguNCAxMzAuMyAyMDAuOSAxMzQuMiAyMDIuMi0uNiAzLjItMjAuNyA3MS45LTY4LjcgMTQxLjktNDIuOCA2MS42LTg3LjUgMTIzLjEtMTU1LjUgMTIzLjFzLTg1LjUtMzkuNS0xNjQtMzkuNWMtNzYuNSAwLTEwMy43IDQwLjgtMTY1LjkgNDAuOHMtMTA1LjYtNTctMTU1LjUtMTI3QzQ2LjcgNzkwLjcgMCA2NjMgMCA1NDEuOGMwLTE5NC40IDEyNi40LTI5Ny41IDI1MC44LTI5Ny41IDY2LjEgMCAxMjEuMiA0My40IDE2Mi43IDQzLjQgMzkuNSAwIDEwMS4xLTQ2IDE3Ni4zLTQ2IDI4LjUgMCAxMzAuOSAyLjYgMTk4LjMgOTkuMnptLTIzNC0xODEuNWMzMS4xLTM2LjkgNTMuMS04OC4xIDUzLjEtMTM5LjMgMC03LjEtLjYtMTQuMy0xLjktMjAuMS01MC42IDEuOS0xMTAuOCAzMy43LTE0Ny4xIDc1LjgtMjguNSAzMi40LTU1LjEgODMuNi01NS4xIDEzNS41IDAgNy44IDEuMyAxNS42IDEuOSAxOC4xIDMuMi42IDguNCAxLjMgMTMuNiAxLjMgNDUuNCAwIDEwMi41LTMwLjQgMTM1LjUtNzEuM3oiLz4KPC9zdmc+";
const Google_Icon_Src = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ29weXJpZ2h0IChjKSAyMDE2IEdvb2dsZSBJbmMuIEFsbCByaWdodHMgcmVzZXJ2ZWQuIC0tPgo8c3ZnIHdpZHRoPSIxMThweCIgaGVpZ2h0PSIxMjBweCIgdmlld0JveD0iMCAwIDExOCAxMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+Z29vZ2xlX2J1dHRuPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkFydGJvYXJkLTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMzIuMDAwMDAwLCAtNjM5LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iZ29vZ2xlX2J1dHRuIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMzIuMDAwMDAwLCA2MzkuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0ibG9nb19nb29nbGVnXzQ4ZHAiPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMTcuNiw2MS4zNjM2MzY0IEMxMTcuNiw1Ny4xMDkwOTA5IDExNy4yMTgxODIsNTMuMDE4MTgxOCAxMTYuNTA5MDkxLDQ5LjA5MDkwOTEgTDYwLDQ5LjA5MDkwOTEgTDYwLDcyLjMgTDkyLjI5MDkwOTEsNzIuMyBDOTAuOSw3OS44IDg2LjY3MjcyNzMsODYuMTU0NTQ1NSA4MC4zMTgxODE4LDkwLjQwOTA5MDkgTDgwLjMxODE4MTgsMTA1LjQ2MzYzNiBMOTkuNzA5MDkwOSwxMDUuNDYzNjM2IEMxMTEuMDU0NTQ1LDk1LjAxODE4MTggMTE3LjYsNzkuNjM2MzYzNiAxMTcuNiw2MS4zNjM2MzY0IEwxMTcuNiw2MS4zNjM2MzY0IFoiIGlkPSJTaGFwZSIgZmlsbD0iIzQyODVGNCI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02MCwxMjAgQzc2LjIsMTIwIDg5Ljc4MTgxODIsMTE0LjYyNzI3MyA5OS43MDkwOTA5LDEwNS40NjM2MzYgTDgwLjMxODE4MTgsOTAuNDA5MDkwOSBDNzQuOTQ1NDU0NSw5NC4wMDkwOTA5IDY4LjA3MjcyNzMsOTYuMTM2MzYzNiA2MCw5Ni4xMzYzNjM2IEM0NC4zNzI3MjczLDk2LjEzNjM2MzYgMzEuMTQ1NDU0NSw4NS41ODE4MTgyIDI2LjQyNzI3MjcsNzEuNCBMNi4zODE4MTgxOCw3MS40IEw2LjM4MTgxODE4LDg2Ljk0NTQ1NDUgQzE2LjI1NDU0NTUsMTA2LjU1NDU0NSAzNi41NDU0NTQ1LDEyMCA2MCwxMjAgTDYwLDEyMCBaIiBpZD0iU2hhcGUiIGZpbGw9IiMzNEE4NTMiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjYuNDI3MjcyNyw3MS40IEMyNS4yMjcyNzI3LDY3LjggMjQuNTQ1NDU0NSw2My45NTQ1NDU1IDI0LjU0NTQ1NDUsNjAgQzI0LjU0NTQ1NDUsNTYuMDQ1NDU0NSAyNS4yMjcyNzI3LDUyLjIgMjYuNDI3MjcyNyw0OC42IEwyNi40MjcyNzI3LDMzLjA1NDU0NTUgTDYuMzgxODE4MTgsMzMuMDU0NTQ1NSBDMi4zMTgxODE4Miw0MS4xNTQ1NDU1IDAsNTAuMzE4MTgxOCAwLDYwIEMwLDY5LjY4MTgxODIgMi4zMTgxODE4Miw3OC44NDU0NTQ1IDYuMzgxODE4MTgsODYuOTQ1NDU0NSBMMjYuNDI3MjcyNyw3MS40IEwyNi40MjcyNzI3LDcxLjQgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRkJCQzA1Ij48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTYwLDIzLjg2MzYzNjQgQzY4LjgwOTA5MDksMjMuODYzNjM2NCA3Ni43MTgxODE4LDI2Ljg5MDkwOTEgODIuOTM2MzYzNiwzMi44MzYzNjM2IEwxMDAuMTQ1NDU1LDE1LjYyNzI3MjcgQzg5Ljc1NDU0NTUsNS45NDU0NTQ1NSA3Ni4xNzI3MjczLDAgNjAsMCBDMzYuNTQ1NDU0NSwwIDE2LjI1NDU0NTUsMTMuNDQ1NDU0NSA2LjM4MTgxODE4LDMzLjA1NDU0NTUgTDI2LjQyNzI3MjcsNDguNiBDMzEuMTQ1NDU0NSwzNC40MTgxODE4IDQ0LjM3MjcyNzMsMjMuODYzNjM2NCA2MCwyMy44NjM2MzY0IEw2MCwyMy44NjM2MzY0IFoiIGlkPSJTaGFwZSIgZmlsbD0iI0VBNDMzNSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDAgTDEyMCwwIEwxMjAsMTIwIEwwLDEyMCBMMCwwIFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K";
const Facebook_Icon_Src = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjEzcHgiIGhlaWdodD0iMjEzcHgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDIxMyAyMTMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTkwLDIxMnYtNzVoLTI3di0zMWgyN3YtMjVxMCwtNDAgNDAsLTQwcTE1LDAgMjQsMnYyNmgtMTRxLTE2LDAgLTE2LDE2djIxaDMwbC01LDMxaC0yN3Y3NWExMDYgMTA2LDAsMSwwLC0zMiAwIiBjbGFzcz0iZl9sb2dvX2NpcmNsZSIgZmlsbD0id2hpdGUiPjwvcGF0aD4KICA8cGF0aCBkPSJNOTAsMjEydi03NWgtMjd2LTMxaDI3di0yNXEwLC00MCA0MCwtNDBxMTUsMCAyNCwydjI2aC0xNHEtMTYsMCAtMTYsMTZ2MjFoMzBsLTUsMzFoLTI3djc1YTEwNiAxMDYsMSwwLDEsLTMyIDAiIGNsYXNzPSJmX2xvZ29fZiIgZmlsbD0iIzFhNzdmMiI+PC9wYXRoPgo8L3N2Zz4=";
const Email_Icon_Src = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIwMHB0IiBoZWlnaHQ9IjEyMDBwdCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTIwMCAxMjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPHBhdGggZD0ibTc4NC44OSA2MDAgMzUyLjkyLTMyOC41N2MxLjQ1MzEgNS4zNDM4IDIuMTg3NSAxMC44NjMgMi4xODM2IDE2LjQwMnY2MjQuMzRjMC4wMDM5MDYgNS41MzkxLTAuNzMwNDcgMTEuMDU5LTIuMTgzNiAxNi40MDJ6bS02ODguNzkgMzY5LjEyYzguNDE0MSA0LjAzNTIgMTcuNjI5IDYuMTI4OSAyNi45NjEgNi4xMTcyaDk1My44NmMxMC45MTQgMC4wMDM5MDcgMjEuNjM3LTIuODU1NSAzMS4xMDItOC4yODkxbC0zNTguNjMtMzMzLjktNjUuMDYyIDYwLjU1NWMtMjIuMzE2IDIwLjMwOS01MS41NjIgMzEuMzAxLTgxLjczIDMwLjcxOS0zMC4zMjQtMC4wOTM3NS01OS41MjMtMTEuNDczLTgxLjkxNC0zMS45MjJsLTYzLjY4NC01OS4zMDV6bS0zMi41MDgtNzAyLjM1Yy0yLjQwNjIgNi43NTc4LTMuNjI1IDEzLjg4My0zLjYwMTYgMjEuMDU5djYyNC4zNGMtMC4wMjM0MzggNy4xNzU4IDEuMTk1MyAxNC4zMDEgMy42MDE2IDIxLjA1OWwzNTcuOTEtMzMzLjIzem0xMDEzLjMtNDJoLTk1My44MWMtOS4zMzItMC4wMTE3MTktMTguNTQ3IDIuMDgyLTI2Ljk2MSA2LjExNzJsMzc3LjIzIDM1MS4yNyAwLjE1NjI1IDAuMTQ0NTMgODAuMTYgNzQuNjQxYzEzLjQ5NiAxMi4yNzMgMzEuMDc4IDE5LjA4MiA0OS4zMiAxOS4xMDIgMTcuODIgMC40NDkyMiAzNS4xNDEtNS45MzM2IDQ4LjQwNi0xNy44NDRsODEuNjAyLTc1LjkxIDAuMTIxMDktMC4xMjEwOSAzNzQuOTMtMzQ5LjEzYy05LjQ2NDgtNS40MjU4LTIwLjE5MS04LjI4MTItMzEuMTAyLTguMjc3M3oiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPgo8L3N2Zz4K";
const Apple_Dark = {
name: "Apple",
icon: Apple_Icon_Src,
backgroundColor: "black",
color: "white",
iconFilter: "invert(1)" //Invert logo for dark background
};
const Apple_Light = {
name: "Apple",
icon: Apple_Icon_Src,
backgroundColor: "black",
color: "white",
iconFilter: "invert(1)" //Invert logo for dark background
};
const Google_Light = {
name: "Google",
icon: Google_Icon_Src,
backgroundColor: "#fff",
color: "black"
};
const Facebook_Dark = {
name: "Facebook",
icon: Facebook_Icon_Src,
backgroundColor: "#1a77f2",
color: "white",
};
const Email_Dark = {
name: "Email",
icon: Email_Icon_Src,
backgroundColor: "firebrick",
color: "white",
iconFilter: "invert(1)" //Invert logo for dark background
};
/**
* Templates for displaying sign in options
*/
const Display_Templates = {
Apple_Dark,
Apple_Light,
Google_Light,
Facebook_Dark,
Email_Dark
};
export { Display_Templates };