Commit 6852ff0c authored by Andre Blanke's avatar Andre Blanke
Browse files

Show shortened URL on the frontend

parent a132ec0c
......@@ -3,8 +3,10 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<shortener-form></shortener-form>
<div id="container" style="display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%;">
<h3>upbshrt.xyz</h3>
<shortener-form></shortener-form>
</div>
`,
})
export class AppComponent {
}
export class AppComponent {}
import { Component } from "@angular/core";
import {HttpClient, HttpHeaders, HttpParams} from "@angular/common/http";
class ShortenerFormModel {
url: string = ""
}
@Component({
selector: 'shortener-form',
template: `
<form id="shortener-form" (ngSubmit)="onSubmit()" method="post">
<input name="url" type="text" placeholder="Enter a long URL" [(ngModel)]="model.url">
<form id="shortener-form" (ngSubmit)="submit()" method="post">
<input id="long-url-input" name="url" type="text" placeholder="Enter a long URL" [(ngModel)]="model.url">
<button type="submit">Shorten URL</button>
</form>
<div id="shortener-form-output">
<label id="short-url-label" for="short-url">Your short URL:</label>
<input id="short-url-output" name="short-url" (click)="copyContent($event)" readonly/>
</div>
`
})
export class ShortenerFormComponent {
model: any = {}
model = new ShortenerFormModel()
constructor(private http: HttpClient) {
}
onSubmit(): void {
const headers = new HttpHeaders().set("Content-Type", "application/x-www-form-urlencoded")
let body = new HttpParams().append("url", encodeURIComponent(this.model.url));
submit(): void {
const headers =
new HttpHeaders()
.set("Content-Type", "application/x-www-form-urlencoded")
const body =
new HttpParams()
.append("url", encodeURIComponent(this.model.url));
this.http
.post("http://upbshrt.xyz/", body, { headers: headers })
.subscribe(data => console.log(data), error => console.log(error));
.post("http://upbshrt.xyz/", body, { headers: headers, responseType: "text" })
.subscribe(
data => {
document.getElementById("shortener-form-output")!
.style.visibility = "visible";
(document.getElementById("short-url-output") as HTMLInputElement)
.value = decodeURIComponent(data);
},
error => console.log(error));
}
copyContent(event: MouseEvent): void {
let input = event.target as HTMLInputElement;
input.select();
document.execCommand("copy");
}
}
#shortener-form {
display: flex;
justify-content: center;
/*
* We use "height: 90%;" instead of "height: 100%;" for body and html because
* we otherwise get a vertical scrollbar we don't want.
*/
body {
font-family: sans-serif;
height: 90%;
}
#shortener-form > .separator {
html {
height: 90%;
}
#container {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.strike {
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
#shortener-form {
display: flex;
justify-content: center;
}
.strike > span {
position: relative;
display: inline-block;
#long-url-input {
margin-right: 10px;
}
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 1px;
background: red;
#shortener-form-output {
margin-top: 10px;
visibility: hidden;
}
.strike > span:before {
right: 100%;
margin-right: 15px;
#short-url-label {
margin-right: 5px;
}
.strike > span:after {
left: 100%;
margin-left: 15px;
#short-url-output {
text-align: center;
}
......@@ -9,6 +9,7 @@ import javax.validation.constraints.Pattern
import org.springframework.beans.factory.annotation.Autowired
import org.springframework.http.HttpStatus
import org.springframework.http.MediaType
import org.springframework.http.ResponseEntity
import org.springframework.validation.annotation.Validated
import org.springframework.web.bind.annotation.CrossOrigin
......@@ -46,7 +47,9 @@ class UrlShorteningController @Autowired constructor(private val repository: Url
* @exception ResponseStatusException If the URI scheme of the provided [url] is not supported by the URL shortener,
* a provided [id] is malformed, or a mapped URL already exists for the supplied [id].
*/
@PostMapping("/")
@PostMapping("/",
consumes = [MediaType.APPLICATION_FORM_URLENCODED_VALUE],
produces = [MediaType.TEXT_PLAIN_VALUE])
@CrossOrigin(origins = ["*"], allowedHeaders = ["*"])
fun shortenUrl(@RequestParam url: String,
@Pattern(regexp = "[a-zA-Z0-9]+")
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment