Olo Authentication

@olo/borderless-authentication is a public package allowing Olo's partners to easily import and connect to Olo Auth Service functionality.

Installation

npm install @olo/borderless-authentication

or...

yarn add @olo/borderless-authentication

Usage

The packages can be imported to a project after installation:

import { CreateAccountCheckbox, VerifyAccountOverlay } from '@olo/borderless-authentication';

const checkbox = new CreateAccountCheckbox(...);
const overlay = new VerifyAccountOverlay();
// ...

Customization

The CreateAccountCheckbox accepts custom styles in the shape of:

type CustomStyles = {
  size: string;
  spacing: string;
  border: string;
  background: string;
  borderRadius: string;
  textColor: string;
  labelColor: string;
  fontFamily: string;
  labelFontSize: string;
  textFontSize: string;
  disclaimerFontSize: string;
};

Any of the above styles can be applied to the checkbox through the setStyles method available on a CreateAccountCheckbox instance.

Please be aware of any accessibility and usability concerns that could arise from changing the default styles.

const checkbox = new CreateAccountCheckbox(...);

checkbox.setStyles({
  size: '3ch',
  spacing: '2ch',
  border: '2ch inset #c6cae5',
  background: '#efefef',
  borderRadius: '2ch',
  textColor: '#7e8090',
  labelColor: '#2d76f6',
  fontFamily: 'monospace',
  labelFontSize: '2ch',
  textFontSize: '1.5ch',
  disclaimerFontSize: '1.5ch',
});

The OloCodeVerification component accepts custom styles in the shape of:

type CustomStyles = {
  gap: string;
  padding: string;
  fontSize: string;
  fontWeight: string;
  fontColor: string;
  fontFamily: string;
  background: string;
  primaryColor: string;
  borderColor: string;
  borderWidth: string;
  borderRadius: string;
  borderColorInvalid: string;
};

These styles can also be applied through the setStyles method on the component:

const codeVerificationComponent = document.querySelector('olo-code-verification');

codeVerificationComponent.setStyles({
  gap: '1rem',
  padding: ' 1rem',
  fontSize: '1.5rem',
  fontColor: 'black',
  fontFamily: 'monospace',
  primaryColor: 'lawngreen',
  borderColor: 'black',
  borderRadius: '5rem',
  borderWidth: '2px',
  borderColorInvalid: 'crimson',
});

These can also be changed in the verification overlay by passing custom styles to the VerifyAccountOverlay's setStyles method.

const verificationOverlay = new VerifyAccountOverlay(...);

verificationOverlay.setStyles({
  gap: '1rem',
  padding: ' 1rem',
  fontSize: '1.5rem',
  fontColor: 'black',
  fontFamily: 'monospace',
  primaryColor: 'lawngreen',
  borderColor: 'black',
  borderRadius: '5rem',
  borderWidth: '2px',
  borderColorInvalid: 'crimson',
});

verificationOverlay.attachEmailListener({
  ...,
  useSeparatedInputs: true, // Custom styles only apply to the separated inputs variant of the overlay
});

The WorkflowModal component also accepts the above styles that then get applied to the OloCodeVerification component (separate inputs are the default).

Licenses

This package falls under the terms of the Olo license.

Copyright © 2023 Olo Inc. All rights reserved.

Subject to the terms and conditions of the license, you are hereby granted a non-exclusive, worldwide, royalty-free license to (a) copy and modify the software in source code or binary form for your use in connection with the software services and interfaces provided by Olo, and (b) redistribute unmodified copies of the software to third parties. The above copyright notice and this license shall be included in or with all copies or substantial portions of the software. Your use of this software is subject to the Olo APIs Terms of Use, available at https://www.olo.com/api-usage-terms. This license does not grant you permission to use the trade names, trademarks, service marks, or product names of Olo, except as required for reasonable and customary use in describing the origin of the software and reproducing the content of this license. THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Borderless uses Lit under the terms of the BSD-3-Clause license.