# public-components

Public components to enhance your interaction with Teamwork

## Login with Teamwork button

### Usage

*From the CDN*

```html

<script type="module" src="https://cdn.teamwork.com/public/latest/login-button.js"></script>
<teamwork-login-button
  redirectURI="https://www.myapp.com/"
  clientID="myClientID"
  iconOnly
  state="appstate"
  color="slate"
  size="large"
  borders="rounded"
/>
```

*Using NPM*

First install it

```
npm -i @teamwork/login-button --save
```

Then, in your `main.js` file: 
```js
import '@teamwork/login-button';
```

And somewhere in you template: 

```html
<teamwork-login-button
  redirectURI="https://www.myapp.com/"
  clientID="myClientID"
  icon="false"
  state="appstate"
  color="slate"
  size="large"
  borders="default"
/>
```

### Parameters

| Name          	| Default   	| Description                                             	| Allowed Values                                                       |
|---------------	|-----------	|---------------------------------------------------------	|------------------------------------------------------------------------------	|
| `clientID`    	|           	| **Required**. Client ID from the [Developer Portal](https://developer.teamwork.com/guides/how-to-authenticate-via-app-login-flow/)                 	|                                                                              	|
| `redirectURI` 	|           	| **Required**. Redirect URI for your Developer Portal app 	|                                                                              	|
| `state`       	|           	| Optional. Value will be passed to your redirect URI as a query parameter        	|                                                                              	|
| `size`        	| `medium`  	| Size of the button                                      	| `large` `medium` `small`                                                     	|          	|
| `borders`     	| `default` 	| Button border style                                      	| `default` `rounded` `square`                                                 	|          	|
| `color`       	| `white`   	| Button color theme                                        | `slate` `white` `indigo` `pink`                                              	|          	|
| `iconOnly`    	| `false`   	| Show a compact, icon-only version of the button       	| Attribute presence indicates `true` 	|          	|

Introducing Reports: An Extensible Reporting Framework for Socket Data

@teamwork/login-button

karenhodgins

ryanoc8

laurenoc125

karolina.truszkowska

c0smin

alifletch

imrafalman

encarnaamoros

marcos.gutierrez

tonisanta

aineosullivan

gmc123

rodynnz

tanyairwinblack

pmgriffin

victoriasloan

a1d0

alvarotw

seanogdev

maximised

panagiotisptr_teamwork

conor.quin

manucuestatw

chrisrollins65

andrssl

kclaur

yonson2

xlerida

pktw

eddieg152

decob

pinkkis

ilserodriguez

jamesh182

k823

crssn

chrisjtwomey

simonbb

vg500

ma-jerez

ivayloovcharov

ismaelpenalver

kadenn

nathanmcclelland

sinderpl

fatihunlu

nathandennis

stevenr84

lmcaree

jordanteamwork

mjteamwork

matteobandiera

stdiopt

jacknev

felipemrodrigues

roryok

duncan1a

garycremen

dommurphytw

bmckay397

sineadcullinane

miccc

shanepm

sheyla.marhuenda

techfort

rafaeljusto

1001hz

ryanlync

michaelwebcork

felixls

4ver

emmetcampion

bakaat

aetheon

teamwork-dev

cianwoods

kersh

jamesdraper5

aodhom

ripexz

morethanaprogrammer

jatochnietdan

yannig

samternent

pshad0w

irltopper

dmackey

yawlhead91

gordonmurray

daveohalloran

gkubisa

hollymc

jessicaaferraz

arielpiecha-teamwork

cesartw

jamesmccullough

garymcbay

ekm1908

romanodesouzatw

adamcarroll-teamwork

login-button

An ambiguous license classifier was found.

What is an ambiguous license classifier?

Ambiguous License Classifier

Source files are encoded using a non-standard text encoding.

What is bad text encoding?

Bad text encoding

Package version is not a valid semantic version (semver).

What is bad semver?

Bad semver

Package has dependencies with an invalid semantic version. This could be a sign of beta, low quality, or unmaintained dependencies.

What is bad dependency semver?

Bad dependency semver

Source files contain bidirectional unicode control characters. This could indicate a Trojan source supply chain attack. See: trojansource.codes for more information.

What are bidirectional unicode control characters?

Bidirectional unicode control characters

This package has multiple bin scripts with the same name. This can cause non-deterministic behavior when installing or could be a sign of a supply chain attack.

What is bin script confusion?

Bin script confusion

This Chrome extension includes content scripts that execute JavaScript on specified websites.

What are Chrome extension content scripts?

Chrome: Content Script

This Chrome extension requests host permissions to access specific websites or domains.

What are Chrome extension host permissions?

Chrome: Host Permission

This Chrome extension requests permissions to access browser APIs, user data, or system features.

What are Chrome extension permissions?

Chrome: Permission

This Chrome extension requests wildcard host permissions that grant broad access to websites.

What are Chrome extension wildcard host permissions?

Chrome: Wildcard Host Permission

Semantic versions published out of chronological order.

What is a chronological version anomaly?

Chronological version anomaly

Project maintainer's SSH key has been compromised.

What is a compromised SSH key?

Compromised SSH key

What do I need to know about license files?

Copyleft License

Contains a Critical Common Vulnerability and Exposure (CVE).

What is a critical CVE?

Title

Critical CVE

Contains a high severity Common Vulnerability and Exposure (CVE).

What is a CVE?

High CVE

Uses debug, reflection and dynamic code execution features.

What is debug access?

Debug access

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

What is a deprecated package?

Deprecated

Contains a known deprecated SPDX license exception.

What is a deprecated SPDX exception?

Deprecated SPDX exception

License is deprecated which may have legal implications regarding the package's use.

What is a deprecated license?

Deprecated license

Package name is similar to other popular packages and may not be the package you want.

What is a typosquat?

Possible typosquat attack

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

What is dynamic require?

Dynamic require

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

What is an empty package?

Empty package

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

What is environment variable access?

Environment variable access

Something was found which is explicitly marked as unlicensed.

Explicitly Unlicensed Item

Package optionally loads a dependency which is not specified within any of the package.json dependency fields. It may inadvertently be importing dependencies specified by other packages.

What are extraneous dependencies?

Name

Extraneous dependency

Contains a dependency which resolves to a file. This can obfuscate analysis and serves no useful purpose.

What are file dependencies?

File dependency

Accesses the file system, and could potentially read sensitive data.

What is filesystem access?

Filesystem access

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

What are wildcard dependencies?

Wildcard dependency

Generic ad-hoc alert, uploaded by user or produced by system diagnostics

Alert title

Generic alert

An input argument to this GitHub Action is being exported as an environment variable. If a user of this action passes untrusted input, it could be used in an insecure manner by subsequent workflow steps.

What are GitHub Actions taint flows?

GitHub Actions: Input argument exported as environment variable

An input argument to this GitHub Action is being passed back as an output. If a user of this action passes untrusted input, it could be used in an insecure manner by consuming workflows.

GitHub Actions: Input argument passed back as output

An input argument to this GitHub Action flows into a dangerous sink (such as shell command execution). This could allow a malicious user to inject commands or exploit the action.

GitHub Actions: Input argument flows to dangerous sink

A GitHub context variable (such as issue title, PR description, or comment body) is being exported as an environment variable. These context values are user-controlled and could be exploited by subsequent workflow steps.

GitHub Actions: GitHub context variable exported as environment variable

A GitHub context variable (such as issue title, PR description, or comment body) is being passed back as an output. These context values are user-controlled and could be exploited by consuming workflows.

GitHub Actions: GitHub context variable passed back as output

Name	Default	Description	Allowed Values
`clientID`		Required. Client ID from the Developer Portal
`redirectURI`		Required. Redirect URI for your Developer Portal app
`state`		Optional. Value will be passed to your redirect URI as a query parameter
`size`	`medium`	Size of the button	`large` `medium` `small`
`borders`	`default`	Button border style	`default` `rounded` `square`
`color`	`white`	Button color theme	`slate` `white` `indigo` `pink`
`iconOnly`	`false`	Show a compact, icon-only version of the button	Attribute presence indicates `true`

@teamwork/login-button

public-components

Usage

Parameters

Keywords

Related posts

@teamwork/login-button

public-components

Login with Teamwork button

Usage

Parameters

Keywords

Related posts

Introducing Reports: An Extensible Reporting Framework for Socket Data

Socket for Jira Is Now Available